Headers & dividers
Page header
Section titled “Page header”Top of an app page: breadcrumb, title, description, actions, divider or tabs.
Variants: 3
| Property | Type / options |
|---|---|
| Title | text |
| Supporting text | text |
| Breadcrumb | boolean (on) |
| Show supporting | boolean (on) |
| Type | Simple · Actions · Tabs |
Do
- One page header per screen.
- Keep supporting text to one sentence.
- Use the Tabs variant for sub-views.
Don’t
- Don’t put more than two buttons in the actions.
- Don’t repeat the sidebar label as the breadcrumb.
- Don’t use inside cards — use Card header.
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 |