{{ aspExample({ code: &quot;&lt;details class=\&quot;asp-accordion\&quot;&gt;  <br />
  &lt;summary class=\&quot;asp-accordion__summary\&quot;&gt;  <br />
    &lt;span class=\&quot;asp-accordion__title\&quot;&gt;<br />
      &lt;svg class=\&quot;asp-accordion__icon\&quot; aria-hidden=\&quot;true\&quot; focusable=\&quot;false\&quot; viewBox=\&quot;0 0 10 10\&quot;&gt;<br />
        &lt;rect class=\&quot;asp-accordion__icon-vertical\&quot; height=\&quot;8\&quot; width=\&quot;2\&quot; y=\&quot;1\&quot; x=\&quot;4\&quot;&gt;&lt;/rect&gt;<br />
        &lt;rect height=\&quot;2\&quot; width=\&quot;8\&quot; y=\&quot;4\&quot; x=\&quot;1\&quot;&gt;&lt;/rect&gt;<br />
      &lt;/svg&gt;<br />
      Accordion title<br />
    &lt;/span&gt;  <br />
  &lt;/summary&gt;  <br />
  &lt;div class=\&quot;asp-accordion__text\&quot;&gt; <br />
    &lt;p&gt;Accordion content&lt;/p&gt;  <br />
  &lt;/div&gt;  <br />
&lt;/details&gt;&quot;, nunjucks: &quot;{{ aspAccordion({<br />
  summary: \&quot;Accordion summary\&quot;,<br />
  content: {<br />
    html: &#039;&lt;p&gt;Accordion content (html) with a &lt;a href=\&quot;#\&quot;&gt;link&lt;/a&gt;.&lt;/p&gt;&#039;<br />
  }<br />
}) }}&quot;, title: &quot;&quot;, id: &quot;65a928bb3e09f&quot;, url: &quot;&quot; }) }}


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



<p>‘Accordion’ allow us to hide content until the user interacts with the element, at which point content is shown in a drop down.</p>



<p>This element can be used to break up long pages of content, using clear headers to help the user navigate.</p>



<h2 class="wp-block-heading">Future considerations</h2>



<p>Remove SVG from inline &#8211; either background CSS or ::before or ::after pseudo</p>



<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;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;status 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;status 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;status 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;status 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;status status&#8211;yellow&quot;&gt;In progress&lt;/span&gt;&#039;}<br />
      ]<br />
    }<br />
  ]<br />
}) }}<br />
<br />