Overview
The Counter block displays key metrics and statistics with animated counting effects. Numbers smoothly animate from zero to their target value when visitors scroll the block into view, creating an engaging way to highlight impressive figures.
This is the Counter Block (Classic)
Clean animated stats with premium formatting.
0
Blocks Published
Updated Weekly
0
Teams Using TallCMS
Across 18 countries
0
days
Avg. Launch Time
From idea to live
0
%
Uptime
Last 12 months
This is the Counter Block (Radial)
Visualize progress with premium radial meters.
0
%
0%
Launch Readiness
Release checklist complete
0
%
0%
Content Migration
Pages imported
0
%
0%
Performance Score
Lighthouse average
⭐️
0
/5
0%
Customer Satisfaction
Last 30 days
This is the Counter Block (Gauge)
Turn core KPIs into premium, dashboard‑style gauges.
0
%
Uptime
Past 12 months
0
%
Conversion Rate
Free → Pro
0
hr
Support SLA
Avg. resolution time
Fields
| Field | Description |
|---|---|
| Heading | Optional section title above the counters |
| Subheading | Supporting text below the heading |
| Counters | Repeatable counter items |
| Columns | Grid layout: 2, 3, or 4 columns |
| Style | Visual style: Default, Cards, or Minimal |
| Number Color | Accent color for the numbers |
| Duration | Animation duration in milliseconds |
| Content Width | Control the maximum width of the content area |
| Animation | Entrance animation with optional stagger effect |
Counter Fields
Each counter includes:
| Field | Description |
|---|---|
| Value | The target number to count to (required) |
| Prefix | Text or symbol before the number (e.g., "$") |
| Suffix | Text or symbol after the number (e.g., "+", "%") |
| Label | Short label below the number (required) |
| Description | Optional longer description text |
Style Options
| Style | Description |
|---|---|
| Default | Clean counters with subtle styling |
| Cards | Each counter in its own card container |
| Minimal | Simple, borderless appearance |
Color Options
Numbers can use any DaisyUI theme color:
- Primary
- Secondary
- Accent
- Neutral
- Info
- Success
- Warning
- Error
Tips
- Keep counter values reasonable (extremely large numbers may lose impact)
- Use prefixes and suffixes to add context ("$", "K", "+", "%")
- Stagger animation creates a cascading effect across counters
- Animation duration of 2000ms (2 seconds) works well for most cases
Comments
No comments yet. Be the first to share your thoughts!