Skip to main content
Preview This is a design system preview environment for main branch

Internal review app NHS.UK frontend

Use design system guidance and examples to build consistent, accessible NHS services for the public and staff.

Environment banner

These examples are used for automated tests and may not follow service manual best practice.

Environment banner default

Open this example in a new tab: Environment banner default

Default This is a default environment. Do not use it to make clinical decisions
Code

Markup

<div class="nhsuk-environment-banner">
  <div class="nhsuk-environment-banner__container nhsuk-width-container">
    <strong class="nhsuk-tag nhsuk-tag--white nhsuk-tag--no-border">Default</strong>
    This is a default environment. Do not use it to make clinical decisions
  </div>
</div>

Macro

{% from "environment-banner/macro.njk" import environmentBanner -%}

{{ environmentBanner({
  tag: "Default"
}) }}

Environment banner white default

Open this example in a new tab: Environment banner white default

Development This is a development environment. Do not use it to make clinical decisions
Code

Markup

<div class="nhsuk-environment-banner nhsuk-environment-banner--white">
  <div class="nhsuk-environment-banner__container nhsuk-width-container">
    <strong class="nhsuk-tag nhsuk-tag--white">Development</strong>
    This is a development environment. Do not use it to make clinical decisions
  </div>
</div>

Macro

{% from "environment-banner/macro.njk" import environmentBanner -%}

{{ environmentBanner({
  tag: "Development",
  colour: "white"
}) }}

Environment banner grey default

Open this example in a new tab: Environment banner grey default

Prototype This is a prototype environment. Do not use it to make clinical decisions
Code

Markup

<div class="nhsuk-environment-banner nhsuk-environment-banner--grey">
  <div class="nhsuk-environment-banner__container nhsuk-width-container">
    <strong class="nhsuk-tag nhsuk-tag--grey">Prototype</strong>
    This is a prototype environment. Do not use it to make clinical decisions
  </div>
</div>

Macro

{% from "environment-banner/macro.njk" import environmentBanner -%}

{{ environmentBanner({
  tag: "Prototype",
  colour: "grey"
}) }}

Environment banner green default

Open this example in a new tab: Environment banner green default

Staging This is a staging environment. Do not use it to make clinical decisions
Code

Markup

<div class="nhsuk-environment-banner nhsuk-environment-banner--green">
  <div class="nhsuk-environment-banner__container nhsuk-width-container">
    <strong class="nhsuk-tag nhsuk-tag--green">Staging</strong>
    This is a staging environment. Do not use it to make clinical decisions
  </div>
</div>

Macro

{% from "environment-banner/macro.njk" import environmentBanner -%}

{{ environmentBanner({
  tag: "Staging",
  colour: "green"
}) }}

Environment banner aqua green default

Open this example in a new tab: Environment banner aqua green default

Sandbox This is a sandbox environment. Do not use it to make clinical decisions
Code

Markup

<div class="nhsuk-environment-banner nhsuk-environment-banner--aqua-green">
  <div class="nhsuk-environment-banner__container nhsuk-width-container">
    <strong class="nhsuk-tag nhsuk-tag--aqua-green">Sandbox</strong>
    This is a sandbox environment. Do not use it to make clinical decisions
  </div>
</div>

Macro

{% from "environment-banner/macro.njk" import environmentBanner -%}

{{ environmentBanner({
  tag: "Sandbox",
  colour: "aqua-green"
}) }}

Environment banner blue default

Open this example in a new tab: Environment banner blue default

Production This is a production environment. Do not use it to make clinical decisions
Code

Markup

<div class="nhsuk-environment-banner nhsuk-environment-banner--blue">
  <div class="nhsuk-environment-banner__container nhsuk-width-container">
    <strong class="nhsuk-tag nhsuk-tag--blue">Production</strong>
    This is a production environment. Do not use it to make clinical decisions
  </div>
</div>

Macro

{% from "environment-banner/macro.njk" import environmentBanner -%}

{{ environmentBanner({
  tag: "Production",
  colour: "blue"
}) }}

Environment banner purple default

Open this example in a new tab: Environment banner purple default

Review This is a review environment. Do not use it to make clinical decisions
Code

Markup

<div class="nhsuk-environment-banner nhsuk-environment-banner--purple">
  <div class="nhsuk-environment-banner__container nhsuk-width-container">
    <strong class="nhsuk-tag nhsuk-tag--purple">Review</strong>
    This is a review environment. Do not use it to make clinical decisions
  </div>
</div>

Macro

{% from "environment-banner/macro.njk" import environmentBanner -%}

{{ environmentBanner({
  tag: "Review",
  colour: "purple"
}) }}

Environment banner pink default

Open this example in a new tab: Environment banner pink default

Demo This is a demo environment. Do not use it to make clinical decisions
Code

Markup

<div class="nhsuk-environment-banner nhsuk-environment-banner--pink">
  <div class="nhsuk-environment-banner__container nhsuk-width-container">
    <strong class="nhsuk-tag nhsuk-tag--pink">Demo</strong>
    This is a demo environment. Do not use it to make clinical decisions
  </div>
</div>

