<div class="site-message--fail">
<strong>Oh no!</strong> Something went wrong. <a href="#">More information</a>
</div>
<div class="site-message--fail">
<strong>Oh no!</strong> Something went wrong. <a href="#">More information</a>
</div>
/* No context defined for this component. */
.site-message--fail {
@extend %site-message;
background-color: lighten($fail,40%);
border-color: $fail;
}
Usually a negative action related alert.