<div class="badge ">
    -15%
</div>
<div class="badge {{ class }}">
    {{ text }}
</div>
{
  "text": "-15%"
}
  • Content:
    $badge__padding        : 0 $spacer--medium !default;
    $badge__margin         : 0 0 $spacer !default;
    $badge__border-radius  : $border-radius !default;
    $badge__color          : $white !default;
    $badge__color--new     : $font-color-base !default;
    $badge__background     : $bg-color-dark !default;
    $badge__background--new: $white !default;
    $badge__font-size      : $font-size-small !default;
    $badge__font-family    : $font-family-base !default;
    $badge__font-weight    : $font-weight-bold !default;
    $badge__text-transform : uppercase !default;
    $badge__line-height    : 16px !default;
    $badge__justify-content: center !default;
    
  • URL: /components/raw/badge/_badge-variables.scss
  • Filesystem Path: build/components/Molecules/badge/_badge-variables.scss
  • Size: 621 Bytes
  • Content:
    @import 'badge-variables';
    
    .badge {
        display: inline-flex;
        padding: $badge__padding;
        margin: $badge__margin;
        border-radius: $badge__border-radius;
        color: $badge__color;
        background: $badge__background;
        font-family: $badge__font-family;
        font-size: $badge__font-size;
        font-weight: $badge__font-weight;
        text-transform: $badge__text-transform;
        line-height: $badge__line-height;
        justify-content: $badge__justify-content;
    
        &--new {
            color: $badge__color--new;
            background: $badge__background--new;
        }
    }
    
  • URL: /components/raw/badge/_badge.scss
  • Filesystem Path: build/components/Molecules/badge/_badge.scss
  • Size: 565 Bytes

No notes defined.