Stat

A <dl class="stats"> shows headline figures as tiles, such as a dashboard summary. Each <div> tile holds a <dt> label and a <dd> value.

The description list keeps each value paired with its label for a screen reader. Tiles share a row and wrap once each would be narrower than 160px.

Revenue

$48.2k

+12% from last month

Churn

3.1%

+0.4 points from last month

Active users

1,204

−2% from last month

<dl class="stats">
  <div>
    <dt>Revenue</dt>
    <dd>$48.2k</dd>
    <dd class="stat-change up">+12% from last month</dd>
  </div>
  <div>
    <dt>Active users</dt>
    <dd>1,204</dd>
  </div>
</dl>

Change

Add a <dd class="stat-change"> to compare the value with an earlier one. up and down add an arrow. negative marks bad news in the error color, whichever way the number moved. The arrow is decoration, so say the direction and the comparison in the text.

<dd class="stat-change up negative">+0.4 points from last month</dd>

Tokens

Override these on the .stats.