Docs / Data & Pricing / Numbers

Numbers

A responsive grid of animated count-up cards for headline metrics, stats, and KPIs. Drop in 1-12 numbers, each with optional text above, below, left, or right, and let them animate when they scroll into view.

View live preview → Jump to settings ↓

→ Start Here

The most-used controls for the Numbers module: heading toggle and alignment, grid columns, card wrap mode, and the animation behavior.

Show Section Heading

Toggle Default: On

Controls whether the section heading area (badge, title, description) appears above the grid of number cards. Turn it off when the row above already introduces the section and you want the numbers to stand on their own.

Heading Alignment (Desktop)

Select Default: Center Shown when: Show Section Heading is on

Text alignment for the heading area on desktop (993px and above).

  • left Left
  • center Center (default)
  • right Right

Heading Alignment (Mobile)

Select Default: Center Shown when: Show Section Heading is on

Text alignment for the heading area on mobile devices (below 768px). Set independently from desktop so editors can center on phones while keeping desktop left-aligned.

  • left Left
  • center Center (default)
  • right Right

Heading Max Width

Slider (0-1920px, step 10) Default: 900px Shown when: Show Section Heading is on

Caps the width of the heading block so long titles or descriptions wrap into a comfortable measure instead of stretching edge-to-edge. 900px is a readable max for a 2-3 line H2 plus a short paragraph.

Cards Per Row (Desktop)

Slider (1-6, step 1) Default: 3

How many number cards sit in a single row on desktop. The grid wraps automatically when you add more cards than fit in a row. On tablet and mobile the grid collapses to fewer columns regardless of this setting.

Card Wrap Mode

Select Default: Card

Controls how the cards are visually wrapped. None leaves each number unstyled; Card wraps each number in its own styled tile; Wrap Row wraps the whole grid in a single styled container (the "Card Wrap Style" group in Styles only appears in this mode).

  • none None (no card styling)
  • card Card (individual styled card per number, default)
  • row Wrap Row (one card around the entire grid)

Count Up Only Once

Toggle Default: On

When on, the count-up animation plays the first time the cards scroll into view and the numbers stay at their final value. When off, the animation re-runs every time the cards scroll back into view.

/// Content

The visible copy for the section: heading text, the entrance animation, and the repeater of individual number cards.

Section Heading

Rich text Default: blox Theme / Numbers Module / one-line description Shown when: Show Section Heading is on

The badge + title + description block above the number grid. Default markup is <h6> (rendered as a pill badge if Badge Style is enabled), <h2> for the title, and <p> for the description. Keep the h6 short (2-4 words) so the badge pill stays compact.

Fade-In Animation

Select Default: None

Entrance animation for the section when it scrolls into view. Combine with the count-up to layer effects: the cards slide/fade in, then the numbers tick up.

  • none None (default)
  • fade-up Fade Up
  • fade-down Fade Down
  • fade-left Fade from Left
  • fade-right Fade from Right
  • fade Fade Only

Reduced motion: When a visitor has prefers-reduced-motion: reduce, the entrance fade is skipped and the section renders fully visible.

Number Cards (Repeater)

Group / repeater (min 1, max 12) Default: 3 cards (Projects Completed, Client Satisfaction, Years of Experience)

The list of number cards rendered in the grid. Add, remove, or reorder cards using the editor's repeater controls. Each card has the following sub-fields:

Card Label

Text (single line) Default: empty

Internal label used by the editor's repeater UI to identify each card in the list. Not rendered on the page. Use a short descriptor like "Projects" or "Card 1".

Number

Number (text input, step 1) Default: 1234

The target number that the count-up animation lands on. Supports integers and decimals (the decimal display is controlled by the Number Format group in Styles).

Count Up Duration

Slider (1-15 seconds, step 1) Default: 3 seconds

How long the count-up takes to reach the target number. Shorter durations feel snappy; longer ones feel theatrical. Set per card so big numbers can take longer than small ones.

Text Above Number

Rich text Default: empty

Optional rich-text content rendered above the number. Use for a small eyebrow label like "Since 2010" or a short headline above the stat.

Text Left of Number

Text (single line) Default: empty

Inline text rendered immediately to the left of the number. Use for currency or unit prefixes like $, ~, or >.

Text Right of Number

Text (single line) Default: empty (seeded cards use "+" or "%")

Inline text rendered immediately to the right of the number. Use for suffixes like +, %, K, M, or unit labels.

Text Below Number

Rich text Default: empty (seeded cards use a single paragraph like "Projects Completed")

Rich-text caption rendered below the number. This is the primary label for the stat (e.g. "Projects Completed", "Client Satisfaction").

Card Background Color

Color Default: #FFFFFF @ 0% opacity (transparent)

Per-card background color. Default is transparent so cards inherit the row background; set a solid color to give a single card a different fill from the rest.

Apply Number Formatting

Toggle Default: On

