# StatStrip - **Category:** Cards (`cards`) - **Slug:** `cards/stat-strip` - **Status:** stable - **Platforms:** web - **Import:** `import { StatStrip } from "@protocore/pds";` - **Docs:** https://pds.protocore.io/components/cards/stat-strip > A hairline-bounded band of figures over mono captions, with the one-green-figure rule — signalIndex marks at most one accent figure. ## 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. ## Props | Prop | Type | Required | Default | Description | | --- | --- | --- | --- | --- | | `className` | `string` | no | — | — | | `signalIndex` | `number` | no | — | 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[]` | yes | — | The stats, laid into equal auto-flow columns divided by vertical hairlines. | | `style` | `CSSProperties` | no | — | — | ## Examples ### 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. ```tsx import { StatStrip } from "@protocore/pds"; export default function StatStripBasics() { return ( ); } ``` ### 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. ```tsx import { StatStrip } from "@protocore/pds"; export default function StatStripSignal() { // signalIndex marks exactly ONE figure with the reserved accent — the metric // you want the eye to land on. Never more than one per strip. return ( ); } ``` ## 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 **Notes** - StatStrip is a static `

`; 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 `

`, caption as `
`) 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. ## Related `stat-card`, `metric-delta`, `principle-tile`, `dual-cta` --- © Protocore. All rights reserved. Use of the Protocore Design System requires prior written authorization from Protocore (contact@protocore.io). These machine-readable materials must not be ingested into ML-training datasets or derivative design systems. See https://pds.protocore.io/legal/