Labels

Highlight important content, make notice of important announcements with labels or badges by adding the corresponding class name.

Building the markup

The markup to create labels is pretty straighforward, just add the label class to a span or anchor element and you are good to go. Yeah you could probably can add it into another but nothing fancy is really gonna happen.

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

Label variations

Highlighting content is important, but to give a meaning is critical, that's why we provide 4 modifier class name which you can append to the label class elements.

   
<span class="label success">Label</span>
<span class="label danger">Label</span>
<span class="label radius">Label</span>
<span class="label round">1</span>
   

Available sass variables

Don't like the default values?, yeah we get it, you can easily customize them with our sass variables.

  
//Label general settings
$label-padding: px-to-rems(3) px-to-rems(6) !default;
$label-font-size: px-to-rems(11) !default;
$label-font-weight: normal !default;
$label-font-color: #FFF !default;
$label-font-shadow-alpha: 0.20 !default;
$label-font-shadow-x: 0 !default;
$label-font-shadow-y: -1px !default;
$label-hover-decoration: none !default;
$label-default-background:  #95A5A6 !default;

//Label variations
$label-radius: px-to-rems(3) !default;
$label-round: px-to-rems(1000) !default;

//Label background variations
$label-primary-background: #3498db !default;
$label-success-background: #2ecc71 !default;
$label-danger-background: #e74c3c !default;
$label-warning-background: #e67e22 !default;
  

Creating your labels

Don't o the mood to use the built in labels, that's fair, we have included a mixin for you to create your own, check it out!

       
 .my-super-label {
    @include label;
 } 
       
    

       
<a href="#" class="my-super-label">Button</a>
       
    

     
@mixin label($background-color: $label-default-background, $include-round: true, $include-radius: true) {
  @include label-base;
  @include label-style($background-color);

  @if $include-round {
    &.round { @include border-radius($label-round); }
  }

  @if $include-radius {
    &.radius { @include border-radius($label-radius); }
  }
}

     
  

Further usage...

For a more advance usage for creating labels, check out the _labels.scss file.