Badges Markup
<!-- Badges -->
<div class="badges">
<!-- Each .badge group has a class to denote type: individual, cumulative, or group,
Then they have a class per each badge, e.g. badge_most_influential -->
<div class="badge badge_individual badge_most_influential">
<!-- Each group has a badge_icon. leave badge_icon empty, it can be styled in CSS. -->
<span class="badge_icon"></span>
<!-- Each group has a badge_label. Put the text of the badge here. -->
<span class="badge_label">Most Influential</span>
</div>
<div class="badge badge_cumulative badge_250_topics">
<span class="badge_icon"></span>
<span class="badge_label">250 Topics</span>
</div>
<div class="badge badge_group badge_leader">
<span class="badge_icon"></span>
<span class="badge_label">Leader</span>
</div>
<!-- For legacy badges, use the same markup but use badge_legacy as the group.
badge_diamond is the type. -->
<div class="badge badge_legacy badge_diamond">
<!-- For legacy badges, put the image in badge_icon -->
<span class="badge_icon">
<img src="diamond.png" alt="Diamond">
</span>
<span class="badge_label">Leader</span>
</div>
</div> <!-- end badges -->
INDIVIDUAL TOPIC BADGES
Topic Ruler
Head of the Table
Most Influential
INDIVIDUAL VOTE BADGES
Most Insightful
Most Thoughtful
SUBSCRIPTION BADGES
Most Popular
Best Topics
COMMENT BADGES
Comment Ruler
First Responder
CUMULATIVE BADGES
5 Topics
10 Topics
25 Topics
50 Topics
100 Topics
250 Topics
25 Comments
50 Comments
100 Comments
250 Comments
500 Comments
1,000 Comments
25 Votes Received
50 Votes Received
100 Votes Received
250 Votes Received
500 Votes Received
1,000 Votes Received
25 Comments Received
50 Comments Received
100 Comments Received
250 Comments Received
500 Comments Received
1,000 Comments Received
100 Topic Views
250 Topic Views
500 Topic Views
1,000 Topic Views
2,500 Topic Views
5,000 Topic Views
10,000 Topic Views
GROUP BADGES
Leader
Frequent Commenter
Conversation Starter
Insightful
Thoughtful
Popular
Trendy
Influential
Frequent Visitor
Responsive
Speedy