Skip to main content Skip to list of components
Beta

This is a new service – give us your feedback to help improve it.

Components

Phase banner

The phase banner can display the phase that the service is currently in.

Contents

  1. Status

Phases must adhere to the list of phases in an agile project from the GOV.UK Service Manual.

It can also display a link to allow the user to provide feedback.

Open this example in new tab

HTML 

<div class="tna-phase-banner">
  <div class="tna-container">
    <div class="tna-column tna-column--full-tiny">
      <span class="tna-phase-banner__phase">
        Alpha
      </span>
    </div>
    <div class="tna-column tna-column--flex-1 tna-column--full-tiny">
      <p class="tna-phase-banner__message">
        This is a new service - <a href="#">give us your feedback</a> to help improve it.
      </p>
    </div>
  </div>
</div>

Nunjucks

Nunjucks options
Primary options
Name Type Description
phase string

Required.

message string

Required.

accent boolean
classes string

Classes to add to the phase banner.
attributes object

HTML attributes (for example data attributes) to add to the phase banner.

 
{% from "nationalarchives/components/phase-banner/macro.njk" import tnaPhaseBanner %}

{{ tnaPhaseBanner({
  phase: "alpha",
  message: "This is a new service - <a href=\"#\">give us your feedback</a> to help improve it."
}) }}

Status

Status
In development
Tested without CSS
In development
WCAG 2.2 AA compliant
In development
Analytics integrated
In development
Documentation complete
No

Back to top