Labels (Pills)

Modular install (In case you don't want to load all of CLUI.)

In your code add the @corelogic/clui/dist/css/components/fonts.css first and then the @corelogic/clui/dist/css/components/labels.css file second from your npm repository.

You can include any font-awesome icon inside. Background colors are applied using label-[COLOR]

Base Labels

Label
Label
Label
Label
Label
Label
Label
Label
<div class="label label-black"><i class="fa fa-rebel"></i> Label</div>
<div class="label label-blue"><i class="fa fa-rebel"></i> Label</div>
<div class="label label-bright-blue"><i class="fa fa-rebel"></i> Label</div>
<div class="label label-green"><i class="fa fa-rebel"></i> Label</div>
<div class="label label-yellow"><i class="fa fa-rebel"></i> Label</div>
<div class="label label-red"><i class="fa fa-rebel"></i> Label</div>
<div class="label label-salmon"><i class="fa fa-rebel"></i> Label</div>
<div class="label label-orange"><i class="fa fa-rebel"></i> Label</div>

Medium Labels

Just add an additional medium class to make a label bigger.

Label
Label
Label
Label
Label
Label
Label
Label
<div class="label medium label-black"><i class="fa fa-rebel"></i> Label</div>
<div class="label medium label-blue"><i class="fa fa-rebel"></i> Label</div>
<div class="label medium label-bright-blue"><i class="fa fa-rebel"></i> Label</div>
<div class="label medium label-green"><i class="fa fa-rebel"></i> Label</div>
<div class="label medium label-yellow"><i class="fa fa-rebel"></i> Label</div>
<div class="label medium label-red"><i class="fa fa-rebel"></i> Label</div>
<div class="label medium label-salmon"><i class="fa fa-rebel"></i> Label</div>
<div class="label medium label-orange"><i class="fa fa-rebel"></i> Label</div>