Number counter
Present a numeric fact with an optional prefix, suffix and count-up animation.
Code name: Number · Category: Text
Registered in the live renderer. Website context and the limitations below still apply.
When to use it
Use a counter for a factual statistic you can substantiate. Add enough nearby text to explain what the number measures.
In the editor
- Enter the verified number.
- Set a prefix or suffix if needed.
- Adjust animation duration and check the surrounding explanation.
Example
This example uses illustrative content. Media placeholders must be replaced with your own assets; data-backed blocks need the normal website context.
<Number number={3} suffix=" steps" duration={1.2} />Behaviour and limitations
- A displayed number is not connected to live analytics automatically.
- Do not invent client counts, savings or performance claims. The example is illustrative content, not a business result.
Property reference
Types below describe the editor controls and known choices, not every value accepted by the renderer. A renderer default is extracted from its parameter; an editor-only default does not prove the runtime default. “Not declared here” does not mean required. Preserve omitted values unless the requested edit needs them.
| Property | Editor value type | Default evidence | Guidance |
|---|---|---|---|
number | number | 100 (renderer) | Number. See the usage notes for this block. |
prefix | string | "" (renderer) | Prefix. See the usage notes for this block. |
suffix | string | "" (renderer) | Suffix. See the usage notes for this block. |
fontSize | number | 48 (renderer) | Font Size. See the usage notes for this block. |
fontWeight | 300, 400, 500, 600, 700, 800, 900 | 700 (renderer) | Font Weight. See the usage notes for this block. |
color | string | "rgba(0, 0, 0, 1)" (editor only) | Font Color. See the usage notes for this block. |
duration | number | 1.2 (renderer) | Animation Duration (s). See the usage notes for this block. |
align | "left", "center", "right" | "center" (renderer) | Align. See the usage notes for this block. |
alignVertical | See guidance | "" (renderer) | Vertical alignment within the surrounding layout. |
spacing | object | Not declared here | An object of spacing settings. Preserve existing responsive values when changing a single setting. |
screenList | string | "" (renderer) | Comma-separated device names to hide on: mobile, tablet, desktop. An empty string hides on none. |
css | string | Not declared here | Custom CSS text. Preserve unrelated rules and prefer the dedicated property for supported edits. |
