<div class="alert-block">
    <strong class="alert-block__badge alert-block__badge--error">Back-ordered</strong>
</div>
<div class="alert-block">
  <strong class="alert-block__badge{{#if modifier}} alert-block__badge--{{modifier}}{{/if}}">{{badge}}</strong>
  {{#if text}}
  {{text}}
  {{/if}}
</div>
{
  "badge": "Back-ordered",
  "text": null,
  "modifier": "error"
}
  • Content:
    .alert-block {
      @include font-bold;
      color: $color-darkest;
      font-size: 1.4rem;
      line-height: 1.5;
    }
    
    .alert-block__badge {
      margin-right: .5rem;
      padding: .2rem .3rem 0 .5rem;
      float: left;
      border-radius: 3px;
      background-color: $color-medium-darkest;
      color: $color-white;
      letter-spacing: 2px;
      line-height: 1.2;
      text-transform: uppercase;
    
      &--success {
        background-color: $color-primary;
      }
    
      &--error {
        background-color: $color-error;
      }
    }
    
    .shopping-cart__title + .alert-block {
      margin-top: 3rem;
    }
    
  • URL: /components/raw/alert-block/alert-block.scss
  • Filesystem Path: src/components/01-elements/text-blocks/alert-block/alert-block.scss
  • Size: 534 Bytes

There are no notes for this item.