Components Banner

Important

The GOV.UK Design System has a similar component

The Notification banner component in the GOV.UK Design System has a similar function and visual design to this component.

You should consider using the GOV.UK version if it fits your needs.

Last updated: 18 May 2022

Open this example in a new window

<div class="moj-banner" role="region" aria-label="information">

  <svg class="moj-banner__icon" fill="currentColor" role="presentation" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25" height="25" width="25">
    <path d="M13.7,18.5h-2.4v-2.4h2.4V18.5z M12.5,13.7c-0.7,0-1.2-0.5-1.2-1.2V7.7c0-0.7,0.5-1.2,1.2-1.2s1.2,0.5,1.2,1.2v4.8
	C13.7,13.2,13.2,13.7,12.5,13.7z M12.5,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.1,0.5,12.5,0.5z" />
  </svg>

  <div class="moj-banner__message">
    <h2 class="govuk-heading-m">This service will be unavailable from 1 June 2019</h2>
  </div>

</div>

{%- from "moj/components/banner/macro.njk" import mojBanner -%}

{% set bannerHtml %}
  <h2 class="govuk-heading-m">This service will be unavailable from 1 June 2019</h2>
{% endset %}

{{ mojBanner({
  type: 'information',
  html: bannerHtml
}) }}

When to use

Use the banner component to display a prominent message and related actions to take.

Use this component when users might be performing an action repeatedly. For example, when a judge creates a batch of questions for sending to the citizen.

When not to use

For rarely performed or important actions, you should use the Confirmation Page pattern in the GOV.UK Design System.

How to use

The banner should be displayed at the top of the page above the main heading and below the back link if there is one.

It can be configured with and without icons and in different colours for success, warning and information message types.

Success

This is the default style and should be used when the user performs an action successfully.

Open this example in a new window

<div class="moj-banner moj-banner--success" role="region" aria-label="Success">

  <svg class="moj-banner__icon" fill="currentColor" role="presentation" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25" height="25" width="25">
    <path d="M25,6.2L8.7,23.2L0,14.1l4-4.2l4.7,4.9L21,2L25,6.2z" />
  </svg>

  <div class="moj-banner__message">You have successfully added 1 question.</div>

</div>

{%- from "moj/components/banner/macro.njk" import mojBanner -%}

{{ mojBanner({
  type: 'success',
  text: 'You have successfully added 1 question.',
  iconFallbackText: 'Success'
}) }}

Warning

Use this variant when you want to warn the user that something went wrong.

Open this example in a new window

<div class="moj-banner moj-banner--warning" role="region" aria-label="Warning">

  <svg class="moj-banner__icon" fill="currentColor" role="presentation" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25" height="25" width="25">
    <path d="M13.6,15.4h-2.3v-4.5h2.3V15.4z M13.6,19.8h-2.3v-2.2h2.3V19.8z M0,23.2h25L12.5,2L0,23.2z" />
  </svg>

  <div class="moj-banner__message">Questions weren’t sent – try again.</div>

</div>

{%- from "moj/components/banner/macro.njk" import mojBanner -%}

{{ mojBanner({
  type: 'warning',
  text: 'Questions weren’t sent – try again.',
  iconFallbackText: 'Warning'
}) }}

Information

Use this variant when you want to tell users some information.

Open this example in a new window

<div class="moj-banner" role="region" aria-label="information">

  <svg class="moj-banner__icon" fill="currentColor" role="presentation" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25" height="25" width="25">
    <path d="M13.7,18.5h-2.4v-2.4h2.4V18.5z M12.5,13.7c-0.7,0-1.2-0.5-1.2-1.2V7.7c0-0.7,0.5-1.2,1.2-1.2s1.2,0.5,1.2,1.2v4.8
	C13.7,13.2,13.2,13.7,12.5,13.7z M12.5,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.1,0.5,12.5,0.5z" />
  </svg>

  <div class="moj-banner__message">Select text to add comment.</div>

</div>

{%- from "moj/components/banner/macro.njk" import mojBanner -%}

{{ mojBanner({
  type: 'information',
  text: 'Select text to add comment.',
  iconFallbackText: 'information'
}) }}