/// Cards
StatStrip
A hairline-bounded band of figures over mono captions, with the one-green-figure rule — signalIndex marks at most one accent figure.
import { StatStrip } from "@protocore/pds";Basics
Pass stats as an array of { value, label }. The figures lay into equal auto-flow columns divided by vertical hairlines, each a large grotesque number over a mono uppercase caption.
The one-green-figure rule
signalIndex marks exactly one figure with the reserved --pds-accent (brand green). This is the single live number the eye should land on — never highlight two. An out-of-range index simply disables the accent.
Compact
The strip works down to two figures — a tight punctuation band between sections.
When to use it
Use StatStrip to *punctuate a page* with a band of headline metrics — the borderless "64 networks · $12B+ secured · 99.99% uptime" row. It's a marketing/summary device, not a dashboard control. For a *single* metric in a bordered tile with a delta and sparkline, use StatCard. The defining discipline here is the one-green-figure rule: --pds-accent is the brand signal reserved for the single most important number, so signalIndex highlights *at most one* figure per strip — green on two figures means green on none.
Usage
Do
- Highlight at most one figure with `signalIndex` — the single number you want remembered.
- Keep values short and punchy ("64", "$12B+", "99.99%") so the strip stays a scannable band.
- Use mono uppercase-friendly captions in `label` — one or two words each.
- Reach for StatStrip to close or break up a page, not to build a live dashboard.
Don't
- Don't set `signalIndex` on more than one figure's worth of meaning — the accent is singular by contract.
- Don't use the accent green to decorate; it must mark the one metric that matters.
- Don't pack long values or multi-line captions; the strip is for terse figures.
- Don't use StatStrip where each metric needs its own delta/trend — that's a row of StatCards.
Accessibility
- StatStrip is a static `<div>`; the accent on the `signalIndex` figure is emphasis, not information — the figure and its caption carry the meaning without relying on color.
- Each figure/caption pair is a plain block; if the strip represents a data set, consider wrapping it in a `<dl>` (figure as `<dd>`, caption as `<dt>`) via composition for richer semantics.
- Because the reserved accent is used sparingly (one figure), it retains its meaning as the system's single live-number signal across the page.
StatStrip props
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | — | |
signalIndex | number | — | Index of the single stat whose figure carries the reserved accent — the ONE green figure on the strip. At most one; out-of-range disables it. |
stats * | StatStripItem[] | — | The stats, laid into equal auto-flow columns divided by vertical hairlines. |
style | CSSProperties | — |