Deprecated: message__container overview

This has been deprecated in favour of the Alerts component.

To show a message area/banner/notification

            
<div class="message__container -primary" role="alert">
  <div class="message__info -single">
    <p>
      <i class="fa message__icon fa-check"></i>
      This is a primary style message area
    </p>
  </div>
</div>
            
          

            
<div class="message__container -primary" role="alert">
  <div class="message__info -multi">
    <i class="fa message__icon fa-check"></i>
    <p>This is a multi line message area</p>
    <p>This is the last line of the message area</p>
  </div>
</div>
            
          

Live example single line:

Live example multi line (note the font-awesome icon is a direct child of message__info element):

Variations

The message area is more useful for errors, questions, confirmations, etc.

This is achieved adding modifiers to .message__container:

Live example -primary:

Live example -error:

Live example -error with dismiss icon:

Live example -highlight:

Live example -info:

Live example -info with dismiss icon:

The classes for this is a bit messy and we look to tidy this up soon and replace it with something easier to use.