Counter Block
Display animated counting numbers perfect for statistics, achievements, and metrics that engage visitors.
What is the Counter Block?
Part of the Counter Group system:
- Counter Group – parent container
- Counter blocks – individual counting numbers
Key Features
- Animated counting on scroll
- Prefix and suffix support (dollar sign, percent, etc.)
- Decimal place control
- Duration and easing options
- Optional icons above numbers
- Label below numbers
- Customizable colors and typography
How to Use
- Insert Counter Group block
- Add Counter blocks inside (3-4 recommended)
- Set end value for each counter
- Add prefix/suffix if needed (e.g., dollar sign, percent)
- Add label below number
- Configure animation settings
Counter Settings
Values:
- Start Value – Initial number (default: 0)
- End Value – Target number to count to
- Prefix – Text before number (e.g., dollar sign)
- Suffix – Text after number (e.g., percent, plus)
- Decimals – Decimal places (0-2)
Animation:
- Duration – How long counting takes (1-5 seconds)
- Easing – Animation curve (linear, ease-out, etc.)
- Trigger – On scroll into view
Styling:
- Icon – Optional icon above number
- Label – Description below number
- Colors – Number and label colors
- Typography – Font size and weight
Common Use Cases
Business Statistics
- 1000+ Happy Customers
- 50+ Team Members
- 99% Satisfaction Rate
Project Metrics
- 500+ Projects Completed
- 15 Years Experience
- 24/7 Support
Product Features
- 100GB Storage
- 50 User Accounts
- Unlimited Bandwidth
Best Practices
- Use 3-4 counters maximum per group
- Keep numbers realistic and impressive
- Add clear labels for context
- Use prefix/suffix for units (percent, dollars)
- Set appropriate animation duration (2-3 seconds)
- Test on mobile for readability
Example Configurations
Percentage: Start: 0, End: 99, Suffix: percent
Currency: Start: 0, End: 1000, Prefix: dollar sign
Rating: Start: 0, End: 4.9, Decimals: 1, Suffix: /5
Count: Start: 0, End: 500, Suffix: +