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

There are no notes for this item.