Alerts

Overview

There are four types of alert messages that are used for the following scenarios: Success/Confirm, Failure/Issue, Warning and FYI/Neutral. At least 50 px of space should be present under the alert box.

Full width Alert - Desktop

Usage

Full width alerts should appear under the header to provide feedback at the page level. These types of alerts are typically used on page load or refresh. Messages can contain a text link if necessary.


Success/Confirm Message

It tells people they have successfully completed a task, for example submitted a form.

Success! Your transfer has been processed.

<div class="am-alert am-alert--success">
  <div class="am-alert__container">
      <span class="am-alert__icon am-icon-checkmark"></span>
    <p class="am-alert__message">Success! Your transfer has been processed.</p>
  </div>
</div>

Success/Confirm Message

Failure/Issue Message

Failure/Issue messages inform users that something has gone wrong and that they may need to do something to complete the task. These messages could also be used for system-related errors or issues, in which the user needs to try again later.

Curabitur blandit tempus porttitor. Sed posuere consectetur est at lobortis.

<div class="am-alert am-alert--fail">
  <div class="am-alert__container">
    <span class="am-alert__icon am-icon-alert"></span>
    <p class="am-alert__message">Curabitur blandit tempus porttitor. Sed posuere consectetur est at lobortis.</p>
  </div>
</div>

Fail/Issue Message

Warning Message

Warning messages inform users of an important message to be aware of. This message could be either related to the page/task at hand or other important notices (e.g. planned system outages or closures).

Curabitur blandit tempus porttitor. Sed posuere consectetur est at lobortis.

<div class="am-alert am-alert--warning">
  <div class="am-alert__container">
    <span class="am-alert__icon am-icon-alert"></span>
    <p class="am-alert__message">Curabitur blandit tempus porttitor. Sed posuere consectetur est at lobortis.</p>
  </div>
</div>

Warning Message

FYI/neutral Message

FYI/Neutral messages are used to pass on relevant information that is generally neutral, and may or may not effect the user's experience online.

Curabitur blandit tempus porttitor. Sed posuere consectetur est at lobortis.

<div class="am-alert am-alert--info">
  <div class="am-alert__container">
      <span class="am-alert__icon am-icon-alert"></span>
    <p class="am-alert__message">Curabitur blandit tempus porttitor. Sed posuere consectetur est at lobortis.</p>
  </div>
</div>

FYI/Neutral Message


Inset Page Alert - Desktop

Usage

This alert message is being used to provide feedback for a specific section on a page.

Alert UX Instructions

Message with multiple lines

When a message is long enough that it requires more than one line, please follow this pattern. Alert copy should be left-aligned while the icon on the left should be centred vertically.

Message with multiple lines

Alert box with text link