By Mehdi HassanWhat is KPI card design?
KPI card design is the design of the small tiles, also called stat cards or metric tiles, that show a single headline number on a dashboard. They usually sit in a row at the top of the screen and answer "how are we doing?" before the reader looks at any chart. Because they're read first, they shape how people interpret everything below them.
Most KPI card advice is about visual style: rounded corners, icons and gradients. The parts that make a number meaningful are actually words: the label, the comparison and how the delta is described. That's the focus here. For where cards fit in the overall layout, see our complete guide to dashboard design.
What goes on a stat card UI? The anatomy of a KPI card
A stat card UI has five parts: a label, a value, a comparison, a delta and an optional trend or action. Each part answers a question the reader would otherwise have to ask. Leave one out and the card works less well; add more and it gets crowded.
Part | Answers | Example | Common mistake |
|---|---|---|---|
Label | What is this? | Active customers | Internal names like "acct_active_v2" |
Value | How much? | 1,204 | Too many decimals, no unit |
Comparison | Compared to what? | vs last month | Missing, so the number can't be judged |
Delta | Better or worse? | +8% (green) | Colored by direction, not by meaning |
Trend or link | What's the pattern? Where next? | Sparkline, "View details" | A sparkline with no time frame |
The value is the largest element on the card, and the label sits directly above or below it in a smaller size. The comparison and delta sit together, close to the value, because readers look at them as one idea. Keep the arrangement identical across every card in the row so readers learn it once.
Which comparison should a KPI card show?
A KPI card should show the comparison that matches the decision the reader is making. If they're asking "are we improving?", compare to the previous period. If they're asking "are we on track?", compare to a target. If the business is seasonal, compare to the same period last year. The wrong comparison can make a good month look bad.
Comparison | Best for | Watch out for |
|---|---|---|
Previous period | Short-term momentum, weekly reviews | Seasonality and partial periods |
Same period last year | Seasonal businesses | Needs at least a year of data |
Target or goal | Sales, growth, OKRs | Targets must be set and kept current |
Benchmark or average | Customer-facing comparisons | Where the benchmark comes from |
Rolling average | Noisy daily metrics | Harder to explain in a label |
Partial periods cause the most confusion. Comparing month-to-date revenue with the whole of last month will show a drop every month until the last few days. Compare month-to-date with the same number of days last month, and say so on the card: "vs same point last month".
Hypothetical example: the same number with three comparisons
For example, suppose a SaaS product shows "New trials: 340" on its dashboard.
Against last month (400), the delta is negative and the card looks worrying. Against the same month last year (250), it's strong growth. Against this month's target (320), it's on track.
All three are true. The right one depends on who reads the card: a growth lead running weekly experiments wants last month, a founder preparing a board update wants the target and the year-on-year view. If the audience is mixed, show the primary comparison on the card and the others in a tooltip or the detail view.
How should you design the delta and its color?
Design the delta so it says whether the change is good or bad, not just whether it went up or down. Churn going down is good news and should be green; cost going up is usually bad news and should be red. Coloring by direction alone makes people misread cards where lower is better.
- Show the sign and the unit. "+8%" or "-120 users" is clearer than an arrow alone.
- Pair color with an icon or word. Arrows or "up"/"down" text mean color isn't the only signal, which helps color-blind readers.
- Choose percent or absolute deliberately. Percentages mislead on small bases; a jump from 2 to 4 is "+100%". Show absolute changes when counts are small.
- Handle no change. A neutral grey state for flat or insignificant changes avoids alarming readers over noise.
- Set the polarity per metric. Store whether higher is better as part of the metric definition so developers don't guess.
How do you write KPI labels that people understand?
Write KPI labels in the words your users use, name the time frame, and keep them short enough to fit on one line. A label is a promise about what the number means, so it has to match how the number is calculated. If the label says "Active users" but the query counts anyone who logged in once in 90 days, people will make bad decisions.
- Use plain nouns. "Paying customers" beats "Converted accounts".
- Name the period on the card or in one visible page-level control: "This month", "Last 7 days".
- Add a definition tooltip for rates, scores and anything with a formula.
- Avoid stacked jargon. "Net revenue retention" needs a tooltip for most customers; "Revenue kept from existing customers" might not.
- Be consistent. The same metric has the same name in the card, the chart, the table and the export.
Labels are one part of a bigger writing job. Our guide to dashboard copywriting covers chart titles, headline insights and empty states, the other places where words decide whether a dashboard is understood.
How many KPI cards should a dashboard show?
Most KPI dashboard designs work best with three to five cards in the top row. That's enough to summarize the state of things without turning the row into a wall of numbers. If you have more metrics that matter, it usually means the dashboard serves more than one audience and should be split into views.
Pros
- Few cards make the most important number obvious
- Fits on smaller screens without awkward wrapping
- Each card can have room for comparison and trend
Cons
- Some stakeholders will ask for their metric to be added
- Secondary metrics need a home elsewhere, such as a detail view
- Choosing requires agreement on what matters most
On phones, the same cards usually become a two-column grid or a horizontal scroller with the most important card first. Our guide to mobile dashboard design covers how to stack and summarize them, and our SaaS dashboard checklist includes pass/fail tests for every KPI.
Should KPI cards include sparklines and what states do they need?
KPI cards should include a sparkline when the shape of the recent trend matters more than one comparison, for example to show a steady decline that a single month-over-month delta would hide. Keep the sparkline small, without axes, and make the period clear. If the reader needs exact values, link to a full chart instead.
Every card also needs designed states. These are the cards customers see on their first day and on a bad day, and they decide whether people trust the dashboard.
State | What to show |
|---|---|
Loading | A skeleton the same size as the final card |
No data yet | A short explanation and the action that produces data |
No comparison | The value with "No data for last month" instead of a fake delta |
Error | "Couldn't load" with a retry, without breaking other cards |
Genuine zero | "0" with its comparison, clearly different from loading |
When you build cards in code, make the comparison, polarity and states part of one reusable component so every card behaves the same way. A token-based component set, like the one discussed in shadcn/ui vs a custom design system, keeps colors and type consistent across light and dark themes. For cards in AI products, where confidence matters too, see AI dashboard design.
