Stat Cards

What is a stat card?

A stat card, also called a KPI tile or metric card, shows one key number with a short label and often a trend: revenue this month, active users, conversion rate, open tickets. Rows of stat cards usually sit at the top of admin dashboards and analytics pages so people can read the most important figures before diving into charts and tables.

When to use stat cards

• At the top of a dashboard to summarise the state of the system.
• On report pages to highlight totals before a detailed breakdown.
• In account areas to show usage against a quota or plan limit.
• Anywhere a single number answers the user's main question.

Best practices

• Lead with the number in a large, readable size; the label should be smaller but still clear.
• Show change with both an arrow or sign and text ("+12% vs last week"), not colour alone, since red and green are hard for many users to distinguish.
• Use tabular numbers (font-variant-numeric: tabular-nums) so values align and do not jump when they update.
• Keep the grid responsive: four across on desktop, two on tablets, one on phones.
• Sparklines and mini charts are decorative unless they add data; mark them aria-hidden="true" and keep the key value in text.
• If values refresh live, avoid announcing every update; let users read the page at their own pace.
• Format numbers consistently with thousand separators and units.

Framework versions

The dashboard stat card examples here include simple KPI tiles, cards with icons, trend indicators, progress bars and mini charts. Bootstrap 6 snippets use theme-* colour roles for icon backgrounds and trend colours, so they work in light and dark themes. Bootstrap 5 snippets combine .card with grid and text utilities, Tailwind CSS snippets use grid and flex utilities, and pure CSS versions are framework-free. Use the live preview to compare designs, then copy the code or download it and plug in your own data.