Center Aligned Search With Tags
A centered hero built around a search field with popular tags below it. Helps visitors find what they need fast on a directory or marketplace home.
A centered hero built around a search field with popular tags below it. Helps visitors find what they need fast on a directory or marketplace home.
Search blocks by description or jump to a page.
Center Aligned Search With Tags is a full-viewport hero built around a single search bar. A large heading sits at the top, a short supporting line sits beneath it, and then a bordered search panel with a text field and an icon button takes center stage. Two decorative SVG strokes float on either side of the panel at wider viewports, adding visual energy without adding weight. Below the panel, a row of outline tag buttons lets visitors jump straight to a category without typing.
The heading, subheading, search placeholder, and every tag button are independent pieces of copy you can rewrite freely. You can add or remove tag buttons and swap their icons to match your own taxonomy. The decorative SVGs are cosmetic and can be removed if your brand calls for a cleaner layout.
This layout works best when finding something is the primary action on the page. A logistics and delivery platform benefits especially here: a carrier search, a route lookup, or a parcel tracker all fit naturally behind a single prominent field. Unlike a split or form-heavy hero, this block keeps the interface minimal so the search bar is the only thing competing for attention. The tag row handles the case where a visitor does not know exactly what to type, nudging them toward a category instead.
A natural flow around it on a Marketing (Legacy) page:
Before
After
The default demo shows a content insights hub, but the frame suits any search-first experience. Three common fits:
Tip: keep the tag row to five or six items so the row fits on one line at tablet width and does not wrap into an awkward second row.