cruc components for Magento 2

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      : none !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-primary;
    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.