Skip to main content

GOV.UK elements
Alpha and beta banners

GOV.UK Elements has now been replaced by the GOV.UK Design System

GOV.UK Elements:

is no longer maintained
will only be updated for major bug fixes and security patches
does not meet the Web Content Accessibility Guidelines (WCAG 2.1 level AA) accessibility standard

This framework will remain available in case you’re currently using it. To help your service meet accessibility requirements, you should use the GOV.UK Design System. You can migrate to the Design System from GOV.UK Elements.

GOV.UK elements Alpha and beta banners

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

Contents:

Alpha banner
Beta banner
Phase tags
Creating phase banners


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


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

Alpha and Beta phase tags

Phase tags are mostly used inside phase banners as an indication of the state of a project. It’s possible to use them outside phase banners, for example as part of a service header.

Alpha tag

ALPHA


  
    <strong class="phase-tag">ALPHA</strong>

Beta tag

BETA


  
    <strong class="phase-tag">BETA</strong>

Creating alpha and beta banners

Use the GOV.UK Sass phase banner mixin – find this in the GOV.UK frontend toolkit alpha-beta.scss file.

If you’ve previously used phase-banner-alpha or phase-banner-beta classes in your markup you should change them to phase-banner.

Discuss alpha and beta banners on Dropbox Paper