Studio Nope Get the module →
HubSpot CMS Module

Your numbers, designed.

Six layouts for results, KPIs and trust numbers. A real section, built to look intentional on a homepage, a results page or above a CTA — not another counter widget.

Get it on the HubSpot Marketplace See the layouts
$14.99 No jQuery Responsive Fully styled from the editor

Anyone can make a number count up. This makes a section that looks like a designer built it.


01 — Grid

The standard “by the numbers” block

Configurable columns per breakpoint. The default homepage stats block. Shown here with icons.

By the numbers

Results that compound

The metrics behind a platform teams actually keep using.

  • 99.9%
    Uptime
    rolling 12 months
  • $2.4M
    Pipeline influenced
    per customer, year one
  • 4.9/5
    Average rating
    1,200+ reviews
  • 10k+
    Teams onboarded
    in 40 countries
Grid · 4-up · with icons · count-up on
02 — Inline strip

One row of stats with dividers

A single horizontal band, ideal under a hero or above a CTA. Shown here without icons.

  • 12,000+
    Customers
  • 98%
    Renewal rate
  • $180M
    ARR managed
  • 24/7
    Support
Inline strip · dark band · Space Grotesk · line dividers · “24/7” renders as-is
03 — Split: statement + stats

Context on one side, numbers on the other

A heading and paragraph paired with a compact grid — for “our results” sections that need a sentence of context.

Our results

Built for teams that measure everything

We don’t ship vanity metrics. Every number here is pulled from real B2B accounts and verified quarterly.

  • +182%
    Qualified pipeline
  • −63%
    Time to launch
  • 4.2×
    First-year ROI
  • 92
    NPS
Split · cream + Fraunces serif + terracotta · 2×2 stats · collapses to stacked on mobile
04 — Stacked

Large rows, label and value aligned

Each stat is a full-width row divided by a hairline — confident and editorial. Great for a focused results page.

  • Pipeline influenced per customer
    $2.4M
  • Platform uptime, measured
    99.99%
  • Median time to first value
    11 days
Stacked · Space Grotesk · huge value left, label right · hairline rows
05 — Cards

Each stat in its own card

Contained cards with border and shadow for a more separated, dashboard-like look. With icons.

Trusted at scale

The numbers, boxed up

  • 500+
    Integrations
    native, no code
  • 47ms
    Median response
    p50, global edge
  • SOC 2
    Type II certified
    audited annually
Cards · 3-up · DM Sans · navy accent · white cards on slate · with icons
06 — Feature + stat

A benefit line, backed by a number

Pairs a short feature with its supporting metric — for product and results pages where the number needs a claim.

  • Marketing that fills the funnel

    +182%
    qualified pipeline in 6 months
  • A site the whole team can edit

    −63%
    time to publish a new page
  • Customers who actually stay

    4.9/5
    across 1,200+ reviews
Feature + stat · indigo gradient · Poppins · benefit line above each number

Style

Same module. Three themes. Zero custom CSS.

Every color, font, weight, divider, card and background is a field. Here is the same grid as light, dark and branded.

  • 99.9%
    Uptime
  • $2.4M
    Pipeline
  • 4.9/5
    Rating
  • 10k+
    Teams
  • 99.9%
    Uptime
  • $2.4M
    Pipeline
  • 4.9/5
    Rating
  • 10k+
    Teams
  • 99.9%
    Uptime
  • $2.4M
    Pipeline
  • 4.9/5
    Rating
  • 10k+
    Teams
Light · Dark · Branded gradient — identical markup, different fields

What’s inside

A section, not a widget

6layout presets
Textvalues — “4.9/5”, “24/7” all work
Optionalcount-up, off by default
Iconsoptional, any FontAwesome glyph
Solid / gradient / imagebackgrounds with overlay
WCAG AAaccessible defaults, real text
< 4KBvanilla JS, no jQuery
Responsivecolumns per breakpoint
Zerodependencies, no CDN

FAQ

Questions, answered

Is this just an animated counter?

No. It’s a layout-driven section with six presets. The count-up is optional and off by default — the layouts are the product.

Can values be non-numeric, like “4.9/5” or “24/7”?

Yes. Values are plain text, so anything renders. With count-up on, the numeric part animates and anything ambiguous renders instantly, never broken.

Does it need HubDB or a data source?

No. You type the values straight into the editor. No HubDB, no serverless, no CRM fields.

Can the background be an image?

Yes — solid, gradient or image with a color overlay, all from the Style tab.

Is it accessible?

Yes. Stats are a real list, value and label are associated, the final number is always present for screen readers, and count-up respects reduced-motion.

How is it different from Social Proof or Charts Pro?

Those are trust badges and graphs. This is a designed stats section — numbers presented as a structural block.


Make your numbers look intentional.

Six layouts, fully styled from the editor, on any HubSpot theme. No code, no dependencies.

Get it on the HubSpot Marketplace

Overview

Stats Section Pro is a structural stats / KPI section for HubSpot CMS. It presents a set of metrics as a designed block with six layout presets, so it looks intentional on a homepage, a results or case-study page, an about page, or above a CTA. Values are plain text, the count-up animation is optional and off by default, and every visual property is a Style-tab field. Dependency-free vanilla JavaScript, inline SVG — no jQuery, no library, no CDN.


Six layouts

Every preset is built to look right with 2, 3 or 6 items, with or without icons.


Content

Each stat is a repeater item: a value (text — 99.9%, $2.4M, 10k+, 4.9/5, 24/7 all work), a label, an optional sub-label, an optional feature line (for the feature layout), an optional icon, and an optional CTA link. Section-level fields add an eyebrow, a heading (H2 or H3) and sub-text for the split and statement presets, and you choose whether the value sits over the label or under it.


Count-up animation (optional)

Off by default. When on, the numeric part of each value animates on scroll into view via IntersectionObserver, preserving prefixes, suffixes, commas and decimals ($2.4M, 1,200+). Ambiguous or non-numeric values (4.9/5, 24/7) render instantly and never break. The real final value is always in the DOM for assistive tech, and the whole effect is disabled when the visitor has prefers-reduced-motion set. It is a minor feature, not the point.


Styled entirely from the editor


Responsive & accessible


Zero dependencies

Total module JavaScript is a few hundred bytes of vanilla code — no jQuery, no charting library, no external CDN. SVG icons are inline, classes are scoped per instance so multiple sections coexist on one page, and there is no HubDB, serverless or CRM dependency. Drop it on any theme, or none.