Heading
ProA typographic heading component for structuring page content hierarchically. Maps to HTML heading levels (h1–h6) while allowing visual size overrides. Ensures correct document outline regardless of visual presentation. Supports weight, colour, and alignment variations.
12 variants
Variants
| Variant | Description | When to use |
|---|---|---|
| H1 | Largest heading for page titles. | Use once per page for the main title. |
| H2 | Section heading for major content divisions. | Use for top-level sections within a page. |
| H3 | Subsection heading for grouping within an H2 section. | Use for subsections or card titles. |
| H4 | ||
| H5 | ||
| H6 |
Usage Guidelines
Do
Maintain a logical heading hierarchy — never skip levels.
Don't
Skip heading levels (e.g., H1 to H3) — it breaks screen reader navigation.
Do
Use the "as" prop to set semantic level and "size" for visual override.
Don't
Use headings for visual styling only — use text utilities instead.
Do
Use one H1 per page.
Don't
Use more than one H1 per page.
Code
Design Tokens
Accessibility
- Heading levels must follow a logical hierarchy — h1 > h2 > h3, no skipping.
- Screen readers use headings for page navigation — correct structure is essential.
- Use aria-level only when the visual heading does not match the semantic level.
- Ensure sufficient colour contrast — headings must meet 4.5:1 against background.