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

7 1313 A 7 7 7
7 1313 A 7 7 7

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: