# Stat strip
A row of stats in one frame, or none, that wraps to fewer columns as its space narrows.
A block: a ready-made arrangement of components, to copy into a project. Its own classes carry the `site-` prefix; rename it to your project's own. Status: experimental. Figma: the Figma file, https://www.figma.com/community/file/1688324308358870630. Built from: Stat, Status dot.
## Examples
### Usage
Three stats in one raised frame, with thin lines between them.
```html
- Waiting on you
- 4
- Pull requests to approve
- Deploys
- 12
- All passed
- Open issues
- 3
- Two due this week
```
```tsx
import { Stat } from './design-system/components/stat/stat.js';
```
### Four stats
Four across where there is room for them; with less, they wrap, and a row that is not full lets its stats grow.
```html
- Visitors
- 8,240
- Up 12% on last month
- Sign-ups
- 312
- From 4 campaigns
- Refunds
- 2
- Both under $20
- Uptime
- 98%
- Last 30 days
```
```tsx
import { Stat } from './design-system/components/stat/stat.js';
```
### Two by two
Room for two columns: the stats wrap into two rows, with a line between the rows.
```html
- Orders
- 46
- 9 still to ship
- Returns
- 1
- Waiting for the parcel
- Messages
- 7
- 3 without a reply
- Stock alerts
- 2
- Below 10 left
```
```tsx
import { Stat } from './design-system/components/stat/stat.js';
```
### Plain
No frame and no lines, for a card or a panel that already has an edge.
```html
- Revenue
- $48,200
- Up 8% on last quarter
- New customers
- 86
- 21 on a yearly plan
- Churn
- 1.4%
- Lowest this year
```
```tsx
import { Stat } from './design-system/components/stat/stat.js';
```
### Linked, with a dot
Each figure links to its list; the dot says in words that the first needs you.
```html
- Waiting on you
-
4
- Pull requests to approve
- Assigned to you
-
9
- 3 due this week
- Mentions
-
2
- Since yesterday
```
```tsx
import { Stat } from './design-system/components/stat/stat.js';
```
### On a phone
At a phone's width the strip is one column.
```html
- Waiting on you
- 4
- Pull requests to approve
- Deploys
- 12
- All passed
- Open issues
- 3
- Two due this week
```
```tsx
import { Stat } from './design-system/components/stat/stat.js';
```
## Purpose
Lines up a few key figures at the top of a dashboard or a section, such as what waits for a reader, what ran this week and how a service is doing. Each figure is a stat; the strip only arranges them.
## Anatomy
- The block, a row of stats that wraps.
- The framed look puts them in one raised frame with thin lines between the stats and between rows; the plain look has no frame and no lines, and keeps its rows apart.
- Each stat is the Stat component, at its small size, carrying the block's stat class beside its own.
## When to use
- For two to four figures a reader checks first, each with its name and a line of what it means.
- Framed at the top of a dashboard; plain inside a card or a panel that already has an edge.
## When not to use
- For one figure. Use a stat on its own.
- For figures a reader compares across many rows. Use a table.
## Behavior
Every stat is at least the small column width and shares what is left, so the strip shows four, three, two or one column by the room it is given, and one at a phone's width. A row that is not full lets its stats grow to fill it. The strip takes no focus; a linked stat is one Tab stop of its own.
## Accessibility
### What it does for you
- Each stat is a description list, so a screen reader hears its name, then its figure and what it means.
- A linked stat is one stop for the Tab key; a plain one takes no focus.
### What you must do
- Name the strip with `role="group"` and an `aria-label`, such as "This week", when a page has more than one.
- Say a dot's meaning in words through the stat's dot label.
### How to test
- With a screen reader, each stat reads its name, then its figure and what it means, and a dot by its words.
- With text at 200% and the page 320 pixels wide, the strip is one column.
### Keyboard
| Key | What it does |
|---|---|
| Tab | Moves focus to each linked stat in turn. |
| Enter | Follows the focused stat's link. |
## Usage rules
### Do
- Keep the figures short, and say what each means in its line.
- Use the same size for every stat in a strip.
### Don't
- Fill it with more figures than a reader takes in at a glance.
- Mix linked and plain stats without a reason a reader can see.
## Stylesheet
```css
/* site-stat-strip — Stat strip, a block: stats lined up in rows that wrap. Copy it into your project and rename
* site- to your project's own prefix. Each stat is the Stat component, given this block's stat class beside its
* own; the strip draws only the rows and the frame. Every stat fills its row and is at least the small column
* width, so the strip has one to four columns by the room it is given, and one at a phone's width. */
.site-stat-strip {
display: flex;
flex-wrap: wrap;
gap: var(--smbk-border-width-hairline);
}
/* Framed: one raised frame; the subtle border color shows through the hairline gaps between stats and rows. */
.site-stat-strip--look-framed {
overflow: hidden;
border-radius: var(--smbk-radius-container-md);
background: var(--smbk-color-border-subtle);
box-shadow: var(--smbk-elevation-raised);
}
/* Plain: no frame and no lines; the rows sit apart. */
.site-stat-strip--look-plain {
row-gap: var(--smbk-space-stack-lg);
}
.site-stat-strip__stat {
flex: 1 1 var(--smbk-size-column-min-sm);
min-width: min(100%, var(--smbk-size-column-min-sm));
}
/* ---- high contrast (forced colors) ---- */
/* The fill that draws the lines is dropped: the frame and each stat get an outline in the text color instead. */
@media (forced-colors: active) {
.site-stat-strip--look-framed {
outline: var(--smbk-border-width-hairline) solid CanvasText;
}
.site-stat-strip--look-framed .site-stat-strip__stat {
outline: var(--smbk-border-width-hairline) solid CanvasText;
}
}
```