Labels

Labels are useful inline styles that can be dropped into body copy to call out certain sections or to attach metadata. For example, you can attach a label that notes when something was updated.

Basic

You can create a label using minimal markup.

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

Advanced

Additional classes can be added to your labels to change their appearance.

<span class="[success alert secondary] [round radius] label">Advanced Label</span>

Customize with Sass

Labels can be easily customized using our Sass variables.

SCSS

$include-html-label-classes: $include-html-classes;

// We use these to style the labels
$label-padding: rem-calc(4 8 4);
$label-radius: $global-radius;

// We use these to style the label text
$label-font-sizing: rem-calc(11);
$label-font-weight: bold;
$label-font-color: #333;
$label-font-color-alt: #fff;

Semantic Markup With Sass

You can create your own labels using our Sass mixins.

Basic

You can use the label() mixin to create your own labels, like so:

SCSS

.custom-label-class {
  @include label();
}

HTML

<span class="custom-label-class">Basic custom label</span>

Advanced

You can further customize your labels using the provided options in the label() mixin:

SCSS

.custom-label-class {
  @include label(
    // This options sets label padding
    $padding:7px 16px 9px,
    // This option sets label text-size
    $text-size:13px,
    // This option sets label background-color
    $bg:#2ba6cb,
    // This option sets the radius of the label
    $radius:4px
  );
}

HTML

<span class="custom-label-class">Advanced custom label</span>

Sass Errors?

If the default "foundation" import was commented out, then make sure you import this file:

SCSS

@import "foundation/components/labels";