Components · App chrome
Page header
The masthead of a page: an optional breadcrumb trail, a 28px title with a muted description, and the page-level actions pushed to the right. It sets the scene before the content and anchors the primary action.
Preview
Projects
Manage your team's projects and deployments.
Build with the skill
No package to install — hand this to your AI to generate or migrate the component in your stack.
Apply the Zetta "Page header" component to this project using the zetta-design-md skill.
WHEN TO USE
- Migrating or fixing existing code (the common case): audit the current implementation against the `page-header` spec (variants: title, description, actions) and CORRECT every deviation — replace off-spec values, don't only add new ones.
- New component: build it to the `page-header` spec in this project's stack.
AUDIT & FIX (when the component already exists)
Compare it to the skill's spec and fix, don't just append: hardcoded colors/hex, off-scale radius, wrong fonts, dark/navy fills, shadows used in place of borders (or missing borders), brand lime used as a CTA or interaction (must be primary indigo), and any missing or wrong hover / focus / active / disabled / invalid state or missing 2px focus ring. Replace each with the correct Zetta token.
ALWAYS
- Pull the authoritative spec and tokens from the skill — never guess or hardcode values.
- Use this project's own component conventions and framework idioms.
- Honor the Zetta guardrails (brand = identity only, primary = interaction, shadows for overlays) and verify in Light, Dark, and Accessibility.Anatomy & rules
← breadcrumbs ← page-header-breadcrumbs
Projects / Settings
Page Title [Action] ← page-header-row
Optional description text ← page-header-description
Page Header is a layout component. No interactive states on the header itself.
| State | Visual |
|---|---|
| Default | Title, optional breadcrumb, optional actions |
| With back navigation | Back link/button at leading position |
When to use
- Top of every primary page in the product.
When not to use
- Inside cards, drawers, or modals — those have their own header patterns (
dialog-header,cardheader slot). - On dashboard landing pages with a custom hero section.
Do
- Always render the title as
<h1>— one<h1>per page. - Keep the action slot to 1–2 buttons maximum. Use an overflow menu for more.
- Include breadcrumbs when the page is more than 1 level deep.
Don't
- Don't put filters or search in the page header — those belong in the content area.
- Don't nest a Page Header inside another Page Header.
- Title: page noun, not a verb. "User settings" not "Configure user settings".
- Breadcrumb: show parent context only, not full path if more than 3 levels.
- Action labels: verb + noun where needed — "Add member", "Export report".
- Max 2 primary actions in the action slot. More → use a dropdown.
Keyboard
Page Header has no keyboard behavior of its own. Interactive elements within (action buttons, breadcrumb links) follow their own keyboard specs.
Accessibility
- Title must be
<h1>— assistive technologies use it as the page landmark. - Breadcrumbs must use a
<nav aria-label="Breadcrumb">wrapper. - Action buttons must each have a visible label or
aria-label.
Spec
Values and token references resolved straight from the Zetta spec.
page-header
- display
- flex
- flexDirection
- column
- gap
- {spacing.xs}
- paddingBottom
- {spacing.lg}
page-header-breadcrumbs
- marginBottom
- {spacing.xs}
page-header-title
- fontFamily
- Inter
- fontSize
- 28px
- fontWeight
- 700
- lineHeight
- 1.25
- letterSpacing
- -0.01em
- textColor
- {colors.ink}
page-header-description
- fontFamily
- Geist
- fontSize
- 14px
- fontWeight
- 400
- lineHeight
- 1.60
- textColor
- {colors.muted}
- marginTop
- {spacing.xs}
page-header-actions
- display
- flex
- alignItems
- center
- gap
- {spacing.sm}
- marginLeft
- auto
page-header-row
- display
- flex
- alignItems
- flex-start
- justifyContent
- space-between
- gap
- {spacing.md}