Badges

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

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

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

<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

<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

<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

<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