Counter
Animated counter for highlighting key stats or figures.
$ 100 +
---
import Counter from "@core-elements/counter/Counter.astro";
---
<Counter alignX="center" number={100} prefix="$" suffix="+" />---
blocks:
_component: building-blocks/core-elements/counter
number: 100
prefix: $
suffix: +
alignX: center
---Overview
Displays animated numeric values for key stats or figures, with support for prefix and suffix text, sizing, and alignment. For a unanimated version use Heading.
Properties
number number | default: 100
The number to count to.
prefix string | default: $
Text immediately before the number.
suffix string | default: M
Text immediately after the number.
alignX enum | default: start
The horizontal alignment of the counter.
Accepted values:
-
start -
center -
end
size enum | default: 2xl
The font size of the counter.
Accepted values:
-
xs -
sm -
md -
lg -
xl -
2xl -
3xl -
4xl
Examples
Horizontal Alignments
50000 +
---
import Counter from "@core-elements/counter/Counter.astro";
---
<Counter alignX="start" number={50000} prefix="null" suffix="+" />---
blocks:
_component: building-blocks/core-elements/counter
number: 50000
prefix: null
suffix: +
alignX: start
--- 50000 +
---
import Counter from "@core-elements/counter/Counter.astro";
---
<Counter alignX="center" number={50000} prefix="null" suffix="+" />---
blocks:
_component: building-blocks/core-elements/counter
number: 50000
prefix: null
suffix: +
alignX: center
--- 50000 +
---
import Counter from "@core-elements/counter/Counter.astro";
---
<Counter alignX="end" number={50000} prefix="null" suffix="+" />---
blocks:
_component: building-blocks/core-elements/counter
number: 50000
prefix: null
suffix: +
alignX: end
---Prefix
$ 1000
---
import Counter from "@core-elements/counter/Counter.astro";
---
<Counter alignX="center" number={1000} prefix="$" suffix="null" />---
blocks:
_component: building-blocks/core-elements/counter
number: 1000
prefix: $
suffix: null
alignX: center
---Suffix
1000 M
---
import Counter from "@core-elements/counter/Counter.astro";
---
<Counter alignX="center" number={1000} prefix="null" suffix="M" />---
blocks:
_component: building-blocks/core-elements/counter
number: 1000
prefix: null
suffix: M
alignX: center
---