Counter¶
A responsive grid of animated stat counters - each with an optional icon, an animate-on-scroll number with optional prefix or suffix, a title, and an optional description. Best for: "By the numbers" stat blocks, KPI and achievement bars, results and impact sections, milestone counts.
📷 Hero image
Target file: assets/img/counter/hero.webp
A row of three or four animated stat counters on a Light background, each showing a large bold number with a suffix such as "+" or "%", a short title beneath it, and an optional one-line description. Render the numbers in the Primary color so the key figures stand out as a "by the numbers" band. Keep the columns evenly spaced with generous whitespace. Captured at desktop width.
At a glance¶
Stats Grid Animated
- What it does: renders a column-based grid (set per breakpoint) of counter items. Each number can count up when scrolled into view, carry a prefix or suffix, and use a token color, custom color, or gradient text fill.
- Best used for: a homepage or about-page band that puts your key numbers front and center - customers served, revenue, uptime, awards.
- Not the right fit if: you need feature descriptions with icons rather than numbers (use Features), or a wall of client logos (use Logo Grid).
- 🔗 Live demo: (add demo link)
Add it to your page¶
- In the HubSpot page editor, click Add and search for Counter.
- Drag it onto your page, often as a stats band between sections.
- Open Click to update content › Counters and set each item's Number, Title, and (optional) Description.
- (Optional) Turn on Add prefix to number or Add suffix to number for symbols like
$,+, or%. - Choose an icon source per item under Choose icon (library / upload / SVG).
- In the Style tab, set Columns per breakpoint and pick a look under Card.
Design recipes¶
Each recipe is a look plus the exact fields to reproduce it.
Clean numbers with titles, no card.
📷 Result
Target file: recipe-simple-stats-grid.webp
A clean row of large bold numbers each with a short title below, no card boxes, on a Light background. Show four evenly spaced stats across the width.
| Field | Set to |
|---|---|
| Card › Make a card | off |
| Content › Applied counter effect on number | on |
| Number › Show number as | h5 |
| Layout › Columns | 4 / 2 / 1 |
Each stat in a bordered, shadowed card.
📷 Result
Target file: recipe-card-style.webp
Each stat sitting inside its own bordered, rounded card with a light shadow, arranged in a tidy row on a Light background.
| Field | Set to |
|---|---|
| Card › Make a card | on |
| Card › Border › Show border | on |
| Card › Shadow › Card shadow | light-shadow |
| Card › Round corner › Card round corner | round-m |
Numbers filled with a brand gradient.
📷 Result
Target file: recipe-gradient-numbers.webp
A row of stats where each large bold number is filled with a brand gradient blending the Primary and Secondary colors, with plain titles below on a Light background.
| Field | Set to |
|---|---|
| Number › Color | custom_gradient |
| Number › Make font bold | on |
| Content › Applied counter effect on number | on |
A colored icon shape sits above each number.
📷 Result
Target file: recipe-icon-led-counters.webp
Each stat topped by a circular icon badge filled in the Primary color, with the number and title stacked beneath it. Show the icon-number-title stack repeating across the row.
| Field | Set to |
|---|---|
| Counter item › Choose icon | hubspot_icon_library |
| Icon › Icon background | bg-primary |
| Icon › Roundness of background | round-100 |
| Icon › Padding around icon [desktop] | 12 |
"I want to..." quick reference¶
| Goal | Setting |
|---|---|
| Numbers count up on scroll | Content › Applied counter effect on number (on by default) |
| Slow down or speed up the count | Content › Speed of counter effect (ms; larger is slower) |
| Show a % or + after the number | Counter item › Add suffix to number + Suffix |
| Show a currency symbol before | Counter item › Add prefix to number + Prefix |
| Gradient-filled numbers | Number › Color = custom_gradient |
| Cards with shadow | Card › Make a card + Shadow |
| Add an icon above the number | Counter item › Choose icon (library / upload / SVG) |
| Use a custom SVG icon | Choose icon = Add svg code |
| Hide a single counter | Leave its Number empty |
| Custom-size hero numbers | Number › Show number as = custom_font_size (desktop / tablet / mobile) |
| 4-up desktop / 2-up tablet / 1-up mobile | Layout › Columns = 4 / 2 / 1 |
| Hide the description on an item | Counter item › turn off Show description |
Field reference¶
The editor is split into a Content tab and a Style tab. Groups below match the HubSpot editor. (188 fields total - expand each group as needed.)
Content tab¶
Section background settings
| Field | Type | Options | Default |
|---|---|---|---|
| Type | choice | none / color / gradient / image / video | none |
| Upload background image | image | - | - |
| Video | file | - | - |
Click to update content
Counters (repeater) - per item:
| Field | Type | Default |
|---|---|---|
| Choose icon | choice (no_icon / hubspot_icon_library / upload_icon / add_svg_code) | no_icon |
| Library icon | icon | chart-line |
| Number | number | 100 (leave empty to hide) |
| Add suffix to number / Suffix | boolean / text | off |
| Add prefix to number / Prefix | boolean / text | off |
| Title | text | Title |
| Show description / Description | boolean / richtext | on |
Section-level: Applied counter effect on number (boolean, on) and Speed of counter effect (number, 3000 ms - larger counts slower).
Drag to section name
Section name (text): sets the section ID so scroll-to-section buttons elsewhere can link here.
Style tab¶
Color scheme
| Field | Options | Default |
|---|---|---|
| Color scheme | light / dark | light |
Drives the section's surface and text tokens. Set the background Type to none (shown as "Default (scheme)") to let the scheme supply the background colour.
Section background settings
Background color (bg-primary to bg-color-3, default bg-white) or gradient (bg-gradient-1 to 3). Image / video overlay style (none / bg-overlay-1 to 6) and position. Optional blur, parallax (scale / speed), and up to two radial glows each with color (token or custom), position (9 spots), size, and opacity.
Section divider settings
Divider type: none / shape / border / shadow.
- Border divider: from top / bottom / both, width, color (default
--tertiary). - Shadow divider: regular / light / dark / custom with x / y / blur / spread / color.
- Shape divider: 25 shapes, top / bottom / both, flip / invert, color or gradient, responsive heights.
Section spacing settings
| Field | Options | Default |
|---|---|---|
| Top | top-y-0 to top-4xl | top-l |
| Bottom | bottom-y-0 to bottom-4xl | bottom-l |
| Left | left-x-0 / left-m / left-l / left-xl | left-m |
| Right | right-x-0 / right-m / right-l / right-xl | right-m |
Top and Bottom also accept custom, which reveals Custom top / Custom bottom number fields for desktop, tablet, and mobile (defaults 80 / 60 / 40).
Layout settings
| Field | Type | Default |
|---|---|---|
| Columns [large / medium / small] | number | 3 / 2 / 1 |
| Gap between column [large / medium / small] | number | 24 / 24 / 24 |
Plus Section wrapper container and Inner content container (default / full-width / custom per breakpoint + alignment).
Card
| Field | Type | Default |
|---|---|---|
| Content alignment | choice (left / right / center) | left |
| Make a card | boolean | off |
| Background | choice (none / tokens / gradient / custom) | none |
| Show border | boolean | off |
| Card padding [large / medium / small] | spacing | 24px all |
| Card shadow | choice | shadow-none |
| Card round corner | choice (round-0 to round-xxl) | round-s |
Background also supports an optional backdrop blur (glass effect) with adjustable radius.
Preset Settings - Icon
| Field | Type | Default |
|---|---|---|
| Icon size [desktop / mobile] | number | 34 / 28 |
| Icon color | choice (none / text tokens) | none |
| Padding around icon [desktop / mobile] | number | 0 / 0 |
| Icon background | choice (none / tokens / gradient / custom) | none |
| Spacing under element | choice (sb-0 to sb-4xl) | sb-l |
| Roundness of background | choice (round-0 to round-100) | round-100 |
Preset Settings - Number
| Field | Type | Default |
|---|---|---|
| Show number as | choice (custom_font_size / h1 to h6) | h5 |
| Font size [desktop / tablet / mobile] | number | 72 / 52 / 36 |
| Change the font family | choice (font-primary / font-secondary / font-body) | font-primary |
| Color | choice (tokens / default / custom / gradient) | default |
| Spacing under element | choice (sb-0 to sb-4xl) | sb-l |
| Spacing between suffix/prefix and number | number | 0 |
| Make font bold | boolean | on |
Preset Settings - Title & Description
Title: show as h1 to h6 / typo-1 / typo-2 / p (default h5), color, spacing under element, text transform, optional bold.
Description: style (typo-1 / typo-2 / default), color, spacing under element (default sb-m).
Developer use only
Add custom CSS here: per-module CSS injection field.
Tips & gotchas¶
The count-up only runs live
Applied counter effect on number animates when the counter scrolls into view on the published page. It does not animate in the editor, so preview the live page to see it.
Empty number hides the counter
Leaving a counter item's Number empty removes that item from the grid. Use it to hide a stat quickly, but remember an empty number will not show at all.
Prefix/suffix gap needs a prefix or suffix
Spacing between suffix/prefix and number has no visible effect unless the item actually has a prefix or suffix set.
Related modules¶
- Features: icon-led feature cards when each item needs a title and description instead of a number.
- Logo Grid: a wall of client logos to pair with your stats.
- Steps: a numbered process flow when the numbers are ordered stages, not stats.
- Section Title: a standalone heading block to introduce the counter band.