Content header pattern
Standard layout for searchable, filterable content indexes with count display, search, view toggle, sort, and filter controls.
Layout
The content header uses a responsive flex layout with the count header on the left and controls on the right.
24 items
Elements
| Style name | Use cases | Class / Component | Live pages |
|---|---|---|---|
| Count header | Dynamic count display (e.g., "12 roles" or "24 articles") that updates with filters. | text-2xl font-normal md:text-3xl | |
| Search input | Text input with search icon for filtering content by keywords. | rounded-xl border-border/60 bg-background/80 | |
| View toggle | List/grid view switcher with icon buttons. | rounded-xl border-border/60 bg-background/80 | |
| Sort dropdown | Button with dropdown for sorting options (newest, oldest, A-Z, Z-A). | Button variant="outline" size="s" | |
| Filter button | Opens slide-out filter panel. Shows count badge when filters are active, or SlidersHorizontal icon when inactive. | Button variant="outline" size="s" | |
| Control order | Search → View Toggle → Sort → Filter | ||