Add-Ons

Extend Concise with these pre-built add-ons.

Badges and Labels

This add-on requires the font-size() mixin in order for the SASS or LESS files to compile without modification.

Badges

The .badge class is useful for displaying icons or numbers in a rounded container with a background.

Preview

25 25 25 25 25 25

Code 
<span class="badge">25</span>
<span class="badge bg-gray">25</span>
<span class="badge bg-green">25</span>
<span class="badge bg-blue">25</span>
<span class="badge bg-yellow">25</span>
<span class="badge bg-red">25</span>

Labels

The .label class allows you to label text or icons with a background.

Preview

Default Label Gray Label Green Label Blue Label Yellow Label Red Label

Code 
<span class="label">Default Label</span>
<span class="label bg-gray">Gray Label</span>
<span class="label bg-green">Green Label</span>
<span class="label bg-blue">Blue Label</span>
<span class="label bg-yellow">Yellow Label</span>
<span class="label bg-red">Red Label</span>

Download

Download CSS