Stat Card
统计卡片
A small card that holds exactly one number, plus a label and a sense of which way the trend is moving.
Live Demo
Actually clickableNew today
1,284
↑ 12%vs yesterday
Active users
8,420
↓ 3%vs last week
Conversion rate
4.2%
No changevs last week
Cleaned today
0
—vs yesterday
What you just saw:The row of small cards at the top of an admin dashboard: "New today 1,284 up 12%", "Active users 8,420 down 3%", "Conversion rate 4.2%".
What it actually is
A stat card answers "how are we doing right now". It must contain three things: the metric name (saying what is being measured), the value (large), and the comparison (how it moved versus the last period). Drop the third item and the card is just a lonely number.
Anatomy · What it's made of
Label指标名
12px, secondary color
Value数值
28px, tabular-nums
Delta变化
Up 12% vs last week
Context基准
Names the comparison baseline
When to Use
When it fits, and when it doesn't| Situation | Use it? |
|---|---|
| A few core metrics need to be readable at a glance | Yes |
| The metric has an obvious baseline (yesterday, last week) | Yes |
| The number matters more than the trend | Yes |
| You need to show how a number got to where it is | Depends |
| Metrics need to be cross-analyzed against each other | No |
Up and down colors follow convention: red-up/green-down in Chinese markets, green-up/red-down for US equities. Do not mix them up.
"Up 12%" must say what it is compared against — last month? Year over year?
Similar Patterns
Don't mix these upStat CardCurrent
统计卡片
A small card that holds exactly one number, plus a label and a sense of which way the trend is moving.
Card
卡片
A rounded, bordered container that bundles one related piece of content — image, title, text — into a single self-contained unit.
In one line:A small card that holds exactly one number, plus a label and a sense of which way the trend is moving.
Card
卡片
A rounded, bordered container that bundles one related piece of content — image, title, text — into a single self-contained unit.
Table
表格
Rows and columns that cross, used to compare several attributes across several objects side by side.
Stat Card
统计卡片
A small card that holds exactly one number, plus a label and a sense of which way the trend is moving.
Progress Bar
进度条
A horizontal bar that fills up little by little as the task completes, so you know roughly how long is left.
How to tell AI
Three levels of promptAdd the component name and specifics
Add a row of stat cards: new today 1,284 (up 12% vs yesterday), active users 8,420 (down 3%), conversion rate 4.2% (flat). Use red for up and green for down.
Don't just say this to AI
Bad → BetterDon't say this to AI
Add a few numbers to show the recent data.
Say this instead
Add a group of stat cards: metric name 12px in the secondary color, value 28px with tabular-nums, a delta row that always states its baseline (e.g. "vs yesterday"), red-up/green-down, 4 columns on desktop / 2 on tablet / 1 on mobile, and an em dash instead of "0" so a zero value is not misread.
Share this card
Social-readyTurn this pattern into a 3:4 or 1:1 knowledge card and export it as PNG right in the browser. No backend needed.