Label

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.

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.

Watch this part in video

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

Default Label

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.

Watch this part in video

<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>

Primary Label Secondary Label Success Label Alert Label Warning Label

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.

The default settings meet WCAG 2.0 level AA contrast requirements. Be sure to check the contrast when changing color variables. To give all labels the same color text, set $label-color and $label-color-alt to the same value — but know that doing so may decrease accessibility.

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 info"><i class="fi-widget"></i> Info Label</span>

Alert Label Warning Label Info Label

Sass Reference

Variables

The default styles of this component can be customized using these Sass variables in your project's settings file.

Name	Type	Default Value	Description
`$label-background`	Color	`$primary-color`	Default background color for labels.
`$label-color`	Color	`$white`	Default text color for labels.
`$label-color-alt`	Color	`$black`	Alternate text color for labels.
`$label-palette`	Map	`$foundation-palette`	Coloring classes. A map of classes to output in your CSS, like `.secondary`, `.success`, and so on.
`$label-font-size`	Number	`0.8rem`	Default font size for labels.
`$label-padding`	Number	`0.33333rem 0.5rem`	Default padding inside labels.
`$label-radius`	Number	`$global-radius`	Default radius of labels.

Mixins

We use these mixins to build the final CSS output of this component. You can use the mixins yourself to build your own class structure out of our components.

label

@include label;

Generates base styles for a label.