Gauge
A row of circular progress rings, each arc drawn to the length its value encodes with the figure centered inside.
Stats section templates
A stats section turns claims into numbers. Done well it is the fastest credibility on a page, because a figure is read and believed in less time than a sentence takes to scan.
12 stats section layouts
Each one below is a live preview rendering in your current design language, not a screenshot. Open any of them to see it full-width, switch the business type to read it with your kind of content, or add it to a page.
Meter
Labelled horizontal progress bars in two columns, each fill widened to match its level.
Pulse
A grid of trend cards, each pairing a big number and an up-trend chip with a small sparkline.
Band
The classic proof strip: one horizontal row of large figures over muted labels, divided by fine vertical rules.
Quad
A grid of elevated stat cards, each holding a large figure above its label.
Spotlight
One hero metric dominates the left while the remaining figures run down a divided supporting column on the right.
Readout
A vertical statement of figures — each large value in a fixed left column with its label alongside, every row ruled.
Pillars
Tall stat cards standing in a row, each capped by a short accent bar above a left-aligned figure and label.
Ribbon
A branded proof band with the figures reversed out of a solid primary panel — the one stats layout on colour.
Column
A column chart of a growing series, with the headline metric called out above the bars.
Donut
A proportion donut paired with a legend, the ring split into three segments that read as shares of a whole.
Area
One large filled area chart under a headline figure and a trend chip.
How to choose a stats section
Match the shape to what the number means. A plain row suits absolute figures — customers, countries, years. Progress bars and rings suit anything that is a proportion, because the shape carries meaning the digits alone do not. Trend cards with a small chart suit numbers that are interesting because they are moving, not because of where they currently stand.
At a glance
- Layouts
- 12 distinct stats sections
- Styles covered
- row, progress, cards, growth, rings, bars, sparkline, trend
- Styling
- Your color, typography, spacing, radius and shadow tokens
- Export
- HTML, CSS, JSON, or an AI instruction package
Stats section FAQ
How many statistics should I show?
Three or four. It is enough to establish a pattern and few enough that each number keeps its impact. A row of eight reads as a dashboard, and dashboards get skimmed.
What makes a good statistic for a landing page?
Something concrete and verifiable that a visitor actually cares about — uptime, delivery time, customers served, years in business. Vague superlatives with no number attached are weaker than no statistic at all.
Should statistics be animated?
A number that counts up can draw the eye, but it also delays the information and breaks for anyone who prefers reduced motion. If you use it, make sure the final value is what shows when animation is switched off.