Counter
Animated numerical stats that count up to the desired number.
View a live demo of this module.
Content
- Include a custom or FontAwesome icon above the stat
- Customize the number with a suffix, prefix, commas, and decimals
- Change the speed of the animation
Styles
- Set Dark Mode
- Edit background and padding
- Have the module overlap the section above or below it (only visible if the module’s and overlapped section have differing backgrounds)
- Change max height of icons
- Change color of FontAwesome icons
- Change text alignment
How to Use the Counter Module
The Counter module is designed to showcase key business metrics, achievements, or statistics in an engaging, animated format that immediately captures visitor attention. This module works particularly well on homepage hero sections, about pages, and dedicated stats or achievements pages where you want to highlight impressive numbers like years in business, customers served, or revenue milestones.
When you drag the Counter module from the HubSpot page editor sidebar onto your page, you’ll notice the animation triggers as the numbers come into view during scrolling. This scroll-triggered animation ensures maximum impact without overwhelming visitors when the page first loads. The counting animation speed can be adjusted to match your brand’s personality—slower speeds create more dramatic emphasis while faster animations feel more energetic.
Content Strategy Tips: For maximum effectiveness, use round numbers that are easy to comprehend at a glance. Numbers like “500+” or “2.5M” work better than precise figures like “2,547,832” because visitors can quickly process the scale of your achievement. The prefix and suffix options let you add currency symbols, percentage signs, or descriptive text like “customers served” directly within the module.
Design Considerations: The Framework theme’s counter module includes smart responsive behavior that automatically adjusts text size and spacing on mobile devices. When selecting icons, choose symbols that immediately reinforce your statistic’s meaning—dollar signs for revenue, user icons for customer counts, or trophy symbols for awards. The dark mode toggle ensures your counters maintain visual impact regardless of your page’s color scheme.
Position multiple Counter modules side-by-side in the same section to create compelling comparison displays or comprehensive achievement showcases that build credibility with potential customers.