Macro

{% from "environment-banner/macro.njk" import environmentBanner -%}

{{ environmentBanner({
  tag: "Demo",
  colour: "pink"
}) }}

Environment banner red default

Open this example in a new tab: Environment banner red default

Test This is a test environment. Do not use it to make clinical decisions
Code

Markup

<div class="nhsuk-environment-banner nhsuk-environment-banner--red">
  <div class="nhsuk-environment-banner__container nhsuk-width-container">
    <strong class="nhsuk-tag nhsuk-tag--red">Test</strong>
    This is a test environment. Do not use it to make clinical decisions
  </div>
</div>

Macro

{% from "environment-banner/macro.njk" import environmentBanner -%}

{{ environmentBanner({
  tag: "Test",
  colour: "red"
}) }}

Environment banner orange default

Open this example in a new tab: Environment banner orange default

QA This is a QA environment. Do not use it to make clinical decisions
Code

Markup

<div class="nhsuk-environment-banner nhsuk-environment-banner--orange">
  <div class="nhsuk-environment-banner__container nhsuk-width-container">
    <strong class="nhsuk-tag nhsuk-tag--orange">QA</strong>
    This is a QA environment. Do not use it to make clinical decisions
  </div>
</div>

Macro

{% from "environment-banner/macro.njk" import environmentBanner -%}

{{ environmentBanner({
  tag: "QA",
  name: "QA",
  colour: "orange"
}) }}

Environment banner warm yellow default

Open this example in a new tab: Environment banner warm yellow default

Training This is a training environment. Do not use it to make clinical decisions
Code

Markup

<div class="nhsuk-environment-banner nhsuk-environment-banner--warm-yellow">
  <div class="nhsuk-environment-banner__container nhsuk-width-container">
    <strong class="nhsuk-tag nhsuk-tag--warm-yellow">Training</strong>
    This is a training environment. Do not use it to make clinical decisions
  </div>
</div>

Macro

{% from "environment-banner/macro.njk" import environmentBanner -%}

{{ environmentBanner({
  tag: "Training",
  colour: "warm-yellow"
}) }}

Environment banner yellow default

Open this example in a new tab: Environment banner yellow default

Preview This is a preview environment. Do not use it to make clinical decisions
Code

Markup

<div class="nhsuk-environment-banner nhsuk-environment-banner--yellow">
  <div class="nhsuk-environment-banner__container nhsuk-width-container">
    <strong class="nhsuk-tag nhsuk-tag--yellow">Preview</strong>
    This is a preview environment. Do not use it to make clinical decisions
  </div>
</div>

Macro

{% from "environment-banner/macro.njk" import environmentBanner -%}

{{ environmentBanner({
  tag: "Preview",
  colour: "yellow"
}) }}

Environment banner with HTML

Open this example in a new tab: Environment banner with HTML

Custom This is a custom environment for pull request #1234
Code

Markup

<div class="nhsuk-environment-banner">
  <div class="nhsuk-environment-banner__container nhsuk-width-container">
    <strong class="nhsuk-tag nhsuk-tag--red nhsuk-tag--no-border">Custom</strong>
    This is a custom environment for <a class="nhsuk-link nhsuk-link--reverse" href="https://github.com/nhsuk/nhsuk-frontend/pulls">pull request #1234</a>
  </div>
</div>

Macro

{% from "environment-banner/macro.njk" import environmentBanner -%}

{{ environmentBanner({
  tag: {
    text: "Custom",
    colour: "red"
  },
  html: 'This is a %{name} environment for <a class="nhsuk-link nhsuk-link--reverse" href="https://github.com/nhsuk/nhsuk-frontend/pulls">pull request #1234</a>'
}) }}

Environment banner with HTML via call block

Open this example in a new tab: Environment banner with HTML via call block

Custom This is a custom environment for pull request #1234
Code

Markup

<div class="nhsuk-environment-banner">
  <div class="nhsuk-environment-banner__container nhsuk-width-container">
    <strong class="nhsuk-tag nhsuk-tag--red nhsuk-tag--no-border">Custom</strong>
    This is a custom environment for <a class="nhsuk-link nhsuk-link--reverse" href="https://github.com/nhsuk/nhsuk-frontend/pulls">pull request #1234</a>
  </div>
</div>

Macro

{% from "environment-banner/macro.njk" import environmentBanner -%}

{% call environmentBanner({
  tag: {
    text: "Custom",
    colour: "red"
  }
}) -%}
This is a %{name} environment for <a class="nhsuk-link nhsuk-link--reverse" href="https://github.com/nhsuk/nhsuk-frontend/pulls">pull request #1234</a>
{%- endcall %}

Environment banner without tag

Open this example in a new tab: Environment banner without tag

This is a development environment. Do not use it to make clinical decisions
Code

Markup

<div class="nhsuk-environment-banner">
  <div class="nhsuk-environment-banner__container nhsuk-width-container">
    This is a development environment. Do not use it to make clinical decisions
  </div>
</div>

Macro

{% from "environment-banner/macro.njk" import environmentBanner -%}

{{ environmentBanner({
  tag: false
}) }}