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__mini 99+ Badge which notes activity.
.s-badge__important 99+ Badge which notes important activity.

Examples

Badges default

<span class="s-badge">
<img class="s-badge--image" src="BadgeGold.svg" aria-hidden="true"> Great Question
</span>
<span class="s-badge">
<img class="s-badge--image" src="BadgeSilver.svg" aria-hidden="true"> Favorite Question
</span>
<span class="s-badge">
<img class="s-badge--image" src="BadgeBronze.svg" aria-hidden="true"> Altruist
</span>
Great Question Favorite Question Altruist

Badge counts

<span class="s-badge s-badge__gold">
<img class="s-badge--image" src="BadgeGold.svg" aria-hidden="true"> 635
</span>
<span class="s-badge s-badge__silver">
<img class="s-badge--image" src="BadgeSilver.svg" aria-hidden="true"> 7624
</span>
<span class="s-badge s-badge__bronze">
<img class="s-badge--image" src="BadgeBronze.svg" aria-hidden="true"> 8234
</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__mini">99+</span>
<span class="s-badge s-badge__mini s-badge__important">99+</span>
+100 38 154 +15 -2 99+ 99+