Figures
Large numbers with a line of context each, results, scale or specs, set in display type.
Figures
- Median days to close, after three months
- 3.5
- Transactions matched without a person
- 84%
- Entities on the largest account
- 41
- Currencies revalued nightly
- 32
<section class="mn-section mn-section-sm"><div class="mn-container"><dl class="mn-figures">
<div><dt>Median days to close, after three months</dt><dd>3.5</dd></div>
<div><dt>Transactions matched without a person</dt><dd>84%</dd></div>
<div><dt>Entities on the largest account</dt><dd>41</dd></div>
<div><dt>Currencies revalued nightly</dt><dd>32</dd></div>
</dl></div></section>Installation
Everything ships in one stylesheet. There is nothing to import per component.
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">Prefer to own the files? /r/figures.json is a registry item with this component's CSS and example markup, ready to copy into your project with any tool that reads the open registry-item format.
Class reference
| Class / attribute | Description |
|---|---|
| mn-figures | A <dl>: two columns, then --cols (default 4) on wide sections. |
| mn-figures > div | One figure: <dt> (what it is) and <dd> (the number). The number shows first. |
Accessibility
- A description list keeps each number with its meaning; the visual order is swapped with CSS only.
- Write units in the number (“3.5 days”) and give a source for claims.