<div class="alert-block">
    <strong class="alert-block__badge alert-block__badge--error">Back-ordered</strong> These are products in your cart which are backordered, as highlighted below. This will cause delay in shipping the backordered products. You can either remove these
    products from your cart and continue to checkout with other products or continue to checkout with backordered products.
</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": "These are products in your cart which are backordered, as highlighted below. This will cause delay in shipping the backordered products. You can either remove these products from your cart and continue to checkout with other products or continue to checkout with backordered products.",
  "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.