Directive

Headings & display

The full heading ladder — display down to h6 — plus the oversized display variant for marketing hero rows.

Scale

Eight semantic sizes covering hero displays through compact h6 section headers. Tokens come from --wr-text-* and --wr-leading-* so a theme override re-tunes the whole ladder.

<h1 wrTypography variant="display">Display</h1>
<h1 wrTypography variant="h1">Heading 1</h1>
<h2 wrTypography variant="h2">Heading 2</h2>
<h3 wrTypography variant="h3">Heading 3</h3>
<h4 wrTypography variant="h4">Heading 4</h4>
<h5 wrTypography variant="h5">Heading 5</h5>
<h6 wrTypography variant="h6">Heading 6</h6>

Display

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Marketing pair

Common combination: overline tag → display headline → lead subhead. The overline picks up a tone for emphasis.

<p wrTypography variant="overline" tone="primary">Pricing</p>
<h1 wrTypography variant="display">Built for every scale</h1>
<p wrTypography variant="lead" tone="medium">
  Start on the free tier and grow into a self-hosted seat the moment you outgrow it.
</p>

Pricing

Built for every scale

Start on the free tier and grow into a self-hosted seat the moment you outgrow it.

See also