Overview
Overview
A global alert displays across the top of the entire site to convey important information to the users.
The message or action must be relevant for the entire service.
There are three types of global alerts in our Design System, critical (alerts), default (warnings) and general (information).
Critical alert
These indicate a significant issue and should only be used for an immediate threat to human life.
<!--Default alert style-->
<div class="qld__global_alert_include">
<div role="region" aria-label="Alert" class="qld__global-alert qld__global-alert--critical">
<div class="container-fluid">
<div class="qld__global-alert__main">
<div class="qld__global-alert__icon">
<svg aria-label="Alert" role="img" class="qld__icon qld__icon--md"><use href="./?a=169317:dist/mysource_files/img/QLD-icons.svg#alert-danger"></use></svg>
</div>
<div class="qld__global-alert__content">
<div class="qld__global-alert__message">
<strong>Testing:</strong> This website is currently undergoing testing
</div>
<div class="qld__global-alert__action">
<a href="#">
<span>Learn more</span>
<svg focusable="false" class="qld__icon qld__icon--md"><use href="./?a=169317:dist/mysource_files/img/QLD-icons.svg#arrow-right"></use></svg>
</a>
</div>
</div>
<div class="qld__global-alert__close">
<button aria-label="Close alert">
<svg role="img" aria-label="Close" class="qld__icon qld__icon--sm"><use href="./?a=169317:dist/mysource_files/img/QLD-icons.svg#close"></use></svg>
</button>
</div>
</div>
</div>
</div>
</div>
Warning alert
This is the default style for global alert. It should be used when an event has either happened or is about to and poses a threat to or will seriously affect a service. It can also be used to communicate an ongoing crisis which seriously affects a services' operation.
<!--Default warning style-->
<div class="qld__global_alert_include">
<div role="region" aria-label="Warning" class="qld__global-alert qld__global-alert--default">
<div class="container-fluid">
<div class="qld__global-alert__main">
<div class="qld__global-alert__icon">
<svg aria-label="Warning" role="img" class="qld__icon qld__icon--md"><use href="./?a=169317:dist/mysource_files/img/QLD-icons.svg#alert-warning"></use></svg>
</div>
<div class="qld__global-alert__content">
<div class="qld__global-alert__message">
<strong>Testing:</strong> This website is currently undergoing testing
</div>
<div class="qld__global-alert__action">
<a href="#">
<span>Learn more</span>
<svg class="qld__icon qld__icon--md"><use href="./?a=169317:dist/mysource_files/img/QLD-icons.svg#arrow-right"></use></svg>
</a>
</div>
</div>
<div class="qld__global-alert__close">
<button aria-label="Close alert">
<svg role="img" aria-label="Close" class="qld__icon qld__icon--sm"><use href="./?a=169317:dist/mysource_files/img/QLD-icons.svg#close"></use></svg>
</button>
</div>
</div>
</div>
</div>
</div>
Information
This style is for low level alerts that can be used to indicate a minor problem with the service or for important updates that may affect content across an entire site.
<!--Default general information style-->
<div class="qld__global_alert_include">
<div role="region" class="qld__global-alert qld__global-alert--general" aria-label="Information">
<div class="container-fluid">
<div class="qld__global-alert__main">
<div class="qld__global-alert__icon">
<svg aria-label="Information" role="img" class="qld__icon qld__icon--md"><use href="./?a=169317:dist/mysource_files/img/QLD-icons.svg#alert-information"></use></svg>
</div>
<div class="qld__global-alert__content">
<div class="qld__global-alert__message">
<strong>Testing:</strong> This website is currently undergoing testing
</div>
<div class="qld__global-alert__action">
<a href="#">
<span>Learn more</span>
<svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" class="qld__icon qld__icon--md"><use href="./?a=169317:dist/mysource_files/img/QLD-icons.svg#arrow-right"></use></svg>
</a>
</div>
</div>
<div class="qld__global-alert__close">
<button aria-label="Close alert">
<svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" class="qld__icon qld__icon--sm"><use href="./?a=169317:dist/mysource_files/img/QLD-icons.svg#close"></use></svg>
</button>
</div>
</div>
</div>
</div>
</div>
Multiple
In cases where separate messages on different critical issues are essential, a maximum of three global alerts is permissible.
<!-- Mulitiple alert example -->
<div class="qld__global_alert_include">
<div role="region" aria-label="Alert" class="qld__global-alert qld__global-alert--critical">
<div class="container-fluid">
<div class="qld__global-alert__main">
<div class="qld__global-alert__icon">
<svg aria-label="Alert" role="img" class="qld__icon qld__icon--md"><use href="./?a=169317:dist/mysource_files/img/QLD-icons.svg#alert-danger"></use></svg>
</div>
<div class="qld__global-alert__content">
<div class="qld__global-alert__message">
<strong>Health alert: </strong>Disease outbreak
</div>
<div class="qld__global-alert__action">
<a href="#">
<span>Learn more</span>
<svg focusable="false" class="qld__icon qld__icon--md"><use href="./?a=169317:dist/mysource_files/img/QLD-icons.svg#arrow-right"></use></svg>
</a>
</div>
</div>
<div class="qld__global-alert__close">
<button aria-label="Close alert">
<svg role="img" aria-label="Close" class="qld__icon qld__icon--sm"><use href="./?a=169317:dist/mysource_files/img/QLD-icons.svg#close"></use></svg>
</button>
</div>
</div>
</div>
</div>
<div role="region" aria-label="Alert" class="qld__global-alert qld__global-alert--critical">
<div class="container-fluid">
<div class="qld__global-alert__main">
<div class="qld__global-alert__icon">
<svg aria-label="Alert" role="img" class="qld__icon qld__icon--md"><use href="./?a=169317:dist/mysource_files/img/QLD-icons.svg#alert-danger"></use></svg>
</div>
<div class="qld__global-alert__content">
<div class="qld__global-alert__message">
<strong>Natural disaster:</strong> Floods
</div>
<div class="qld__global-alert__action">
<a href="#">
<span>Learn more</span>
<svg focusable="false" class="qld__icon qld__icon--md"><use href="./?a=169317:dist/mysource_files/img/QLD-icons.svg#arrow-right"></use></svg>
</a>
</div>
</div>
<div class="qld__global-alert__close">
<button aria-label="Close alert">
<svg role="img" aria-label="Close" class="qld__icon qld__icon--sm"><use href="./?a=169317:dist/mysource_files/img/QLD-icons.svg#close"></use></svg>
</button>
</div>
</div>
</div>
</div>
<div role="region" aria-label="Warning" class="qld__global-alert qld__global-alert--default">
<div class="container-fluid">
<div class="qld__global-alert__main">
<div class="qld__global-alert__icon">
<svg aria-label="Warning" role="img" class="qld__icon qld__icon--md"><use href="./?a=169317:dist/mysource_files/img/QLD-icons.svg#alert-warning"></use></svg>
</div>
<div class="qld__global-alert__content">
<div class="qld__global-alert__message">
<strong>Testing:</strong> This website is currently undergoing testing
</div>
<div class="qld__global-alert__action">
<a href="#">
<span>Learn more</span>
<svg class="qld__icon qld__icon--md"><use href="./?a=169317:dist/mysource_files/img/QLD-icons.svg#arrow-right"></use></svg>
</a>
</div>
</div>
<div class="qld__global-alert__close">
<button aria-label="Close alert">
<svg role="img" aria-label="Close" class="qld__icon qld__icon--sm"><use href="./?a=169317:dist/mysource_files/img/QLD-icons.svg#close"></use></svg>
</button>
</div>
</div>
</div>
</div>
</div>
Usage guidelines
When to use
These alert banners should be used sparingly, particularly warning and critical error banners, as they disrupt the user’s workflow.
When not use
Don't use global alerts for:
- System updates
- Validation errors
- Small localised incidents
- Little or no disruption to services
- An internal event
- Marketing campaigns
- The primary entry point for information
How to use
Always make sure that the key actionable information is visible at a glance. Text in alert banners should always be clear, concise and, where possible, give follow up actions to allow the user to become more informed or resolve the issue.
Limit global alerts to one message per site. If multiple alerts are necessary, assess if they can be consolidated into a single alert with an integrated call to action. In cases where separate messages on different critical issues are essential, a maximum of three global alerts is permissible. However, it's advisable to minimise their use, as global alerts can disrupt the user's workflow.
Alert banners use colour to add meaning, this only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. This means that information denoted by the colour must also be obvious from the content itself. For example, the visible text, or indicated through alternative means within the code.
Alert messages shouldn’t have more than 100 characters, so they don’t take up too much screen space on mobile and tablet designs. The link or action button has a 25 character limit — including spaces, so the link displays as a single line on a mobile device.