<div class="alert-block">
    <strong class="alert-block__badge">Important</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nec orci felis. Vivamus aliquet lobortis lorem sit amet pretium. Integer commodo condimentum dui id egestas.
</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": "Important",
  "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nec orci felis. Vivamus aliquet lobortis lorem sit amet pretium. Integer commodo condimentum dui id egestas."
}
  • 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.