Components
Phase banner
The phase banner can display the development phase that the service is currently in.
Contents
Phases must adhere to the list of phases in an agile project from the GOV.UK Service Manual.
It should also give a link that allows users to provide feedback.
<div class="tna-phase-banner">
<div class="tna-container">
<div class="tna-column tna-column--full-tiny">
<strong class="tna-phase-banner__phase">
<span class="tna-visually-hidden">Service phase:</span>
Alpha
</strong>
</div>
<div class="tna-column tna-column--flex-1 tna-column--full-tiny">
<p class="tna-phase-banner__message">
This is a new service - <a href="#">give us your feedback</a> to help improve it.
</p>
</div>
</div>
</div>Nunjucks options
| Name | Type | Description |
|---|---|---|
| phase | string |
Required. |
| message | string |
Required. |
| classes | string |
Classes to add to the phase banner. |
| attributes | object |
HTML attributes (for example data attributes) to add to the phase banner. |
{% from "nationalarchives/components/phase-banner/macro.njk" import tnaPhaseBanner %}
{{ tnaPhaseBanner({
phase: "alpha",
message: "This is a new service - <a href=\"#\">give us your feedback</a> to help improve it."
}) }}Component status
- Phase
- Ready for production
- Tested without CSS
- Yes
- Passed DAC audit
- Yes
- Documentation complete
- No
When to use this component
Use this component at the top of the page so it is the first thing users see.
Place the phase banner after the skip link.
Consider using the phase banner option inside either the header or global header components as this will add the phase banner inside the header landmark. This is the preferred approach by AXE; "All page content should be contained by landmarks" from Deque University.