<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. */
$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;
}
}
There are no notes for this item.