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

<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

<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

<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

<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+