Phase Banner

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.

The Phase Banner Component.



Anatomy of the Phase Banner component.
  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.

Sizing & 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.

Hierarchy & Placement

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

The banner should be used directly underneath the main site header before the content begins. If used without props then it will look exactly like the example image below (linking to `/feedback`), however it can be customised with any text or link that is required.

Basic Usage

By default, passing a label and href will cause a regular anchor tag to be rendered for a Breadcrumb.

alphaThis is a new service, Your feedback will help to improve it
<PhaseBanner />

Alternative text

You can pass custom markup to appear by including it as a child of the component.

alphaCustom html can go here. This part is in bold!
  Custom html can go here. <strong>This part is in bold!</strong>


childrenReact.ElementFalseThis is a new service, <a href="link">Your feedback</a> will help to improve itHTML to display in the phase banner body
linkStringFalse/feedbackThe url to use with the default message
phaseString (alpha/beta)FalsealphaText to display in the phase banner badge
isFullWidthBooleanFalseFalseSet to true if used in a full-width app with a sidebar and full-width masthead. Leave false if using in a container width-restricted layout.