<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. */
  • Content:
    .site-message--fail {
    	@extend %site-message;
    
    	background-color: lighten($fail,40%);
    	border-color: $fail;
    }
  • URL: /components/raw/fail-message/_fail-message.scss
  • Filesystem Path: src/patterns/patterns/messages/fail-message/_fail-message.scss
  • Size: 109 Bytes
  • Handle: @fail-message
  • Preview:
  • Filesystem Path: src/patterns/patterns/messages/fail-message/fail-message.hbs

Fail Message

Usually a negative action related alert.