# Stat

> Key figures in tiles, each with a label, a value and an optional change.

## Anatomy

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`.

| Token | Default |
| --- | --- |
| `--md-comp-stat-container-color` | `--md-sys-color-surface-container-low` |
| `--md-comp-stat-shape` | 16px |
| `--md-comp-stat-min-width` | 160px |