Text and Heading

The type styles, from a display title to small text, and the List.

<div class="stack">
  <h2 class="heading">Shade borders</h2>
  <p class="text">Ferns, hostas and hellebores grow well under trees.</p>
</div>

Why it exists

Most of what people come to a page for is text, so type should be consistent and hard to get wrong. Each atom sets size, family, weight and line height together, because those only work as a set. Ten of them cover the whole range, so a page doesn’t drift into near-identical sizes.

The class sets the look, and the element sets the meaning. A screen reader user moves through a page by its heading levels, so the outline shouldn’t bend to get a size, and the size shouldn’t bend to fit the outline. An h2 can look like a .small-heading.

Atoms are fixed by default, because a Card’s title has no reason to change with the width of the window. Where type should grow or shrink, one container says so for everything inside it, so nobody sizes one element at a time. Body text also stops at a comfortable reading width on its own.

When to use

• For any text outside .prose: a text atom sets its size, family, weight and line height.
• Inside .prose: bare elements are styled already, so no class is needed.
• For a Form label: .label, which stays the same size in every mode but compact.

Rules

• Fixed by default. Fluid, cq and compact sizing come from the container.
• Choose the element for its meaning, and hold headings in order down the page.
• .text and .large-text stop at --body-measure (66ch). Set --body-measure: none on a container to lift it.
• Colour and weight come from utilities: .text-muted, .font-bold, .font-serif, .font-mono.

The Element and the Look Are Separate

<h3 class="display-title">Display Title</h3>
<h3 class="title">Page Title</h3>
<h3 class="heading">Section Heading</h3>
<h3 class="subheading">Sub-section Heading</h3>
<h3 class="small-heading">Card Heading</h3>
<p class="micro-heading text-muted">Category Eyebrow</p>

Sizing Modes

<!-- Fluid: headings and body grow with the viewport -->
<article class="font-sizing-fluid">
  <h3 class="title">Fluid Title</h3>
  <p class="text">Fluid body copy.</p>
</article>

<!-- Container: sized to the container's width -->
<div class="font-sizing-cq container-inline">
  <h3 class="heading">Container Heading</h3>
  <p class="text">Container body copy.</p>
</div>

<!-- Compact: one step down -->
<div class="font-sizing-compact">
  <h3 class="heading">Compact Heading</h3>
</div>

Lists

.list is a bulleted (ul) or numbered (ol) list outside prose, with prose’s indent and item spacing. The reset strips a bare list’s padding, which leaves its markers hanging outside the box. .list puts them back inside, so they sit within a Card’s or Dialog’s padding. Put a text atom on the list for its type; .list sets the geometry only.

<ul class="list small-text">
  <li><code class="font-mono">tokens/theme.json</code></li>
  <li><code class="font-mono">tokens/1-global.json</code>, the ramps</li>
</ul>

<ol class="list text">
  <li>Choose a curve
    <ol>
      <li>Nested lists take the same spacing and indent again</li>
    </ol>
  </li>
  <li>Publish</li>
</ol>

• Not for navigation, Menus or Card grids: those are components with role="list" and no markers. Inside .prose, a bare list is styled already; don’t add .list.

Do and Don’t

In Storybook

• Text and Heading variants and states

See also

• Prose: Styles bare HTML, such as CMS and Markdown output, so it reads like the rest of the library without classes.
• Field, Fieldset and Form: What goes around form controls, such as labels, hints, errors, groups of choices and the Form's actions.
• Card: A surface with named parts, such as a header, a body and a footer, for one thing a person can read, compare or act on.