Counters

Animated number counter with icon, prefix/suffix, and caption label. It is shown in the block inserter as Canvas Counter and registered as canvas-core/counter.

Select the block on a page and its own settings open in the sidebar, in the panels below:

Settings

Each setting is named exactly as the block editor names it, followed by what it does and what it starts as. Where a setting carries a Shown when line, it stays hidden until that condition is met, which is the usual reason a setting looks missing from the sidebar:

Content

• IconDefaultEmpty

  Optional icon displayed above the counter.

• Starting ValueDefault0

  The number the count begins at. Starting part way up shortens the run for a very large figure.

• Target ValueDefault1000

  The number the count finishes on, and the figure a visitor is left looking at.

• PrefixDefaultEmpty

  Text before the number (wrapped in unless Plain Prefix/Suffix is on). Inline emphasis is kept.

• SuffixDefaultEmpty

  Text after the number. Inline emphasis is kept.

• CaptionDefaultHappy Clients

  The wording under the number that says what has been counted. Leave it empty for a figure on its own.

• Plain Prefix/SuffixDefaultOff

  Emit the prefix/suffix as bare text (e.g. a raw "%" or "+") instead of the wrappers, placed directly beside the number. Both fields accept inline emphasis, so the counter can sit inside a sentence.

• Wrap The Number InDefaultEmpty

  An inline element around the animated figure, for a counter written into a sentence, where the number is set as code or emphasised.

  ChoicesNothing (empty)

Settings

• Counter SizeDefaultDefault

  How large the number is set. Choose Inherit for a counter written into a sentence, so it matches the text around it.

  ChoicesDefaultSmallLargeExtra LargeInherit surrounding text

• Caption TagDefaultH5

  Which element captions the number.

  ChoicesH2H3H4H5H6pspansmalldiv

• Counter ElementDefaultdiv

  Which element the .counter itself renders as. A counter written inside a heading or a sentence has to be inline, which a div cannot be.

  Choicesdivspan

• Icon Utility ClassesDefaultEmpty

  Replaces the default plain-icon treatment on the icon element. Enter none to drop it entirely, for an inline glyph that carries only its own icon class.

• Icon On The Same LineDefaultOff

  Put the icon inside the counter line rather than above the number: what a counter written into a sentence needs.

• AlignmentDefaultCenter

  Where the number and its caption sit across the width available. Inherit follows whatever the surrounding block already sets.

  ChoicesInherit (empty)LeftCenterRight

• Decorative LineDefaultOff

  Show a horizontal line between the number and caption.

• Merge Wrapper into CounterDefaultOff

  Emit a single element instead of a wrapper around the number. Only applies to a bare counter: one with no icon and no caption.

• Counter Element ClassesDefaultEmpty

  Optional utility classes added to the .counter element itself (e.g. font weight / colour utilities that the animated number should inherit).

• Announce the CountDefaultOff

  Has a screen reader read the figure out as it settles. Turn it on where the number is the point of the section, and leave it off on a wall of counters, which would be read out all at once.

• Counter Inline StyleDefaultEmpty

  Styling written straight onto the number. Use it for a one off colour your palette does not name; Number Color in the Style panel is the route to take when the colour will be reused.

• Number ClassesDefaultEmpty

  Optional utility classes added to the animated number span itself (e.g. display scale / weight utilities).

• Caption ClassesDefaultEmpty

  Optional utility classes added to the caption heading element.

• Caption Inline StyleDefaultEmpty

  Styling written straight onto the caption. Use it for a one off size or colour your palette does not name; Caption Color and Caption Size in the Style panel are the route to take when the values will be reused.

• Animation Speed (ms)Default2000

  How long the count takes from start to finish, in thousandths of a second. Two seconds reads as deliberate without holding the visitor up.

• Refresh Interval (ms)Default50

  How often the figure is redrawn while it counts, in thousandths of a second. A smaller number runs more smoothly and asks more of the device.

• Thousand SeparatorDefaultOff

  Breaks a long figure into groups, so 1000000 reads as 1,000,000. The character and the group size are set below.

• Separator CharacterDefault,

  The character that breaks up the groups. Much of Europe writes a full stop here rather than a comma. Leave it empty to keep the visitor's own default.

  Shown when Thousand Separator is on

• Digits Per GroupDefault3

  Number of digits between each separator (e.g. 3 = 1,000 / 2 = 1,00).

  Shown when Thousand Separator is on

Number

• Emit Separator SettingsDefaultOn

  Writes the separator and grouping data attributes alongside the comma flag. Off leaves the counter script on its own defaults.

  Shown when Thousand Separator is on

• Show Target Before CountingDefaultOn

  Prints the target number inside the counter so it reads correctly before the animation runs. Off leaves it empty until the script fills it.

Style tab

• Number Color

  A style control in the Number group of the Style tab.

• Number Typography

  A style control in the Number group of the Style tab.

• Caption Color

  A style control in the Caption group of the Style tab.

• Caption Size

  A style control in the Caption group of the Style tab.

• Icon Color

  A style control in the Icon group of the Style tab.

• Line Style

  A style control in the Decoration group of the Style tab.

Related

Every Canvas block also carries the Animation, Scroll Effects and Advanced panels, which are described in Controls every Canvas block has.

Other blocks in Canvas: Alerts, Buttons, Code Highlight, Dividers, Dropcaps, Headings.