Number counter

Other names: number animation

The number counter adds animation and counts up to a set number.



When and how to use it

Use the rolling number counter component to add visual variety to important data. This is often used on homepages.

How not to use it

Do not use the rolling number counter in multiple sections of your webpage.

Do not use the number counter for dates.


Standard accessibility review

Each time a new component version is published:

  • Test with the axe accessibility tool
  • Review with the VoiceOver or NVDA screen reader
  • Ensure all actionable elements are accessible by keyboard command and tab in a logical order
  • Check the component layout on a variety of screen sizes