Core / Typography
Heading
Semantic headings with a neutral visual scale.
Preview
A clear title
Section heading
Usage
<Heading level={1} variant="display">A clear title</Heading>Adopt to your project
Typography inherits your application’s font choices. Use semantic props for hierarchy, then use className for local spacing and visual adaptation without changing the component’s meaning.
Accessibility
Use Heading levels in document order. Use Label with htmlFor for form controls, and keep captions and quotes as supporting—not primary—content.
API reference
| Attribute | Details |
|---|---|
level | 1 | 2 | 3 | 4 | 5 | 6 — default: 2 |
variant | display | xl | lg | md | sm — default: lg |
children | ReactNode |
className | string |
id | string |