A row of cards above a list (D67): either KPIs, the default, a few figures that say how the list is doing and what needs someone, or the lifecycle, every status a card, endings counted for the last 30 days, for pages where people move rows through their statuses. A card is a button that applies one filter, usually a status (Pending), or a flag or category slice people work on (Missing documents); it stays pressed in while it does, one at a time. Its figure is money where the list's key figure is, the count beside it. The insight card is information, not a filter. Status cards wear the status's mark (see Badge), so the shape says the status and colour only backs it up.
Status cards and the insight card
Pending is pressed: the list shows pending jobs only. Pressing it again, or All, clears it.
Anatomy
| Part | Class | Notes |
|---|---|---|
| Row | .slice-row | Equal status columns, the insight twice as wide (set --_slices to the number of status cards). Too narrow, and it scrolls sideways rather than wrapping. |
| Status card | button.slice[aria-pressed] | Label with its mark, a count top right, a figure below (Space Grotesk 20). data-empty greys the figure. |
| Insight card | .slice.slice-insight | A rate, the counts behind it, its parts as a split bar, then one more figure. The (?) explains it in the screen's own words (D27). |
| Body | card.css | The cards' quiet body: a top line, a darker bottom edge, two shadows tinted with the page. Status cards lift 1px on hover and sink when pressed; a pressed one stays in. |
Rules
- One status card per status a person filters by, in the list's lifecycle order, after All. Cards that aren't statuses become saved views (L-summary).
- At most one insight card, and only with a figure people act on. Its explanation uses the words on screen.
- Phones: the insight card leads, so the overview is in the first screen; the row scrolls sideways.