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.


Regular Label
Radius Secondary Label
Round Alert Label
Success Label

Basic

You can create a label using minimal markup.

HTML

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

Rendered HTML

Regular Label

Advanced

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

HTML

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

Rendered HTML

Radius Secondary Label
Round Alert Label
Success Label


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(3 10 4); $label-radius: $global-radius; // We use these to style the label text $label-font-sizing: rem-calc(14); $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";
Stay on top of what’s happening in responsive design.

Sign up to receive monthly Responsive Reading highlights. Read Last Month's Edition »