Badge

<!-- Default -->
<div class="badge ">
    -15%
</div>

<!-- New -->
<div class="badge badge--new">
    new
</div>

<div class="badge {{ class }}">
    {{ text }}
</div>
/* Default */
{
  "text": "-15%"
}

/* New */
{
  "text": "new",
  "class": "badge--new"
}

  • Content:
    $badge__padding             : $spacer--05 $spacer--25 !default;
    $badge__margin              : 0 0 $spacer !default;
    $badge__border-radius       : $border-radius !default;
    $badge__color               : $white !default;
    $badge__color--green        : $white !default;
    $badge__color--new          : $font-color-base !default;
    $badge__color--white        : $font-color-base !default;
    $badge__background          : $pink !default;
    $badge__background--green   : $theme-primary !default;
    $badge__background--new     : $white !default;
    $badge__background--white   : $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         : $font-size-medium !default;
    $badge__justify-content     : center !default;
    $badge__position            : absolute !default;
    $badge--top-bottom_margin   : 0 !default;
    $badge--top-bottom__padding : $badge__padding !default;
    $badge--top-bottom          : $spacer--15 !default;
    
  • URL: /components/raw/badge/_badge-variables.scss
  • Filesystem Path: build/components/Molecules/badge/_badge-variables.scss
  • Size: 1.1 KB
  • Content:
    @import 'badge-variables';
    
    .badge {
        display: inline-flex;
        padding: $badge__padding;
        margin: $badge__margin;
        border-radius: $badge__border-radius;
        color: $badge__color;
        background: $theme-second;
        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;
        &--top-left {
            position: $badge__position;
            top: $badge--top-bottom;
            padding: $badge--top-bottom__padding;
            z-index: $z-index-low;
            left: $badge--top-bottom_margin;
        }
        &--bottom-right {
            position: $badge__position;
            bottom: $badge--top-bottom;
            padding: $badge--top-bottom__padding;
            z-index: $z-index-low;
            right: $badge--top-bottom_margin;
        }
        &--new {
            color: $badge__color--new;
            background: $badge__background--new;
        }
        &--green {
            color: $badge__color--green;
            background: $badge__background--green;
        }
        &--white {
            color: $badge__color--white;
            background: $badge__background--white;
        }
    }
    
  • URL: /components/raw/badge/_badge.scss
  • Filesystem Path: build/components/Molecules/badge/_badge.scss
  • Size: 1.2 KB

There are no notes for this item.