Marketing module

Counter block

An animated statistic that counts up when scrolled into view — with prefix, suffix, decimals and an optional icon badge.

Overview

The Counter highlights a number — “340+ projects”, “98% satisfaction”, “$2.5M raised” — and animates it from a start value when the visitor scrolls to it. You control the prefix, suffix, decimals, thousands separator and speed, and can add an icon.

At a glance

Block name: wpbb/counter
Module: Marketing
Find it by searching: Counter
Loads JavaScript on the site: Yes, a small script, only on pages that use this block

When and why to use it

Company achievements and social proof.
Statistics rows on landing pages.

Example scenarios

About page: four counters in a row: “340+ Projects delivered”, “12 Years”, “98% Happy clients”, “24 Team members”.

See it in action

These are live examples: real Counter blocks rendered by WordPress with the plugin’s own styles and scripts. Use the buttons to see how they adapt to tablet and phone screens.

A row of counters

Open in a new tab

How to add the Counter block

Open the editor. In your WordPress dashboard go to Pages (or Posts) and click the page you want to edit, or click Add New. For headers, footers and templates, use Appearance → Editor (block themes).
Add a new block. Click the blue + (Block Inserter) button in the top-left corner, or the small + that appears where you want the block. You can also type / on an empty line.
Search for the block. Type Counter in the search field. Brigade Blocks appear in the Brigade Blocks category and show the coral block icon.
Insert it. Click Counter in the results. The block appears with the number 340+ and an empty title.
Configure the content. Edit the text directly on the block, then open the Settings tab (gear icon) in the right-hand sidebar for the options described below. If the sidebar is hidden, click the gear icon in the top-right corner.
Customise the design. Switch to the Styles tab (half-filled circle icon) to change colours, spacing, borders and more — see Design & styling.
Save or publish. Click Save draft to keep working later, Preview to check it, or Publish / Update to make it live.

Content settings

You set up this block in two places: on the block itself in the editor, and in the Settings tab (gear icon) of the sidebar on the right. Every option is listed below, with its default value.

On the block (in the editor canvas)

Title

What it does: What the number counts.
What to enter or choose: A short phrase (plain text).
Default: Empty
How to use it: Click the text in the block on the page and type. Use the block toolbar for bold, italic and links.
When to use it: Always — a number without context means little.
Example: “Projects delivered”.
Result: Shown below (or beside) the number.

Settings panel: Number

Count to

What it does: The final number.
What to enter or choose: Any number (decimals allowed).
Default: 340
How to use it: Type a number, or use the arrows in the field.
When to use it: Always.
Example: 340.
Result: The counter stops here.

Start from

What it does: The number the animation starts at.
What to enter or choose: Any number.
Default: 0
How to use it: Type a number, or use the arrows in the field.
When to use it: Rarely changed.
Example: 0, or 1990 for a year count.
Result: Counting starts here.

Prefix

What it does: Text before the number.
What to enter or choose: A symbol or short text.
Default: Empty
How to use it: Type into the text field. Changes appear in the preview right away.
When to use it: Currencies, “~”, “#”.
Example: “$”.
Result: Shown before the number.

Suffix

What it does: Text after the number.
What to enter or choose: A symbol or short text.
Default: +
How to use it: Type into the text field. Changes appear in the preview right away.
When to use it: Units and emphasis.
Example: “%”, “k”, “+”.
Result: Shown after the number.

Decimals

What it does: Digits after the decimal point.
What to enter or choose: A number from 0 to 3.
Default: 0
How to use it: Drag the slider, or type a number in the box next to it.
When to use it: Ratings, percentages.
Example: 1 for “4.9”.
Result: The number shows that many decimals.

Thousands separator

What it does: How large numbers are grouped.
What to enter or choose: One of: Comma (1,000), Dot (1.000), Space (1 000), None (1000).
Default: Comma (1,000)
How to use it: Open the dropdown and pick an option.
When to use it: Match your language: Dot for many European languages, None for years.
Example: None for “2026”.
Result: With Dot, the decimal point becomes a comma (1.000,5).

Animation duration (ms)

What it does: How long the count-up takes (1000 ms = 1 second).
What to enter or choose: A number from 300 to 6000 (ms), in steps of 100.
Default: 2000 ms
How to use it: Drag the slider, or type a number in the box next to it.
When to use it: Shorter for small numbers.
Example: 1500.
Result: Faster or slower counting.

Settings panel: Style

Layout

What it does: Icon above the number, or beside it.
What to enter or choose: One of: Stacked, Icon beside.
Default: Stacked
How to use it: Click one of the buttons in the group.
When to use it: When an icon is used.
Example: Icon beside for a compact row.
Result: The icon moves.

Number color

What it does: The number’s colour.
What to enter or choose: One of: Dark, Brand.
Default: Dark
How to use it: Click one of the buttons in the group.
When to use it: Always optional.
Example: Brand to make it pop.
Result: Dark ink or coral number.

Icon

What it does: An optional icon badge.
What to enter or choose: An icon, or None.
Default: Empty
How to use it: Click the icon button to open the icon library, search by name (for example “arrow” or “phone”) and click an icon. “None” removes it.
When to use it: To illustrate the statistic.
Example: “briefcase”.
Result: A 56px badge with a 24px icon.

Icon styleShown when an icon is chosen

