Notices

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.

Simple notices

To show the user some simple feedback you can use a p tag.

Success

Example:

Well done! You successfully read this important notice.

Info

Example:

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

Warning

Example:

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

Danger

Example:

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

Advanced notices

If a simple p won't suffice you can use a div to include more content.

Success

Example:

Well done! You successfully read this important notice.

  1. Lorem ipsum dolor sit amet consectetur adipisicing elit.
  2. Lorem ipsum dolor sit amet consectetur adipisicing elit.

Info

Example:

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

  1. Lorem ipsum dolor sit amet consectetur adipisicing elit.
  2. Lorem ipsum dolor sit amet consectetur adipisicing elit.

Warning

Example:

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

  1. Lorem ipsum dolor sit amet consectetur adipisicing elit.
  2. Lorem ipsum dolor sit amet consectetur adipisicing elit.

Danger

Example:

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

  1. Lorem ipsum dolor sit amet consectetur adipisicing elit.
  2. Lorem ipsum dolor sit amet consectetur adipisicing elit.

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).

The code of the flash message must be placed inside <div role="main"> and come anywhere after the <header> 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.

Success

Success! This is an example of a flash message.

Example:

Success! This is an example of a flash message.

Info

Example:

Info! This is an example of a flash message.

Warning

Example:

Warning! This is an example of a flash message.

Danger

Example:

Danger! This is an example of a flash message.

On some layouts, the alignment of the flash message's content on wide screen is not optimal. Use flash--center to centre the content.

Example:

This is an example of a centred flash message .

Use flash--keep-left to left align the content.

Example:

This is an example of a left flash message .