Component
Phase (alpha & beta) banner
A banner that indicates content is in a alpha or beta phase, with an optional explanation
How it looks (preview) (preview all)
How to call this component
<%= render "govuk_publishing_components/components/phase_banner", {
phase: "alpha"
} %>
Accessibility acceptance criteria
The label must:
- have a text contrast ratio higher than 4.5:1 against the background colour to meet WCAG AA
Links in the component must:
- accept focus
- be focusable with a keyboard
- be usable with a keyboard
- indicate when they have focus
- change in appearance when touched (in the touch-down state)
- change in appearance when hovered
- be usable with touch
- be usable with voice commands
- have visible text
- have meaningful text
Other examples
Beta banner (preview)
<%= render "govuk_publishing_components/components/phase_banner", {
phase: "beta"
} %>
With message (preview)
<%= render "govuk_publishing_components/components/phase_banner", {
phase: "beta",
message: sanitize("This is an optional different message to explain what the state means in this context which can take <a class=\"govuk-link\" href='https://www.gov.uk'>HTML</a>")
} %>
With app name (preview)
<%= render "govuk_publishing_components/components/phase_banner", {
app_name: "Skittles Maker",
phase: "beta"
} %>
Inverse for blue background (preview)
<%= render "govuk_publishing_components/components/phase_banner", {
phase: "beta",
inverse: true
} %>
Inverse for blue background with app name (preview)
<%= render "govuk_publishing_components/components/phase_banner", {
app_name: "Skittles Maker",
phase: "beta",
inverse: true
} %>