Components

Outage banner

Experimental

Added in January 2026. Contributed by Karen Simpson in ‘Digital Prison Services’.

How to use ‘experimental’ components

Anyone can add an ‘experimental’ status component to the MOJ Design System. They’re early in development and can be used as a starting point. Read about all the Design System statuses.

Add this component to a service before planned outage.

Contents

Overview

This component should be used before the planned outage of a whole platform or an individual service.

How the component is currently used

The component is being used in DPS. If an outage is scheduled the banner will be displayed under the header on a page detailing what will be unavailable, when and why.

Contribute to this component

You can help develop this component by adding information to the ‘outage banner’ Github discussion. This helps other people to use it in their service.

You can view the component image in the component overview.

There may be more information in the ‘outage banner’ Github discussion.

Contribute a Figma link

If you have a Figma link for this component (or a component like it) you can add it to Github discussion. This helps other people to use it in their service.

No accessibility findings were included when this component was added. There may be more information in the ‘outage banner’ Github discussion.

Contribute accessibility findings

If you have accessibility findings that are relevant to this component you can add them to the Github discussion. This helps other people to use it in their service.

Code

Code has been added for this component. There may be other code blocks in the ‘Outage banner’ Github discussion.

Code block 1: Nunjucks

    {%- from "govuk/macros/attributes.njk" import govukAttributes -%}
    
    <div class="moj-outage-banner" {{ govukAttributes(params.attributes) }}>
      <div class="govuk-width-container moj-outage-banner__inner">
        {{- params.html | safe if params.html else params.text -}}
      </div>
    </div>
    
    

Code block 2: CSS

    @use "sass:color";
    @use "../../vendor/govuk-frontend" as *;
    
    $moj-outage-banner-background: color.mix(govuk-colour('red'), #fff, $weight: 20%) !default;
    $moj-outage-banner-colour: $govuk-text-colour !default;
    
    .moj-outage-banner {
      min-height: 70px;
      background-color: $moj-outage-banner-background;
    }
    
    .moj-outage-banner__inner {
      @include govuk-font($size: 19);
      padding: 22px 0;
      color: $moj-outage-banner-colour;
    
      p:last-child {
        margin-bottom: 0;
      }
    
      a:link, a:visited {
        color: $moj-outage-banner-colour;
      }
    }
    

Contribute code for this component

If you have code that is relevant to this component you can add it to the Github discussion. This helps other people to use it in their service.