Phase banner
A phase banner lets users know that a website is being worked on or tested.
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.
When to use this component
Include a phase banner on a website when it is still in alpha or beta.
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.
How to use this component
Describe what the phase status means, for example “This is a new website – your feedback will help us to improve it.”
Remove the phase banner once the website has been made live.
HTML
<header class="ds_site-header ds_site-header--gradient" role="banner">
<div class="ds_wrapper">
<div class="ds_site-header__content">
<div class="ds_site-branding">
<a class="ds_site-branding__logo ds_site-branding__link" href="/">
<img class="ds_site-branding__logo-image" src="/binaries/content/gallery/designsystem/examples/scottish-government-svg" alt="Scottish Government" />
</a>
<div class="ds_site-branding__title">
Design System
</div>
</div>
<div class="ds_site-header__controls">
<label aria-controls="mobile-navigation" class="ds_site-header__control js-toggle-menu" for="menu">
<span class="ds_site-header__control-text">Menu</span>
<svg class="ds_icon ds_site-header__control-icon" aria-hidden="true" role="img"><use href="/assets/images/icons/icons.stack.svg#menu"></use></svg>
<svg class="ds_icon ds_site-header__control-icon ds_site-header__control-icon--active-icon" aria-hidden="true" role="img"><use href="/assets/images/icons/icons.stack.svg#close"></use></svg>
</label>
</div>
<input class="ds_site-navigation__toggle" id="menu" type="checkbox">
<nav id="mobile-navigation" class="ds_site-navigation ds_site-navigation--mobile" data-module="ds-mobile-navigation-menu">
<ul class="ds_site-navigation__list">
<li class="ds_site-navigation__item">
<a href="#" class="ds_site-navigation__link">
Get started
</a>
</li>
<li class="ds_site-navigation__item">
<a href="#" class="ds_site-navigation__link">
Styles
</a>
</li>
<li class="ds_site-navigation__item">
<a href="#" class="ds_site-navigation__link ds_current" aria-current="true">
Components
</a>
</li>
<li class="ds_site-navigation__item">
<a href="#" class="ds_site-navigation__link">
Patterns
</a>
</li>
</ul>
</nav>
<div class="ds_site-search ds_site-header__search" data-module="ds-site-search">
<form role="search" class="ds_site-search__form">
<label class="ds_label visually-hidden" for="site-search">Search</label>
<div class="ds_input__wrapper ds_input__wrapper--has-icon">
<input name="q" required="" id="site-search" class="ds_input ds_site-search__input" type="text" placeholder="Search this site" autocomplete="off">
<button type="submit" class="ds_button js-site-search-button">
<span class="visually-hidden">Search</span>
<svg class="ds_icon" aria-hidden="true" role="img"><use href="/assets/images/icons/icons.stack.svg#search"></use></svg>
</button>
</div>
</form>
</div>
</div>
</div>
<div class="ds_site-header__navigation">
<div class="ds_wrapper">
<nav class="ds_site-navigation">
<ul class="ds_site-navigation__list">
<li class="ds_site-navigation__item">
<a href="#" class="ds_site-navigation__link">
Get started
</a>
</li>
<li class="ds_site-navigation__item">
<a href="#" class="ds_site-navigation__link">
Styles
</a>
</li>
<li class="ds_site-navigation__item">
<a href="#" class="ds_site-navigation__link ds_current" aria-current="true">
Components
</a>
</li>
<li class="ds_site-navigation__item">
<a href="#" class="ds_site-navigation__link">
Patterns
</a>
</li>
</ul>
</nav>
</div>
</div>
<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>
</header>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 selected URL (also known as the click URL)
- the selected text (also known as the click text)
- a data attribute showing the interaction.
The Design System’s ‘tracking’ script adds the data attribute.
Tracking attributes
Links in phase banners get a data-banner attribute. Its value uses the pattern banner-[bannername]-link. ‘bannername’ is either:
- the slug of the phase banner’s
tag - ‘phase’ if the banner does not have a tag.
<a href="mailto:designsystem@gov.scot" data-banner="banner-beta-link">feedback</a>