Display
FigureBand
A row of counted facts, divided by hairlines and nothing else.
Usage
import { FigureBand } from '@misoto22/design'Notes
A framed, responsive group of related facts with semantic term/value pairs.
Anatomy
| Element | Description |
|---|---|
| Query wrapperrequired | A plain <div> around the list, and it has to be: a container query resolves against an ANCESTOR container, never against the element declaring one. Its w-full is load-bearing too — contain: inline-size computes width without looking at the contents, so as a shrink-to-fit flex item it resolved to zero and the band rendered as two 0px columns. |
| Bandrequired | The <dl>: ruled top and bottom in --rule, two columns until the wrapper reaches @3xl and four after — a decision about how wide THIS band is, not how wide the window is. |
| Cellrequired | One <div> per figure. Each divider width names the cells that do NOT open a row rather than adding a rule and taking it back, so no edge is ever painted past the last column. |
| Labelrequired | The <dt>: the mono uppercase kicker over the value. |
| Valuerequired | The <dd>, set in the heading face at --fs-lead or --fs-sub depending on scale. |
| Note | A second <dd> under the same term — a trend, a qualifier, a second fact. |
Best practices
Do
- Give it two or four figures. The grid is two columns until @3xl and four after, so three leaves a hole in both arrangements and five leaves three holes once the band goes four across.
- Use scale="sub" for a band that supports the page rather than being it: --fs-lead is the band-heading step, so a supporting figure set at lead is competing with the page’s own subject.
- Key each figure by the fact it counts — id is required rather than optional, because it is the React key and an index puts the next render’s number under the previous label as soon as the list reorders.
Don’t
- Do not put a sentence in note. The value and the note are two <dd>s under one <dt>, so a screen reader reads them as two values of the same term: “Posts: 48, +6 this year” works, a clause does not.
- Do not set the column count with a viewport breakpoint through className. The band reads a container query, so a sm:grid-cols-4 written on it is wrong in a 390px sidebar of a 1440px window — which is the arrangement this replaced.
- figures={[]} renders null, so a band fed a filtered-empty array leaves no rules behind and no zero state either — if the absence is the news, the call site has to say so.
Examples
default
Four figures, which with two is one of the only counts that fits: the grid is two columns until the wrapper reaches @3xl and four after, so three leaves a hole in both arrangements and five leaves three. id is required rather than optional because it is the React key — an index would put the next render's number under the previous label as soon as the list reordered.
- Releases
- 12
- Median build
- 2m 14s
- down from 3m 40s
- Rollbacks
- 0
- Uptime
- 99.98%
- measured at the edge
a supporting band
The same band, one step down. scale="sub" is for figures that SUPPORT the page rather than being it — lead is the band-heading step, so a supporting band set there is competing with the heading above it for the same rung. Two figures fill the row at every width, which is why two and four are the counts worth reaching for.
Retrieval rewrite
Chunking moved from a fixed window to headings, and the citation panel started reading the same rows the answer did.
- Median latency
- 240ms
- from 610ms
- Answers with a citation
- 96%
- from 71%
a note is a second value
What belongs in note, and what does not. The value and the note are two dd elements under one dt, so a screen reader reads them as two values of the same term: "Posts: 48, plus 6 this year" works, and a clause explaining why does not. Keep it to a trend, a qualifier or a second fact — the sentence belongs in the prose around the band.
- Posts
- 48
- +6 this year
- Frames
- 1,204
- 38 rolls
- Projects
- 11
- 3 shipped
- Words
- 86k
- English and Chinese
in a narrow column
The same four figures in a 24rem column, still two across. The band reads a CONTAINER query, not the viewport, so it is deciding how wide this band is rather than how wide the window is — which is why a sm:grid-cols-4 written on it through className would be wrong in a sidebar of a 1440px page. Widen the column and the same markup goes four across on its own.
- Components
- 61
- Tokens
- 145
- Examples
- 147
- Peer deps
- 2
Accessibility
- A <dl>: each cell is a term and its value, which a grid of divs cannot express.