Headers & dividers
Top of an app page: breadcrumb, title, description, actions, divider or tabs.
In Figma
Section titled “In Figma”From guidelines/components/headers-dividers.md
Properties, variants and anatomy of the Figma components.
Page header
Section titled “Page header”Variants: 3
| Property | Type / options |
|---|---|
| Title | text |
| Supporting text | text |
| Breadcrumb | boolean (on) |
| Show supporting | boolean (on) |
| Type | Simple · Actions · Tabs |
Section header
Section titled “Section header”Heading for a section inside a page.
Variants: 2
| Property | Type / options |
|---|---|
| Title | text |
| Supporting text | text |
| Type | Default · Actions |
Divider
Section titled “Divider”Horizontal rule, optionally with text or a button.
Variants: 3
| Property | Type / options |
|---|---|
| Type | Line · Text · Button |
Page header
Section titled “Page header”Do
- Use one page header per screen.
- Keep supporting text to one sentence.
- Use the Tabs variant for sub-views.
Forbidden
- Never put more than two buttons in the actions.
- Never repeat the sidebar label as the breadcrumb.
- Never use a page header inside a card — use Card header.