GuideOptional

Headings & display

Headings from display down to h6.

Scale

The variant sets the look; pick the tag for the page outline.

<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

Overline, display and lead make a hero block.

<p wrTypography variant="overline" tone="primary">Pricing</p>
<h1 wrTypography variant="display">Built for every scale</h1>
<p wrTypography variant="lead" tone="muted">
  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