Skip to main content
  1. X-GOVUK projects
  2. GOV.UK Components
  3. Phase banner

Phase banner

Use the phase banner component to show users your service is still being worked on.

Phase banner with text arguments

Input

= govuk_phase_banner(tag: { text: "Alpha" }, text: "This is a new service – your feedback will help us to improve it. ")
<%= govuk_phase_banner(tag: { text: "Alpha" }, text: "This is a new service – your feedback will help us to improve it. ") %>

Output

This is a new service – your feedback will help us to improve it.

<div class="govuk-phase-banner">
  <p class="govuk-phase-banner__content">
    <strong class="govuk-tag govuk-phase-banner__content__tag">
      Alpha
    </strong>
    <span class="govuk-phase-banner__text">
      This is a new service – your feedback will help us to improve it. 
    </span>
  </p>
</div>

Phase banner with block

Input

= govuk_phase_banner(tag: { text: "Alpha" }) do
  | This is a new service, your

  = govuk_link_to("feedback", "#")

  | will help us improve it.
<%= govuk_phase_banner(tag: { text: "Alpha" }) do %>This is a new service, your
  <%= govuk_link_to("feedback", "#") %>
  will help us improve it.
<% end %>

Output

This is a new service, your feedback will help us improve it.

<div class="govuk-phase-banner">
  <p class="govuk-phase-banner__content">
    <strong class="govuk-tag govuk-phase-banner__content__tag">
      Alpha
    </strong>
    <span class="govuk-phase-banner__text">
      This is a new service, your<a class="govuk-link" href="#">
        feedback
      </a>
      will help us improve it.
    </span>
  </p>
</div>

Phase banner with custom tag colour

Input

= govuk_phase_banner(tag: { text: "Warning", colour: "pink" }, text: "This is a test environment, don't enter any real data")
<%= govuk_phase_banner(tag: { text: "Warning", colour: "pink" }, text: "This is a test environment, don't enter any real data") %>

Output

This is a test environment, don’t enter any real data

<div class="govuk-phase-banner">
  <p class="govuk-phase-banner__content">
    <strong class="govuk-tag govuk-tag--pink govuk-phase-banner__content__tag">
      Warning
    </strong>
    <span class="govuk-phase-banner__text">
      This is a test environment, don't enter any real data
    </span>
  </p>
</div>