Overview The announcement banner highlights important messages for all users.
When to use this component Use an announcement banner to display important messages that should be seen by all users but are not directly related to the page content.
Black - Used to mark the death of a notable person The black default banner is used to mark the death of a notable person. A large black banner is displayed on all pages, including the homepage.
The wording to use in the template will be the official title of the deceased and the years of their life, for example ‘His Royal Highness Henry VIII 1491 to 1547’. The text should link to their official biography.
Example Banner Black contents Nunjucks {% from "components/announcement-banner/_macro.njk" import onsAnnouncementBanner %}
{{
onsAnnouncementBanner({
"title": 'His Royal Highness Henry VIII',
"description": '1491 to 1547',
"link": {
"text": 'Find out more',
"url": '#0'
}
})
}}
Copy nunjucks code
HTML <div class="ons-announcement-banner__container ons-announcement-banner--black">
<div class="ons-container">
<div class="ons-announcement-banner ons-announcement-banner--black">
<h2 class="ons-announcement-banner__title">His Royal Highness Henry VIII</h2>
<p class="ons-announcement-banner__description">1491 to 1547</p>
<a class="ons-announcement-banner__link" href="#0">Find out more</a>
</div>
</div>
</div>Copy html code
When not to use this component Do not use this component if the message is not relevant to every user or the message needs to be displayed permanently.
To warn the user of something important, use the warning panel .
To inform the user of an error, use an error details and an error summary .
To highlight important text to users, use the information panel .
How to use this component Each banner must include:
A header that clearly states the nature of the emergency A short description that provides essential context in plain English A link to further information or official guidance. Variants Black is default, if you need the red variant, set variants to "red". If you need the teal variant, set variants to "teal"
If you need the banner wide set, set the variants to "wide". If you need a red wide variant set variants to "['red', 'wide']"
Red – Used for national emergencies This banner is to be used for national emergencies (level 1 or category 2).
Example Banner Red contents Nunjucks {% from "components/announcement-banner/_macro.njk" import onsAnnouncementBanner %}
{{
onsAnnouncementBanner({
"variants": 'red',
"title": 'National emergency',
"description": 'This is a level 1 incident',
"link": {
"text": 'More information',
"url": '#0'
}
})
}}
Copy nunjucks code
HTML <div class="ons-announcement-banner__container ons-announcement-banner--red">
<div class="ons-container">
<div class="ons-announcement-banner ons-announcement-banner--red">
<h2 class="ons-announcement-banner__title">National emergency</h2>
<p class="ons-announcement-banner__description">This is a level 1 incident</p>
<a class="ons-announcement-banner__link" href="#0">More information</a>
</div>
</div>
</div>Copy html code
Teal – Used for large-scale localised emergencies This banner is to be used for large-scale localised emergencies (level 2 or category 1).
Example Banner Teal contents Nunjucks {% from "components/announcement-banner/_macro.njk" import onsAnnouncementBanner %}
{{
onsAnnouncementBanner({
"variants": 'teal',
"title": 'Local emergency',
"description": 'This is a level 2 incident',
"link": {
"text": 'More information',
"url": '#0'
}
})
}}
Copy nunjucks code
HTML <div class="ons-announcement-banner__container ons-announcement-banner--teal">
<div class="ons-container">
<div class="ons-announcement-banner ons-announcement-banner--teal">
<h2 class="ons-announcement-banner__title">Local emergency</h2>
<p class="ons-announcement-banner__description">This is a level 2 incident</p>
<a class="ons-announcement-banner__link" href="#0">More information</a>
</div>
</div>
</div>Copy html code
Wide – text aligns further to the left If you need the banner wide set, set the variants to "wide". This will then use the black default banner but if you need a red or teal wide variant you can set both using the variants parameter, for example "['red', 'wide']"
Example Banner Red Wide contents Nunjucks {% from "components/announcement-banner/_macro.njk" import onsAnnouncementBanner %}
{{
onsAnnouncementBanner({
"variants": ['red', 'wide'],
"title": 'National emergency',
"description": 'This is a level 1 incident',
"link": {
"text": 'More information',
"url": '#0'
}
})
}}
Copy nunjucks code
HTML <div class="ons-announcement-banner ons-announcement-banner--red ons-announcement-banner--wide">
<h2 class="ons-announcement-banner__title">National emergency</h2>
<p class="ons-announcement-banner__description">This is a level 1 incident</p>
<a class="ons-announcement-banner__link" href="#0">More information</a>
</div>Copy html code
Help improve this page Let us know how we could improve this page, or share your user research findings. Discuss the ‘Announcement banner’ component on GitHub (opens in a new tab)