Search blocks by description or jump to a page.
A hero pairing a headline and CTA with an animated terminal window. Speaks to developers and shows install or usage commands on a tool landing page.
With Terminal is a hero that opens with a small Quick Start badge above the headline, a short description, and two CTA buttons, then anchors the section with a large animated terminal window. The terminal card has a macOS style traffic light header row with a Copy button, and its black body types out a sequence of three shell commands one character at a time, pausing after each command to show its output before moving to the next. Below the terminal, three feature cards sit in a three column grid, each with a tinted icon tile, a short heading, and a one line description.
All three sections are independent. You can rewrite the headline and subtext, swap in your own commands and output lines, or reduce the sequence to a single entry. The feature cards are standalone too, so you can change their icons, headings, and descriptions or remove the grid entirely without affecting the terminal animation.
This layout works well when your primary audience is technical and the fastest path to credibility is showing an install command. For a healthcare scheduling platform, it fits a developer landing page where you want to show how quickly the API client or SDK gets installed and running. It outperforms a plain centered hero when a CLI command is core to the onboarding story, and it outperforms a static code preview because the typing animation makes the process feel live.
A natural flow around it on a Marketing (Legacy) page:
Before
After
Each of the three areas carries its own content:
Tip: keep each command short enough to finish typing in under three seconds so the animation stays lively between steps.