Page Header
Top-of-page heading pattern with eyebrow, title, subtitle, and action area. Pure Tailwind composition — no library component needed. Four variants for list pages, detail pages with breadcrumb, tabbed pages, and form pages.
Live Preview
List page
Property management
Apartments
Master data of all managed apartments — addresses, occupancy, last inspection.
Detail page with breadcrumb
Building 12
Sunset Heights
18 apartments · 4 floors · occupied since 1987.
Tab page
Settings
Manage your account, billing, and team preferences.
Form page (h2 inside dialog)
Invite a new member
They'll receive an email with a link to join your workspace.
Features
- List-page header with eyebrow, title, subtitle, and a primary action on the right
- Detail-page header with a leading Breadcrumb above the title
- Tab-page header where the heading row sits above a Tab strip
- Form-page header with secondary actions (Cancel/Save) on the right
- Responsive layout — actions wrap below the heading on narrow viewports
- Heading-level prop pattern (h1 vs h2 vs h3) for nesting inside larger layouts
Code
List-page header
Detail-page header with Breadcrumb
Tab-page header — heading row + Tab strip
Form-page header — h2 for nested context
Best Practices
Pick the right heading level
Use <h1> when the header is the single
top-of-page heading. Drop to <h2> when you're inside a Dialog, Drawer, or
a route that already has an outer h1 — a page should have exactly one h1.
Actions on the right, wrapping below on narrow viewports
flex-col gap-4 sm:flex-row sm:justify-between gives you the responsive default: heading + actions stack on mobile, sit side-by-side from sm: upward. The actions container uses flex-wrap so two-button groups don't push the heading off-screen.
Eyebrow vs. Breadcrumb — pick one
Eyebrow ("Property management") is a category label; Breadcrumb is a navigation trail. Use eyebrow for context that doesn't navigate; use Breadcrumb when each ancestor is a real route. Stacking both above the title is visually noisy — pick the one that earns its weight.
Subtitle should describe the page, not repeat the title
"Apartments — list of apartments" is filler. A good subtitle either narrows the scope ("…managed by your team this quarter") or tells the user what they can do here. If you can't write a useful one, leave it out.
Why this is a recipe, not a component
The header is pure layout composition with zero state, zero variants, and zero behaviour. Wrapping it in a component would hide the markup from the consumer without saving any logic — and would lock the structure when projects routinely need small variations (different eyebrow position, a status pill next to the title, a custom action row). Copy the snippet that matches your page; adapt it in place.