Skip to main content

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 – your <a href="#feedback">feedback</a> will help us improve it.</p>
      </div>
    </div>
  </div>
</div>
{% 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.'
    })
}}
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 – your <a href="#feedback">feedback</a> will help us improve it.</p>
      </div>
    </div>
  </div>
</div>
{% 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.'
    })
}}
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

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