Styleguide › GOV.UK Elements

Alpha and beta banners

Repo • Page source

You have to use an alpha banner if your thing is in alpha, and a beta banner if it’s in beta.

Things on the service.gov.uk subdomain

If your service is in beta or alpha, you must show the relevant banner in the header. It should sit directly underneath the black GOV.UK header and colour bar.

ALPHA This is a new service – your feedback will help us to improve it. 

<div class="global-subheader container">
  <div class="subheader-item phase-banner">
      <span class="phase-tag phase-tag-alpha">
        ALPHA
      </span>
    <span class="phase-banner-message">
      This is a new service – your <a href="/feedback">feedback</a> will help us to improve it.
    </span>
  </div>
</div>
div.global-subheader.container
div.subheader-item.phase-banner
span.phase-tag.phase-tag-alpha ALPHA
span.phase-banner-message This is a new service – your will help us to improve it.
a href="/feedback" feedback
BETA This is a new service – your feedback will help us to improve it. 

<div class="global-subheader container">
  <div class="subheader-item phase-banner">
      <span class="phase-tag phase-tag-beta">
        BETA
      </span>
    <span class="phase-banner-message">
      This is a new service – your <a href="/feedback">feedback</a> will help us to improve it.
    </span>
  </div>
</div>
div.global-subheader.container
div.subheader-item.phase-banner
span.phase-tag.phase-tag-beta BETA
span.phase-banner-message This is a new service – your will help us to improve it.
a href="/feedback" feedback

Things on GOV.UK

If your GOV.UK content is in beta or alpha, show the relevant banner below the page title, but above the body content. You can see what they should look like in this blog post.