Centered With Search
A docs hero with centered copy above a command bar search mockup with suggestion rows.
A docs hero with centered copy above a command bar search mockup with suggestion rows.
Search blocks by description or jump to a page.
The source for every Marketing block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Centered With Search is a documentation product hero. A large centered headline sits above a short lede, and below that a full width command bar mockup takes center stage. The command bar has a search row at the top with a search icon, placeholder text, and a keyboard shortcut badge. Beneath it a short list of suggestion rows renders, each row showing a small icon badge, a result title, and a category label. The first suggestion row carries a subtle highlight to mimic an active selection state.
There are no buttons in this block. The search bar is the sole call to action. The headline, lede, placeholder text, and every suggestion row are independent copy, so you can swap them to match your docs structure. The suggestion list can grow or shrink to any count without affecting the layout.
Reach for this block when the search experience itself is the product promise. It works well as the opening fold of a developer docs site, an API reference portal, or a knowledge base, anywhere that fast lookup is the primary reason a visitor lands on the page. Compared to a hero with explicit CTAs, this layout signals depth and self service rather than a conversion funnel, which suits a creative agency or studio presenting its work index or resource library.
A natural flow around it on a Marketing Pro page:
Before
After
The command bar mockup drives almost every decision in this block. A few ways to make it your own:
Tip: keep the suggestion list to three or four rows so the command bar stays compact and the hero does not push below the fold on short screens.