Day list
A two-column label / value list. The chart fallback for phones — where a real bar chart wouldn't read, the day-list shows the same data as named rows. Owner uses it for weekday revenue, Gold for daily pours, Parent for ladder schedules.
Default
Label left, mono-numbered value right. Hairline dividers between rows. Wrap in a card.
Parts
| Property | Value | Notes |
|---|---|---|
| columns | 1fr auto | Label stretches, value sized to content |
| row padding | 8 px top / bottom | — |
| divider | 1 px --border-subtle | Bottom of every row except the last |
| label | 500 13 / 1 sans | --text-body |
| value | 600 13 / 1 mono, tabular-nums | Mono so the right column rights-aligns cleanly |
| delta colours | --tone-success / --tone-danger | Inherited via .up / .dn modifiers |
Do & don't
Use it when a real chart would be illegible at phone width. 7 weekday rows are easy to read; a 7-bar chart at 320 px is not.
Use it on desktop. Past 720 px viewport, swap in a proper chart with the same data.
Right-align mono values. The eye scans the column for the largest / smallest number; that only works if the digits stack.
Mix value formats. If one row is currency, every row is currency. Use a sub-card for a different unit.
Accessibility
- If the block reads as data, wrap the rows in
<dl>+<dt>/<dd>instead of plain divs. The grid layout still works, and screen readers get a definition list. - Delta tone is coded by colour. Pair with an icon or text suffix ("up 12%") so colour-blind operators can still read the trend.
- Tabular-nums is mandatory — proportional digits make right-aligned columns jitter and break the chart-fallback purpose.