title: Label description: 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. sass: scss/components/_label.scss video: '_S_OO9NiWQ8'

Basics

Add the .label class to an element to create a label. In the below example, we're using <span>, but any tag will work fine.

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

A label will typically be describing another element on the page. To bind the two elements together, give the label a unique ID, and reference that ID in an aria-describedby attribute on the main element.

<p aria-describedby="emailLabel">Re: re: re: you won't believe what's in this email!</p>
<span class="label" id="emailLabel">High Priority</span>

If an element is described by multiple labels, place multiple IDs inside of aria-describedby.

<p aria-describedby="emailLabel1 emailLabel2">Re: re: re: you won't believe what's in this email!</p>
<span class="label" id="emailLabel1">High Priority</span>
<span class="label" id="emailLabel2">Unread</span>

Coloring

Add color classes to give labels additional meaning.

<span class="label primary">Primary Label</span>
<span class="label secondary">Secondary Label</span>
<span class="label success">Success Label</span>
<span class="label alert">Alert Label</span>
<span class="label warning">Warning Label</span>

Custom Colors

If you're using the Sass version of Foundation, you can customize the label classes by editing the $label-palette map in your settings file. The label palette defaults to $foundation-palette.

If you don't need certain colors from the default palette, simply remove them from the list.

$label-palette: map-remove($foundation-palette, (
    primary,
    secondary
)) !default;

Or you can add more colors to the default palette.

$label-palette: map-merge($foundation-palette, (
    purple: #bb00ff
)) !default;

Or you can define your own custom label palette.

$label-palette: (
    black: #000000,
    red: #ff0000,
    purple: #bb00ff
) !default;

Text Colors

The text color for each label class is determined by either $label-color or $label-color-alt, whichever settings variable has more contrast.

Icons

An icon can be dropped into a label just fine. We're using the Foundation icon font here, but any icon fonts or image-based icons will work fine.

<span class="label alert"><i class="fi-x-circle"></i> Alert Label</span>
<span class="label warning"><i class="fi-x"></i> Warning Label</span>
<span class="label"><i class="fi-widget"></i> Default Label</span>

Foundation Laravel Package