Alert

Alerts are pop-up flags that display short, important messages. They appear at the top of the screen, and the user must click to dismiss them. Alert content must fit into one of five set categories, each with distinguishing colours and icons.

Status
Released
Version

2.0.1

Last updated

28 Nov 2019

Multiple alerts

When more than one alert appears on on a page, the flags stack with the most recent one at the top. When the user dismisses one, the flag below moves up to fill the gap.

Alert types

Informative

Communicates incidental information to help users understand context or changes to the page.

Error

Lets users know that an action has not worked properly.

Successful

Confirms that a user's action has worked.

Special annoucement

Communicates directly with the user in special cases.

Support

Provides key information to help users engage with the page.

Appropriately interruptive

Alert flags interrupt the user. The urgency of the content contained in an alert must match the level of interruption caused and the context of the alert.

Focused

Only one message is contained in each alert. Information is succinct and clear. Users can easily interpret how to interact with the alert flag.

Dismissing banners

An alert remains on the screen until the user dismisses it.

Alert Styles

Error Alert

                        <div class="alert alert--error" role="alert" aria-hidden="false">
                            <div class="wrap">
                                <span>Error Text example. This is an example of an error warning that falls over two or more lines.</span>
                                <button type="button" class="alert__deactivator icon icon--close">
                                    <span class="visually-hidden">Click to close alert</span>
                                </button>
                            </div>
                        </div>

Success Alert

                        <div class="alert alert--success" role="alert" aria-hidden="false">
                            <div class="wrap">
                                <span>Success Text example. This is an example of a success message that is one line only. </span>
                                <button type="button" class="alert__deactivator icon icon--close">
                                    <span class="visually-hidden">Click to close alert</span>
                            </button>
                        </div>

Occassion Alert

                        <div class="alert alert--occasion" role="alert" aria-hidden="false">
                            <div class="wrap">
                                <span>Occassion  Text example. This is an example of an occasion message that is one line only.</span>
                                <button type="button" class="alert__deactivator icon icon--close">
                                    <span class="visually-hidden">Click to close alert</span>
                            </button>
                        </div>

Support Alert

                        <div class="alert alert--support" role="alert" aria-hidden="false">
                            <div class="wrap">
                                <span>Support Text example. This is an example of a support message that is one line only.</span>
                                <button type="button" class="alert__deactivator icon icon--close">
                                    <span class="visually-hidden">Click to close alert</span>
                            </button>
                        </div>

Information Alert

                        <div class="alert alert--info" role="alert" aria-hidden="false">
                            <div class="wrap">
                                <span>Information Text example. This is an example of an info message that is one line only.</span>
                                <button type="button" class="alert__deactivator icon icon--close">
                                    <span class="visually-hidden">Click to close alert</span>
                            </button>
                        </div>