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.
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