<div class="tna-phase-banner">
<div class="tna-container">
<div class="tna-column tna-column--full-tiny">
<strong class="tna-phase-banner__phase">
<span class="tna-visually-hidden">Service phase:</span>
Alpha
</strong>
</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.
The phase to display in the banner. This should either be 'Proof of concept', 'Prototype', 'Alpha' or 'Beta'.
message
string
Required.
A message to explain the phase of the service. Include a link to provide feedback.
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."
}) }}
Jinja
Important information!
This is an experimental feature showing a Jinja2 macro based on the Nunjucks example. Check the converted code for accuracy.
{% from "components/phase-banner/macro.html" import tnaPhaseBanner %}
{{ tnaPhaseBanner({
"phase": "alpha",
"message": "This is a new service - <a href=\"#\">give us your feedback</a> to help improve it."
}) }}
When to use this component
Use this component at the top of the page so it is the first thing users see.