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 the Counter Module
The Counter module is designed to showcase your organization’s impact through compelling animated statistics. This module is particularly effective for nonprofits displaying donations raised, people served, or programs delivered, and for educational institutions highlighting student enrollment, graduation rates, or community partnerships.
You’ll find this module most impactful on your homepage hero sections, dedicated impact or about pages, and annual report landing pages. The animation draws visitor attention as numbers count up from zero to your target value, creating an engaging visual experience that emphasizes your achievements.
Setting Up Your Counters
When you drag this module into the HubSpot page editor, start by adding your numerical data in the content tab. The module supports multiple counter blocks within a single instance, allowing you to display several statistics side-by-side. Consider grouping related metrics together, such as “Students Served,” “Programs Offered,” and “Years of Impact” for maximum storytelling effect.
Visual Integration Tips
The overlap functionality in the styles tab works exceptionally well when you want your counter statistics to bridge between sections with different background colors. For example, you can have counters overlap from a dark hero section onto a light content section below, creating visual continuity while maintaining readability.
Performance Considerations
Place counter modules strategically on pages where visitors are likely to scroll and view them. The animation triggers when the module enters the viewport, so positioning them too far down the page may reduce their effectiveness. For Impact theme users, the counter module pairs particularly well with the theme’s bold typography system and works seamlessly across all device sizes thanks to the responsive grid layout.