Counters

Usage

Publicly display running counters on your site with the Counters block. Each Counter child animates from a start value to an end value when it scrolls into view — useful for milestones, metrics, years in business, or any number you want to emphasize.

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 front end, each counter animates once when it enters the viewport. 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 snappy metrics; use longer durations for dramatic reveals.
• Link Entire Card works well when the whole stat should navigate to a case study or detail page.