With Search Filters
A page title with a search field and filter controls sitting below it. Use it on data heavy screens so users narrow long tables and lists fast.
A page title with a search field and filter controls sitting below it. Use it on data heavy screens so users narrow long tables and lists fast.
Search blocks by description or jump to a page.
With Search Filters is a centered page heading with an integrated search bar beneath it. A large bold title sits above a short description line, both centered on screen. Below that, a contained card holds a four column row: a keyword input with a search icon, a Location dropdown, a Job Type dropdown, and a Search button that spans the full width of its column on small screens and sits flush at the end on wider ones.
The title, description, and placeholder text are all independent copy. The two dropdowns carry their own option lists, so you can replace Location and Job Type with any pair of filters that suit your data. The search button label is also free to change, and the entire filter card can be removed if only the heading and description are needed.
Reach for this block at the top of a listing page where visitors need to narrow results before they scroll. On a real estate marketplace it works well as the entry point to a property search, letting buyers filter by area and listing type in one glance. It is a stronger choice than a plain page heading when the volume of records is large enough that showing everything unfiltered would frustrate users.
A natural flow around it on an Application page:
Before
After
The demo shows a job search, but the frame fits any browse scenario where users filter a large catalogue before viewing results.
Tip: keep the filter row to two or three controls so the card stays scannable on mobile without wrapping into a tall stack.