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__tag css Tag badge achievement that a user earns through answering a set number of questions and earning a particular reputation score.
.s-badge__tag javascript Tag badge achievement that a user earns through answering a set number of questions and earning a particular reputation score.
.s-badge__tag react-js Tag badge achievement that a user earns through answering a set number of questions and earning a particular reputation score.
.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

1
2
3
4
5
6
7
8
9
<span class="s-badge">
    <img class="s-badge--image" src="/assets/img/BadgeGold.svg" aria-hidden="true"> Great Question
</span>
<span class="s-badge">
    <img class="s-badge--image" src="/assets/img/BadgeSilver.svg" aria-hidden="true"> Favorite Question
</span>
<span class="s-badge">
    <img class="s-badge--image" src="/assets/img/BadgeBronze.svg" aria-hidden="true"> Altruist
</span>
Great Question Favorite Question Altruist

Tag Badge

1
2
3
4
5
6
7
8
9
<span class="s-badge s-badge__tag">
    <img class="s-badge--image" src="/assets/img/BadgeGold.svg" aria-hidden="true"> css
</span>
<span class="s-badge s-badge__tag">
    <img class="s-badge--image" src="/assets/img/BadgeSilver.svg" aria-hidden="true"> javascript
</span>
<span class="s-badge s-badge__tag">
    <img class="s-badge--image" src="/assets/img/BadgeBronze.svg" aria-hidden="true"> swift
</span>
css javascript swift

Badge Counts

1
2
3
4
5
6
7
8
9
<span class="s-badge s-badge__gold">
    <img class="s-badge--image" src="/assets/img/BadgeGold.svg" aria-hidden="true"> 635
</span>
<span class="s-badge s-badge__silver">
    <img class="s-badge--image" src="/assets/img/BadgeSilver.svg" aria-hidden="true"> 7624
</span>
<span class="s-badge s-badge__bronze">
    <img class="s-badge--image" src="/assets/img/BadgeBronze.svg" aria-hidden="true"> 8234
</span>
635 7624 8234

Number Counts

1
2
3
4
5
6
7
<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+