Stats & values
Stats Bento
A split title, then five figure cards that count up — on photos, on a row of running faces or on the primary colour — around a card of values.
Layout and motion from the Catchup template — see it in contextTry 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 |
|---|---|---|---|
| label / title / lead | string | — | The split title: the label and the h2 at the left, the lead at the right from 1024px, aligned to the bottom. |
| figures | { value, from?, prefix?, suffix?, label, text?, image?, faces? }[] | 5 figures | Five, in the order they sit: two side by side, one across, then a small and a wide one; a sixth is not drawn. A card's look follows its data: image puts the photo under a dark veil with white text, faces runs two rows of round faces on the foreground colour, neither gives the primary colour. text sits at the bottom and moves the figure to the top. A value with decimals stands still. |
| values | { title, items: { title, text }[], action?, image? } | false | — | The card beside the first three figures: an h3, the values with check discs, a button and a photo filling the rest. false leaves it out. |
| buttonStyle | "spring" | "flip" | "sweep" | "spring" | The look of the values card's button. |
| count | boolean | true | false: the figures stand still. |
| className | string | — | Classes for the <section>. |
- From 1024px two rows, each 68 : 32 the other way round (the three figures beside the values card, then a small figure beside a wide one); from 768px two columns; phones one column in page order.
- Each figure counts from `from` to its value, one step every 5 ms, from its first pixel in view, once (count-up). The face rows run left and right at 15px/s with faded edges (marquee). The title and every card rise 18px as half of them comes into view, once (scroll-reveal). With reduced motion nothing moves and the final numbers show.
- Text on photos stays white over a black veil in every theme; the primary card uses primary-foreground and the faces card the background colour as its text.
