<div class="alert alert--info">
    <div class="alert-text"><strong>Vorsicht!</strong> Vielen Dank.</div>
    <button class="alert-btn" type="button"><i class="icon icon-close"></i><span class="sr-only">Schlie├čen</span>
    </button>
</div>
<div class="alert alert--info">
    <div class="alert-text"><strong>Vorsicht!</strong> Vielen Dank.</div>
    <button class="alert-btn" type="button">
        <i class="icon icon-close"></i>
        <span class="sr-only">Schlie├čen</span>
    </button>
</div>
/* No context defined for this component. */
  • Content:
    $alert-color: $brand-white;
    
    .alert {
      @extend %heading-font-regular;
      display: flex;
      flex-wrap: nowrap;
      justify-content: space-between;
      margin-bottom: $content-spacer-sm;
      padding: $spacer-xs;
      line-height: $alert-line-height;
      color: $alert-color;
      font-size: $alert-font-size-sm;
    
      &--info {
        background-color: $brand-info;
      }
    
      &--warn {
        background-color: $brand-warn;
        color: darken($brand-warn, 51%); // Use accessible dark yellow
      }
    
      &--error {
        background-color: $brand-danger;
      }
    }
    
    .alert-btn {
      @extend %base-button;
      color: inherit;
    }
    
    
    @media screen and (min-width: $grid-breakpoint-md) {
      .alert {
        margin-bottom: $content-spacer-base;
        padding: $container-spacer-y-sm $container-spacer-x-sm;
      }
    }
    
  • URL: /components/raw/alert/_alert.scss
  • Filesystem Path: components/01-atoms/input-elements/alert/_alert.scss
  • Size: 754 Bytes

There are no notes for this item.