Emergency banner
In the event of an emergency, a site-wide banner is displayed with important information.
When to use this component
An emergency banner is used in the event of:
- a notable death
- a national emergency
- a local emergency
How it works
The banner is black, red, or teal depending on the type of emergency.
At minimum it will contain a heading, with the option to add a short description and a link to more information.
The homepage will display a variation with larger text and more spacing.
GA4 tracking is enabled by default, but can be switched off.
View this component and all its variations in the Component Guide (opens in a new tab).
Accessibility criteria
Links in the component must:
- accept focus
- be focusable with a keyboard
- be usable with a keyboard
- indicate when they have focus
- change in appearance when touched (in the touch-down state)
- change in appearance when hovered
- be usable with touch
- be usable with voice commands
- have visible text
- have meaningful text
Considerations and criteria taken from the Component Guide (opens in a new tab).
How to report an issue
If you happen to come across an issue:
- Report it on Github (opens in a new tab).
- Once the issue has been added, update this document by adding the title and Github Issue’s link.
- Give yourself a high-five.
Help improve this page
To help make sure that this page is useful, relevant and up to date, submit a GitHub issue (opens in a new tab) with your proposed updates.