Skip to main content

User testing

Help us improve this service. Take part in a short online exercise

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="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">
        <h3 class="ons-phase-banner__badge">Alpha</h3>
      </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 improve it please <a href="#0">give us your feedback</a></p>
      </div>
    </div>
  </div>
</div>
{% from "components/phase-banner/_macro.njk" import onsPhaseBanner %}
{{
    onsPhaseBanner({
        "badge": 'Alpha',
        "html": 'This is a new service – to help improve it please <a href="#0">give us your feedback</a>'
    })
}}
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
{% macro onsPhaseBanner(params) %}
    <div class="ons-phase-banner">
        <div class="ons-container{{ ' ons-container--wide' if params.wide }}">
            <div class="ons-grid ons-grid--flex ons-grid--gutterless ons-grid--vertical-top ons-grid--no-wrap">
                {% if not params.hideBadge %}
                <div class="ons-grid__col ons-col-auto ons-u-flex-no-grow ons-u-flex-no-shrink">
                    <h3 class="ons-phase-banner__badge">{{ params.badge | default("Beta") }}</h3>
                </div>
                {% endif %}
                <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">{{ params.html | safe }}</p>
                </div>
            </div>
        </div>
    </div>
{% endmacro %}
.ons-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="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">
        <h3 class="ons-phase-banner__badge">BETA</h3>
      </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 improve it please <a href="#feedback">give us your feedback</a></p>
      </div>
    </div>
  </div>
</div>
{% from "components/phase-banner/_macro.njk" import onsPhaseBanner %}
{{
    onsPhaseBanner({
        "badge": 'BETA',
        "html": 'This is a new service – to help improve it please <a href="#feedback">give us your feedback</a>'
    })
}}
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
{% macro onsPhaseBanner(params) %}
    <div class="ons-phase-banner">
        <div class="ons-container{{ ' ons-container--wide' if params.wide }}">
            <div class="ons-grid ons-grid--flex ons-grid--gutterless ons-grid--vertical-top ons-grid--no-wrap">
                {% if not params.hideBadge %}
                <div class="ons-grid__col ons-col-auto ons-u-flex-no-grow ons-u-flex-no-shrink">
                    <h3 class="ons-phase-banner__badge">{{ params.badge | default("Beta") }}</h3>
                </div>
                {% endif %}
                <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">{{ params.html | safe }}</p>
                </div>
            </div>
        </div>
    </div>
{% endmacro %}
.ons-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

Use this component 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 link should direct users to a form to collect feedback on the service like the feedback form example in the feedback pattern.

Make sure you always use a back link on the form so the user can get back to the page they were on when they selected 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