Display
FigureBand
A row of counted facts, divided by hairlines and nothing else.
Examples
default
- Releases
- 12
- Median build
- 2m 14s
- down from 3m 40s
- Rollbacks
- 0
- Uptime
- 99.98%
- measured at the edge
Notes
A row of counted facts, divided by hairlines and nothing else.
A <dl>, because that is what this is: each cell is a term and its value, and a grid of <div>s tells a screen reader nothing about which number goes with which label.
Each divider width names the cells that do NOT open a row rather than adding a rule and taking it back — an undo at equal specificity resolves on Tailwind's own sort order, which is not something a layout should depend on. Drawn this way, no edge is ever painted past the last column.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| figuresrequired | Figure[] | — | |
| label | string | Names the band for assistive tech when it has no visible heading of its own. | |
| scale | 'lead' | 'sub' | 'lead' | How large the value is set. `lead` is for a band that is the point of its page — a stats headline, where the numbers ARE the content. `sub` is for a band that supports the page around it, and keeps the ladder honest: a supporting figure must not be set at the same size as the page's own subject. |
Also accepts everything in Omit<HTMLAttributes<HTMLDListElement>, 'children'>. Those are forwarded to the underlying element and are not listed row by row.
Accessibility
- A <dl>: each cell is a term and its value, which a grid of divs cannot express.