Stat strip

The numbers use the Stat style in dark brand blue, on the blue tint, with a 2px rule above. On desktop the stats sit in one row, on tablet in a 2 by 2 grid, and on mobile one per row with the number on the left. The values below are placeholders, not real results.

Impact

Example label for the first stat: 00
Example label for the second stat: 00%
Example label for the third stat: 0

Source and time window go here.

View HTML

<section class="cs-stats" aria-labelledby="impact-demo-h">
  <div class="cs-stats__inner">
    <h3 class="cs-stats__heading type-label" id="impact-demo-h">Impact</h3>
    <dl class="cs-stats__list">
      <div class="cs-stat">
        <dt class="cs-stat__label type-body">Example label for the first stat</dt>
        <dd class="cs-stat__number type-stat">00</dd>
      </div>
      <div class="cs-stat">
        <dt class="cs-stat__label type-body">Example label for the second stat</dt>
        <dd class="cs-stat__number type-stat">00%</dd>
      </div>
      <div class="cs-stat">
        <dt class="cs-stat__label type-body">Example label for the third stat</dt>
        <dd class="cs-stat__number type-stat">0</dd>
      </div>
    </dl>
    <p class="cs-stats__footnote type-fine-print">Source and time window go here.</p>
  </div>
</section>

Stat strip with placeholder values

Using the stat strip

Do

Give every number a source and a stated time window in the footnote.
Keep numbers short enough to fit: a few digits and a symbol.
Use a description list (<dl>) so a screen reader hears each label with its number.

Don't

Use red for numbers. Red reads as "negative", even when a number going down is good.
Show a number you cannot source.
Use more than four stats.

Up next

Quote

A pull quote with the attribution in the left columns.

Continue to Quote

Back to Theme controls