Counter

Animated numerical stats that count up to the desired number.

View a live demo of this module.

Content

  • Add icon (FontAwesome or custom image)
  • Set maximum height of icon
  • Include number
  • Include comma separators in number
  • Include text before and/or after number (ex. $, %, k)
  • Include title

Styles

  • Set Dark Mode
  • Change text alignment
  • Change icon color (only applicable to FontAwesome icons)
  • Change count up speed
  • Edit module spacing

counter



Usage Guide

The Counter module is designed to showcase impressive statistics, achievements, or key performance indicators on your HubSpot pages through eye-catching animated number displays. When visitors scroll to this module, the numbers dynamically count up from zero to your specified value, creating an engaging visual effect that draws attention to important data points.

This module works particularly well on homepage hero sections, about pages, and landing pages where you want to highlight company milestones, customer counts, years in business, or project completions. For example, you might display “500+ Happy Clients” or “$2.5M Revenue Generated” to build credibility and social proof.

When adding the Counter module through the page editor’s drag-and-drop interface, consider grouping multiple counters together in a single row to create a comprehensive statistics section. The module’s responsive design ensures your animated counters look professional across all devices.

Pro tip: Use the text before/after fields strategically to add context to raw numbers. Instead of just displaying “250,” enhance it with ”$” before and “K+” after to show “$250K+” which immediately communicates value scale to visitors.

The count-up speed setting allows you to control the animation duration — slower speeds work well for larger numbers or when you want to create more dramatic effect, while faster speeds keep the animation snappy for smaller figures. Dark mode styling ensures the module integrates seamlessly with your site’s theme variations.

For maximum impact, pair counter modules with complementary content that explains what these numbers represent and why they matter to your audience. This combination of visual appeal and contextual information makes the Counter module an effective tool for converting visitors into leads.