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

// Label styles $label-fontsize: 0.8rem; $label-padding: ($global-padding / 3) ($global-padding / 2); $label-radius: 0; $label-background: $primary-color; $label-color: isitlight($primary-color); // Badge styles $badge-fontsize: .8em; $badge-padding: .1em .61em; $badge-radius: $global-rounded; $badge-background: $primary-color; $badge-font-color: #fff;