Phase banner

<div class="ds_phase-banner">
  <div class="ds_wrapper">
    <p class="ds_phase-banner__content">
      <strong class="ds_tag  ds_phase-banner__tag">
        alpha
      </strong>
      <span class="ds_phase-banner__text">
        This is a new service. Your <a href="#">feedback</a> will help us to improve it.
      </span>
    </p>
  </div>
</div>

About this component

When needed, a phase banner can appear in the site header of a website.

A Phase Banner should:

• be included on a website when it is still in alpha or beta
• describe what the phase status means, for example “This is a new website – your feedback will help us to improve it.”
• be removed once the website has been made live

Why we use this component

Users need to be aware when a website is in alpha or beta. The website might have more issues than normal because it has not been fully tested yet. Content on the website might change rapidly.

Website analytics

Each link in the phase banner should have a distinct label. To understand user behaviour, you can track clicks on links in the phase banner through the click URL, the click text and a data attribute showing the interaction.

The Design System’s ‘tracking’ script adds the data attribute.