Counter

View a live demo of this module.
The following is a detailed listing of all the Content and Style fields available in this module.

Content

• Column [Repeater Group]
  • Icon [Common Module Fields]
  • Description [Rich Text]
  • Start Number [Number]
    The number the counter will start counting up from.
  • End Number _[Number]
    _The number the counter will end on.
  • Include comma and decimal separators [Boolean]
  • Prefix _[Text]
    _Include text before the number ex: $, £, JP¥.
  • Suffix _[Text]
    _Include text after the number ex: %, k.
  • Animation Speed [Number]
    Number of seconds for number to finish counting..
• Layout [Group]
  • Desktop, Tablet, Mobile [Responsive Groups]
    • Grid [Common Module Fields]
• Advanced [Common Module Fields]

Styles

• Dark Mode _[Boolean]
  _Check to use the Dark Mode colors set in the Theme Settings.
• Module [Group]
  • Module Styles [Common Module Fields]
• Text Alignment [Group]
  • Desktop, Tablet, Mobile [Responsive Alignment]
• Number [Group]
  • Font Styles [Common Module Fields]
• Prefix [Group]
  • Alignment _[Choice]
    _Choices: Default, Superscript, Subscript
  • Font Styles [Common Module Fields]
  • Margin Right [Number]
• Suffix [Group]
  • Alignment _[Choice]
    _Choices: Default, Superscript, Subscript
  • Font Styles [Common Module Fields]
  • Margin Left [Number]
• Description [Group]
  • Font Styles [Common Module Fields]

---

How to Use the Counter Module

The Counter module creates visually engaging animated statistics that immediately draw visitor attention to your most important numbers. When a visitor scrolls to this module on your page, the numbers dynamically count up from your specified starting point to the final value, creating an eye-catching effect that highlights key achievements, statistics, or milestones.

This module works exceptionally well on About pages for showcasing institutional achievements like years of operation or student enrollment numbers, homepage hero sections for highlighting key metrics, and program or service pages where you need to demonstrate success through data. Education institutions can display student graduation rates, course completion statistics, or campus facility numbers, while event organizers might showcase attendee counts, speaker numbers, or years of experience.

Setup tip: When adding this module through the HubSpot page editor’s drag-and-drop interface, consider your animation timing carefully. Setting the Animation Speed between 2-4 seconds typically provides the best user experience—fast enough to maintain engagement without being jarring. For larger numbers, slightly longer animation times feel more natural and allow visitors to follow the counting progression.

The repeater functionality lets you display multiple counters in a single module, which is perfect for creating dashboard-style stat sections. Use the responsive grid settings to ensure your counters stack appropriately on mobile devices—typically 1-2 counters per row on mobile and 3-4 on desktop works best for readability.

Content strategy tip: Pair each counter with descriptive text that provides context for your numbers. Raw statistics become much more compelling when visitors understand what the numbers represent and why they matter to your organization’s story or value proposition.