Styleguide

Badges

Standard

Red Badge Blue Badge Gray Badge 
%span.badge.badge--red Red Badge
%span.badge.badge--blue Blue Badge
%span.badge.badge--gray Gray Badge

<span class='badge badge--red'>Red Badge</span>
<span class='badge badge--blue'>Blue Badge</span>
<span class='badge badge--gray'>Gray Badge</span>

Standard - Dark Background

Red Badge Blue Badge Gray Badge 
.box.box--black.xs-p1
  %span.badge.badge--red-dark Red Badge
  %span.badge.badge--blue-dark Blue Badge
  %span.badge.badge--gray Gray Badge

<div class='box box--black xs-p1'>
  <span class='badge badge--red-dark'>Red Badge</span>
  <span class='badge badge--blue-dark'>Blue Badge</span>
  <span class='badge badge--gray'>Gray Badge</span>
</div>

Numbers

2 26 
%span.badge.badge--number 2
%span.badge.badge--number 26

<span class='badge badge--number'>2</span>
<span class='badge badge--number'>26</span>

Dot

%span.badge.badge--dot
%i.fa.fa-list.fa--badge-dot

<span class='badge badge--dot'></span>
<i class='fa fa-list fa--badge-dot'></i>