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-small to make them small and inline.

Default

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 stats 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>

Was this page helpful?      



Comments are helpful!
500 character limit

Feedback is anonymous.