Cookies on ons.gov.uk

Cookies are small files stored on your device when you visit a website. We use some essential cookies to make this website work.

We would like to set additional cookies to remember your settings and understand how you use the site. This helps us to improve our services.

View cookies

You have accepted all additional cookies. You have rejected all additional cookies. You can change your cookie preferences at any time.

Skip to main content

Phase banner

Overview

Alpha

Use the alpha phase banner when you're testing out new ideas to a limited audience and your service is incomplete.

Open this example in a new tab (Example Phase Banner Alpha)

Example Phase Banner Alpha contents

Nunjucks

{% from "components/phase-banner/_macro.njk" import onsPhaseBanner %}
{% from "components/external-link/_macro.njk" import onsExternalLink %}

{% set feedbackLink %}
    {{
        onsExternalLink({
            "url": "#0",
            "linkText": "give feedback"
        })
    }}
{% endset %}

{{
    onsPhaseBanner({
        "badge": "Alpha",
        "html": "This is a new service. To help us improve it, " + feedbackLink
    })
}}

Nunjucks macro options

NameTypeRequiredDescription
htmlstringtrueThe text content for the phase banner. This can contain HTML.
badgestringfalseThe text for the phase banner badge. Defaults to “Beta”.
hideBadgebooleanfalseSet to “true” to hide the phase banner badge
widebooleanfalseSet to “true” to increase the maximum width of the layout container to 1280px
fullWidthbooleanfalseSet to “true” to increase the maximum width of the layout container to the full width of the viewport

HTML

<div class="ons-phase-banner">
  <div class="ons-container">
    <div class="ons-grid ons-grid--flex ons-grid--gutterless ons-grid--vertical-top ons-grid--no-wrap">
      <div class="ons-grid__col ons-col-auto ons-u-flex-no-grow ons-u-flex-no-shrink">
        <strong class="ons-phase-banner__badge">Alpha</strong>
      </div>
      <div class="ons-grid__col ons-col-auto ons-u-flex-shrink">
        <p class="ons-phase-banner__desc ons-u-fs-s ons-u-mb-no">This is a new service. To help us improve it, <a
            href="#0" class="ons-external-link" target="_blank" rel="noopener">
            <span class="ons-external-link__text">give feedback</span><span class="ons-external-link__icon">&nbsp;<svg
                class="ons-icon" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg" focusable="false"
                aria-hidden="true">
                <path
                  d="M13.5,9H13a.5.5,0,0,0-.5.5v3h-9v-9h3A.5.5,0,0,0,7,3V2.5A.5.5,0,0,0,6.5,2h-4a.5.5,0,0,0-.5.5v11a.5.5,0,0,0,.5.5h11a.5.5,0,0,0,.5-.5v-4A.5.5,0,0,0,13.5,9Z"
                  transform="translate(-2 -1.99)" />
                <path
                  d="M8.83,7.88a.51.51,0,0,0,.71,0l2.31-2.32,1.28,1.28A.51.51,0,0,0,14,6.49v-4a.52.52,0,0,0-.5-.5h-4A.51.51,0,0,0,9,2.52a.58.58,0,0,0,.14.33l1.28,1.28L8.12,6.46a.51.51,0,0,0,0,.71Z"
                  transform="translate(-2 -1.99)" />
              </svg></span><span class="ons-external-link__new-window-description ons-u-vh"> (opens in a new
              tab)</span></a>
        </p>
      </div>
    </div>
  </div>
</div>

Beta

Use the beta phase banner following your service's alpha phase.

At this stage you are ready for real users to try your service and you are preparing to go live.

Open this example in a new tab (Example Phase Banner Beta)

Example Phase Banner Beta contents

Nunjucks

{% from "components/phase-banner/_macro.njk" import onsPhaseBanner %}
{% from "components/external-link/_macro.njk" import onsExternalLink %}

{% set feedbackLink %}
    {{
        onsExternalLink({
            "url": "#0",
            "linkText": "give feedback"
        })
    }}
{% endset %}

{{
    onsPhaseBanner({
        "html": "This is a new service. To help us improve it, " + feedbackLink
  })
}}

Nunjucks macro options

NameTypeRequiredDescription
htmlstringtrueThe text content for the phase banner. This can contain HTML.
badgestringfalseThe text for the phase banner badge. Defaults to “Beta”.
hideBadgebooleanfalseSet to “true” to hide the phase banner badge
widebooleanfalseSet to “true” to increase the maximum width of the layout container to 1280px
fullWidthbooleanfalseSet to “true” to increase the maximum width of the layout container to the full width of the viewport

HTML

<div class="ons-phase-banner">
  <div class="ons-container">
    <div class="ons-grid ons-grid--flex ons-grid--gutterless ons-grid--vertical-top ons-grid--no-wrap">
      <div class="ons-grid__col ons-col-auto ons-u-flex-no-grow ons-u-flex-no-shrink">
        <strong class="ons-phase-banner__badge">Beta</strong>
      </div>
      <div class="ons-grid__col ons-col-auto ons-u-flex-shrink">
        <p class="ons-phase-banner__desc ons-u-fs-s ons-u-mb-no">This is a new service. To help us improve it, <a
            href="#0" class="ons-external-link" target="_blank" rel="noopener">
            <span class="ons-external-link__text">give feedback</span><span class="ons-external-link__icon">&nbsp;<svg
                class="ons-icon" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg" focusable="false"
                aria-hidden="true">
                <path
                  d="M13.5,9H13a.5.5,0,0,0-.5.5v3h-9v-9h3A.5.5,0,0,0,7,3V2.5A.5.5,0,0,0,6.5,2h-4a.5.5,0,0,0-.5.5v11a.5.5,0,0,0,.5.5h11a.5.5,0,0,0,.5-.5v-4A.5.5,0,0,0,13.5,9Z"
                  transform="translate(-2 -1.99)" />
                <path
                  d="M8.83,7.88a.51.51,0,0,0,.71,0l2.31-2.32,1.28,1.28A.51.51,0,0,0,14,6.49v-4a.52.52,0,0,0-.5-.5h-4A.51.51,0,0,0,9,2.52a.58.58,0,0,0,.14.33l1.28,1.28L8.12,6.46a.51.51,0,0,0,0,.71Z"
                  transform="translate(-2 -1.99)" />
              </svg></span><span class="ons-external-link__new-window-description ons-u-vh"> (opens in a new
              tab)</span></a>
        </p>
      </div>
    </div>
  </div>
</div>

How to use this component

The phase banner must be at the top of the page, directly above the header.

Base page template

The phase banner component can be added to the top of the header using the base page template.

You can override this by manually adding it using the header block.

The link should direct users to a form to collect feedback on the service like the example in the feedback pattern.

To make sure the user can always get back to the page they were on before they opened the form, make sure the form has a back link.

Help improve this page

Let us know how we could improve this page, or share your user research findings. Discuss the ‘Phase banner’ component on GitHub (opens in a new tab)