Notification banners

The notification banner appears directly below the header and is used for site-wide announcements.

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.

When not to use this component

Use notification banners sparingly. 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 inset text or warning text if it needs to stand out.

<div class="notification-banner" role="region" aria-labelledby="notification-banner--title">
    <p class="notifcation-banner--title" id="notification-banner--title">
        We're keeping Pride ON.
    </p>
    <p class="notification-banner--content">
        A summer of digital events and activities to celebrate Pride online.
        <a class="link--inverse" href="#">View our events</a>.
    </p>
</div>

Setting the notification banner

To set a notification banner on the main website, you can edit the notification-banners file in the _data folder.

You should set a:

• title for the notification (title)
• message for the notification (text)
• title for the link (link-title)
• link to go to (url)
• start and end dates for the notification to show (dates > start, end)

notification-banner:
  - title: "This is a notification."
    text: "This is the notification message."
    link-title: "This is a link"
    url: "https://www.civilservice.lgbt"
    dates:
    - start: 2020-12-31
      end: 2022-12-31