Components

Heading

Sets page and section headings; the document level is separate from the visual size.

When to use

Heading is for page and section titles. Screen reader users move between headings to learn the structure of the page.

For large text: Do not use Heading only to make text look big; it adds a wrong heading to the document structure. Use Text for body copy.
For labels: Use Text or the matching component for form field labels and card titles outside the page structure.
To skip levels: Do not put h4 after h2.

Heading has one part: the <h1>-<h6> element chosen by level.

Root: a semibold type style, the color-text-default colour, and balanced line breaks with text-balance.

level is required; leaving it out fails type checking.
When size is not given it comes from the level: 1 xl (32 px), 2 lg (24 px), 3 md (20 px), 4-6 sm (16 px).
size changes the visual only; the level and document structure stay with level.
A heading wraps and is never truncated.
Margin is zero (m-0); the surrounding Stack sets the spacing.

Doh3 after h2: the structure descends without skipping.

Don'th4 after h2: a level is skipped.

If an h3 should look bigger, do not lower level; set size.

A heading tells the content below it at a glance; write it short and in sentence case.
Keep one h1 per page.
Make headings at the same level different from each other.