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


<p>WIP &#8211; The space available for the initial is intended for one character only.</p>



<h2 class="wp-block-heading"><strong>When to use this component</strong></h2>



<p>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.</p>



<p>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.</p>



<h2 class="wp-block-heading"><strong>When not to use this component</strong></h2>



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



<p>For example:</p>



<ul class="wp-block-list">
<li>Expanding sections of page content</li>



<li>Revealing additional guidance or instructions</li>



<li>Displaying supplementary information unrelated to explaining an acronym</li>
</ul>



<p>For these cases, consider using the <a href="https://aspdigital.policedigital.services/design-system/components/accordion/" data-type="page" data-id="2029">Accordion</a> component instead.</p>



<h2 class="wp-block-heading"><strong>Examples of where we have used this component</strong></h2>



<ul class="wp-block-list">
<li>Public website</li>



<li>Microsites</li>
</ul>



<h2 class="wp-block-heading">Status of development</h2>



<p>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.</p>


<br />
 {{ aspTable({<br />
  head: [<br />
    { text: &#039;Development criteria&#039;}, <br />
    { text: &#039;Status&#039;}<br />
  ],<br />
  rows: [<br />
    {<br />
      cells: [<br />
        { text: &#039;WCAG 2.2 compliant&#039;},<br />
        { html: &#039;&lt;span class=&quot;asp-status&quot;&gt;Not started&lt;/span&gt;&#039;}<br />
      ]<br />
    },<br />
    {<br />
      cells: [<br />
        { text: &#039;WCAG 2.1 compliant&#039;},<br />
        { html: &#039;&lt;span class=&quot;asp-status asp-status&#8211;green&quot;&gt;Completed&lt;/span&gt;&#039;}<br />
      ]<br />
    },<br />
    {<br />
      cells: [<br />
        { text: &#039;HTML / Nunjucks version&#039;},<br />
        { html: &#039;&lt;span class=&quot;asp-status asp-status&#8211;green&quot;&gt;Completed&lt;/span&gt;&#039;}<br />
      ]<br />
    },<br />
    {<br />
      cells: [<br />
        { text: &#039;Figma version&#039;},<br />
        { html: &#039;&lt;span class=&quot;asp-status&quot;&gt;Not started&lt;/span&gt;&#039;}<br />
      ]<br />
    },<br />
    {<br />
      cells: [<br />
        { text: &#039;M365 versions&#039;},<br />
        { html: &#039;&lt;span class=&quot;asp-status&quot;&gt;Not started&lt;/span&gt;&#039;}<br />
      ]<br />
    },<br />
    {<br />
      cells: [<br />
        { text: &#039;Documentation&#039;},<br />
        { html: &#039;&lt;span class=&quot;asp-status asp-status&#8211;yellow&quot;&gt;In progress&lt;/span&gt;&#039;}<br />
      ]<br />
    }<br />
  ]<br />
}) }}<br />
<br />