Layout

PageHeader

The top of a page: a kicker, a serif title with one italic accent word, a one-line subtitle and the page's actions on the right.

Examples

With actions

Backup operations

System Status

Runs, repository health and storage, as the worker reports them.

completed
Last run Oct 22, 14:02
<PageHeader
  kicker="Backup operations"
  title={<>System <em>Status</em></>}
  subtitle="Runs, repository health and storage, as the worker reports them."
  actions={<><StatusBadge status="completed" /><CardMeta>Last run Oct 22, 14:02</CardMeta><Button variant="outline">Refresh</Button></>}
/>

Guidelines

  • The kicker is uppercase in accent; the title is the 56px display style with at most one <em>; the subtitle stays under 560px.
  • Up to three actions: a status badge, a timestamp in CardMeta, one button.
  • No second heading level between the title and the first card; filters belong in the card they filter.

Props

PropTypeWhat it does
kickerReactNodeThe uppercase eyebrow.
titleReactNodeWrap one word in <em> for the italic accent.
titleAsElementTypeh1 by default.
subtitle, actionsReactNodeOne line of body-lg; up to three actions.