Toronto District School Board
Skip to main content

Counter

The Counter module displays key statistics in a clean, card-style layout. Each individual statistic card can be adjusted to present a different piece of data. Numbers that are displayed count up from 0 to their target statistic.

When to Use this Module

The Counter module is ideal for showing key pieces of data in an eye-catching way. 

Counters help highlight important statistics, and should be used sparingly to enhance data presented in other ways, such as with text and other graphical components.

What You Can Display

Each counter can include the following:

  • Prefix (optional): Text or symbols before the number (e.g., $, ~).
  • Number (required): The main statistic. Supports up to 2 decimal places.
  • Suffix (optional): Text or symbols after the number (e.g., %, kg).
  • Icon (optional): Add a visual element to support the stat.
  • Descriptive Text (optional): Add a short explanation or label.

Descriptive text is limited to 300 characters (including whitespaces).

You can also adjust the border colour of each individual statistic card.

Counter

6

New components added

300%

Improved content management

41.75M

New funding needed for school repairs

#10

Description