Success:

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Warning:

Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Alert:

Ut enim ad minim veniam, quis nostrud exercitation ullamco.

Information:

Laboris nisi ut aliquip ex ea commodo consequat.

 

Styleguide notes


Notifications


Usage

Notifications appear as contextual messages within pages. Which notification is most appropriate will depend on the context of use, but as a general guideline:

A Success notification confirms that an action the user has just taken (eg completion of a form) was successful.

A Warning requires your action; if you ignore it, there are likely to be serious consequences.

An Alert is similar to a warning, but less critical: it indicates something that you should be aware of (and possibly act on); if you ignore it, there are likely to be fairly serious consequences.

An Information notification is 'for your information'. It may be of interest but there will be no significant negative consequence if you ignore it.

Multiple notification components can be added to a page. Multiple paragraphs of information can be added to one panel.


Interaction

Clicking the cross closes a notification. Whether a notification reappears on page load should be determined to suit each situation.


CSS and media queries

N/a


Use of Javascript

Javascript is used to dynamically append a close button which removes the DOM element from the page.

Users without Javascript will not be able to remove notifications from the page.


Component variants

There are four variants of notification: Success, Warning, Alert, and Information.