Badges
Badges are labels used for flags, earned achievements, and number totals.
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. |
<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
<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
<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+
<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
<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