The acronym component explains what letters in an acronym stand for.
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" }) }}Use this component to help users understand what the letters of an acronym stand for.
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.
This component is used on:
This list is not exhaustive.
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 | Completed |
Suggest an edit to this system, or any of the components in it, by submitting a Design System change request.