Layout
Page header
The title area of a page.
Anatomy
No interactive example yet. The anatomy for this component lives in the Figma file; the tables below describe it.
Anatomy
Page header anatomy| # | Part | Description | Presence |
|---|
| 1 | Breadcrumb | Optional | Optional |
|---|
| 2 | Title | The page's h1 | Required |
|---|
| 3 | Description | Lead paragraph | Optional |
|---|
| 4 | Actions | Primary and secondary | Optional |
|---|
Specifications
Interaction
Keyboard| Key | Result |
|---|
| Tab | Breadcrumb, then actions |
|---|
Pointer and touch| Trigger | Response |
|---|
| None | Static |
|---|
Accessibility
role · header / h1
1.3.1Info and Relationships2.4.6Headings and Labels
Requirements| Requirement | How Rig meets it |
|---|
| One h1 | Each page has exactly one h1 |
|---|
| Landmark | Place it inside <main> or as the page <header> |
|---|
| Order | Title first in reading order even if actions sit visually on the right |
|---|
Usage
Do and don’t| Do | Don’t |
|---|
| ✓Write titles that match the browser tab | ✕Do not skip heading levels below it |