{{ aspExample({ code: "", nunjucks: "", json: "", title: "", example: "default", id: "65a92a41e4915" }) }}

 {{ aspExample({ code: "", nunjucks: "", json: "", title: "", example: "green", id: "68cada2d4d5ea" }) }}

 {{ aspExample({ code: "", nunjucks: "", json: "", title: "", example: "amber", id: "68caea2977aaa" }) }}

 {{ aspExample({ code: "", nunjucks: "", json: "", title: "", example: "red", id: "68caea2977aed" }) }}

 {{ aspExample({ code: "", nunjucks: "", json: "", title: "", example: "grey", id: "68caea2977b31" }) }}

 {{ aspExample({ code: &quot;&lt;div class=\&quot;asp-alert asp-alert&#8211;red\&quot; role=\&quot;region\&quot;&gt;<br />
  &lt;div class=\&quot;asp-container\&quot;&gt;<br />
      &lt;p&gt;&lt;strong&gt;Plane crash in Ahmedabad&lt;/strong&gt;: The UK is working with local authorities in India to urgently establish the facts and provide support to those involved. &lt;a href=\&quot;#\&quot;&gt;What to do if you have concerns about friends or family&lt;/a&gt;.&lt;/p&gt;<br />
  &lt;/div&gt;<br />
&lt;/div&gt;&quot;, nunjucks: &quot;&quot;, json: &quot;&quot;, title: &quot;&quot;, example: &quot;&quot;, id: &quot;68db8c5246f58&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;red&quot;&gt;Failing&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&#8211;green&quot;&gt;Completed&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 />



<p></p>