Counter / Goal Grid blocks are useful on for the numbers you want people to remember on campaign or development impact pages — dollars raised, students reached, years in the community, seats filled. Each counter animates up from zero when the visitor scrolls it into view, then holds at your number. Add a prefix or suffix for currency and units, decimals where you need them, and an optional image, teaser line, and link per counter.
Visitors who have asked their device to reduce motion see the final number straight away rather than the count.
Adding a Counter / Goal Grid
- When editing a page or tab, click Add Content Block >> Counter / Goal Grid
- Under "Counters" add 2 or more counters.
- Each counter gets a number as a counter. This can be a small number with decimals (e.g 10.5) or a large number which will automatically format with commas (e.g. 1000000 for 1,000,000)
- You can optionally add a prefix or a suffix for non-counting labels and currency markers.
- Each counter supports an image, and an optional link.
- Adjust general styles like you would a Promo Grid - you can add spacing between your counter blocks, and display text with a light, dark, no overlay, or the text below each image.
The Counter / Goal Grid block was added in v. 2.3. See the Release Notes.