{{ aspExample({ code: &quot;&lt;div class=\&quot;alert alert&#8211;success\&quot;&gt;  <br />
    &lt;h1 class=\&quot;alert_title\&quot;&gt;Sign in email sent&lt;/h1&gt;  <br />
    &lt;p&gt;If your email address is valid, an email has been sent to it with a link to sign in to [Application]&lt;/p&gt;  <br />
    &lt;p&gt;It should arrive immediately. The link will expire after 10 minutes. If this happens, you will need to request a new link.&lt;/p&gt;  <br />
&lt;/div&gt;&quot;, nunjucks: &quot;{{ aspAlert({<br />
  modifier: \&quot;success\&quot;,<br />
  title: \&quot;Alert title\&quot;,<br />
  content: {<br />
    html: &#039;&lt;p&gt;Alert content (html) with a &lt;a href=\&quot;#\&quot;&gt;link&lt;/a&gt;&lt;/p&gt;<br />
      &lt;p&gt;With additional line. modifier: success&lt;/p&gt;&#039;<br />
  }<br />
}) }}&quot;, title: &quot;&quot;, id: &quot;65a92a41e4915&quot;, url: &quot;&quot; }) }}

 {{ aspExample({ code: &quot;&quot;, nunjucks: &quot;{{ aspAlert({<br />
  modifier: \&quot;warning\&quot;,<br />
  content: {<br />
    text: \&quot;Alert content (text) without a title. modifier: warning\&quot;<br />
  }<br />
}) }}&quot;, title: &quot;&quot;, id: &quot;66e0373036671&quot;, url: &quot;&quot; }) }}

 {{ aspExample({ code: &quot;&lt;div class=\&quot;alert alert&#8211;danger\&quot;&gt;  <br />
  &lt;p&gt;This is a danger alert message with a &lt;a href=\&quot;#\&quot;&gt;text link&lt;/a&gt;&lt;/p&gt;  <br />
&lt;/div&gt;&quot;, nunjucks: &quot;{{ aspAlert({<br />
  modifier: \&quot;danger\&quot;,<br />
  content: {<br />
    text: \&quot;Alert content (text) without a title. modifier: danger\&quot;<br />
  }<br />
}) }}&quot;, title: &quot;&quot;, id: &quot;65a92a41e4974&quot;, url: &quot;&quot; }) }}


<h2 class="wp-block-heading">Alias</h2>



<p>A (left aligned) alert is now a notification component.</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;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&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 />