{{ aspExample({ code: &quot;&lt;ul class=\&quot;asp-grid\&quot;&gt;<br />
  &lt;li class=\&quot;asp-grid__item asp-grid__item&#8211;medium-one-half asp-grid__item&#8211;large-one-third asp-group\&quot;&gt;<br />
    &lt;h2 class=\&quot;asp-group__title\&quot;&gt;<br />
      Animals<br />
    &lt;/h2&gt;<br />
    &lt;ol class=\&quot;asp-group__list\&quot;&gt;<br />
      &lt;li class=\&quot;asp-group__item\&quot;&gt;<br />
        &lt;a class=\&quot;asp-group__link\&quot; href=\&quot;#\&quot;&gt;Animal abuse&lt;/a&gt;<br />
      &lt;/li&gt;<br />
      &lt;li class=\&quot;asp-group__item\&quot;&gt;<br />
        &lt;a class=\&quot;asp-group__link\&quot; href=\&quot;#\&quot;&gt;Animal locked in a vehicle&lt;/a&gt;<br />
      &lt;/li&gt;<br />
      &lt;li class=\&quot;asp-group__item\&quot;&gt;<br />
        &lt;a class=\&quot;asp-group__link\&quot; href=\&quot;#\&quot;&gt;Dogs&lt;/a&gt;<br />
      &lt;/li&gt;<br />
      &lt;li class=\&quot;asp-group__item\&quot;&gt;<br />
        &lt;a class=\&quot;asp-group__link\&quot; href=\&quot;#\&quot;&gt;Horses&lt;/a&gt;<br />
      &lt;/li&gt;<br />
      &lt;li class=\&quot;asp-group__item\&quot;&gt;<br />
        &lt;a class=\&quot;asp-group__link\&quot; href=\&quot;#\&quot;&gt;Wildlife crime&lt;/a&gt;<br />
      &lt;/li&gt;<br />
    &lt;/ol&gt;<br />
  &lt;/li&gt;<br />
&lt;/ul&gt;&quot;, nunjucks: &quot;{{ aspGroup({<br />
  rows: [<br />
    {<br />
      title: \&quot;Group 1\&quot;,<br />
      rows: [<br />
        {<br />
          text: \&quot;Group 1, sub link a\&quot;,<br />
          href: \&quot;#\&quot;<br />
        },<br />
        {<br />
          text: \&quot;Group 1, sub link b\&quot;,<br />
          href: \&quot;#\&quot;<br />
        },<br />
        {<br />
          text: \&quot;Group 1, sub link c\&quot;,<br />
          href: \&quot;#\&quot;<br />
        }<br />
      ]<br />
    },<br />
    {<br />
      title: \&quot;Group 2\&quot;,<br />
      rows: [<br />
        {<br />
          text: \&quot;Group 2, sub link a\&quot;,<br />
          href: \&quot;#\&quot;<br />
        },<br />
        {<br />
          text: \&quot;Group 2, sub link b\&quot;,<br />
          href: \&quot;#\&quot;<br />
        }<br />
      ]<br />
    }<br />
  ]<br />
}) }}&quot;, title: &quot;&quot;, id: &quot;666ae41b20ee5&quot;, url: &quot;&quot; }) }}


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