Statistics

Highlighting numbers of things

Overview

Sometimes we need to feature numbers.

12 Cookies in the jar
25 Cookies on my plate
Stat (8 lines)
1
2
3
4
5
6
7
8
<div class="stat-container"> 
    <span class="stat-number"> 
        12 
    </span> 
    <span class="stat-label"> 
        Cookies in the jar 
    </span> 
</div>

Colors

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

1232 Fish in the pond
25 Pavilions
621 Trees in the park
9201 People over there
Red stat (8 lines)
1
2
3
4
5
6
7
8
<div class="stat-container stat-red"> 
    <span class="stat-number"> 
        1232 
    </span> 
    <span class="stat-label"> 
        Fish in the pond 
    </span> 
</div>

Sizes

Use .stat-small to make them small and inline.

Default

1232 Fish in the pond

Small

25 Ayes
3 Noes
Small Stat (8 lines)
1
2
3
4
5
6
7
8
<div class="stat-container stat-small stat-blue"> 
    <span class="stat-number"> 
        25 
    </span> 
    <span class="stat-label"> 
        Ayes 
    </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-number"> 
        1232 
    </span> 
    <span class="stat-label"> 
        Fish in the pond 
    </span> 
</a>

Icons and Change

Stats can have icons, and we can display how much the number has changed.

Icons

31 Puppies running around

Change

1232 -30% Fish in the pond
Stat Icons and Change (23 lines)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<h3>Icons</h3> 
<div class="stat-container stat-blue"> 
    <span class="stat-icon glyphicons glyphicons-dog"></span>  
    <span class="stat-number"> 
        31 
    </span> 
    <span class="stat-label"> 
        Puppies running around 
    </span> 
</div> 
 
<h3>Change</h3> 
<div class="stat-container stat-red"> 
    <span class="stat-number"> 
        1232 
    </span> 
    <span class="stat-difference"> 
        -30% 
    </span> 
    <span class="stat-label"> 
        Fish in the 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.