Component

Phase (alpha & beta) banner

A banner that indicates content is in a alpha or beta phase, with an optional explanation

Search for usage of this component on GitHub

How it looks (preview) (preview all)

alpha This part of GOV.UK is being built – find out what alpha means

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)

beta This part of GOV.UK is being rebuilt – find out what beta means

<%= render "govuk_publishing_components/components/phase_banner", {
  phase: "beta"
} %>

With message (preview)

beta This is an optional different message to explain what the state means in this context which can take HTML

<%= 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)

Skittles Maker beta This part of GOV.UK is being rebuilt – find out what beta means

<%= render "govuk_publishing_components/components/phase_banner", {
  app_name: "Skittles Maker",
  phase: "beta"
} %>

Inverse for blue background (preview)

beta This part of GOV.UK is being rebuilt – find out what beta means

<%= render "govuk_publishing_components/components/phase_banner", {
  phase: "beta",
  inverse: true
} %>

Inverse for blue background with app name (preview)

Skittles Maker beta This part of GOV.UK is being rebuilt – find out what beta means

<%= render "govuk_publishing_components/components/phase_banner", {
  app_name: "Skittles Maker",
  phase: "beta",
  inverse: true
} %>