Statistics

Highlighting numbers of things

Overview

Sometimes we need to feature numbers.

Cookies in the Jar 12
Cookies on my plate 25
Stat (8 lines)
1
2
3
4
5
6
7
8
<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.

Fish in the pond 1232
Pavilions 25
Trees in the park 621
People over there 9201
Red stat (8 lines)
1
2
3
4
5
6
7
8
<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 (8 lines)
1
2
3
4
5
6
7
8
<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 (8 lines)
1
2
3
4
5
6
7
8
<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 (28 lines)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<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>

Component List

Alerts
Alerts, announcements, updates, information

Content Blocks
Draw attention to or bundle a section of content

Labels and Badges
Labels, tags, badges, counts, etc

Link Buttons
Links that look like buttons

List Groups
Displaying lists of links

Website Components
Buttons, alerts, forms, and various other page elements

Was this page helpful?      



Comments are helpful!
500 character limit

Feedback is anonymous.