{{ aspExample({ code: &quot;&lt;div class=\&quot;asp-progress\&quot;&gt;  <br />
  &lt;div class=\&quot;asp-progress__single asp-progress__single&#8211;complete\&quot;&gt;  <br />
    &lt;div class=\&quot;asp-progress__single-content\&quot;&gt;  <br />
      &lt;span class=\&quot;asp-progress__single-icon asp-progress__single-icon&#8211;complete\&quot;&gt;&lt;/span&gt;  <br />
      &lt;div class=\&quot;asp-progress__single-title\&quot;&gt;Form received&lt;/div&gt;  <br />
      &lt;div class=\&quot;asp-progress__single-description\&quot;&gt;3 October 2023 11:06&lt;/div&gt;  <br />
    &lt;/div&gt;  <br />
  &lt;/div&gt;  <br />
  &lt;div class=\&quot;asp-progress__single asp-progress__single&#8211;complete\&quot;&gt;  <br />
    &lt;div class=\&quot;asp-progress__single-content\&quot;&gt;  <br />
      &lt;span class=\&quot;asp-progress__single-icon asp-progress__single-icon&#8211;complete\&quot;&gt;&lt;/span&gt;  <br />
      &lt;div class=\&quot;asp-progress__single-title\&quot;&gt;Assigned to&lt;/div&gt;  <br />
      &lt;div class=\&quot;asp-progress__single-description\&quot;&gt;John Smith (9999)&lt;/div&gt;  <br />
    &lt;/div&gt;  <br />
  &lt;/div&gt;  <br />
  &lt;div class=\&quot;asp-progress__single asp-progress__single&#8211;complete\&quot;&gt;  <br />
    &lt;div class=\&quot;asp-progress__single-content\&quot;&gt;  <br />
      &lt;span class=\&quot;asp-progress__single-icon asp-progress__single-icon&#8211;complete\&quot;&gt;&lt;/span&gt;  <br />
      &lt;div class=\&quot;asp-progress__single-title\&quot;&gt;Added to Niche&lt;/div&gt;  <br />
      &lt;div class=\&quot;asp-progress__single-description\&quot;&gt;9 October 2023 16:00&lt;br&gt;&lt;br&gt;Reference: &lt;a href=\&quot;#\&quot;&gt;52XXXXXXXX&lt;/a&gt;&lt;/div&gt;  <br />
    &lt;/div&gt;  <br />
  &lt;/div&gt;  <br />
  &lt;div class=\&quot;asp-progress__single asp-progress__single&#8211;not-attempted\&quot;&gt;  <br />
    &lt;div class=\&quot;asp-progress__single-content\&quot;&gt;  <br />
      &lt;span class=\&quot;asp-progress__single-icon asp-progress__single-icon&#8211;not-attempted\&quot;&gt;&lt;/span&gt;  <br />
      &lt;div class=\&quot;asp-progress__single-title\&quot;&gt;Email not sent&lt;/div&gt;  <br />
      &lt;div class=\&quot;asp-progress__single-description\&quot;&gt;Final action is to send an email&lt;/div&gt;  <br />
    &lt;/div&gt;  <br />
  &lt;/div&gt;  <br />
&lt;/div&gt;&quot;, nunjucks: &quot;{{ aspProgress({<br />
  rows: [<br />
    {<br />
      modifier: \&quot;complete\&quot;,<br />
      title: \&quot;Step 1 title\&quot;,<br />
      content: {<br />
        html: &#039;&lt;p&gt;Step 1 content (text).&lt;/p&gt;<br />
          &lt;p&gt;With additional line. modifier: complete&lt;/p&gt;&#039;<br />
      }<br />
    },<br />
    {<br />
      modifier: \&quot;failed\&quot;,<br />
      title: \&quot;Step 2 title\&quot;,<br />
      content: {<br />
        html: &#039;&lt;p&gt;Step 2 content (html) with &lt;a href=\&quot;#\&quot;&gt;link&lt;/a&gt;. modifier: failed&lt;/p&gt;&#039;<br />
      }<br />
    },<br />
    {<br />
      modifier: \&quot;in-progress\&quot;,<br />
      title: \&quot;Step 3 title\&quot;,<br />
      content: {<br />
        text: \&quot;Step 3 content (text). modifier: in-progress\&quot;<br />
      }<br />
    }<br />
  ]<br />
}) }}&quot;, title: &quot;&quot;, id: &quot;65a92ddddbb7a&quot;, url: &quot;&quot; }) }}


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



<p>Previously known as a steps component on the &#8216;frontend&#8217;.</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 />