Statistics

Highlighting numbers of things

Overview

Sometimes we need to feature numbers.

Cookies in the Jar 12
Cookies on my plate 25
Stat
<div class="stat-container">
    <span class="stat-title">
        Cookies in the Jar
    </span>
    <span class="stat-number">
        12
    </span>
</div>

Colors

Use the classes .stat-red, .stat-orange, .stat-green, .stat-blue to add color.

In general: 

  1. Red is used for numbers that show poor performance, need attention, failure, etc.
  2. Orange is used for numbers that are borderline as far as importance/attention or success/failure.
  3. Green is used to show positive growth, exceeding expectations, success, etc.
  4. Blue is a sort of neutral number.
Fish in the pond 1232
Pavilions 25
Trees in the park 621
People over there 9201
Red stat
<div class="stat-container stat-red">
    <span class="stat-title">
        Fish in the pond
    </span>
    <span class="stat-number">
        1232
    </span>
</div>

Sizes

Use .stat-medium to make things a bit more compact. Use   .stat-small to make them small and inline.

Default

Fish in the pond 1232

Medium

Fish in the pond 1232

Small

Ayes 25
Noes 3
Small Stat
<div class="stat-container stat-small stat-blue">
    <span class="stat-title">
        Ayes
    </span>
    <span class="stat-number">
        25
    </span>
</div>

Links

Make the whole stat link somewhere by replacing the div with an anchor tag.

Link Stat
<a class="stat-container stat-green" href="#">
    <span class="stat-title">
        Fish in the pond
    </span>
    <span class="stat-number">
        1232
    </span>
</a>

Icons, Change, and Labels

Stats can have icons, we can display how much the number has changed, and we can add labels for further description.

Icons

Puppies running around 31 The puppies are monitored by trained professionals.

Change

Fish in the pond 1232 -30% Number of koi fish in this pond.
Stat Icons and Change
<h3>Icons</h3>
<div class="stat-container stat-blue">
    <span class="stat-title">
        Puppies running around
    </span>
    <span class="stat-icon glyphicons glyphicons-dog"></span>
    <span class="stat-number">
        31
    </span>
    <span class="stat-label">
        The puppies are monitored by trained professionals.
    </span>
</div>
<h3>Change</h3>
<div class="stat-container stat-red">
    <span class="stat-title">
        Fish in the pond
    </span>
    <span class="stat-number">
        1232
    </span>
    <span class="stat-difference">
        -30%
    </span>
    <span class="stat-label">
        Number of koi fish in this pond.
    </span>
</div>

Buttons

Buttons can be added next to the title.

Fish in the pond View Data 1232
Stat with a button
<div class="stat-container stat-green">
<span class="stat-title">
                <!-- note span around title text -->
<span>
Fish in the pond
</span>
                <!-- button goes here -->
<a href="#" class="js-fish-data-toggle">
<span class="glyphicons glyphicons-table"></span>
View Data
</a>
</span>
<span class="stat-number">
1232
</span>
</div>

Nesting and Grouping

Stats can be nested inside of stats, and grids of stats can be created by putting them inside a .stats-flex container. Putting the stats inside a .stat-group container removes the border, which can work to make nested stats less busy.

Critters in the Aquarium
Goldfish
2
They are getting big!
Cherry Shrimp
8
Hopefully the fish don't eat them.
Mystery Snails
3
Cleaning all the surfaces.
Grouping and nesting stats
<div class="stat-container">
<div class="stat-title">
Critters in the Aquarium
</div>
<div class="stat-group stats-flex">
<div class="stat-container stat-medium">
<div class="stat-title">
Goldfish
</div>
<div class="stat-number">
2
</div>
<div class="stat-label">
They are getting big!
</div>
</div>
<div class="stat-container stat-medium">
<div class="stat-title">
Cherry Shrimp
</div>
<div class="stat-number">
8
</div>
<div class="stat-label">
Hopefully the fish don't eat them.
</div>
</div>
<div class="stat-container stat-medium">
<div class="stat-title">
Mystery Snails
</div>
<div class="stat-number">
3
</div>
<div class="stat-label">
Cleaning all the surfaces.
</div>
</div>
</div>
</div>

Help Us Improve This Page

Did you notice an error? Is there information that you expected to find on this page, but didn't? Let us know below, and we'll work on it.

Was this page helpful?



Comments are helpful!
500 character limit

Feedback is anonymous.