Components menu
Phase banner
A phase banner lets users know that a website is being worked on or tested.
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.
HTML
<a href="" class="badge text-bg-primary" title=""> Badge title </a>
<div class="container-fluid phase--banner container-negative-bottom-margin">
<div class="container">
<div class="badge--alpha"> ALPHA </div> This is a new service. Your <a href="" title="Give feedback on our BETA service">feedback</a> will help us to improve it.
</div>
</div>
<div class="container-fluid phase--banner container-negative-bottom-margin">
<div class="container">
<div class="badge--beta"> BETA </div> This is a new service. Your <a href="" title="Give feedback on our BETA service">feedback</a> will help us to improve it.
</div>
</div>
CSS
/* Phase banner (Alpha/Beta badge)
------------------------------------ */
.phase--banner {
background-color: var(--grey-three);
padding: 25px 0px;
color: #000000;
}
.badge--alpha {
background-color: var(--scottish-teal);
color: #ffffff;
display: inline-block;
padding: 5px 10px;
font-size: 1.2rem;
font-weight: 500;
line-height: 1rem;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
margin-right: 15px;
border-radius: 0;
}
.badge--beta {
background-color: var(--orange);
color: #000000;
display: inline-block;
padding: 5px 10px;
font-size: 1.2rem;
font-weight: 500;
line-height: 1rem;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
margin-right: 15px;
border-radius: 0;
}
.phase--banner a {
color: var(--scottish-dark-teal);
font-weight: 500;
}
.phase--banner a:hover {
background-color: var(--grey-one);
color: #ffffff;
}
.phase--banner a:focus {
outline-offset: 0;
background-color: var(--scottish-dark-teal);
color: #ffffff;
}