A row of stats in one frame, or none, that wraps to fewer columns as its space narrows.A block is copied, not installed: take an example's code and the stylesheet at the foot of the page, and rename the site- prefix to your project's own.
Examples
Usage
Three stats in one raised frame, with thin lines between them.
- Waiting on you
- 4
- Pull requests to approve
- Deploys
- 12
- All passed
- Open issues
- 3
- Two due this week
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.
- Visitors
- 8,240
- Up 12% on last month
- Sign-ups
- 312
- From 4 campaigns
- Refunds
- 2
- Both under $20
- Uptime
- 98%
- Last 30 days
Two by two
Room for two columns: the stats wrap into two rows, with a line between the rows.
- Orders
- 46
- 9 still to ship
- Returns
- 1
- Waiting for the parcel
- Messages
- 7
- 3 without a reply
- Stock alerts
- 2
- Below 10 left
Plain
No frame and no lines, for a card or a panel that already has an edge.
- Revenue
- $48,200
- Up 8% on last quarter
- New customers
- 86
- 21 on a yearly plan
- Churn
- 1.4%
- Lowest this year
Linked, with a dot
Each figure links to its list; the dot says in words that the first needs you.
On a phone
At a phone's width the strip is one column.
- Waiting on you
- 4
- Pull requests to approve
- Deploys
- 12
- All passed
- Open issues
- 3
- Two due this week
Built from
Guidelines
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.
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.
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.
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.
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 anaria-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. |
Source
The stat strip's own layout, its classes under the site- prefix. The components inside it are drawn by the design system's stylesheet.
Stylesheet
/* 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;
}
}