Components menu
Notification banner
A banner highlighting key content that all visitors to a website will need to see.
About this component
The notification banner stretches across the top of a web page, spanning its full width. It pushes everything else on a web page beneath it.
You can include links to further content in the banner.
You should try to avoid having more than 2 notification banners on a page. If you have more than 1 banner, each banner should be distinct.
Generally, banners do not contain images, but may contain small icons, such as an arrow to highlight a link.
When to use this component
A notification banner lets you tell the user about something that’s not directly relevant to the thing they’re trying to do on that page of the service. For example:
- telling the user about a problem that’s affecting the service as a whole (for example, delays in processing applications because of an emergency)
- telling the user about something that affects them in particular (for example, an approaching deadline they need to meet)
- telling the user about the outcome of something they’ve just done on a previous page (for example, confirming that an email has been sent)
When not to use this component
Use notification banners sparingly. There’s evidence that people often miss them, and using them too often is likely to make this problem worse.
If the information is directly relevant to the thing the user is doing on that page, put the information in the main page content instead. Use an Inset text component or Warning text component if it needs to stand out.
HTML
<div class="notification-banner" role="region" aria-labelledby="notification-banner-title" data-module="notification-banner">
<div class="notification-banner__header">
<h2 class="notification-banner__title" id="notification-banner-title"> Important </h2>
</div>
<div class="notification-banner__content">
<p class="notification-banner__heading">
You have 7 days left to send your application.
<a href="#"> View application <i class="card-link--icon fa-solid fa-circle-arrow-right" aria-hidden="true"></i> </a>
</p>
</div>
</div>
Other versions of this component
Icons
Notification banners can have an icon before their content.
HTML
<div class="notification-banner" role="region" aria-labelledby="notification-banner-title" data-module="notification-banner">
<div class="notification-banner__header">
<h2 class="notification-banner__title" id="notification-banner-title">
<i class="fa-solid fa-circle-exclamation fa-1x" aria-hidden="true"></i> Important
</h2>
</div>
<div class="notification-banner__content">
<p class="notification-banner__heading">
You have 7 days left to send your application.
<a href="#"> View application <i class="card-link--icon fa-solid fa-circle-arrow-right" aria-hidden="true"></i> </a>
</p>
</div>
</div>
Alerts
HTML
<div class="alert alert-primary" role="alert"> A primary alert </div>
<div class="alert alert-success" role="alert"> A success alert </div>
<div class="alert alert-danger" role="alert"> A danger alert </div>
<div class="alert alert-warning" role="alert"> A warning alert </div>
<div class="alert alert-light" role="alert"> An information light background alert </div>
<div class="alert alert-dark" role="alert"> An information dark background alert </div>
CSS
/* Notification banner
------------------------------------ */
.notification-banner {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-weight: 400;
font-size: 1.1875rem;
line-height: 1.3157894737;
margin-bottom: 30px;
border: 5px solid var(--scottish-teal);
background-color: var(--scottish-teal);
}
.notification-banner:focus {
outline: 3px solid;
outline-color: var(--grey-three);
}
.notification-banner__header {
font-size: 1.3125rem;
margin: 0 0 15px;
padding: 10px 10px 0px 10px;
}
.notification-banner__title {
font-size: 1.1875rem;
line-height: 1.3157894737;
margin: 0;
padding: 0;
color: #ffffff;
}
.notification-banner__content {
padding: 15px;
color: var(--grey-one);
background-color: #ffffff;
}
.notification-banner__content > * {
box-sizing: border-box;
max-width: 605px;
margin-top: 10px;
}
.-notification-banner__content>:last-child {
margin-bottom:0;
}
/* Alerts
------------------------------------ */
.alert, .alert p {
font-size: 1rem;
}
.alert p {
margin-bottom: 0;
}
.alert-primary {
--bs-alert-color: #ffffff;
--bs-alert-bg: var(--scottish-teal);
--bs-alert-border-color: var(--scottish-dark-teal);
}
.alert-success {
--bs-alert-color: #000000;
--bs-alert-bg: var(--verdant-green);
--bs-alert-border-color: #39b06e;
}
.alert-danger {
--bs-alert-color: #000000;
--bs-alert-bg: #f8d7da;
--bs-alert-border-color: #f5c2c7;
}
.alert-warning {
--bs-alert-color: #000000;
--bs-alert-bg: #fff3cd;
--bs-alert-border-color: #ffecb5;
}
.alert-light {
--bs-alert-color: #000000;
--bs-alert-bg: var(--grey-four);
--bs-alert-border-color: var(--grey-three);
}
.alert-dark {
--bs-alert-color: #ffffff;
--bs-alert-bg: var(--grey-one);
--bs-alert-border-color: var(--grey-two);
}