Labels are simple inline containers that share some of the base element styling in Kickstart. Great for drawing attention without visual overload.

Attention

Labels are pretty straightforward. Ideally, span elements should be labels but the styling can be applied to almost anything.

<span class="attention">Attention</span>

.attention {
  @include label();
}


<span class="label">Attention</span>

Labels can also be styled much the same way you would with a button.

Please correct New!

Pass in any color to `label()`

Available colors include:

  • label-red
  • label-orange
  • label-yellow
  • label-green
  • label-blue
  • label-violet

You may also use your theme's primary and secondary colors via label-primary and label-secondary 

<span class="error">Please correct</span>
<span class="notice">New!</span>

.error {
  @include label(map-get($colors, red));
}
.notice {
  @include label($primary-color);
}


<span class="label label-red">Please correct</span>
<span class="label label-blue">New!</span>