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>


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