Beta

This is a new service and pages are being tested and improved.

Overview

The alert banner highlights important information users need to know that isn’t part of the main page content.

It appears at the top of every page, above the navigation menu, drawing immediate attention to service disruptions, urgent updates or cross-government messaging.

Use it for site-wide information that affects all users.

When to use

Use the alert banner to:

  • announce planned maintenance or service disruptions
  • communicate cross-government messaging that affects people working in project delivery
  • alert users to technical issues affecting site functionality
  • share urgent updates about service availability or security incidents
  • provide advance notice of changes that will impact user experience
  • display emergency or crisis-related messaging from government

When not to use

Avoid the alert banner when:

  • information applies to specific pages only, use a notification banner for consequences, or inset text for supplementary information
  • you need to display multiple messages, you should prioritise the single most critical message
  • content is promotional
  • the message needs complex formatting create a dedicated page and link to it from a short banner message

If you’re unsure whether your message warrants an alert banner, ask: ‘Does every user on every page need to see this right now?’ If not, choose a different approach.

Content notes

Keep content brief and focused. Use paragraph text only and include links for additional details when needed. When users must take action, clearly explain what they need to do and make the task as simple as possible.

Provide appropriate context without overwhelming users. Consider how much background information is necessary for users to understand and respond to the message.

Write for both signed in and signed out users, ensuring the message makes sense regardless of user status.

Implement dismissible functionality when appropriate — make banners dismissible for informational content that users can ignore after reading.

Don’t make banners dismissible when the message is critical or affects task completion, like if you’re announcing on the day disruption.

Alert levels

Low

A light gray banner with black text that reads ‘This is a low level alert banner.’ Below the text, there is a link labelled ‘Hide this message'

Low level alert banners are for general notices that don’t require user action and are unlikely to affect user experience.

Moderate

A light orange banner with black text that reads ‘This is a moderate level alert banner.’ Below the text, there is a link labelled ‘Hide this message.'

Warnings or advisory messages that may affect user experience but don’t require immediate action. Use a moderate level alert banner for advance notice of service disruptions.

For example: ‘This website will be unavailable between 5pm and 6pm on Thursday 1 January 2020.’

Important

An orange banner with a black exclamation mark icon followed by text that reads ‘This is an important level alert banner.’ Below the text, there is a link labelled ‘Hide this message.’

Important notices are for anything that could impact users’ ability to complete tasks. These notices require attention.

Use for short-notice service disruptions, widespread technical issues, or cross-government messaging.

Urgent

A red banner with a white warning triangle icon followed by text that reads ‘This is an urgent level alert banner.’ Below the text, there is a link labelled ‘Hide this message.’

The urgent alert level is for issues requiring immediate attention or action.

Use the urgent alert level for a security breach, if the website is unstable or unsafe, or national emergencies.

Back to top