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. 

{{ aspExample({ code: "", nunjucks: "", json: "", title: "", example: "default", id: "69ccfb02e64fd" }) }} {{ aspExample({ code: "", nunjucks: "", json: "", title: "", example: "red", id: "69ccfb02e657b" }) }} {{ aspExample({ code: "", nunjucks: "", json: "", title: "", example: "green", id: "69ccfb02e65b6" }) }} {{ aspExample({ code: "", nunjucks: "", json: "", title: "", example: "amber", id: "69ccfb02e65ec" }) }} {{ aspExample({ code: "", nunjucks: "", json: "", title: "", example: "grape", id: "69ccfb02e661e" }) }} {{ aspExample({ code: "", nunjucks: "", json: "", title: "", example: "grey", id: "69ccfb02e6654" }) }}

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: 

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.


{{ aspTable({
head: [
{ text: 'Development criteria'},
{ text: 'Status'}
],
rows: [
{
cells: [
{ text: 'WCAG 2.2 compliant'},
{ html: '<span class="asp-status">Not started</span>'}
]
},
{
cells: [
{ text: 'WCAG 2.1 compliant'},
{ html: '<span class="asp-status asp-status–green">Completed</span>'}
]
},
{
cells: [
{ text: 'HTML / Nunjucks version'},
{ html: '<span class="asp-status asp-status–green">Completed</span>'}
]
},
{
cells: [
{ text: 'Figma version'},
{ html: '<span class="asp-status">Not started</span>'}
]
},
{
cells: [
{ text: 'M365 versions'},
{ html: '<span class="asp-status">Not started</span>'}
]
},
{
cells: [
{ text: 'Documentation'},
{ html: '<span class="asp-status asp-status–yellow">In progress</span>'}
]
}
]
}) }}