<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 {
      color: $color-darkest;
      font-size: 1.4rem;
      font-weight: $font-weight-bold;
      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: 546 Bytes

There are no notes for this item.