Phase banner

Phase banner

Open this example in a new tab

Code

Markup

<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 href="#" class="govuk-link">feedback</a> will help us to improve it.
    </span>
  </p>
</div>

Macro

{% from "govuk/components/phase-banner/macro.njk" import govukPhaseBanner %}

{{ govukPhaseBanner({
  tag: {
    text: "Alpha"
  },
  html: 'This is a new service - your <a href="#" class="govuk-link">feedback</a> will help us to improve it.'
}) }}