# Figures · MIAN

Large numbers with a line of context each, results, scale or specs, set in display type.

- Id: `figures` · Category: Sections · Needs mian.js: no · License: MIAN License (free to use)
- Docs: https://mian.ro/components/figures
- Use for: key numbers, statistics band, results, metrics, impact numbers, specs in numbers.
- On a page: proof · prominence medium · density low. Usually after: hero. Usually before: bento, testimonial.
- Alternatives: stat, testimonial.
- Avoid: Numbers without context or real source. Do not add metrics that are not in the brief.

Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate.

## Install

```html
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
```

## Classes

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

## Examples

### Figures

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

## Source

Already inside mian.css; you do not need it to use the component. To vendor or customise: https://mian.ro/api/v1/components/figures/source