Heading
Heading levels 1–6 with optional display sizes for visual hierarchy.
Example
Display Large
Heading 2
Heading 3
Heading 4
Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
level | 1 | 2 | 3 | 4 | 5 | 6 | — | Required | Semantic heading level (h1–h6) |
as | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | — | No | Override the rendered HTML tag |
display | boolean | 'sm' | 'md' | 'lg' | — | No | Display font size override |
Accessibility
- Renders correct <h1>–<h6> element for document outline
- Visual size can be decoupled from semantic level via as prop
Related Tokens
--heading-font-weight--heading-letter-spacing--display-font-family