Counter

Counter shows animated count-up statistics — the kind of "10,000+ customers / 99.9% uptime / 24 awards" row you see on landing pages. Each stat counts up from a start value to its target when it scrolls into view. Add as many stats as you need in a responsive row.

How to add

Open the block inserter, switch to the Axiom Blocks category, and click Counter. It starts with a few stat items. Each stat is its own inner block, so you add and remove them like any other blocks.

Stats

Select an individual stat to reach its own settings:

• Start value and End value — the animation counts from start to end
• Decimal places — how many decimals to show
• Prefix and Suffix — text wrapped around the number, e.g. $, +, %
• Icon — optional, picked from the shared icon library
• Label — the caption, edited inline on the canvas

The number animates only on the front end; in the editor it shows the final value so you can style it.

Layout

• Columns — stats per row
• Stack on mobile — collapse to one column on small screens
• Dividers between stats — draw a line between stats

The space between stats is the Gap between items row in Styles → Card, and the divider's color is the Divider Color row in the same place.

Animation and number format

• Duration — how long the count-up runs
• Easing — the animation curve
• Thousands separator — toggle grouping, then pick the Group separator character
• Decimal separator — the decimal character, for locale-correct formatting

Icon and label position

Icon → Position places the icon Top or Left of the number. Label → Position places the caption Below, Above, Left, or Right of it.

The sidebar at a glance

The block sidebar is split into two tabs. Settings is what the counter does; Styles is how it looks, organised by the parts you can see.

Styling

Every part carries a Normal / Hover state selector — pick the state at the top of the row and set a value for it. Hover applies when the visitor is over the stat's card.

The Icon part is a chip, not just a glyph: its Background, Border, Radius, and Padding style a container drawn behind the icon. Give it a circular radius and a tinted background and you get the round icon badge that stat rows usually want — no wrapper block required.

The Card background is the full background control — a solid color, a gradient, or an image with an overlay — and it takes a separate hover value.

Counter supports Wide and Full alignment and an HTML anchor.

HTML output

<div
  class="ab-counter-group ab-counter-group--icon-top ab-counter-group--label-below is-stack-mobile has-divider"
  style="--ab-counter-cols: 3; --ab-counter-gap: 24px; --ab-counter-card-bg: #ffffff; --ab-counter-card-radius-tl: 12px;"
  data-duration="2000"
  data-easing="ease-out"
  data-thousands-sep=","
  data-decimal-sep="."
>
  <div class="ab-counter">
    <span class="ab-counter-icon-chip"><svg>…</svg></span>
    <span class="ab-counter__number" data-start="0" data-end="1234.5" data-decimals="1" data-prefix="$" data-suffix="+">$1,234.5+</span>
    <div class="ab-counter__label">Customers</div>
  </div>
</div>

The animation reads data-start, data-end, and data-decimals from each stat, and the separators from the group. The count-up respects prefers-reduced-motion.

CSS custom properties