Skip to main content Skip to main content
Components

New features banner

Status: Experimental

Added by Leigh Christie in October 2025.

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.
Use the new features banner component to highlight updates to a service, and link to a page with more information.

Contents

Purple banner with 'New features' in white bold text, a link to 'find out more on the What's new page', and a 'Hide message' link.

Overview

Banner that appears below the header and above any navigation that allows users to click into a subsequent page that informs them of changes, fixes and updates to the product they’re using.

How the component is currently used

It is currently being used in ‘Allocate a Person on Probation’ (APoP) and it is going to be implemented in ‘Manage a Person on Probation’ (MPoP) soon too, to announce changes to our users in a consistent way.

Contribute to this component

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

Designs

A Figma design has been added for this component. There may be more links and resources in the ‘new features banner’ Github discussion.

Figma

If you work for MOJ, View the ‘new features banner’ component in the MOJ Figma Kit.

If you work outside MOJ, go to the MOJ Figma Kit on the Figma community platform.

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

Accessibility

Accessibility findings have been added for this component. There may be more findings in the ‘new features banner’ Github discussion.

Internal review

  • By: Manage a workforce
  • Date: 25 January 2023

Review findings

I’m not sure of the exact date but it’s been live since Jan 23. I’m not sure if it’s explicitly had an external review. We reviewed it internally at the time, but it’s heavily influenced by other banners in use.

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 ‘new features banner’ Github discussion.

Code block 1: HTML


<div class="govuk-grid-row technical-updates-banner" id="technical-updates-banner" data-banner-version="30 May 2025">
  <div class="govuk-grid-column-full">
    <div class="govuk-width-container govuk-body technical-updates-container">
      <div class="technical-updates-content">
        <strong class="technical-updates-whats-new">New features</strong>
        <span>
            We’re updating the service all the time, <a class="govuk-link govuk-link--inverse" href="/whats-new">find out more on the What’s new page.</a>
        </span>
      </div>
      <a id="hide-message" class="technical-updates-hide-message govuk-link govuk-link--inverse" href="#" aria-current="page">Hide message</a>
    </div>
  </div>
</div>

How to use the code

We use the “Hide message” link to remove the banner. If they click the link to see what the updates are, this also should remove the banner from the rest of the site.

Code block 2: CSS


.technical-updates-banner {
    background-color: #44247b;
    padding: 10px 0 10px 0;
}

.govuk-grid-row {
    margin-right: -15px;
    margin-left: -15px;
}

.technical-updates-container {
    color: #fff;
}

.technical-updates-content {
    float: left;
}

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.