{{ aspExample({ code: &quot;&quot;, nunjucks: &quot;{{ aspHelp({<br />
  targetElement: \&quot;.hint-example-1\&quot;,<br />
  name: \&quot;Help\&quot;<br />
}) }}&quot;, title: &quot;&quot;, id: &quot;66a3a3d25d1a9&quot;, url: &quot;&quot; }) }}


<h2 class="wp-block-heading">Help with expanded content</h2>


 {{ aspExample({ code: &quot;&quot;, nunjucks: &quot;{{ aspHelp({<br />
  targetElement: \&quot;.hint-example-1b\&quot;,<br />
  expanded: true,<br />
  name: \&quot;Help\&quot;<br />
}) }}&quot;, title: &quot;&quot;, id: &quot;66e024995cf4f&quot;, url: &quot;&quot; }) }}


<h2 class="wp-block-heading">Help with close other content</h2>


 {{ aspExample({ code: &quot;&quot;, nunjucks: &quot;{{ aspHelp({<br />
  targetElement: \&quot;#hint-example-2\&quot;,<br />
  closeElements: [\&quot;.hint-example-1\&quot;, \&quot;.hint-example-2\&quot;],<br />
  aria: \&quot;Hint\&quot;<br />
}) }}&quot;, title: &quot;&quot;, id: &quot;66e024995d2c5&quot;, url: &quot;&quot; }) }}


<p>WIP &#8211; Tied in with JS toggle functionality (This is hardcoded HTML like the cookie banner)</p>



<p>Non JS if the content isn&#8217;t hidden it should show</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 />