Alerts

Informing users of key updates and notifications

Overview

Alert boxes are used to draw the users' attention to a specific piece of information.

They should be used sparingly, and with consideration of the task/content.

Typical uses are:

  • an information box to highlight what users can expect when an application or form has been submitted
  • a warning box emphasising where a problem or issue might occur
  • an error box informing the user that something has failed or cannot be progressed
  • a success box informing the user that something has worked or been submitted okay

 

Example
WCMS use

Alert boxes can be made in two ways, using the Rich Text Editor or as Content Items.

Using the Rich text Editor

In a rich text editor, press Insert Code Snippet and choose the type of box you want.

Code snippets

RTE alert

Enter the text into the alert box as normal.

 

Using Content Items

Make an alert box as a Content Item if you will want to use it in multiple places, or if the content of the alert box needs to be personalised/versioned.

Into a valid placeholder, press add here and choose the type of alert you want to make.

  • Alert- Information
  • Alert - Warning
  • Alert - Success
  • Alert - Error

You will then be prompted to choose an existing content item under Common content > Text > Headered Text, or create new.

Headered text in Common Content

Update the fields for the Headered Text item as normal.

MVC.net use
Code

<div class="alert alert-info">
	<h2>For information…</h2>
	<p>Some text</p>
	<button title="close this message" class="close">×</button>
</div>

Add a close button:

<button title="close this message" class="close icon cancel"></button>
Version and status
  • 1
  • current version
  • Concept
  • Alpha
  • Beta
  • Release