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.

Acronym

The acronym component explains what letters in an acronym stand for.

Design preview and code implementation

The component displays the letters of the acronym down the left-hand side of the component, and the header section explains what each letter stands for.

Further written details are contained within the show / hide section.

The component loads with all sections hidden. To show a section, the user can interact anywhere in the heading button.

Preview
HTML
Nunjucks
Twig

Open this example in a new tab: acronym

<details class="asp-acronym asp-acronym--blue">
  <summary class="asp-acronym__summary">
    <span class="asp-acronym__letter" aria-hidden="true">M</span>
    <span class="asp-acronym__title">
      <span class="asp-acronym__function">Major incident</span>
      <span class="asp-acronym__chevron" aria-hidden="true">
        <span class="asp-acronym__text--hide">Hide </span>
        <span class="asp-acronym__text--show">Show </span>
      </span>
    </span>
  </summary>
  <div class="asp-acronym__content">
    <p>Acronym content (html) with a <a href="#">link</a>.</p>
  </div>
</details>

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
modifier	string	Default values are 'blue', 'red', 'green', 'amber', 'grape', 'grey', false (boolean) or null (which will default to blue).
letter	string	Required. The acronym letter within the summary.
summary	string	Required. The acronym summary text.
content	string	Required. The acronym component content. See content.

Options for content

Name	Type	Description
html	string	Required. HTML for the acronym component content. If 'html' is provided, the 'text' parameter will be ignored.
text	string	Required. Text for the acronym component content. If 'html' is provided, the 'text' parameter will be ignored.

{% from "components/acronym/macro.njk" import aspAcronym %}

{{ aspAcronym({
  letter: "M",
  summary: "Major incident",
  content: {
    html: "<p>Acronym content (html) with a <a href=</span>"#">link</a>.</p>"
  }
}) }}

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
modifier	string	Default values are 'blue', 'red', 'green', 'amber', 'grape', 'grey', false (boolean) or null (which will default to blue).
letter	string	Required. The acronym letter within the summary.
summary	string	Required. The acronym summary text.
content	string	Required. The acronym component content. See content.

Options for content

Name	Type	Description
html	string	Required. HTML for the acronym component content. If 'html' is provided, the 'text' parameter will be ignored.
text	string	Required. Text for the acronym component content. If 'html' is provided, the 'text' parameter will be ignored.

{% from "components/acronym/macro.njk" import aspAcronym %}

{{ aspAcronym({
  letter: "M",
  summary: "Major incident",
  content: {
    html: "<p>Acronym content (html) with a <a href=</span>"#">link</a>.</p>"
  }
}) }}

Preview
HTML
Nunjucks
Twig

Open this example in a new tab: acronym

<details class="asp-acronym asp-acronym--red">
  <summary class="asp-acronym__summary">
    <span class="asp-acronym__letter" aria-hidden="true">E</span>
    <span class="asp-acronym__title">
      <span class="asp-acronym__function">Exact location</span>
      <span class="asp-acronym__chevron" aria-hidden="true">
        <span class="asp-acronym__text--hide">Hide </span>
        <span class="asp-acronym__text--show">Show </span>
      </span>
    </span>
  </summary>
  <div class="asp-acronym__content">
    <p>Acronym content (text) without HTML formatting.</p>
  </div>
</details>

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
modifier	string	Default values are 'blue', 'red', 'green', 'amber', 'grape', 'grey', false (boolean) or null (which will default to blue).
letter	string	Required. The acronym letter within the summary.
summary	string	Required. The acronym summary text.
content	string	Required. The acronym component content. See content.

Options for content

Name	Type	Description
html	string	Required. HTML for the acronym component content. If 'html' is provided, the 'text' parameter will be ignored.
text	string	Required. Text for the acronym component content. If 'html' is provided, the 'text' parameter will be ignored.

{% from "components/acronym/macro.njk" import aspAcronym %}

{{ aspAcronym({
  modifier: "red",
  letter: "E",
  summary: "Exact location",
  content: {
    text: "Acronym content (text) without HTML formatting."
  }
}) }}

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
modifier	string	Default values are 'blue', 'red', 'green', 'amber', 'grape', 'grey', false (boolean) or null (which will default to blue).
letter	string	Required. The acronym letter within the summary.
summary	string	Required. The acronym summary text.
content	string	Required. The acronym component content. See content.

Options for content

Name	Type	Description
html	string	Required. HTML for the acronym component content. If 'html' is provided, the 'text' parameter will be ignored.
text	string	Required. Text for the acronym component content. If 'html' is provided, the 'text' parameter will be ignored.

{% from "components/acronym/macro.njk" import aspAcronym %}

{{ aspAcronym({
  modifier: "red",
  letter: "E",
  summary: "Exact location",
  content: {
    text: "Acronym content (text) without HTML formatting."
  }
}) }}

