Content presentation - Phase Banner

Use the phase banner for alpha and beta stages of your service

Alpha

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

Copy code

<div class="hs2-phase-banner">
  <div class="hs2-width-container">
    <div class="hs2-grid hs2-u-display-flex hs2-u-align-items-center">

      <div>
        <h3 class="hs2-phase-banner__badge">Alpha</h3>
      </div>

      <div>
        <p class="hs2-phase-banner__desc hs2-u-margin-bottom-0 hs2-u-margin-top-1">This is a new service. To help us improve it, <a href="#0">give feedback</a></p>
      </div>
    </div>
  </div>
</div>

Nunjucks

Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Nunjucks arguments for alpha phase banner
Name	Type	Required	Description
Name html	Type string	Required true	Description The text content for the phase banner. This can contain HTML.
Name badge	Type string	Required false	Description The text for the phase banner badge. Defaults to Beta.
Name hideBadge	Type boolean	Required false	Description Set to “true” to hide the phase banner badge.
Name fullWidth	Type boolean	Required false	Description Set to “true” to increase the maximum width of the layout container to the full width of the viewport

Copy code

{% from "phase-banner/macro.njk" import phaseBanner %}

{{ phaseBanner({
  "badge": 'Alpha',
  "html": 'This is a new service. To help us improve it, <a href="#0">give feedback</a>'
}) }}

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 new window

HTML

Copy code

<div class="hs2-phase-banner">
  <div class="hs2-width-container">
    <div class="hs2-grid hs2-u-display-flex hs2-u-align-items-center">

      <div>
        <h3 class="hs2-phase-banner__badge">Beta</h3>
      </div>

      <div>
        <p class="hs2-phase-banner__desc hs2-u-margin-bottom-0 hs2-u-margin-top-1">This is a new service. To help us improve it, <a href="#0">give feedback</a></p>
      </div>
    </div>
  </div>
</div>

Nunjucks

Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Nunjucks arguments for beta phase banner
Name	Type	Required	Description
Name html	Type string	Required true	Description The text content for the phase banner. This can contain HTML.
Name badge	Type string	Required false	Description The text for the phase banner badge. Defaults to Beta.
Name hideBadge	Type boolean	Required false	Description Set to “true” to hide the phase banner badge.
Name fullWidth	Type boolean	Required false	Description Set to “true” to increase the maximum width of the layout container to the full width of the viewport

Copy code

{% from "phase-banner/macro.njk" import phaseBanner %}

{{ phaseBanner({
  "html": 'This is a new service. To help us improve it, <a href="#0">give feedback</a>'
}) }}

How to use this component

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

Feedback link

The link should direct users to a form to collect feedback on the service.

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.