Web Design Guide 2023-12-11 10:29:21 | 2.0.0

Badge 

<!-- Default -->
<span class=" badge ">5<i class="icon -basket"></i></span>


<!-- Without Icon -->
<span class=" badge ">5</span>


<!-- Secondary Color -->
<span class=" badge -secondary">5<i class="icon -basket"></i></span>


<span class="{{mixes}} badge {{modifiers}}">{{text}}{{#icon}}<i class="icon {{.}}"></i>{{/icon}}</span>
 
/* Default */
{
  "text": "5",
  "icon": "-basket"
}


/* Without Icon */
{
  "text": "5",
  "icon": null
}


/* Secondary Color */
{
  "text": "5",
  "icon": "-basket",
  "modifiers": "-secondary"
}
  • Content: 
    .badge {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.5rem 1rem;
  background-color: $primary;
  color: $white;

  .icon:not(:first-child) {
    padding-left: 1rem;
  }

  &.-secondary {
    background-color: $secondary;
  }

  &.-white,
  .-active & {
    background-color: $white;
    color: $primary;
  }
}
  • URL: /components/raw/atoms-badge/_badge.scss
  • Filesystem Path: src/components/02-ui-components/01-atoms/10-badge/_badge.scss
  • Size: 326 Bytes

There are no notes for this item.