Sections

Badges

Badges are labels used for flags, earned achievements, and number totals.

Classes

Section titled Classes
Class Example Description
.s-badge Great Question Gold badge achievement that a user earns within a community.
.s-badge Favorite Question Silver badge achievement that a user earns within a community.
.s-badge Altruist Bronze badge achievement that a user earns within a community.
.s-badge__gold 635 Badge which displays the total number of gold badges a user has earned.
.s-badge__silver 7624 Badge which displays the total number of silver badges a user has earned.
.s-badge__bronze 8234 Badge which displays the total number of bronze badges a user has earned.
.s-badge__bounty +100 Badge which notes that a user has offered a reward for an answer to their question.
.s-badge__votes 15 Badge which notes the total number of votes (upvotes minus downvotes) a user's post has earned.
.s-badge__answered 154 Badge which notes the total number of votes (upvotes minus downvotes) a user's post has earned and signifies that their post was the accepted answer.
.s-badge__rep +15 Badge which notes reputation points earned.
.s-badge__rep-down -2 Badge which notes reputation points taken away.
.s-badge__important 99+ Badge which notes important activity.
.s-badge__sm 99+ Decreases the badge size.
.s-badge__xs 99+ Decreases the badge size even further.

Examples

Section titled Examples

Badges default

Section titled Badges default
<span class="s-badge">
    <span class="s-award-bling s-award-bling__gold">
        Great Question
    </span> 
</span>
<span class="s-badge">
    <span class="s-award-bling s-award-bling__silver">
        Favorite Question
    </span> 
</span>
<span class="s-badge">
    <span class="s-award-bling s-award-bling__bronze">
        Altruist
    </span> 
</span>
Great Question Favorite Question Altruist

Badge counts

Section titled Badge counts
<span class="s-badge s-badge__gold">
    <span class="s-award-bling s-award-bling__gold">
        635
    </span> 
</span>
<span class="s-badge s-badge__silver">
    <span class="s-award-bling s-award-bling__silver">
        7624
    </span> 
</span>
<span class="s-badge s-badge__bronze">
    <span class="s-award-bling s-award-bling__bronze">
        8234
    </span> 
</span>
635 7624 8234

Number counts

Section titled Number counts
<span class="s-badge s-badge__bounty">+100</span>
<span class="s-badge s-badge__votes">38</span>
<span class="s-badge s-badge__answered">154</span>
<span class="s-badge s-badge__rep">+15</span>
<span class="s-badge s-badge__rep-down">-2</span>
<span class="s-badge s-badge__important">99+</span>
+100 38 154 +15 -2 99+

User badges

Section titled User badges
<span class="s-badge s-badge__admin">Admin</span>
<span class="s-badge s-badge__sm s-badge__admin">Admin</span>
<span class="grid--cell s-badge s-badge__xs s-badge__admin">Admin</span>
<span class="s-badge s-badge__moderator">Moderator</span>
<span class="s-badge s-badge__sm s-badge__moderator">Mod</span>
<span class="grid--cell s-badge s-badge__xs s-badge__moderator">Mod</span>
<span class="s-badge s-badge__staff">Staff</span>
<span class="s-badge s-badge__sm s-badge__staff">Staff</span>
<span class="grid--cell s-badge s-badge__xs s-badge__staff">Staff</span>
Admin Admin Admin Moderator Mod Mod Staff Staff Staff

Badge sizes

Section titled Badge sizes
<span class="s-badge">Regular</span>
<span class="s-badge s-badge__sm">Small</span>
<span class="s-badge s-badge__sm s-badge__gold">Small gold</span>
<span class="s-badge s-badge__xs s-badge__gold">Extra small</span>
Regular Small Small gold Extra small
Edit on GitHub