Phase banner
Sample HTML
<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.
Feedback, help and support
If you need help or support you can e-mail us at designsystem@gov.scot
There is a problem
Thanks for your feedback