Skip to main content

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.

Open this example (Banner (example)) in a new window 
<div class="moj-banner moj-banner--information" 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
}) }}

This component is in the ‘Assets’ tab in the MoJ Figma Kit.

If you’re external to MoJ, download the Kit and add it as a library to your Figma files. You’ll need to re-add the kit to update the version.

View component in MoJ Figma Kit

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 (Success banner (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'
}) }}

This component is in the ‘Assets’ tab in the MoJ Figma Kit.

If you’re external to MoJ, download the Kit and add it as a library to your Figma files. You’ll need to re-add the kit to update the version.

View component in MoJ Figma Kit

Warning

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

Open this example (Warning banner (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'
}) }}

This component is in the ‘Assets’ tab in the MoJ Figma Kit.

If you’re external to MoJ, download the Kit and add it as a library to your Figma files. You’ll need to re-add the kit to update the version.

View component in MoJ Figma Kit

Information

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

Open this example (Information banner (example)) in a new window 
<div class="moj-banner moj-banner--information" 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'
}) }}

This component is in the ‘Assets’ tab in the MoJ Figma Kit.

If you’re external to MoJ, download the Kit and add it as a library to your Figma files. You’ll need to re-add the kit to update the version.

View component in MoJ Figma Kit

Get help and contribute

Get help

You can contact the MoJ Design System team for help or support using this component.

Help improve this component

The MoJ Design System team would like to hear:

  • how you have used this component in your service
  • any feedback you have about its usage, for example accessibility or ideas for improvement

Add these comments to the banner discussion on GitHub.