1. Government Frontend Component Guide
  2. Phase (alpha & beta) banner

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 all)

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

Other examples

Beta banner (preview)

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)

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

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 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
} %>