Preview
HTML
Nunjucks
Twig

Open this example in a new tab: acronym

<details class="asp-acronym asp-acronym--green">
  <summary class="asp-acronym__summary">
    <span class="asp-acronym__letter" aria-hidden="true">T</span>
    <span class="asp-acronym__title">
      <span class="asp-acronym__function">Type of incident</span>
      <span class="asp-acronym__chevron" aria-hidden="true">
        <span class="asp-acronym__text--hide">Hide </span>
        <span class="asp-acronym__text--show">Show </span>
      </span>
    </span>
  </summary>
  <div class="asp-acronym__content">
    <p>Acronym content (text) without HTML formatting.</p>
  </div>
</details>

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
modifier	string	Default values are 'blue', 'red', 'green', 'amber', 'grape', 'grey', false (boolean) or null (which will default to blue).
letter	string	Required. The acronym letter within the summary.
summary	string	Required. The acronym summary text.
content	string	Required. The acronym component content. See content.

Options for content

Name	Type	Description
html	string	Required. HTML for the acronym component content. If 'html' is provided, the 'text' parameter will be ignored.
text	string	Required. Text for the acronym component content. If 'html' is provided, the 'text' parameter will be ignored.

{% from "components/acronym/macro.njk" import aspAcronym %}

{{ aspAcronym({
  modifier: "green",
  letter: "T",
  summary: "Type of incident",
  content: {
    text: "Acronym content (text) without HTML formatting."
  }
}) }}

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
modifier	string	Default values are 'blue', 'red', 'green', 'amber', 'grape', 'grey', false (boolean) or null (which will default to blue).
letter	string	Required. The acronym letter within the summary.
summary	string	Required. The acronym summary text.
content	string	Required. The acronym component content. See content.

Options for content

Name	Type	Description
html	string	Required. HTML for the acronym component content. If 'html' is provided, the 'text' parameter will be ignored.
text	string	Required. Text for the acronym component content. If 'html' is provided, the 'text' parameter will be ignored.

{% from "components/acronym/macro.njk" import aspAcronym %}

{{ aspAcronym({
  modifier: "green",
  letter: "T",
  summary: "Type of incident",
  content: {
    text: "Acronym content (text) without HTML formatting."
  }
}) }}

Preview
HTML
Nunjucks
Twig

Open this example in a new tab: acronym

<details class="asp-acronym asp-acronym--amber">
  <summary class="asp-acronym__summary">
    <span class="asp-acronym__letter" aria-hidden="true">H</span>
    <span class="asp-acronym__title">
      <span class="asp-acronym__function">Hazards</span>
      <span class="asp-acronym__chevron" aria-hidden="true">
        <span class="asp-acronym__text--hide">Hide </span>
        <span class="asp-acronym__text--show">Show </span>
      </span>
    </span>
  </summary>
  <div class="asp-acronym__content">
    <p>Acronym content (text) without HTML formatting.</p>
  </div>
</details>

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
modifier	string	Default values are 'blue', 'red', 'green', 'amber', 'grape', 'grey', false (boolean) or null (which will default to blue).
letter	string	Required. The acronym letter within the summary.
summary	string	Required. The acronym summary text.
content	string	Required. The acronym component content. See content.

Options for content

Name	Type	Description
html	string	Required. HTML for the acronym component content. If 'html' is provided, the 'text' parameter will be ignored.
text	string	Required. Text for the acronym component content. If 'html' is provided, the 'text' parameter will be ignored.

{% from "components/acronym/macro.njk" import aspAcronym %}

{{ aspAcronym({
  modifier: "amber",
  letter: "H",
  summary: "Hazards",
  content: {
    text: "Acronym content (text) without HTML formatting."
  }
}) }}

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
modifier	string	Default values are 'blue', 'red', 'green', 'amber', 'grape', 'grey', false (boolean) or null (which will default to blue).
letter	string	Required. The acronym letter within the summary.
summary	string	Required. The acronym summary text.
content	string	Required. The acronym component content. See content.

Options for content

Name	Type	Description
html	string	Required. HTML for the acronym component content. If 'html' is provided, the 'text' parameter will be ignored.
text	string	Required. Text for the acronym component content. If 'html' is provided, the 'text' parameter will be ignored.

{% from "components/acronym/macro.njk" import aspAcronym %}

{{ aspAcronym({
  modifier: "amber",
  letter: "H",
  summary: "Hazards",
  content: {
    text: "Acronym content (text) without HTML formatting."
  }
}) }}

Preview
HTML
Nunjucks
Twig

Open this example in a new tab: acronym

