Primitives
Heading
A heading at one of ten steps. The level prop sets both the element and the default size, so the outline is never left to whoever remembered.
Level
Use level to set the element and, with it, a default size.
<h1>size=8 · 34pxOne color with two names will drift apart
<h2>size=7 · 28pxOne color with two names will drift apart
<h3>size=6 · 24pxOne color with two names will drift apart
<h4>size=5 · 22pxOne color with two names will drift apart
<h5>size=4 · 20pxOne color with two names will drift apart
<h6>size=3 · 18pxOne color with two names will drift apart
<Heading level={1} truncate>{SAMPLE}</Heading><Heading level={2} truncate>{SAMPLE}</Heading><Heading level={3} truncate>{SAMPLE}</Heading><Heading level={4} truncate>{SAMPLE}</Heading><Heading level={5} truncate>{SAMPLE}</Heading><Heading level={6} truncate>{SAMPLE}</Heading>level is required. A default would let three headings on a page silently produce three h1s: the screen looks right and the outline is wrong.Size
Use size to change the appearance without touching the outline.
<h2> · size=7defaultDefault size
<h2> · size=1overriddenSame outline, smaller on screen
<Heading level={2}>Default size</Heading>
{/* Still an h2 in the outline, only smaller on screen. */}<Heading level={2} size={1}>Same outline, smaller on screen</Heading>The ten steps
16px to 60px. Below 16 a heading stops being one; above 24 body copy is a heading that forgot to say so.
size={10}60/72Design system
size={9}40/48Design system
size={8}34/41Design system
size={7}28/34Design system
size={6}24/30Design system
size={5}22/28Design system
size={4}20/25Design system
size={3}18/23Design system
size={2}17/22Design system
size={1}16/21Design system
Props
| Prop | Type | Default | Notes |
|---|---|---|---|
level | 1 | 2 | 3 | 4 | 5 | 6 | — | Required. Sets the element and the default size. There is no safe default, so there is none. |
size | 1 – 10 | from level | Changes the appearance only. The outline stays whatever level said. |
weight | 'regular' | 'medium' | 'bold' | 'bold' | 400, 500, 700. |
color | strong | normal | assistive | inverse | link | success | warning | error | 'strong' | The same roles Text takes. |
align | 'left' | 'center' | 'right' | 'justify' | — | |
truncate | boolean | false |