Components

Phase banner

Use the phase banner component to show users your service is still being worked on.

HTML
React

<div class="govuk-phase-banner">
  <p class="govuk-phase-banner__content">
    <strong class="govuk-tag govuk-phase-banner__tag">
      Alpha
    </strong>
    <span class="govuk-phase-banner__text">
      This is a new service – your
      <a href="#">feedback</a>
      will help us to improve it.
    </span>
  </p>
</div>

<PhaseBanner phase="Alpha">
  This is a new service – your{" "}
  <a href="#">feedback</a> will help us to improve it.
</PhaseBanner>

Props

Name	Type	Default	Description
id	string	-	'id' attribute to place on the base HTML element
classBlock	string	-	Block name override in BEM style classes applied to all elements
classModifiers	Modifiers	-	BEM style modifiers to apply to the base HTML element
className	string	-	Extra classes to apply to the base HTML element
phase	string	-	REQUIRED. The phase the service is in

When to use this component

You must use the phase banner component if your service is still being developed and is hosted on the service.gov.uk subdomain. Use an alpha banner when your service is in alpha, and a beta banner if your service is in private or public beta.

How it works

Your banner must be directly under the black GOV.UK header and colour bar.

Stories

Alpha

An alpha Phase banner.

HTML
React

<div class="govuk-phase-banner">
  <p class="govuk-phase-banner__content">
    <strong class="govuk-tag govuk-phase-banner__tag">
      Alpha
    </strong>
    <span class="govuk-phase-banner__text">
      This is a new service – your
      <a href="#">feedback</a>
      will help us to improve it.
    </span>
  </p>
</div>

<PhaseBanner phase="Alpha">
  This is a new service – your{" "}
  <a href="#">feedback</a> will help us to improve it.
</PhaseBanner>

Beta

A beta Phase banner.

HTML
React

<div class="govuk-phase-banner">
  <p class="govuk-phase-banner__content">
    <strong class="govuk-tag govuk-phase-banner__tag">
      Beta
    </strong>
    <span class="govuk-phase-banner__text">
      This is a new service – your
      <a href="#">feedback</a>
      will help us to improve it.
    </span>
  </p>
</div>

<PhaseBanner phase="Beta">
  This is a new service – your{" "}
  <a href="#">feedback</a> will help us to improve it.
</PhaseBanner>

Prototype

It's also possible to use the Pahse banner to declare your service as merely being a prototype or demo.

HTML
React

<div class="govuk-phase-banner">
  <p class="govuk-phase-banner__content">
    <strong class="govuk-tag govuk-phase-banner__tag">
      Prototype
    </strong>
    <span class="govuk-phase-banner__text">
      This is
      <strong>NOT</strong>
      a real service!
    </span>
  </p>
</div>

<PhaseBanner phase="Prototype">
  This is <strong>NOT</strong> a real service!
</PhaseBanner>

Add a feedback link

Use a ‘feedback’ link to collect on-page feedback about your service. This can open an email or take the user to a dedicated page or form. Whatever option you use, make sure that users do not lose their place in the service and can return to the page they were on.

Find out what feedback you need to collect at each phase in the GOV.UK Service Manual.