Components
Component Count Up
A heading and three or four figures that count up the first time they come into view, in a row or on cards: Count Up as a section of its own.
Made for the page builder — try it there
Try it in the page builderBlocks come with Pro
Preview every block now, in any theme and at any width. The source, the install command and the AI prompt unlock when Pro opens, once the catalog reaches 20 templates.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | "Ten years of work, in numbers" | The block's h2; empty for a visually hidden one. |
| lead | string | a line about the studio | A line under the heading; empty for none. |
| items | { value: number; prefix?; suffix?; label; text? }[] | four figures | The figures, in the order they sit: three or four read best. value is a number (grouped as 1,500); prefix and suffix sit around it ($, +, %, k). |
| layout | "row" | "grid" | "row" | row: side by side from 768px, split by thin lines. grid: on cards, two by two from 768px and four across from 1024px. |
| duration | number | 1.6 | Seconds every figure takes to count up, so a large number ends with the small ones. |
| count | boolean | true | false: the figures stand still (grouped as 1,500), everything else unchanged. |
| className | string | — | Classes for the <section>. |
- Motion is Count Up's: it starts once the figure is in view, pauses off-screen and never starts over. The final number is always in the page — what screen readers read and what shows with reduced motion, in print and without JavaScript.
- Each figure's label is an h3; the digits are tabular so the width does not jitter.
