Counter
Animated numerical stats that count up to the desired number.
View a live demo of this module.
Content
- Include FontAwesome or custom icon above stat
- Customize number with thousand separators, suffix and prefix text, and animation speed
Styles
- Set Dark Mode
- Set module to overlap section above or below it (only visible if section module is in and section module is overlapping have differing backgrounds)
- Add a background to module (color, gradient, or image)
- Edit module padding
- Change text alignment
- Change max height of icons
- Change color of icons (only applicable to FontAwesome icons)
How to Use This Module
The Counter module is perfect for showcasing impressive statistics, achievements, or key performance indicators on your SaaS or technology website. You’ll find it particularly effective on landing pages, about pages, and dedicated statistics sections where you want to draw attention to compelling numbers like “10,000+ satisfied customers” or “99.9% uptime guarantee.”
When you drag the Counter module onto your page in the HubSpot page editor, you can create eye-catching animated counters that automatically count up from zero to your target number when visitors scroll to that section. This animation effect helps capture attention and makes your statistics feel more dynamic and engaging than static text.
Strategic placement works best when you position Counter modules in groups of three or four to create compelling statistics sections. Consider placing them after your hero section on landing pages, or use them to break up longer content sections with impactful data points. The module’s overlap functionality allows you to create visually interesting layouts where counters appear to float between different colored sections.
For optimal performance, keep your counter numbers meaningful and relevant to your audience. Round numbers like “500+” or “2.5K” often work better than precise figures like “2,847” because they’re easier to process quickly. The animation speed customization lets you match the counting effect to your site’s overall pace – slower animations feel more dramatic, while faster ones maintain momentum.
Dark mode compatibility ensures your counters remain visible and professional across all theme variations. When using custom icons instead of FontAwesome options, make sure they’re optimized for web display and maintain clarity at the maximum height you’ve set in the module styles.