---
title: Labels
---
***
{{> 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";
```