Fork me on GitHub

Labels

Required files

SCSS files required: _components.labels.scss

Label structure

The class required for a label is .label

To include an inline svg icon add the modifying classes .label--left-icon or .label--right-icon

The labels and label icons will resize according to font size, so the resizing will occur by adding a font size class eg .font-size-xs

<div class="label font-size-xs label--left-icon"><svg>[INSERT SVG CODE]</svg>I am a label with an icon on the left</div>

Labels with font size extra small

I am a label
I am a label with an icon on the left
I am a label with an icon on the right

Labels with font size small

I am a label
I am a label with an icon on the left
I am a label with an icon on the right

Labels with font size medium

I am a label
I am a label with an icon on the left
I am a label with an icon on the right

Labels with font size large

I am a label
I am a label with an icon on the left
I am a label with an icon on the right

Labels with font size extra large

I am a label
I am a label with an icon on the left
I am a label with an icon on the right

Label colours

To change the label colour you can use global background colour helpers. See here

White Light grey
Grey Dark grey Very dark grey
Primary Info Success Warning Danger