When on, the number uses the thousand separator and decimal settings from the Number Format group in Styles (e.g. 1,234 or 1.234). Turn off for a raw number with no formatting (e.g. for years like 2024).

Custom ID & Classes (code)

Developer hooks for adding custom CSS or JS targeting. Leave blank for most pages.

CSS ID

Text Default: empty

Sets an id="..." on the section element. Must be unique on the page. Useful for anchor links (e.g. #stats) and JS targeting.

CSS Class

Text Default: empty

Additional classes (space-separated) appended to the section element's class list. Useful when applying page-specific overrides via the page's custom CSS.

Style Settings

Everything visual: card style, optional row wrap, number formatting, internal card padding, the badge, section dividers, and the wrapping row's background, width, and spacing.

/// Card Style

Typography and chrome for the number itself and (when Card Wrap Mode is "Card") the per-number tile.

Number Color

Color Default: #1a1a1a @ 100%

Color of the count-up number itself. Pair with a contrasting card background or row background for legibility.

Number Font Size

Slider (16-120px, step 2) Default: 48px

Font size of the count-up number. Push to 72-96px for hero-style stats; keep around 40-56px when several cards share a row.

Number Font Weight

Select Default: Bold (700)

Font weight of the count-up number.

  • 400 Regular
  • 500 Medium
  • 600 Semi-Bold
  • 700 Bold (default)
  • 800 Extra Bold
  • 900 Black

Left/Right Text Color

Color Default: #1a1a1a @ 100%

Color of the inline text rendered to the left and right of the number (the Text Left and Text Right per-card fields). Set independently from the main number color so prefixes/suffixes can read softer.

Left/Right Text Size

Slider (10-60px, step 1) Default: 24px

Font size of the inline left/right text. Usually 40-60% of the main number size so the digits stay dominant.

Content Alignment

Select Default: Center

Horizontal alignment of the content inside each card (text above, the number row, text below).

  • flex-start Left
  • center Center (default)
  • flex-end Right

Card Border Radius

Slider (0-50px, step 1) Default: 12px

Rounded corners on each card. 12px matches the theme's default tile rounding; 0 for hard corners; 24+ for very soft, pill-like edges.

Card Border

Border (HubSpot border control) Default: none

HubSpot's native border control (color, width, style). Custom per-side borders are disabled; the same border applies to all four sides.

Card Shadow Color

Color Default: #000000 @ 5% opacity

Color and opacity of the drop shadow on each card. Set opacity to 0 to remove the shadow entirely. Stay under 15% for a tasteful look.

Card Gap

Slider (0-60px, step 2) Default: 20px Shown when: Card Wrap Mode is "Card"

Horizontal and vertical gap between cards in the grid. Only applies in Card wrap mode; the Wrap Row mode uses its own internal padding instead.

/// Card Wrap Style

Background, border, and shadow for the single container that wraps the entire grid. Only appears when Card Wrap Mode is set to "Wrap Row".

Wrap Background

Color Default: #fafafa @ 100%

Background color of the wrap container that surrounds the whole grid.

Wrap Border Radius

Slider (0-40px, step 2) Default: 12px

Rounded corners on the wrap container.

Wrap Padding

Slider (0-60px, step 1) Default: 30px

Padding inside the wrap container (between the wrap edge and the grid of numbers).

Border (Wrap)

Toggle Default: On

Master switch for the wrap container's border. Reveals Border Color and Border Width when on.

Border Color (Wrap)

Color Default: #231f20 @ 8% opacity Shown when: Border (Wrap) is on

Color of the wrap container's border.

Border Width (Wrap)

Slider (1-5px, step 1) Default: 1px Shown when: Border (Wrap) is on

Width of the wrap container's border.

Shadow (Wrap)

Toggle Default: On

Master switch for the wrap container's drop shadow. Reveals Shadow Color when on.

Shadow Color (Wrap)

Color Default: #000000 @ 5% opacity Shown when: Shadow (Wrap) is on

Color and opacity of the wrap container's drop shadow.

/// Number Format

Global formatting applied to every card whose "Apply Number Formatting" toggle is on.

Decimals Shown

Slider (0-10, step 1) Default: 0

How many digits after the decimal point to render. Use 0 for integer stats (downloads, projects); 1-2 for percentages or ratings.

Decimal Sign

Select Default: . (period)

Character used between the integer and decimal parts of the number. Pick comma for European-style notation.

  • . Period (default, US/UK)
  • , Comma (most of continental Europe)

Thousand Separator

Select Default: , (comma)

Character used to group thousands (e.g. 1,234,567). Pick whichever convention matches the rest of the page.

  • , Comma (default, US/UK)
  • . Period (continental Europe)
  • Space (SI / metric convention)

/// Card Spacing

Per-breakpoint padding inside each card (the space between the card edge and the number/text content).

Desktop

Spacing (top/right/bottom/left padding) Default: 25px on all four sides

Internal padding inside each card on desktop.

Tablet

Spacing (top/right/bottom/left padding) Default: 25px on all four sides

Internal padding inside each card on tablet.

Mobile

Spacing (top/right/bottom/left padding) Default: 20px top, 20px bottom, 15px left, 15px right

Internal padding inside each card on mobile. Tighter sides give the number more horizontal room on narrow screens.

/// Badge Style

Show Badge Styling

Toggle Default: On

Styles the <h6> inside the section heading as a pill badge instead of a plain heading. The badge color/border are pulled from the chosen badge tier and the theme's badge settings.

Badge Style

Select Default: Primary Shown when: Show Badge Styling is on

Picks the badge tier. Colors are configured in Theme Settings > Badge.

  • badge-primary Primary (default)
  • badge-secondary Secondary
  • badge-three Three
  • badge-four Four
  • badge-five Five
  • badge-six Six

/// Section Dividers

Decorative SVG shapes at the top and/or bottom of the section, useful for blending into the rows above or below.

Top Divider

Select Default: None

Decorative shape at the top of the section. Choose a shape and the related color/height controls appear.

  • none None (default)
  • wave-1 Wave 1 (Gentle)
  • wave-2 Wave 2 (Sharp)
  • wave-3 Wave 3 (Multi)
  • wave-4 Wave 4 (Smooth)
  • wave-5 Wave 5 (Layered)
  • tilt Tilt (Angled)
  • curve Curve (Arc)
  • triangle Triangle

Top Divider Color

Color Default: #ffffff @ 100% Shown when: Top Divider is any shape (not None)

Set this to match the background color of the section above so the divider blends into it cleanly.

Top Divider Height

Slider (20-200px, step 10) Default: 60px Shown when: Top Divider is wave-1 through wave-5, curve, or triangle

Height of the top divider shape.

Angle Height (Top)

Slider (0-300px, step 10) Default: 100px Shown when: Top Divider is "Tilt"

Height of the angled (tilt) top divider. Separate from the wave/curve height because the tilt shape behaves differently.

Flip Top Divider

Toggle Default: Off Shown when: Top Divider is any shape (not None)

Mirrors the top divider shape horizontally so waves curve the opposite way.

Bottom Divider

Select Default: None

Decorative shape at the bottom of the section. Same 9 shape options as the Top Divider.

  • none None (default)
  • wave-1 Wave 1 (Gentle)
  • wave-2 Wave 2 (Sharp)
  • wave-3 Wave 3 (Multi)
  • wave-4 Wave 4 (Smooth)
  • wave-5 Wave 5 (Layered)
  • tilt Tilt (Angled)
  • curve Curve (Arc)
  • triangle Triangle

Bottom Divider Color

Color Default: #ffffff @ 100% Shown when: Bottom Divider is any shape (not None)

Set this to match the background color of the section below so the divider blends into it cleanly.

Bottom Divider Height

Slider (20-200px, step 10) Default: 60px Shown when: Bottom Divider is wave-1 through wave-5, curve, or triangle

Height of the bottom divider shape.

Angle Height (Bottom)

Slider (0-300px, step 10) Default: 100px Shown when: Bottom Divider is "Tilt"

Height of the angled (tilt) bottom divider.

Flip Bottom Divider

Toggle Default: Off Shown when: Bottom Divider is any shape (not None)

Mirrors the bottom divider shape horizontally.

Divider Under Content

Toggle Default: Off Shown when: Bottom Divider is any shape (not None)

Puts the bottom divider behind content so any buttons or links that overlap it remain clickable. Leave off for a divider that sits visually above content.

/// Row Settings

The wrapping row's background (color, gradient, image), content width, and per-breakpoint padding around the entire section.

Background (Image, Video, Color, etc.)

Group Default: None

The Background Type dropdown drives which sub-controls appear:

  • none No background (default; section inherits the page bg)
  • color Solid Color, reveals Background Color picker
  • gradient Gradient, reveals Top Color, Bottom Color, and 8 direction options
  • image Image, reveals Background Image, Size (cover/contain/original), Position (5-point), Overlay toggle, Overlay Color, Blur toggle, Blur amount

Note: The group label includes "Video" but the current build does not include a video background option; the Background Type select only exposes none/color/gradient/image.

Size (Content Width)

Group Default: Standard
  • standard Standard (uses theme's standard container width, set in Theme Settings > Layout)
  • slim Slim (narrower variant, also set in Theme Settings)
  • custom Custom, reveals a Custom Width number input (600-1920px, default 1200)

Spacing (Around Content)

Group (per breakpoint)

Padding around the section's content, set independently for desktop, tablet, and mobile. Each breakpoint exposes a top/bottom/left/right spacing input. Defaults:

  • desktop 100px top, 100px bottom, 0 left, 0 right
  • tablet 60px top, 60px bottom, 0 left, 0 right
  • mobile 40px top, 40px bottom, 15px left, 15px right