has been released! Read the upgrade guide

Phase banner

The documentation on this page is considered legacy.

We will be updating this content to our new principle-based format in the near future.

A simple banner to indicate the phase of the project.


The Phase Banner is an indicator that sits at the top of your application. It communicates the current phase of the project to show it is still being worked on.


  1. Phase Badge. The Phase Badge indicates the current phase to the user.

  2. Phase Message. Accompanying message to provide additional information to the user.

  3. Container. The container is a wrapper that stretches to 100% of the viewport.

2Sizing & Spacing

The phase banner is a full-width component - it is designed to stretch to the size of the viewport. Try to keep the Phase Message concise.

3Hierarchy & Placement

There should be only one Phase Banner per page. Its placement should be at the top of the viewport, underneath the main Masthead.

The MOD.UK Design System provides guidance and tools for building high–quality Services within the UK Ministry of Defence. This project is open source and its source code is available on GitHub.

All content is available under the Apache 2.0 licence, except where otherwise stated.

© Crown copyright