Skip to main content
Archive

Banner

Status: Archived

Archived in February 2025.

How ‘archived’ components work
This component is no longer being supported and should not be used. Read about all the Design System statuses.

Important

This component is archived

Use the alert to display a notification to users.

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
}) }}

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