Use up and down keys to navigate results once you've typed more than two characters. Use the enter key to select a result. Touch device users, explore by touch or with swipe gestures.
Phase banner
Alpha
Use the alpha phase banner when you're testing out new ideas to a limited audience and your service is incomplete.
{% from "components/phase-banner/_macro.njk" import onsPhaseBanner %}
{{
onsPhaseBanner({
"badge": 'Alpha',
"html": 'This is a new service. To help us improve it, <a href="#0">give feedback</a>'
})
}}
Nunjucks macro options
Name
Type
Required
Description
html
string
true
The text content for the phase banner. This can contain HTML.
badge
string
false
The text for the phase banner badge. Defaults to “Beta”.
hideBadge
boolean
false
Set to “true” to hide the phase banner badge
wide
boolean
false
Set to “true” to increase the maximum width of the layout container to 1280px
fullWidth
boolean
false
Set 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">
<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 us improve it, <a
href="#0">give feedback</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.
{% from "components/phase-banner/_macro.njk" import onsPhaseBanner %}
{{
onsPhaseBanner({
"html": 'This is a new service. To help us improve it, <a href="#0">give feedback</a>'
})
}}
Nunjucks macro options
Name
Type
Required
Description
html
string
true
The text content for the phase banner. This can contain HTML.
badge
string
false
The text for the phase banner badge. Defaults to “Beta”.
hideBadge
boolean
false
Set to “true” to hide the phase banner badge
wide
boolean
false
Set to “true” to increase the maximum width of the layout container to 1280px
fullWidth
boolean
false
Set 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">
<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 us improve it, <a
href="#0">give feedback</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.
Feedback link
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.