Component

Statistic

SCSS Location: /styles/scss/partial/_statistic.scss
  • Status: Design
  • Status: Development
  • Status: Documentation

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.

Simple Statistic

9
Lorem ipsum dolor sit amet

Bold Statistic

40+
Lorem Ipsum Dolor Sit

Bold Statistic w/ Divider

125
Lorem Ipsum

Bold Statistic w/ Gray Background

11,000+
Lorem Ipsum Dolor Sit Amet

Donut Statistic

70 percent dolor sit amet lorem ipsum dolor.