Skip to main content

Testing

Help us to improve the ONS Design System. Take part in a short study

Phase banner

The Phase banner lets users know the service is new and still being worked on, and encourages the user to provide feedback to help improve it.

<div class="phase-banner">
  <div class="container">
    <div class="grid grid--flex grid--gutterless grid--vertical-top grid--no-wrap">
      <div class="grid__col col-auto u-flex-no-grow u-flex-no-shrink">
        <h3 class="phase-banner__badge">Alpha</h3>
      </div>
      <div class="grid__col col-auto u-flex-shrink">
        <p class="phase-banner__desc u-fs-s u-mb-no">This is a new service – your <a href="#feedback">feedback</a> will help us improve it.</p>
      </div>
    </div>
  </div>
</div>
Nunjucks macro options
Name Type Required Description
html string true The text content for the phase banner. HTML is allowable to embed links
badge string false The text for the phase banner badge. Defaults to “Beta”
hideBadge boolean false Will hide the phase banner badge if set to true
wide boolean false Set to true to use container--wide
{% from "components/phase-banner/_macro.njk" import onsPhaseBanner %}
{{
    onsPhaseBanner({
        "badge": "Alpha",
        "html": 'This is a new service – your <a href="#feedback">feedback</a> will help us improve it.'
    })
}}

{% macro onsPhaseBanner(params) %}
    <div class="phase-banner">
        <div class="container{{ ' container--wide' if params.wide }}">
            <div class="grid grid--flex grid--gutterless grid--vertical-top grid--no-wrap">
                {% if not params.hideBadge %}
                <div class="grid__col col-auto u-flex-no-grow u-flex-no-shrink">
                    <h3 class="phase-banner__badge">{{ params.badge | default("Beta") }}</h3>
                </div>
                {% endif %}
                <div class="grid__col col-auto u-flex-shrink">
                    <p class="phase-banner__desc u-fs-s u-mb-no">{{ params.html | safe }}</p>
                </div>
            </div>
        </div>
    </div>
{% endmacro %}

.phase-banner {
  background: $color-grey-5;
  padding: 0.5rem 0;
  &__badge {
    background: $color-black;
    color: $color-white;
    font-size: 0.85rem;
    line-height: 1em;
    margin: 0 0.5rem 0 0;
    padding: 0.4rem;
    text-transform: uppercase;
  }
  &__desc {
    margin-top: 0.3rem;
  }
}

<div class="phase-banner">
  <div class="container">
    <div class="grid grid--flex grid--gutterless grid--vertical-top grid--no-wrap">
      <div class="grid__col col-auto u-flex-no-grow u-flex-no-shrink">
        <h3 class="phase-banner__badge">BETA</h3>
      </div>
      <div class="grid__col col-auto u-flex-shrink">
        <p class="phase-banner__desc u-fs-s u-mb-no">This is a new service – your <a href="#feedback">feedback</a> will help us improve it.</p>
      </div>
    </div>
  </div>
</div>
Nunjucks macro options
Name Type Required Description
html string true The text content for the phase banner. HTML is allowable to embed links
badge string false The text for the phase banner badge. Defaults to “Beta”
hideBadge boolean false Will hide the phase banner badge if set to true
wide boolean false Set to true to use container--wide
{% from "components/phase-banner/_macro.njk" import onsPhaseBanner %}
{{
    onsPhaseBanner({
        "badge": "BETA",
        "html": 'This is a new service – your <a href="#feedback">feedback</a> will help us improve it.'
    })
}}

{% macro onsPhaseBanner(params) %}
    <div class="phase-banner">
        <div class="container{{ ' container--wide' if params.wide }}">
            <div class="grid grid--flex grid--gutterless grid--vertical-top grid--no-wrap">
                {% if not params.hideBadge %}
                <div class="grid__col col-auto u-flex-no-grow u-flex-no-shrink">
                    <h3 class="phase-banner__badge">{{ params.badge | default("Beta") }}</h3>
                </div>
                {% endif %}
                <div class="grid__col col-auto u-flex-shrink">
                    <p class="phase-banner__desc u-fs-s u-mb-no">{{ params.html | safe }}</p>
                </div>
            </div>
        </div>
    </div>
{% endmacro %}

.phase-banner {
  background: $color-grey-5;
  padding: 0.5rem 0;
  &__badge {
    background: $color-black;
    color: $color-white;
    font-size: 0.85rem;
    line-height: 1em;
    margin: 0 0.5rem 0 0;
    padding: 0.4rem;
    text-transform: uppercase;
  }
  &__desc {
    margin-top: 0.3rem;
  }
}

When to use this component

You must use the Phase banner when your service is in the alpha or beta phase and still being developed.

How to use this component

The Phase banner must be placed directly above the ONS header at the very top of the page.

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

Ensure you always provide the user with a route back to the page they were on when they clicked the link.

Help improve this component

Let us know how we could improve this component or share your user research findings.

Discuss the ‘Phase banner’ component on GitHub