Components / Content patterns
Stats
Values and their explanations in a semantic description list.
- 2×
- An illustrative metric.
- 80%
- Another example value.
HTML
<dl class="stats is-inline"><div><dt>2×</dt><dd>An illustrative metric.</dd></div><div><dt>80%</dt><dd>Another example value.</dd></div></dl>Options
| Class or attribute | What it does |
|---|---|
is-inline | Place each value beside its description instead of above it. |
is-small | Use a smaller description size without shrinking values or surrounding paragraphs. |
--stats-description-size / --stats-description-opacity | Tune descriptions independently; they inherit local ink at 80% opacity by default. |
in is-dark | Descriptions use the section’s light muted ink instead of the light-page muted ink. |