Navigation
PageHeader
The top of a page: an optional eyebrow, a title in Figtree Bold, a one-sentence summary, and the page's actions on the right.
Preview
Props
| Prop | Type | Description |
|---|---|---|
align | 'start' | 'center' | center: the title and description centered, with the children (such as section tabs) centered underneath. |
titleRequired | React.ReactNode | |
eyebrow | React.ReactNode | |
description | React.ReactNode | |
size | 'XL' | 'L' | |
className | string | |
children | React.ReactNode |
Guidelines
The top of a page: an optional eyebrow, a title in Figtree Bold, a one-sentence summary, and the page's actions on the right.
Provide: title, eyebrow (date or breadcrumb), description, size (L for inner pages), and the actions as children.
- The description answers "how am I doing?" in one plain sentence.
- One accent button among the actions at most.
- Page titles are left aligned, lined up with the panels below; that is how people scan an app page.
align: centerexists for rare cases like an empty or welcome page. Section tabs sit directly under a left-aligned header (Profile, Settings).