Skip to content
ASP Digital Design System

Your web browser is out of date

Your web browser (the software you use to access the internet) is out of date. You need to update it or use a different web browser to ensure you can complete this form.

Cookies disabled

Cookies are currently not enabled in your web browser. You need to enable cookies to ensure you can complete this form.

Env

The Environment component displays a clear banner at the top of every page to indicate when a user is viewing a non-production environment.

The component helps prevent confusion by ensuring users always understand whether they are interacting with a Development, Staging or Production service.

Open this example in a new tab: env

<div class="asp-env">This is a Staging environment for testing purposes only.</div>
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.

Name Type Description
env string or false (boolean) Default values are "staging", "local", "production" false (boolean) or null. 
{% from "components/env/macro.njk" import aspEnv %}


{{ aspEnv({
  env: "Staging"
}) }}
Twig 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.

Name Type Description
env string or false (boolean) Default values are "staging", "local", "production" false (boolean) or null. 
{% from "components/env/macro.njk" import aspEnv %}


{{ aspEnv({
  env: "Staging"
}) }}

When to use this component

Use the Environment component on any page that is not part of the live, production service.

This includes:

  • Development environments
  • Staging or pre-production environments
  • User testing or prototype environments
  • Internal demo environments

The purpose of the component is to ensure users — including developers, testers, content designers and stakeholders — immediately recognise that the page is not a live, public-facing system.

When not to use this component

Do not use the Environment component in a production environment.

The banner should never appear on pages intended for real users completing real tasks.

Before using this component, consider:

  • Whether the environment name is clearly configured and reliable
  • Whether additional access restrictions (such as password protection) may reduce the risk of confusion
  • Whether local development setups need different wording or colour contrasts

The Environment component is intentionally prominent. Its bright yellow background and position at the top of the page ensure that users do not mistake a testing environment for a live service.

Example of where we have used this component

This component is used on:

  • Assure
  • Formation
  • EBIT

This list is not exhaustive.

Status of development

The below criteria all need to be met for a component to be considered as fully developed for use within the ASP Digital Design System.

Development criteria Status
WCAG 2.2 compliant Not started
WCAG 2.1 compliant Completed
HTML / Nunjucks version Completed
Figma version Not started
M365 versions Not started
Documentation Not started

Make a change to the Design System

Suggest an edit to this system, or any of the components in it, by submitting a Design System change request.

Published 24 June 2025
Last updated 13 November 2025