Stats

Headline data points — large numbers with a heading above and a label below.

A row of headline data points — a large default-colour number with a secondary-colour explanatory label below. Each cell has a thick top border, no bottom border, and bottom padding so rows breathe when the grid wraps.

Named "stats" rather than "figures" to avoid confusion with the HTML <figure> element.

Default

<ul class="stats">
  <li class="stats--item">
    <p class="stats--value">619</p>
    <p class="stats--label">Views in last 7 days</p>
  </li>
  <li class="stats--item">
    <p class="stats--value">579</p>
    <p class="stats--label">Visits in last 7 days</p>
  </li>
  <li class="stats--item">
    <p class="stats--value">1,740</p>
    <p class="stats--label">Views in last 30 days</p>
  </li>
  <li class="stats--item">
    <p class="stats--value">1,550</p>
    <p class="stats--label">Visits in last 30 days</p>
  </li>
</ul>