--- title: 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.

*** {{> examples_labels_basic}} ***

Basic

You can create a label using minimal markup.

HTML

{{> examples_labels_basic_rendered}}

Rendered HTML

Regular Label
***

Advanced

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

HTML

{{#markdown}} ```html {{> examples_labels_advanced}} ``` {{/markdown}}

Rendered HTML

{{> examples_labels_advanced_rendered}}
*** ## Customize with Sass Labels can be easily customized using our Sass variables.

SCSS

{{> examples_labels_variables}} *** ## 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

{{#markdown}} ```scss .custom-label-class { @include label(); } ```

HTML

```html Basic custom label ``` {{/markdown}}

Advanced

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

SCSS

{{#markdown}} ```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 ); } ``` {{/markdown}}

HTML

{{#markdown}} ```html Advanced custom label ``` {{/markdown}}

Sass Errors?

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

SCSS

```scss @import "foundation/components/labels"; ```