Copy this complete component into a page file. Edit and run it in the Playground.
Loading editor…
Semantic headings with an independent visual 100–500 scale. The heading level preserves document outline while size controls its presentation.
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | required | Heading content. |
level | `1 | 2 | 3 |
size | `100 | 200 | 300 |
weight | `300 | 400 | 500 |
padding | `"snug" | "compact" | "comfortable" |
className | string | — | Optional class name. |
size instead of skipping a document-outline level.