Alpha and Beta Banners


Content

  1. Alpha banner
  2. Beta banner
 

1. Alpha banner

Use this to indicate to users that your service is still being worked on.

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


Code

<div class="container">
<div class="xrm-editable-html&#32;xrm-attribute" data-languageContext="English">
<div class="xrm-attribute-value">
<div class="row">
<div class="col-md-12 beta">
<p><span>ALPHA</span> &nbsp; &nbsp; This is a new service – your
<a href="#" target="_blank">feedback</a> will help us to improve it.</p>
</div>
</div>
</div>
</div>
</div>

When to use it

An alpha banner should be used to indicate when a service is in the alpha phase.

How to use it

It must sit directly underneath the header and it must link to a feedback form.

On GOV.UK

See original component and latest research for this on the Government’s design system at: https://design-system.service.gov.uk/components/phase-banner/




2. Beta Banner

Use this to indicate to users that your service is still being worked on.

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


Code
<div class="container">
<div class="xrm-editable-html&#32;xrm-attribute" data-languageContext="English">
<div class="xrm-attribute-value">
<div class="row">
<div class="col-md-12 beta">
<p><span>BETA</span> This is a new service – your <a href="#" target="_blank">feedback</a> will help us to improve it.</p>
</div>
</div>
</div>
</div>
</div>

When to use it

A beta banner should be used to indicate when a service is in the Beta phase.

How to use it

It must sit directly underneath the header and it must link to a feedback form.

On GOV.UK

See original component and latest research for this on the Government’s design system at: https://design-system.service.gov.uk/components/phase-banner/





Find us on