Stat Component
Available on any page, the Stat Component allows content with statistical numbers to be placed on a page in a way that stands out. The stat number is required. The prefix and suffix are available to add special characters before and/or after the stat number. The unit, heading, and description are optional.
There are two different color options for the number and unit: Black (default) and Purple.
Stats with unit, heading, and description and animation turned on.
56%
unit
heading
Scelerisque nunc diam a elementum metus nullam a facilisi cum.
$500+
unit
heading
Scelerisque nunc diam a elementum metus nullam a facilisi cum.
Stats with stat number in default (Black) color with description, but no heading.
9,999,999,999
Scelerisque nunc diam a elementum metus nullam a facilisi cum.
31,682
Scelerisque nunc diam a elementum metus nullam a facilisi cum.
Stats with stat number and unit in purple with heading, but no description.
$500+
million
heading
20
billion
heading
3
trillion
heading
The Stat component should be used within a Column Control component with 2 or 3 columns. If using 3 columns, the max number of characters is 7 plus 2 commas. If a larger number is needed, only 2 columns should be used since it can handle up to 10 charaters plus 3 commas without the number overflowing and covering other text on the smaller breakpoints.
Each stat number can have animation. The animation will show the number counting up from 0 to the number authored and will stop motion in approximately 3 seconds. If using animation, the stat number must be a valid number and not include any special characters, aside from commas. If special characters are needed, they must be placed in the prefix and suffix fields. If not using the animation feature, special characters can be authored within the stat number field.