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

There’s a user need for it to be made clear to all users when a website is in beta or alpha. This is because the website may change rapidly or some parts may not have been fully tested, which means there might be more issues than normal.

Website analytics

Each link in the phase banner should be labelled distinctly. To understand user behaviour, clicks on links in the phase banner can be tracked through the click URL, the click text and a data attribute showing the interaction.

The data attribute is added automatically by the Design System’s ‘tracking’ script.