<%= @page_title %>

Labels are useful inline styles that can be dropped into body copy to call out certain sections or to attach metadata. Examples might be noting when something was updated or that something is new.

Regular Label
Radius Secondary Label
Round Alert Label
Success Label

---

Build With Predefined HTML Classes

There are two ways to build labels in Foundation 4: with our predefined HTML classes or with our mixins. Building labels using our predefined classes is simple, you'll just need to write a <span class="label"> and apply the classes you want.

<%= code_example ' Regular Label Radius Secondary Label Round Alert Label Success Label', :html %>

The class options:

• The color classes include: .secondary, .alert or .success
• The radius classes include: .radius or .round.

For these styles to come across, make sure you have the default Foundation CSS package or that you've selected labels from a custom package. These should be linked up following our default HTML page structure.

---

Build With Our Mixins

We've included SCSS mixins used to style labels. To use the mixin, you'll need to have the extension installed or grab _foundation-global.scss, _global.scss and _labels.scss from Github and throw them into a Foundation folder in your project directory. From there, you can import the files at the top of your own SCSS stylesheet, like so:

<%= code_example ' @import "foundation/foundation-global", "foundation/components/global", "foundation/components/labels"; ', :css %>

Quick Mixin

You can build your labels using our global mixin by including it on your custom class or ID in your own stylesheet. The mixin contains options for changing the background color, which also controls the border and text color. You'll also have the ability to change the font-size and padding. The rest of the defaults can be modified using the available variables. The global mixin looks like this:

<%= code_example ' /* Using the default styles */ .your-class-name { @include label; }', :css %>

There are also four options you can customize on the fly when writing this mixin. These control things like: padding, text size, background color and radius. Setting any of these options to false will negate those styles.

<%= code_example ' /* Using the available options */ .your-class-name { @include label($padding,$text-size,$bg,$radius); } /* Controls the padding, set to a string following top, right, bottom, left rules or change the variable */ $padding: $label-padding /* Control your text-size per label */ $text-size: $label-font-size /* Change the background color for your labels */ $bg: $primary-color /* Control how much radius is put on the labels */ $radius: false ', :css %>

Here's an example of a custom label style.

Default SCSS Variables

<%= code_example ' /* We use these to style the labels */ $label-padding: emCalc(3px) emCalc(6px) emCalc(4px); $label-radius: $global-radius; /* We use these to style the label text */ $label-font-size: emCalc(14px); $label-font-weight: bold;', :css %>

Note: emCalc(); is a function we wrote to convert px to em. It is included in _foundation-global.scss.