Stat Counter
A section showcasing up to four key statistics with animated counting numbers, available in default row and card grid layouts.
What It Does
The Stat Counter module displays up to four key metrics or statistics, each with an animated counting effect that triggers when the section enters the viewport. An optional section title sits above the stats. Two layout options are available: a default horizontal row and a card grid arrangement. A background layer can be applied to the entire section.
Best Used For
- Company metrics or milestones (years in business, clients served, projects delivered)
- Product performance highlights (uptime, speed, accuracy)
- Impact statements on about pages or landing pages
- Proof-of-concept sections that establish credibility with numbers
Variants
Default
Statistics are displayed in a horizontal row, each with a large animated number and label. Clean and impactful.
Best for: Most stat showcase sections -- high visual impact with minimal surrounding content
Card Grid
Each statistic is placed inside its own card, creating a grid layout. Adds visual separation between each metric.
Best for: Pages that need a more structured or boxed presentation of data
Fields Reference
| Field | Type | Required | Description |
|---|---|---|---|
| layout | enumeration | No | Display style -- Default (horizontal row) or Card Grid |
| title | component | No | Section heading displayed above the statistics, with configurable text styling |
| counter | component | Yes | Statistic items to display (1-4); each has a number, label, optional suffix, optional per-card background colour, and animation speed |
| background | component | No | Background colour or image for the entire section |
Tips for Great Results
- Use round or memorable numbers -- "10,000+ customers" reads better than "9,847 customers".
- Limit to 3 or 4 statistics. A single row of 4 numbers creates strong visual symmetry.
- Choose a contrasting background colour to make the counting numbers stand out.
- Match the statistic labels to the audience -- use business-friendly terms, not internal jargon.
Supported Languages
Fully bilingual -- all text fields support both English and Thai content.