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 string | default: 100
prefix string | default: $
suffix string | default: M
alignX string | default: start
size string | default: 2xl
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
---