<details class="asp-acronym asp-acronym--grape">
  <summary class="asp-acronym__summary">
    <span class="asp-acronym__letter" aria-hidden="true">A</span>
    <span class="asp-acronym__title">
      <span class="asp-acronym__function">Access</span>
      <span class="asp-acronym__chevron" aria-hidden="true">
        <span class="asp-acronym__text--hide">Hide </span>
        <span class="asp-acronym__text--show">Show </span>
      </span>
    </span>
  </summary>
  <div class="asp-acronym__content">
    <p>Acronym content (text) without HTML formatting.</p>
  </div>
</details>

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
modifier	string	Default values are 'blue', 'red', 'green', 'amber', 'grape', 'grey', false (boolean) or null (which will default to blue).
letter	string	Required. The acronym letter within the summary.
summary	string	Required. The acronym summary text.
content	string	Required. The acronym component content. See content.

Options for content

Name	Type	Description
html	string	Required. HTML for the acronym component content. If 'html' is provided, the 'text' parameter will be ignored.
text	string	Required. Text for the acronym component content. If 'html' is provided, the 'text' parameter will be ignored.

{% from "components/acronym/macro.njk" import aspAcronym %}

{{ aspAcronym({
  modifier: "grape",
  letter: "A",
  summary: "Access",
  content: {
    text: "Acronym content (text) without HTML formatting."
  }
}) }}

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
modifier	string	Default values are 'blue', 'red', 'green', 'amber', 'grape', 'grey', false (boolean) or null (which will default to blue).
letter	string	Required. The acronym letter within the summary.
summary	string	Required. The acronym summary text.
content	string	Required. The acronym component content. See content.

Options for content

Name	Type	Description
html	string	Required. HTML for the acronym component content. If 'html' is provided, the 'text' parameter will be ignored.
text	string	Required. Text for the acronym component content. If 'html' is provided, the 'text' parameter will be ignored.

{% from "components/acronym/macro.njk" import aspAcronym %}

{{ aspAcronym({
  modifier: "grape",
  letter: "A",
  summary: "Access",
  content: {
    text: "Acronym content (text) without HTML formatting."
  }
}) }}

Preview
HTML
Nunjucks
Twig

Open this example in a new tab: acronym

<details class="asp-acronym asp-acronym--grey">
  <summary class="asp-acronym__summary">
    <span class="asp-acronym__letter" aria-hidden="true">N</span>
    <span class="asp-acronym__title">
      <span class="asp-acronym__function">Number of casualties</span>
      <span class="asp-acronym__chevron" aria-hidden="true">
        <span class="asp-acronym__text--hide">Hide </span>
        <span class="asp-acronym__text--show">Show </span>
      </span>
    </span>
  </summary>
  <div class="asp-acronym__content">
    <p>Acronym content (text) without HTML formatting.</p>
  </div>
</details>

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
modifier	string	Default values are 'blue', 'red', 'green', 'amber', 'grape', 'grey', false (boolean) or null (which will default to blue).
letter	string	Required. The acronym letter within the summary.
summary	string	Required. The acronym summary text.
content	string	Required. The acronym component content. See content.

Options for content

Name	Type	Description
html	string	Required. HTML for the acronym component content. If 'html' is provided, the 'text' parameter will be ignored.
text	string	Required. Text for the acronym component content. If 'html' is provided, the 'text' parameter will be ignored.

{% from "components/acronym/macro.njk" import aspAcronym %}

{{ aspAcronym({
  modifier: "grey",
  letter: "N",
  summary: "Number of casualties",
  content: {
    text: "Acronym content (text) without HTML formatting."
  }
}) }}

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
modifier	string	Default values are 'blue', 'red', 'green', 'amber', 'grape', 'grey', false (boolean) or null (which will default to blue).
letter	string	Required. The acronym letter within the summary.
summary	string	Required. The acronym summary text.
content	string	Required. The acronym component content. See content.

Options for content

Name	Type	Description
html	string	Required. HTML for the acronym component content. If 'html' is provided, the 'text' parameter will be ignored.
text	string	Required. Text for the acronym component content. If 'html' is provided, the 'text' parameter will be ignored.

{% from "components/acronym/macro.njk" import aspAcronym %}

{{ aspAcronym({
  modifier: "grey",
  letter: "N",
  summary: "Number of casualties",
  content: {
    text: "Acronym content (text) without HTML formatting."
  }
}) }}

When to use this component

Use this component to help users understand what the letters of an acronym stand for.

When not to use this component

The acronym component hides detailed content from the user. Not all users will notice there is additional content.

With this in mind, ensure that the header is used to clearly explain what each letter stands for.

Do not put acronyms within acronyms, as it will make content difficult to find.

Examples of where we have used this component

This component is used on:

Action Cards

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	In progress

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 1 April 2026
Last updated 12 June 2026