Living Styleguide

Alert: Error 

<div class="alert alert--error">
    <div class="alert-text"><strong>Das hat nicht geklappt!</strong> Bitte füllen Sie alle Felder aus.</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--error">
    <div class="alert-text"><strong>Das hat nicht geklappt!</strong> Bitte füllen Sie alle Felder aus.</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/02-molecules/alert/_alert.scss
  • Size: 754 Bytes

There are no notes for this item.