Notices

Overview

Notices are a great way to provide contextual feedback alerts for typical user actions. There are four alert types to choose from depending on the level of importance:

  • notice--success
  • notice--info
  • notice--warning
  • notice--danger

Notices may contains links, as shown in the third example below.

Examples

Well done! You successfully read this important notice.

Heads up! This notice needs your attention, but it's not super important.

Warning! Better check yourself, you’re not looking too good.

Danger! Change a few things up and try submitting again.

  1. Notices are modelled on application “flash” or “toast” messages, so should only be used for a quick, focused alert
  2. You’re pulling the user’s attention to this message, so don’t abuse it by making them read too much! 
<p class="notice notice--success">
  <strong>Well done!</strong> You successfully read this important notice.
</p>
<p class="notice notice--info">
  <strong>Heads up!</strong> This notice needs your attention, but it's not super important.
</p>
<p class="notice notice--warning">
  <strong>Warning!</strong> Better check yourself, <a href="#">you’re not looking too good</a>.
</p>
<div class="notice notice--danger">
  <p>
    <strong>Danger!</strong> Change a few things up and try submitting again.
  </p>
  <ol>
    <li>
      Notices are modelled on application “flash” or “toast” messages, so should only be used for a quick, focused alert
    </li>
    <li>
      You’re pulling the user’s attention to this message, so don’t abuse it by making them read too much!
    </li>
  </ol>
</div>

Flash messages

Flash messages are notices that are placed at the top of the page, just below the header. They span the whole width of the page (except when the in-page navigation is used) and are useful, for instance, for displaying the result of a form submission (when Ajax is not available). Like notices, flash messages come in four variants, but their markup is slightly different (see example below):

  • flash--success
  • flash--info
  • flash--warning
  • flash--danger

On some layouts, the alignment of the flash message's content on wide screen is not optimal. Two classes are available to deal with this situation: flash--center to centre the content, and flash--keep-left to keep the content against the logo on a headerless page.

The code of the flash message must be placed inside <div role="main"> and come anywhere after the header or <div class="headerless"></div> element. If the message meets these conditions but is located further down the page, it is moved to the right location automatically. If multiple messages are found, only the first one is moved. The current page demonstrates the use of an informative flash message, as well as the behaviour of the flash--center class:

Success! This is an example of a flash message.

Success! This is an example of a centred flash message. 

<p>
  Flash messages are notices that are placed at the top of the page, just below the header. They span the whole width of the page (except when the in-page navigation is used) and are useful, for instance, for displaying the result of a form submission (when Ajax is not available). Like notices, flash messages come in four variants, but their markup is slightly different (see example below):
</p>
<ul class="nobullet">
  <li>
    <code>flash--success</code>
  </li>
  <li>
    <code>flash--info</code>
  </li>
  <li>
    <code>flash--warning</code>
  </li>
  <li>
    <code>flash--danger</code>
  </li>
</ul>
<p>On some layouts, the alignment of the flash message's content on wide screen is not optimal. Two classes are available to deal with this situation: <code>flash--center</code> to centre the content, and <code>flash--keep-left</code> to keep the content against the logo on a <code>headerless</code> page.
</p>
<p>The code of the flash message must be placed inside <code><div role="main"></code> and come anywhere <em>after</em> the <code>header</code> or <code><div class="headerless"></div></code> element. If the message meets these conditions but is located further down the page, it is moved to the right location automatically. If multiple messages are found, only <strong>the first one</strong> is moved. The current page demonstrates the use of an <em>informative</em> flash message, as well as the behaviour of the <code>flash--center</code> class:
</p>
<div class="flash flash--info">
  <p>
    <strong>Success!</strong> This is an example of a flash message.
  </p>
</div>
<div class="flash flash--info flash--center">
  <p>
    <strong>Success!</strong> This is an example of a centred flash message.
  </p>
</div>