Heading
Heading renders a real h1–h6 element with Manti's title treatment: tighter
leading than body copy, semibold weight, and optical tracking that pulls in as
the type grows.
Design tokens are mandatory
Every visual value comes from the token contract, so a consumer can restyle a component without forking it.
Level
level picks both the element and a sensible default size, so plain markup
already reads correctly.
Level 1 heading
Level 2 heading
Level 3 heading
Level 4 heading
Level 5 heading
Level 6 heading
Level and size are independent
Document outline and visual hierarchy are different problems. size overrides
the stop level implies, which means a section can stay an h2 for screen
readers while laying out small, and a hero can be an h1 at display size —
without anyone reaching for a styled <div>.
h1 at 4xl
h2 at sm — an eyebrow that still belongs to the outline
Both are real heading elements; only the visual stop changed.
If you genuinely need the look without the rank, as overrides the element and
leaves the styling in place.
Weight
Weight rides the size prop after a slash, the same way Text
does. Leaving it off keeps the stylesheet's default, which is bold at level={1}
and semibold everywhere else:
<Heading level={1} /> // bold, from the level
<Heading level={1} size="4xl/regular" /> // same stop, weight overriddenEmphasis and variant
Heading shares Text's two color axes: emphasis for the
neutral ladder and variant for semantic color.
Default title
Muted title
Danger title
API
Heading accepts every native attribute of the rendered heading element in addition to the props below.
| Prop | Type | Default | Description |
|---|---|---|---|
level | 1 | 2 | 3 | 4 | 5 | 6 | 2 | Semantic heading rank. Picks the h1-h6 element and the default size. |
size | TextScale | `${TextScale}/${TextWeight}` | — | Type-scale stop, optionally with a weight: "4xl" or "4xl/regular". Defaults to the stop implied by level, so rank and visual size stay independent. |
as | ElementType | — | Override the rendered element, keeping the heading treatment. |
emphasis | 'default' | 'muted' | 'subtle' | 'default' | Neutral emphasis ladder. |
variant | MantiVariant | — | Semantic color. Wins over emphasis when both are set. |
align | 'start' | 'center' | 'end' | — | Text alignment. |
truncate | boolean | false | Clamp to a single line with an ellipsis. |
Styling
Anatomy
| Part | Selector | Description |
|---|---|---|
root | [data-scope="heading"][data-part="root"] | The rendered heading element. |
Tokens
| Token | Controls |
|---|---|
--manti-heading-font-size | font size |
--manti-heading-line-height | line height |
--manti-heading-weight | weight |
--manti-heading-tracking | tracking |
Last updated