Counter
A number that counts up from zero once it scrolls into view, with a prefix, a suffix and a label. A few lines of script do the counting, and the final number sits in the markup, where search engines and screen readers read it.
Live preview
Five-star reviews
- 14
Years in business
- 2400
Projects since 2012
- 98%
Would hire again
- 640+
Five-star reviews
- 14
Years in business
- 2400
Projects since 2012
- 98%
Would hire again
- 640+
Five-star reviews
Would hire again
What you can build with it
A years in business or projects finished figure that counts up. A row of results on a home page. A fundraising or sign-up total on a campaign page.
Props
number (text, whole number); prefix (text); suffix (text); label (text); size (select: large, display, medium)
States shown
Zero (before entry), counting (entry), settled. Reduced motion and older browsers: settled from the start.
How to change it
Content and options are 5 props in the component's settings panel. Colour, type, spacing and radius follow your Automatic.css settings, so a change to the site's palette or scale changes this too. For anything else, edit the classes in the Style Manager, starting with .counter. Its behaviour is a small script that travels with the component; no plugin and nothing to install.
ACSS tokens used
–primary-dark for the number, –text-dark-muted for the label, –h1 / –h2 / –text-xxl sizes.
ACSS requirements
ACSS 4 defaults. No stylesheet needed.
Version history
Version 1.0.0, September 19, 2026: First release.
Tested with
Etch 1.6.7 and ACSS 4.0.1. Version 1.0.0.
Lifetime members
Members copy this straight into Etch, ready to paste.
Used an earlier version? How to update it
Get lifetime accessWant EtchPress for Bricks or the block editor?
Everything here is made for Etch. Pick the builder you use and leave your email: we write once, when EtchPress works there.