Components Banner
Last updated: 18 May 2022
<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
}) }}
To use the component in your design, add the MoJ Figma Kit to your Figma libraries and find the component using the Assets tab.
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.
<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'
}) }}
To use the component in your design, add the MoJ Figma Kit to your Figma libraries and find the component using the Assets tab.
Warning
Use this variant when you want to warn the user that something went wrong.
<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'
}) }}
To use the component in your design, add the MoJ Figma Kit to your Figma libraries and find the component using the Assets tab.
Information
Use this variant when you want to tell users some information.
<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'
}) }}
To use the component in your design, add the MoJ Figma Kit to your Figma libraries and find the component using the Assets tab.