A good number communicates something important in an instant. The Key figures block turns a few key values into an easy-to-scan section. It works best when the number is interesting on its own and the label immediately explains what it refers to.
Use it for results, experience, capacity or even practical conditions that matter to a decision.
Demo data showing how the block works — use only real, verifiable figures on a live website.
12+
years of experience
A compact way to show professional experience.
480+
completed projects
The number of projects actually delivered.
9
countries
Markets where the team has genuinely worked.
24h
average response time
Use this only when it is measured and kept up to date.
A number always needs meaning beside it. “480+” says very little on its own; “480+ completed projects” is clear. If the figure could easily be misunderstood, add a short explanation too.
Count-up animation is optional. A value that is not a single number (such as 24/7, 2020–2024 or 4.9/5) is shown exactly as you typed it and does not count up. A figure with a unit (such as 120 m2) still counts up, and prefixes or suffixes such as “+” or “ hours” stay unchanged.
The goal is not the biggest possible number. It should be quick to understand and credible.
A concrete value says more than “many”, “fast” or “lots”.
The label should make the meaning of the number obvious immediately.
Update figures that change over time, or they quickly lose credibility.
Base it on a real measurement, record or other clear source.
Tune the number, its explanation and its visual cue independently.
Each stat has its own value, short label and optional explanation.
Add either an icon or an image. Image size and ratio are set for the whole block, and each image has its own ALT text. If both are provided, the image takes precedence.
Turn it on or off. It animates the numeric part and leaves prefixes and suffixes unchanged. A value that is not a single number (24/7, 2020–2024) is shown exactly as you typed it.
Column count adapts to the number of items. Three or four short stats are usually easy to scan.
Give the block its own heading and a short explanatory line.
Adjust the background, width and spacing to fit the surrounding page.
The same figures can appear in ten different ways. There is an example of each below. A layout's own settings stay on the block when you switch layouts.
Figures appear exactly as written. With count-up animation on, they count up once. On phones the capitalised labels are smaller, so they no longer break over several lines.
Each digit rolls into place when the block comes into view, again every time it returns. Even with a display font only the digit in place shows in its window; the next one no longer peeks in.
Each figure fills a ring, the more the closer it is to the full-ring value. A unit written onto the number (such as “350+”) stays on the number's line.
Optional. Empty: a % figure is out of 100; any other figure has no whole, so Rings shows it in a filled disc, and Cards and Bar chart give it no bar.
Large figures with the unit in the accent, divided by thin lines. Reads on light and dark bands.
A card per figure with its icon. A % figure, or one with a full-ring value, also gets a thin bar.
The figures on a band of colour, divided by thin lines. Figures: Left / Centred. Band colour (accent, dark or a custom colour) and Band text are under Colours.
One figure very large, the rest as a list beside it. Under Large figure you pick which one it is (the first by default) and whether it sits left or right; on a phone it always comes first.
A bar per figure filled to its share: a % figure out of 100, any other out of its Full ring at value. A figure with no whole gets no bar. Bars: Thin / Thick.
The first figure large on its picture, the rest as tiles beside it. Tiles: Tinted / Outlined. Give the first figure a picture; without one it sits on an accent-coloured tile.
Every figure on its own picture. Photo shape: Portrait / Square. Give each figure a picture under Icon or picture; without one the figure sits on a tinted card.
A year at a ceramics and woodwork studio in numbers. Demo data: on a live website, always use real figures.
mugs made
Thrown, glazed and fired twice.
custom chopping boards
Made from local walnut and beech.
course participants
In weekend and evening groups.
years at the wheel
Since the studio opened.
Proportions from a ceramics and woodwork studio. Demo data: on a live website, always use real figures.
returning participants
A percentage fills the ring out of 100.
places booked on the Saturday course
Here a full ring means 24 places.
recycled clay
Most of the trimmed clay goes back onto the wheel.
On a dark band. 24/7 and 4.9/5 appear exactly as typed, while 120 m2 counts up. Demo data.
of studio space
4.9/5
average course rating
24/7
online booking
A few figures from the same studio, with icons. The % figure and the one with a full value get a bar; the others do not. Demo data.
returning participants
The bar counts out of 100.
places booked on Saturday
Here a full bar means 24 places.
studios in town
Without a whole, no bar.
The same studio on an accent-coloured band, figures aligned left. Demo data.
mugs made
custom chopping boards
course participants
years at the wheel
The large figure here is the third one, not the first, on the left. Demo data.
course participants
In weekend and evening groups.
mugs made
custom chopping boards
years at the wheel
The studio's proportions with Thick bars. The % figures count out of 100, the 18 out of its set 24, and the 2 has no whole, so it gets no bar. Demo data.
returning participants
places booked on the Saturday course
recycled clay
studios in town
The same accommodation: the first figure large on its picture, the rest on Tinted tiles. Demo data.
rooms
Rooms in different sizes and layouts.
pools
Indoor and outdoor options.
from the beach
A short walk from the water.
8:00–10:30
breakfast
Served daily in the accommodation's restaurant.
An accommodation, every figure on its own picture, with the Portrait photo shape. Demo data.
rooms
Rooms in different sizes and layouts.
pools
Indoor and outdoor options.
from the beach
A short walk from the water.
A different trust element may work better depending on what you need to support.
Another example
Guarantees, delivery, capacity or other practical conditions can also become easier to understand when a number genuinely helps the decision.
Here the numbers highlight practical information rather than achievements. The example uses demonstration data.
30
days to return
The return period genuinely offered.
2–4
working days for delivery
The usual delivery timeframe.
3
payment methods
Payment options genuinely available on the site.
12
months warranty
The warranty genuinely applying to the relevant products.
Icons help when they provide a quick visual cue for the numbers.
28
team members
The full active team size.
3
offices
Locations where the team regularly works.
11
countries
Markets with active customer relationships.
24h
response time
The average response time actually committed to.
Full-width images add atmosphere around the figures, but the value and label still carry the meaning.
24
rooms
Rooms in different sizes and layouts.
3
pools
Indoor and outdoor options.
150 m
from the beach
A short walk from the water.
8:00–10:30
breakfast
Served daily in the accommodation's restaurant.
GIVE THE NUMBER A REASON
Choose a few genuinely important data points, give them clear labels, and pick the one of ten layouts that shows them best.