What it does: The badge colours.
What to enter or choose: One of: Warm, Cool, Solid brand, Dark, Outline, Plain.
Default: Warm
How to use it: Open the dropdown and pick an option.
When to use it: With an icon.
Example: Warm.
Result: The badge changes colour.

Design & styling

Select the block, open the Styles tab in the settings sidebar (the half-filled circle icon next to the gear) and use the three pickers at the top of the Style panel:

Element — which part of the block to style.
State — Normal, or a state such as Hover (only the states the part supports are offered).
Device — Desktop, Tablet or Mobile, for values that can differ per screen size.

Only panels that make sense for the chosen part and state are shown. The full meaning of every control is in the Styling Controls guide; below is exactly what Counter offers.

Element: Number selected first

The number (with prefix and suffix).

Styles-tab controls for “Number”
Panel	Control	Per device	Available in states
Typography	Font family	—	Normal
	Font size	Yes	Normal
	Weight	—	Normal
	Style	—	Normal
	Line height	Yes	Normal
	Letter spacing	Yes	Normal
	Letter case	—	Normal
	Alignment	Yes	Normal
	Decoration	—	Normal
Colors	Text	—	Normal

States: Normal only.

Element: Block

The whole counter.

Styles-tab controls for “Block”
Panel	Control	Per device	Available in states
Background	Type	—	Normal
	Color / Gradient	—	Normal
	Image	—	Normal
Border	Border type	—	Normal
	Border	—	Normal
	Radius	Yes	Normal
Box Shadow	Remove shadow	—	Normal
Box Shadow	Shadow layers	—	Normal
Spacing	Margin	Yes	Normal
Spacing	Padding	Yes	Normal
Sizing	Width	Yes	Normal
	Max width	Yes	Normal
	Height	Yes	Normal
	Min width / Min height / Max height	Yes	Normal
	Block alignment	Yes	Normal
Position	Position	Yes	Normal
	Top / Right / Bottom / Left	Yes	Normal
	Z-index	Yes	Normal
	Overflow	Yes	Normal
Transform	Move X / Move Y	—	Normal
	Scale X / Scale Y	—	Normal
	Rotate (°), Rotate X (°), Rotate Y (°)	—	Normal
	Skew X (°) / Skew Y (°)	—	Normal
Effects	Opacity (%)	Yes	Normal
	State transition (ms)	—	Normal
	Timing	—	Normal
Visibility	Show on Desktop / Tablet / Mobile	—	Normal

States: Normal only.

Element: Title

The title.

Styles-tab controls for “Title”
Panel	Control	Per device	Available in states
Typography	Font family	—	Normal
	Font size	Yes	Normal
	Weight	—	Normal
	Style	—	Normal
	Line height	Yes	Normal
	Letter spacing	Yes	Normal
	Letter case	—	Normal
	Alignment	Yes	Normal
	Decoration	—	Normal
Colors	Text	—	Normal

States: Normal only.

Element: Icon

The icon badge.

Styles-tab controls for “Icon”
Panel	Control	Per device	Available in states
Colors	Text	—	Normal
Background	Type	—	Normal
	Color / Gradient	—	Normal
	Image	—	Normal
Border	Border type	—	Normal
	Border	—	Normal
	Radius	Yes	Normal
Sizing	Width	Yes	Normal
	Max width	Yes	Normal
	Height	Yes	Normal
	Min width / Min height / Max height	Yes	Normal

States: Normal only.

Responsive settings

Brigade Blocks uses three screen sizes: Desktop (wider than 1023px), Tablet (600–1023px) and Mobile (599px and narrower). Tablet and Mobile values are optional: when empty, the value of the next larger screen is used.

In the Styles tab, pick the Device first; these controls can then have a different value for that screen size: Font size, Line height, Letter spacing, Alignment, Radius, Margin, Padding, Width, Max width, Height, Min width / Min height / Max height, Block alignment, Position, Top / Right / Bottom / Left, Z-index, Overflow, Opacity (%).

The Visibility panel (Styles tab, Normal state) can hide the block entirely on Desktop, Tablet or Mobile.

Advanced options

HTML anchor (Advanced section of the Settings tab) — a unique name such as pricing, so you can link straight to this block with #pricing at the end of the page address (for example from a menu).
Additional CSS class(es) (Advanced section) — for custom CSS from your theme or the Site Editor. Separate several classes with spaces.
Custom attributes (Advanced section) — add data-*, title, aria-label, aria-describedby, lang or dir attributes. See Custom attributes.
State transition (Styles tab → Effects, Normal state) — how smoothly hover and focus styles animate.

How it works on your site

The final number is in the HTML, so search engines and visitors without JavaScript see it. A small script counts up when the counter scrolls into view (once).

Accessibility

Screen readers read the final value and title once (“340+ Projects delivered”) instead of the animation.
Visitors who prefer reduced motion see the final number without animation.

Overview

At a glance

When and why to use it

Example scenarios

See it in action

How to add the Counter block

Content settings

On the block (in the editor canvas)

Title

Block toolbar

Align

Settings panel: Number

Count to

Start from

Prefix

Suffix

Decimals

Thousands separator

Animation duration (ms)

Settings panel: Style

Layout

Number color

Icon

Icon styleShown when an icon is chosen

Design & styling

Element: Number selected first

Element: Block

Element: Title

Element: Icon

Responsive settings

Advanced options

How it works on your site

Accessibility