Phase banner
Use the phase banner component to show users your website is still being worked on.
When to use 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 you have made sure the solution you’ve chosen works as well as possible by carrying out user research and gathering data on how successful the website is
How it works
There are 2 ways to use the phase banner component. You can use HTML or, if you are using Nunjucks, you can use the Nunjucks macro.
Use an alpha banner when your service is in alpha, and a beta banner if your service is in private or public beta.
Phase banners are shown across all pages of a service, so users should understand it as a service-level message.
Add a feedback link
Use a ‘feedback’ link to collect on-page feedback about your service. This can open an email or take the user to a dedicated page or form.
Get the Nunjucks macro for this example from the Camden Frontend library
Whatever option you use, make sure that users do not lose their place in the service and can return to the page they were on.
Do not make a phase banner 'sticky'
Do not make the phase banner ‘sticky’ to the top of the page by using position: fixed or any other method. This is to make sure it does not cover or obscure any content which has a focus applied. This is to comply with WCAG 2.2 success criterion 2.4.11 Focus not obscured (minimum).
Research on this component
This component is based on the phase banner component from the GOV.UK Design System.
You can take part in the ‘Phase banner' discussion on GOV.UK’s Design System’s GitHub and share your research.