Labels

Labels allow you to highlight small snippets of content, such as a note that something was recently updated.

Default Good Bad Warning Info 

<span class="label">Default</span>
<span class="label label--good">Good</span>
<span class="label label--bad">Bad</span>
<span class="label label--warning">Warning</span>
<span class="label label--info">Info</span>

Pill Style

Default Good Bad Warning Info 

<span class="label label--pill">Default</span>
<span class="label label--pill label--good">Good</span>
<span class="label label--pill label--bad">Bad</span>
<span class="label label--pill label--warning">Warning</span>
<span class="label label--pill label--info">Info</span>

Class Reference

Class Info
info-rows Denotes a group of info rows. Should be added to a div.
info-rows--compact Removes some of the padding from the info rows to make them more compact.
info-row Denotes a single info row. Should be added to a div.
info-row__label Denotes the label container of an info row. Should be added to a div.
info-row__content Denotes the content container of an info row. Should be added to a div. If the div also has an "empty" class, then it will display "n/a".