Components

Phase banner

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

<div class="govuk-phase-banner">
  <p class="govuk-phase-banner__content"><strong class="govuk-tag govuk-phase-banner__content__tag ">
  alpha
</strong>
    <span class="govuk-phase-banner__text">
      This is a new service – your
      <a class="govuk-link" href="#">feedback</a> will help us to improve it.
    </span>
  </p>
</div>
{% from "phase-banner/macro.njk" import govukPhaseBanner %}
{{ govukPhaseBanner({
  tag: {
    text: "alpha"
  },
  html: 'This is a new service – your <a class="govuk-link" href="#">feedback</a> will help us to improve it.'
}) }}

You can configure this component using the Nunjucks macro arguments.

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.

There are 2 ways to use the phase banner component. You can use HTML or, if you are using Nunjucks or the GOV.UK Prototype Kit, you can use the Nunjucks macro.

<div class="govuk-phase-banner">
  <p class="govuk-phase-banner__content"><strong class="govuk-tag govuk-phase-banner__content__tag ">
  alpha
</strong>
    <span class="govuk-phase-banner__text">
      This is a new service – your
      <a class="govuk-link" href="#">feedback</a> will help us to improve it.
    </span>
  </p>
</div>
{% from "phase-banner/macro.njk" import govukPhaseBanner %}
{{ govukPhaseBanner({
  tag: {
    text: "alpha"
  },
  html: 'This is a new service – your <a class="govuk-link" href="#">feedback</a> will help us to improve it.'
}) }}

You can configure this component using the Nunjucks macro arguments.

<div class="govuk-phase-banner">
  <p class="govuk-phase-banner__content"><strong class="govuk-tag govuk-phase-banner__content__tag ">
  beta
</strong>
    <span class="govuk-phase-banner__text">
      This is a new service – your
      <a class="govuk-link" href="#">feedback</a> will help us to improve it.
    </span>
  </p>
</div>
{% from "phase-banner/macro.njk" import govukPhaseBanner %}
{{ govukPhaseBanner({
  tag: {
    text: "beta"
  },
  html: 'This is a new service – your <a class="govuk-link" href="#">feedback</a> will help us to improve it.'
}) }}

You can configure this component using the Nunjucks macro arguments.

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 don’t 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 Service Manual.

Research on this component

If you’ve used this component, get in touch to share your user research findings.

Get in touch

If you’ve got a question, idea or suggestion share it in #govuk-design-system on cross-government Slack (open in app) or email the Design System team on govuk-design-system-support@digital.cabinet-office.gov.uk

Discuss ‘Phase banner’ on GitHub