Counters

Usage

Counters shows key numbers as animated stats. Each Counter counts from a start value to an end value when it scrolls into view. Use it for milestones, metrics, years in business, or any number you want to stand out.

Counters only count up (not down). Add as many child counters as you need; the parent grid controls how many appear per row on desktop.

Parent and child blocks

The Counters parent sets layout and shared typography. Each Counter child holds its own number, headline, description, icon, and optional link.

Select the parent to change grid settings in the sidebar or toolbar. Select a child to edit that counter's values and content. Use the block toolbar breadcrumb, parent button, or List View to switch between them.

How the animation works

On the live site, each counter animates once when it scrolls into view. Set Start Number, End Number, and Duration (milliseconds) in the child sidebar — lower duration means a faster count. Prefix and suffix fields add characters before and after the number (e.g. $, %, +).

Numbers format with commas and support decimals when needed.

Grid settings (parent sidebar)

• Columns — maximum counters per row (1–5); cards wrap to the next row and reflow on smaller screens
• Headline Style — typography preset for each counter's title
• Counter Style — typography preset for the animated number
• Link Style — Button, Understated, or Hidden for child links
• Link Entire Card — makes the whole counter card clickable when a URL is set
• Grid Gap — spacing between cards
• Counter Size Adjust — scales the number (and affixes) relative to the counter style
• Icon Size and Icon Display — size of optional icons; Top or Side placement

Block toolbar (parent)

• Alignment — text alignment for child content
• Toggle Background — adds a subtle card background on each counter
• Toggle Text Size — switches description text between normal and small
• Columns — quick access to the per-row column count

Counter settings (child)

Edit inline on the card or in the child Content sidebar panel:

• Start Number and End Number — range for the count-up animation
• Duration — animation length in milliseconds
• Choose Icon — optional image above or beside the counter
• Headline, Prefix, Suffix — label and affixes around the number
• Link URL and Link Text — optional CTA below the description
• Description — paragraph or list content under the headline

Tips

• Use three counters across on desktop for balanced stat rows; the grid wraps automatically on tablet and phone.
• Pair Toggle Background with wide or full block width for a band of stats across the page.
• Set a low duration (e.g. 800ms) for a quick count; use a longer one for a slower build.