Skip to main content
Frontend Glossary

UI components · Data display

Statistic

Also called: KPI card, Metric card, Stat card, Number card

A key metric shown as a big number, with the metric name above it, often with a unit, an up or down arrow, and a comparison.

Click “Labeled” to see what each part is called, or “Anti-pattern” to see the most common mistake.

How to tell AI

Swap in your own content first

Put 4 statistic cards in a row at the top of the dashboard. Each card has the metric name in small gray text at the top, a 28px bold number in the middle (with thousands separators and a unit), and "↑ 12.5% vs last month" at the bottom. Show increases in green and decreases in red, each with an arrow. On narrow screens, switch to two columns automatically.

Send to

01Decide

Does your content look like this?

Check both columns to confirm Statistic is what you need.

Use Statistic when

  • The top of a dashboard needs a few key business metrics that people see at a glance
  • You want to highlight a single number and how it changed from the last period
  • A report page opens with summary numbers like totals and grand totals

Pick something else when

  • You need to show how data changes over time or how parts make up the whole

    Use insteadChart

  • The data is detailed, with many rows and columns

    Use insteadTable

  • It's just an unread message count

    Use insteadBadge

Not sure? Upload a screenshot and page analysis will check which layout each block should use.

02Pitfalls

Common misuse

It looks like it works, but it makes things harder for users.

  1. 01

    Cramming eight or nine statistic cards into one row, all the same size, so nothing stands out

    The wireframe below shows this case. The red dashed box marks the problem.

  2. 02

    Numbers with no unit or time period, so users don't know if it's today or this month

  3. 03

    Showing ups and downs only with red and green, with no arrows or plus and minus signs

Anti-pattern, matches item 01

03Spot it

How to spot it

Look at the overall structure first, then check a few features you can spot at a glance.

Structure

A metric name, a big number (with a unit before or after it), and an optional trend note (an up or down arrow, a comparison percentage, or a mini chart).

PartsClick one to highlight it in the wireframe above

04Explained

In detail

A statistic is the most common small block on a dashboard. A line of small text on top says "Sales this month," below it is a big bold number, "$18,560," and next to it or below it says "↑ 12.5% vs last month." Several statistics usually sit in a row at the top of the page, so people see the most important numbers at a glance. Some also include a tiny line chart (a sparkline) to show the recent trend.

How it splits the work with a Chart: a statistic answers "what is it right now," while a chart answers "how is it changing, and how much is each part." Usually a few statistics give the conclusion first, then charts show the details. How it differs from a Badge: a badge is a small red dot or number on the corner of an icon that shows an unread count, not a business metric. Keep thousands separators and decimal places consistent, and show ups and downs with arrows or plus and minus signs, not just red and green.

Developer info
Term ID
component-statistic
DOM selectors

The extension matches these CSS selectors when it inspects a page locally (tags, ARIA roles, common component library classes).

  • .ant-statistic
  • .el-statistic
  • .arco-statistic
  • .n-statistic
Priority
1 · when several match at the same level, the higher priority wins
Version
v2 · updated Sep 29, 2026