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

Alpha 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

Alpha This is a new service, yourfeedbackwill 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: "magenta" }, text: "This is a test environment, don't enter any real data")

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

Output

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