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

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."
  }
}) }}

WIP -- The space available for the initial is intended for one character only.

When to use this component

Use the Acronym component to display the meaning or explanation of an acronym or abbreviation without interrupting the flow of content. The component allows users to reveal additional context only when needed, helping keep pages concise while still supporting clarity.

This is particularly useful when an acronym may not be familiar to all users, or where the full meaning or supporting explanation would otherwise clutter the surrounding content.

When not to use this component

Do not use the Acronym component for general expandable content or long sections of information.

For example:

Expanding sections of page content
Revealing additional guidance or instructions
Displaying supplementary information unrelated to explaining an acronym

For these cases, consider using the Accordion component instead.

Examples of where we have used this component

Public website
Microsites

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 1 April 2026