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

<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

<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

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