Badges

Default

Green Light Red Light Blue Light Orange Light Yellow White Light White Dark
%span.badge.badge--green-light Green Light
%span.badge.badge--red-light Red Light
%span.badge.badge--blue-light Blue Light
%span.badge.badge--orange-light Orange Light
%span.badge.badge--yellow Yellow
%span.badge.badge--white-light White Light
%span.badge.badge--white-dark White Dark
<span class='badge badge--green-light'>Green Light</span>
<span class='badge badge--red-light'>Red Light</span>
<span class='badge badge--blue-light'>Blue Light</span>
<span class='badge badge--orange-light'>Orange Light</span>
<span class='badge badge--yellow'>Yellow</span>
<span class='badge badge--white-light'>White Light</span>
<span class='badge badge--white-dark'>White Dark</span>

Indicator

Green Light Red Light Blue Light Orange Light Yellow White Light White Dark
%span.badge.badge--indicator.badge--green-light
%span.xs-valign-middle.xs-prlh0 Green Light
%span.badge.badge--indicator.badge--red-light
%span.xs-valign-middle.xs-prlh0 Red Light
%span.badge.badge--indicator.badge--blue-light
%span.xs-valign-middle.xs-prlh0 Blue Light
%span.badge.badge--indicator.badge--orange-light
%span.xs-valign-middle.xs-prlh0 Orange Light
%span.badge.badge--indicator.badge--yellow
%span.xs-valign-middle.xs-prlh0 Yellow
%span.badge.badge--indicator.badge--white-light
%span.xs-valign-middle.xs-prlh0 White Light
%span.badge.badge--indicator.badge--white-dark
%span.xs-valign-middle.xs-prlh0 White Dark
<span class='badge badge--indicator badge--green-light'></span>
<span class='xs-valign-middle xs-prlh0'>Green Light</span>
<span class='badge badge--indicator badge--red-light'></span>
<span class='xs-valign-middle xs-prlh0'>Red Light</span>
<span class='badge badge--indicator badge--blue-light'></span>
<span class='xs-valign-middle xs-prlh0'>Blue Light</span>
<span class='badge badge--indicator badge--orange-light'></span>
<span class='xs-valign-middle xs-prlh0'>Orange Light</span>
<span class='badge badge--indicator badge--yellow'></span>
<span class='xs-valign-middle xs-prlh0'>Yellow</span>
<span class='badge badge--indicator badge--white-light'></span>
<span class='xs-valign-middle xs-prlh0'>White Light</span>
<span class='badge badge--indicator badge--white-dark'></span>
<span class='xs-valign-middle xs-prlh0'>White Dark</span>

Pills

Green Light Red Light Blue Light Orange Light Yellow White Light White Dark
%span.badge.badge--pill.badge--green-light Green Light
%span.badge.badge--pill.badge--red-light Red Light
%span.badge.badge--pill.badge--blue-light Blue Light
%span.badge.badge--pill.badge--orange-light Orange Light
%span.badge.badge--pill.badge--yellow Yellow
%span.badge.badge--pill.badge--white-light White Light
%span.badge.badge--pill.badge--white-dark White Dark
<span class='badge badge--pill badge--green-light'>Green Light</span>
<span class='badge badge--pill badge--red-light'>Red Light</span>
<span class='badge badge--pill badge--blue-light'>Blue Light</span>
<span class='badge badge--pill badge--orange-light'>Orange Light</span>
<span class='badge badge--pill badge--yellow'>Yellow</span>
<span class='badge badge--pill badge--white-light'>White Light</span>
<span class='badge badge--pill badge--white-dark'>White Dark</span>