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

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


  <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>


Beta banner

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


  <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 the design patterns Hackpad