Statistic

Description

A component comprised of a value and description text, with supporting graphical elements.

Guidelines

Images in the Percentage statistic should follow these guidelines:

• Filetype: .svg.
• Exported with a square aspect ratio.
• The unfilled part of the ring shall have a color value equivalent to #A3A7AA with an opacity of 20%.

Usage

Statistics are available in three varieties:

• Simple
  • Styled with the modifier class .statistic__container--simple.
  • This statistic type always has its value within a white circular background. Currently this will only be visible within the .ab-mission context which has a gray background.
• Bold
  • Styled with the modifier class .statistic__container--bold.
  • Optionally include a gray background square with the modifier class .statistic__container--gray-bg.
• Donut
  • Used within the context of a data-animated-stat-list.
    • See Stat List in the style guide.