Stat puts one figure on the page with its prefix, unit, label and an optional source note. Style it as a tile, add a top or left rule, or leave it plain. Turn on Animate On Scroll and the number counts up the first time it comes into view.
Every figure below is a Stat element. Scroll down to the bento: the large brand tile counts up when it scrolls into view.
Five Stats in a CSS grid, each using its own Tile background, padding and radius. The brand tile has Animate On Scroll switched on, so its figure counts up from zero the first time it comes into view.
Food diverted from landfill
Collected from 38 local shops and farms
Households supported
Up from 910 the year before
Volunteer shifts filled
Across 312 shifts
Raised at the winter appeal
Matched by two local employers
Regular volunteers
Aged 16 to 81
No tile, just a rule. The first strip uses a left rule in the brand colour with the figures in the heading colour. The second uses a thinner dark top rule with brand figures.
Uptime over the last 12 months
Measured every minute
Median API response
From our London region
Hosting regions
On four continents
Median first reply
Support, every day of the year
Seats in the main hall
Plus 400 standing
Talks over two days
Across three stages
Countries represented
Speakers and exhibitors
Minutes from the station
On foot, step free
The same Unit / Suffix field placed three ways with the Unit Position control. Alignment is set to centre on all three.
Average weekday run
Unit Position: After Figure
Studio plan, billed monthly
Unit Position: Superscript
Of flexible workspace
Unit Position: Below Figure
One Stat is one figure. Put several in a grid or a row to build a bento or a strip.
Type the number, then add a prefix such as £ and a unit such as kg or %. Choose whether the unit sits after, raised or below.
Write a short label that says what the number means, and an optional note for the source or date.
Leave it plain, give it a tile background and padding, or add a top or left rule. Switch on Animate On Scroll if you want the count-up.
Built for impact pages, reports and landing pages.
Each part is its own field, so £, kg or % are styled apart from the number.
Put the unit after the figure, raise it as a superscript, or drop it below on its own line.
The figure counts up from zero the first time it scrolls into view and finishes on the exact text you typed.
The final figure is always in the page HTML. While it animates, screen readers get the full figure once instead of the changing digits.
Visitors who ask for reduced motion see the final figure straight away. It also does not animate in the builder.
Add a label for what the number means and a smaller note for the source or date.
Give it a background, padding and radius, or a top or left rule with its own colour, thickness and spacing.
Add an icon above the figure and set its size and colour.
Figure, prefix, unit, label and note all accept dynamic data, so the numbers can come from custom fields.
Anywhere one number tells the story faster than a paragraph.
Show what a charity or project achieved this year, with the source under each figure.
Uptime, speed or customer numbers in a ruled strip under the hero.
A price with a raised £ and /mo using the superscript unit position.
Before and after results in a small bento of tiles.
Capacity, floor area or distance, with the unit written out below the figure.
Totals raised and supporters signed up, pulled from custom fields.
This is the full list of settings in the Breakdance editor, with their default values.
| Control | What it does | Default |
|---|---|---|
| Content: Figure | ||
| Figure | The number to show, e.g. 4,812 or 99.95. | 4,812 |
| Prefix | Text before the figure, e.g. £. | — |
| Unit / Suffix | Text after the figure, e.g. kg, % or /mo. | kg |
| Unit Position | After Figure, Superscript or Below Figure. | After Figure |
| Icon (optional) | An icon shown above the figure. | — |
| Content: Text | ||
| Label | What the figure means. | Food waste diverted from landfill |
| Note / Source (optional) | A smaller line for the source or date. | Source: 2025 site audit |
| Content: Animation | ||
| Animate On Scroll | Count up from zero the first time the figure scrolls into view. | Off |
| Duration (ms) | How long the count-up takes, from 200 to 5000. | 1200 |
| Design: Layout | ||
| Alignment | Left, centre or right. Responsive. | Left |
| Gap Between Parts | Space between the icon, figure, label and note. Responsive. | 8px |
| Design: Figure | ||
| Typography | Font settings for the figure. | — |
| Colour | Figure colour. | Brand colour |
| Space Before Unit | Gap between the figure and an after or superscript unit. Responsive. | — |
| Design: Prefix & Unit | ||
| Typography | Font settings for the prefix and unit. | Half the figure size |
| Colour | Prefix and unit colour. | Same as figure |
| Design: Label and Note | ||
| Label typography and colour | Font settings and colour for the label. | Heading colour |
| Note typography and colour | Font settings and colour for the note. | Body text colour |
| Design: Icon | ||
| Size | Icon width and height. Responsive. | 32px |
| Colour | Icon colour. | Brand colour |
| Design: Rule | ||
| Style | None, Top or Left. | None |
| Colour | Rule colour. | Brand colour |
| Thickness | Rule thickness in px. | 3px |
| Space From Rule | Space between the rule and the content. Responsive. | 16px |
| Design: Tile | ||
| Background | Tile background colour. | — |
| Padding | Tile padding. | — |
| Radius | Tile corner radius. | — |
No. The final figure is printed in the page HTML. The animation only runs in the browser and always ends on the exact text you entered.
A plain number, with commas and one decimal point allowed, such as 4,812 or 99.95. A figure like 24/7 is shown as written and does not animate.
If their device asks for reduced motion, the figure is shown straight away with no count-up.
Each Stat is one figure. Place several in a Div or grid and use the Tile or Rule settings on each. The demos above use a simple CSS grid.
Yes. Figure, prefix, unit, label and note all accept dynamic data.
The count-up is switched off in the editor so you can always see and edit the final figure. Preview the page to see it.
Stat is included with Phox Elements, along with 140+ other premium elements for Breakdance.