--- name: labels-badges url: /labels-badges title: Labels & Badges ---

Label & Badges

Labels & Badges are useful to highlight content, use as tags for content type, and more. For example, you can attach a label that notes when something was updated.


Default Label    7

Basic HTML

Label

You can create Labels with this basic HTML:

Default Label Success Label Alert Label Warning Label
Default Label Success Label Alert Label Warning Label

Badge

1 2 3 A B C
1 2 3 A B C

Sass Mixins

Use these mixins to create custom labels and badges.

.custom-label { @extend %label; @include label-layout( $fontsize: 1rem, $padding: 0.25em ); @include label-style( $background: red, $color: #fff, $radius: 20px ); } .custom-badge { @extend %badge; @include badge-layout( $fontsize: 1rem, $padding: 0.25em ); @include badge-style( $background: red, $color: #fff, $radius: 1000px ); }

Sass Variables

You can customize labels and badges with these variables in the _settings.scss file: