Stat card
One number with its name on it, so staff can see the size of something before opening it.
The default card
A label, a number, and at most one supporting line. No accent bar: the bar is emphasis, and a row where every card is emphasised has emphasised nothing. This is the card most screens want.
The grid is .sr-stat-cards, shipped with the component so it is written once rather
than per screen.
Referrals
240
This month
Total casenotes
8
In all sites
Discharges
112
+10% on last month
<div class="sr-stat-cards">
<div class="sr-stat-card">
<p class="sr-stat-card__label">Referrals</p>
<p class="sr-stat-card__value">240</p>
<p class="sr-stat-card__support">
<span class="sr-stat-card__delta sr-stat-card__delta--down">-5%</span> on last month
</p>
<span class="sr-stat-card__icon" aria-hidden="true"><!-- icon --></span>
</div>
</div>
<!-- Add sr-stat-card--accent-primary for the left bar.
Add sr-stat-card--value-first or sr-stat-card--inline to change the layout. -->The accent bar, when one card leads
Add the bar to the card the screen is about — the queue the user is here to clear, the figure the meeting is called over. One per row. Beside it, plain cards read as context rather than as competition.
Awaiting validation
18
Your queue
Total casenotes
8
In all sites
Discharges
112
This month
<div class="sr-stat-cards">
<div class="sr-stat-card">
<p class="sr-stat-card__label">Referrals</p>
<p class="sr-stat-card__value">240</p>
<p class="sr-stat-card__support">
<span class="sr-stat-card__delta sr-stat-card__delta--down">-5%</span> on last month
</p>
<span class="sr-stat-card__icon" aria-hidden="true"><!-- icon --></span>
</div>
</div>
<!-- Add sr-stat-card--accent-primary for the left bar.
Add sr-stat-card--value-first or sr-stat-card--inline to change the layout. -->Three layouts
Stacked is the default: the label names the number before you read it. Value first leads with the number, for a row scanned rather than read. Below, the same card in each. The icon holds its position: it belongs to the card, not to whichever line happens to come first, so a row mixing the two still has its icons on one line.
Referrals
240
This month
Referrals
240
<div class="sr-stat-cards">
<div class="sr-stat-card">
<p class="sr-stat-card__label">Referrals</p>
<p class="sr-stat-card__value">240</p>
<p class="sr-stat-card__support">
<span class="sr-stat-card__delta sr-stat-card__delta--down">-5%</span> on last month
</p>
<span class="sr-stat-card__icon" aria-hidden="true"><!-- icon --></span>
</div>
</div>
<!-- Add sr-stat-card--accent-primary for the left bar.
Add sr-stat-card--value-first or sr-stat-card--inline to change the layout. -->Inline is the short one, around 40px against the stacked card's hundred. For a strip above a table, a toolbar, or a phone screen where a full card takes the room the content needs. The number leads, there is no icon, and the cards size to their content and wrap.
All
502
Sent
318
Received
184
<div class="sr-stat-cards">
<div class="sr-stat-card">
<p class="sr-stat-card__label">Referrals</p>
<p class="sr-stat-card__value">240</p>
<p class="sr-stat-card__support">
<span class="sr-stat-card__delta sr-stat-card__delta--down">-5%</span> on last month
</p>
<span class="sr-stat-card__icon" aria-hidden="true"><!-- icon --></span>
</div>
</div>
<!-- Add sr-stat-card--accent-primary for the left bar.
Add sr-stat-card--value-first or sr-stat-card--inline to change the layout. -->The Figma set enumerates five types; three of them are the same layout with nothing, with a supporting line, and with a supporting line carrying a change. Whether there is a third line is a content decision, not a type of card, so pass the text or leave it out.
The accent bar is not a status
A 4px bar that turns amber, with nothing else changing, is meaning carried in colour alone — which WCAG 2.2 SC 1.4.1 rules out. Use warning and critical only where the supporting line already names the problem in words. Here is the same row in greyscale: it still reads.
In transit
42
Pending receipt
Missing or escalated
24
Requires attention
<div class="sr-stat-cards">
<div class="sr-stat-card">
<p class="sr-stat-card__label">Referrals</p>
<p class="sr-stat-card__value">240</p>
<p class="sr-stat-card__support">
<span class="sr-stat-card__delta sr-stat-card__delta--down">-5%</span> on last month
</p>
<span class="sr-stat-card__icon" aria-hidden="true"><!-- icon --></span>
</div>
</div>
<!-- Add sr-stat-card--accent-primary for the left bar.
Add sr-stat-card--value-first or sr-stat-card--inline to change the layout. -->It is not a button
The card has no role, no handler, no hover and no focus ring, and it is not going to get them. If
tapping the number should open the list behind it, put a Link under the card or build the whole tile
as a Button — then it is a button, with a button's focus ring and a button's accessible name. A
div with a click handler is neither.
One number with its name on it, how many patients, how many casenotes, how many are late, so staff can see the size of something before opening it.
When to use
- At the top of a dashboard or a worklist, summarising what is below it. Four cards in a row is the shape every product has reached for so far.
- Where a number answers a question staff ask before they start work: how many are waiting, how many are overdue, how many came in today.
- Where the number is worth seeing even when nobody acts on it. A stat card is a reading, not a task.
When not to use
- As a button. The card has no role, no focus and no hover, and it is not going to get them. If tapping the number should open the list behind it, put a Link under the card, or build the whole tile as a Button, then it is a button, with a button's focus ring and a button's accessible name.
- For a value inside a record. A patient's weight or a result value is a field in the record, not a dashboard tile. Use a Table row or a description list.
- For a status. A stat card counts; it does not say what state something is in. Use a Tag, or the Status indicator.
- For more than one number. Two figures in one card means neither is the subject. Use two cards.
- For a trend over time. A single delta against one previous period is the most this carries. A series needs a chart.
How it works
- Label, value, and at most one supporting line. The supporting line is the period ("This month"), a qualifier ("In all sites"), or a change against the previous period. Never two of them.
- The number is the subject. The value is Heading M and the label is Label style above it, so the card is scanned by its number and read by its label.
- The icon is decoration, and it belongs to the card. It repeats what the label already says, so it is hidden from assistive technology, and it stays at the top right whichever layout you choose. A card with no obvious icon is better than a card with a vague one.
- The accent bar is off by default. It is emphasis, so it is opt-in: give it to the one card a screen is about, and leave the rest plain. A row where every card has a bar has emphasised nothing.
- The accent bar is not a status on its own. A 4px bar that turns amber is a meaning carried in colour alone, which SC 1.4.1 rules out. Use warning and critical only to reinforce something the supporting line already says in words
, "Pending receipt", "Requires attention", and the card still reads correctly in greyscale, on a projector, and to someone who cannot separate the two.
- Figures are tabular. A column of cards lines up on the digits.
Options
| Layout | Use when |
|---|---|
| Stacked (default) | The normal card. Label, value, optional supporting line |
| Value first | A row read as numbers rather than as sentences. The icon stays at the top |
| Inline | Tight space: a strip above a table, a toolbar, a phone screen. Around 40px against the stacked card's hundred, number first, no icon |
Accent
| Accent | Use when |
|---|---|
| None (default) | Almost always. The card is one reading among several |
| Primary | One card in a row leads, the queue the user came to clear, the figure the meeting is about |
| Warning · Critical | That card needs attention, and the supporting line already names the problem in words |
Do & don't
| Do | Don't |
|---|---|
| Name what the number counts, "Casenotes in transit" | Label it with a system term, "CN_TRANSIT" |
| Keep the supporting line to one line | Wrap a sentence under the number |
| Put the sign in the delta, "-5%" | Rely on red and green to say which way it moved |
| Leave the accent off unless one card leads | Put a bar on every card in the row |
| Use one accent per meaning across a screen | Give every card a different colour because the row looks flat |
| Reach for Inline where the space is tight | Shrink a stacked card to fit a toolbar |
| Round to what staff can act on, "1,240" | Show a precision nobody uses, "1,240.00" |
| Say what the number is of, when it is not obvious, "In all sites" | Leave the period unstated and let people assume today |
Accessibility
- The card is a plain region with no role. Nothing in it is focusable, so nothing in it can be a keyboard trap or a focus stop that leads nowhere.
- Reading order is label, value, supporting line, in the DOM in that order. The value-first layout reorders visually only, so a screen reader still hears what the number is before it hears the number.
- The icon is
aria-hidden. The label carries the name. - The delta's sign is part of its text, so the direction survives greyscale and survives a screen reader that announces no colour.
- Every text colour clears 4.5:1 on the card surface in both light and dark. The delta is a small tinted chip rather than coloured text because the status colours are pinned to their light-mode step, as bare text on the dark card surface they fall to around 2:1, and on their own status surface they pass.
- Nothing has a fixed height, so the card grows at 200% zoom and the row wraps rather than clipping.
Content
- Sentence case. No full stop on the label or the supporting line.
- Use the word staff use for the thing being counted, not the table it lives in.
- A delta needs its period: "-5% on last month", not "-5%".
- Zero is a real answer and should render as
0, not as an empty card or a dash.
Clinical / DHCW notes
- A count on a dashboard is a prompt to look, never the record. Nothing clinically safety-critical should rest on a figure staff cannot click through to the list behind it.
- Where a card counts something overdue, the supporting line should say what "overdue" means for that service, the threshold differs between sites, and a number without its rule invites the wrong comparison.
Related
- Tags, for state, which a stat card does not carry
- Table, the list a stat card usually summarises