Component

Stat List

SCSS Location: /styles/scss/partial/_stat-list.scss
  • Status: Design
  • Status: Development
  • Status: Documentation

Description

A section comprised of multiple statistic components.

Guidelines

Item Design Guidelines Not Provided

Usage

There are multiple varieties of Stat Lists:

  • Simple: Card-based design with green background that wraps to the container width. 2-up on mobile/tablet, 4-up on desktop.
  • Simple Blue: Same as simple but with blue background and light text colors.
  • Bold Stat List: Statistics will break into 2 columns at 375px and above and 4 columns at 992px and above and display dividers when in multiple columns.
  • Donut Stat List: Animated Donut Stat List

Stat List | Simple

    150+
    Faucibus habitant arcu et
    16,000
    Faucibus habitant arcu et
    $57,700
    Faucibus habitant arcu et
    640
    Faucibus habitant arcu et
    $57,700
    Faucibus habitant arcu et
    16,000+
    Faucibus habitant arcu et
    640
    Faucibus habitant arcu et

Stat List | Simple Blue

    150+
    Faucibus habitant arcu et
    16,000
    Faucibus habitant arcu et
    $57,700
    Faucibus habitant arcu et
    640
    Faucibus habitant arcu et
    $57,700
    Faucibus habitant arcu et
    16,000+
    Faucibus habitant arcu et
    640
    Faucibus habitant arcu et

Bold Stat List - 3 Stats

  • 40+
    Faucibus habitant arcu et gibberish
  • 700M+
    Faucibus habitant arcu et
  • 60%
    Faucibus habitant arcu et

Bold Stat List - 4 Stats

  • 40+
    Faucibus habitant arcu et gibberish
  • 700M+
    Faucibus habitant arcu et
  • 60%
    Faucibus habitant arcu et
  • 195+
    Faucibus habitant arcu et

Bold Stat List - 5 Stats

  • 40+
    Faucibus habitant arcu et gibberish
  • 700M+
    Faucibus habitant arcu et
  • 60%
    Faucibus habitant arcu et
  • 195+
    Faucibus habitant arcu et
  • 700M+
    Faucibus habitant arcu et
  • 60%
    Faucibus habitant arcu et gibberish

Bold Stat List - 8 Stats

  • 40+
    Faucibus habitant arcu et gibberish
  • 700M+
    Faucibus habitant arcu et
  • 60%
    Faucibus habitant arcu et
  • 195+
    Faucibus habitant arcu et
  • 700M+
    Faucibus habitant arcu et
  • 60%
    Faucibus habitant arcu et gibberish
  • 40+
    Faucibus habitant arcu et gibberish
  • 700M+
    Faucibus habitant arcu et

Donut Stat List

70 percent of customers use more than three Vertex products.
99 percent of customers use more than three Vertex products.
33 percent of customers use more than three Vertex products.
33 percent of customers use more than three Vertex products.