Heading
Section heading with semantic level decoupled from visual size
Category: display · WCAG 2.2-AA · typography, heading, title
Sizes
- sm
- md
- lg
- xl
- 2xl
Props
| Prop | Type | Default | Description |
|---|---|---|---|
level | 1 | 2 | 3 | 4 | 5 | 6 | 2 | Heading level (1–6) mapping to h1–h6. |
size | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | derived from level (1→2xl, 2→xl, 3→lg, 4→md, 5→sm, 6→sm) | Visual size of the component (e.g. 'sm', 'md', 'lg'). |
Design tokens
--cascivo-font-display--cascivo-font-semibold--cascivo-leading-tight--cascivo-tracking-tight--cascivo-color-text--cascivo-text-base--cascivo-text-lg--cascivo-text-xl--cascivo-text-2xl--cascivo-text-3xl
When to use
- Titling a page or section as part of the document outline
- Keeping the semantic heading level correct while choosing the visual size independently
When not to use
- Emphasizing inline or body text — use Text with a weight
- Long-form rendered content — let Prose style its own headings
How to build an accessible Heading in React →
Examples
Default
<Heading>Section title</Heading>Page title
<Heading level={1}>Page title</Heading>Decoupled size
Keep the document outline correct while controlling the visual scale
<Heading level={2} size="2xl">Visually large, semantically h2</Heading>