Badges

Used as labels to hold small amounts of information or indicate a certain status.

Badge


<span class="c-badge c-badge--success">Badge</span>

Style Variations

Define badge’s style by using one the modifier classes: c-badge--info, c-badge--success, c-badge--warning, c-badge--danger or c-badge--primary.

Badge Badge Badge Badge Badge


<span class="c-badge c-badge--info">Badge</span>
<span class="c-badge c-badge--success">Badge</span>
<span class="c-badge c-badge--warning">Badge</span>
<span class="c-badge c-badge--danger">Badge</span>
<span class="c-badge c-badge--primary">Badge</span>

Size Variations

Define badge’s size by using one the modifier classes: c-badge--small, c-badge--large.

Badge Badge Badge


<span class="c-badge c-badge--info c-badge--small">Badge</span>
<span class="c-badge c-badge--info">Badge</span>
<span class="c-badge c-badge--info c-badge--large">Badge</span>