Web Guide: Counter

Animated number counters are a fun way to display stats.

Animations are triggered as the user scrolls to the web section. You can assign a unique color to each counter, select a size and even add an icon.

Counter without icon

0
Million

Counter title value: 30px; Counter value: 80px; Color: #06aafc

Counter without icon

0
%
Total

Counter title value: 30px; Counter value: 60px; suffix-prefix value: 30px; default color

Counter with icon

A red graduation cap icon, commonly representing education or academic achievement.
0
Annual

Image width: 50; grey circle background; left aligned; Counter title value: 20px; Counter value: 60px; color: #a90533

LIVE SITE EXAMPLES:

  1. https://executivemba.wharton.upenn.edu/class-profile/
  2. https://sf.wharton.upenn.edu/facts-and-figures/

How to add a counter

Use the settings noted in the examples above and then customize further if needed.

  • Select “Counter” from  element selections
  • Counter value (size of the counter text) — typically 80 or 60px
  • Counter title (size of the text below the counter) — typically 20px
  • Color of the Counter — typically Wharton Blue, Red, Bay Blue or Default
  • If adding an icon, you will select an icon, the color of the icon and background, the width (size of icon) and alignment.