{{ aspExample({ code: &quot;&lt;table class=\&quot;asp-table\&quot;&gt;<br />
  &lt;thead class=\&quot;asp-table__head\&quot;&gt;<br />
    &lt;tr class=\&quot;asp-table__row asp-table__row&#8211;head\&quot;&gt;<br />
      &lt;th class=\&quot;asp-table__header\&quot; scope=\&quot;col\&quot;&gt;Reference&lt;/th&gt;<br />
      &lt;th class=\&quot;asp-table__header\&quot; scope=\&quot;col\&quot;&gt;Submitted&lt;/th&gt;<br />
      &lt;th class=\&quot;asp-table__header\&quot; scope=\&quot;col\&quot;&gt;Assigned to&lt;/th&gt;<br />
      &lt;th class=\&quot;asp-table__header\&quot; scope=\&quot;col\&quot;&gt;Processed&lt;/th&gt;<br />
    &lt;/tr&gt;<br />
  &lt;/thead&gt;<br />
  &lt;tbody class=\&quot;asp-table__body\&quot;&gt;<br />
    &lt;tr class=\&quot;asp-table__row\&quot;&gt;<br />
      &lt;td class=\&quot;asp-table__cell\&quot;&gt;&lt;span class=\&quot;asp-table__responsive-heading\&quot; aria-hidden=\&quot;true\&quot;&gt;Reference&lt;/span&gt; RAF-RUAYY-LONG-CONTENT&lt;/td&gt;<br />
      &lt;td class=\&quot;asp-table__cell\&quot;&gt;&lt;span class=\&quot;asp-table__responsive-heading\&quot; aria-hidden=\&quot;true\&quot;&gt;Submitted&lt;/span&gt; 13 June 2023 09:35&lt;/td&gt;<br />
      &lt;td class=\&quot;asp-table__cell\&quot;&gt;&lt;span class=\&quot;asp-table__responsive-heading\&quot; aria-hidden=\&quot;true\&quot;&gt;Assigned to&lt;/span&gt; John Smith&lt;/td&gt;<br />
      &lt;td class=\&quot;asp-table__cell\&quot;&gt;&lt;span class=\&quot;asp-table__responsive-heading\&quot; aria-hidden=\&quot;true\&quot;&gt;Processed&lt;/span&gt; 11 June 2023&lt;/td&gt;<br />
    &lt;/tr&gt;<br />
    &lt;tr class=\&quot;asp-table__row\&quot;&gt;<br />
      &lt;td class=\&quot;asp-table__cell\&quot;&gt;&lt;span class=\&quot;asp-table__responsive-heading\&quot; aria-hidden=\&quot;true\&quot;&gt;Reference&lt;/span&gt; RAF-RUAYZ-LONG-CONTENT&lt;/td&gt;<br />
      &lt;td class=\&quot;asp-table__cell\&quot;&gt;&lt;span class=\&quot;asp-table__responsive-heading\&quot; aria-hidden=\&quot;true\&quot;&gt;Submitted&lt;/span&gt; 13 June 2023 18:37&lt;/td&gt;<br />
      &lt;td class=\&quot;asp-table__cell\&quot;&gt;&lt;span class=\&quot;asp-table__responsive-heading\&quot; aria-hidden=\&quot;true\&quot;&gt;Assigned to&lt;/span&gt; Ashley Kristy&lt;/td&gt;<br />
      &lt;td class=\&quot;asp-table__cell\&quot;&gt;&lt;span class=\&quot;asp-table__responsive-heading\&quot; aria-hidden=\&quot;true\&quot;&gt;Processed&lt;/span&gt; 11 June 2023&lt;/td&gt;<br />
    &lt;/tr&gt;<br />
  &lt;/tbody&gt;<br />
&lt;/table&gt;&quot;, nunjucks: &quot;{{ aspTable({<br />
  head: [<br />
    { text: \&quot;Column 1\&quot; },<br />
    { text: \&quot;Column 2\&quot; },<br />
    { text: \&quot;Column 3 numeric: true\&quot;,<br />
      numeric: true<br />
    },<br />
    { text: \&quot;Column 4\&quot; }<br />
  ],<br />
  rows: [<br />
    {<br />
      cells: [<br />
        { text: \&quot;Row 1, cell 1\&quot; },<br />
        { text: \&quot;Row 1, cell 2\&quot; },<br />
        { number: 1 },<br />
        { text: \&quot;Row 1, cell 4. Extra content to demo width\&quot; }<br />
      ]<br />
    },<br />
    {<br />
      cells: [<br />
        { text: \&quot;Row 1, cell 1\&quot; },<br />
        { text: \&quot;Row 1, cell 2\&quot; },<br />
        { number: 2 },<br />
        { text: \&quot;Row 1, cell 4. Extra content to demo width\&quot; }<br />
      ]<br />
    }<br />
  ]<br />
}) }}&quot;, title: &quot;&quot;, id: &quot;65a92fd59d3c8&quot;, url: &quot;&quot; }) }}


<h2 class="wp-block-heading" id="when-to-use-this-component">When to use this component</h2>



<p>Use the table component to let users compare information in rows and columns.<br><br>Use tables to present data or information that can be organised in a structured way. This could consist of numbers, text or statistics.</p>



<p>A table should make it easy to:</p>



<ul class="wp-block-list">
<li>understand the relationship between different types of data</li>



<li>examine a range of possibilities at a glance</li>
</ul>



<h2 class="wp-block-heading" id="when-not-to-use-this-component">When not to use this component</h2>



<p>Do not use tables for cosmetic reasons or when you can use normal page structure to present the information, for example headers or lists.</p>



<p>Never use the table component to layout content on a page. Instead, use the&nbsp;grid system.</p>



<h2 class="wp-block-heading">Table with equal columns</h2>


 {{ aspExample({ code: &quot;&lt;table class=\&quot;asp-table asp-table&#8211;equal\&quot;&gt;<br />
  &lt;thead class=\&quot;asp-table__head\&quot;&gt;<br />
    &lt;tr class=\&quot;asp-table__row asp-table__row&#8211;head\&quot;&gt;<br />
      &lt;th class=\&quot;asp-table__header\&quot; scope=\&quot;col\&quot;&gt;Reference&lt;/th&gt;<br />
      &lt;th class=\&quot;asp-table__header\&quot; scope=\&quot;col\&quot;&gt;Submitted&lt;/th&gt;<br />
      &lt;th class=\&quot;asp-table__header\&quot; scope=\&quot;col\&quot;&gt;Assigned to&lt;/th&gt;<br />
      &lt;th class=\&quot;asp-table__header\&quot; scope=\&quot;col\&quot;&gt;Processed&lt;/th&gt;<br />
    &lt;/tr&gt;<br />
  &lt;/thead&gt;<br />
  &lt;tbody class=\&quot;asp-table__body\&quot;&gt;<br />
    &lt;tr class=\&quot;asp-table__row\&quot;&gt;<br />
      &lt;td class=\&quot;asp-table__cell\&quot;&gt;&lt;span class=\&quot;asp-table__responsive-heading\&quot; aria-hidden=\&quot;true\&quot;&gt;Reference&lt;/span&gt; RAF-RUAYY&lt;/td&gt;<br />
      &lt;td class=\&quot;asp-table__cell\&quot;&gt;&lt;span class=\&quot;asp-table__responsive-heading\&quot; aria-hidden=\&quot;true\&quot;&gt;Submitted&lt;/span&gt; 13 June 2023 09:35&lt;/td&gt;<br />
      &lt;td class=\&quot;asp-table__cell\&quot;&gt;&lt;span class=\&quot;asp-table__responsive-heading\&quot; aria-hidden=\&quot;true\&quot;&gt;Assigned to&lt;/span&gt; John Smith&lt;/td&gt;<br />
      &lt;td class=\&quot;asp-table__cell\&quot;&gt;&lt;span class=\&quot;asp-table__responsive-heading\&quot; aria-hidden=\&quot;true\&quot;&gt;Processed&lt;/span&gt; 11 June 2023&lt;/td&gt;<br />
    &lt;/tr&gt;<br />
    &lt;tr class=\&quot;asp-table__row\&quot;&gt;<br />
      &lt;td class=\&quot;asp-table__cell\&quot;&gt;&lt;span class=\&quot;asp-table__responsive-heading\&quot; aria-hidden=\&quot;true\&quot;&gt;Reference&lt;/span&gt; RAF-RUAYZ&lt;/td&gt;<br />
      &lt;td class=\&quot;asp-table__cell\&quot;&gt;&lt;span class=\&quot;asp-table__responsive-heading\&quot; aria-hidden=\&quot;true\&quot;&gt;Submitted&lt;/span&gt; 13 June 2023 18:37&lt;/td&gt;<br />
      &lt;td class=\&quot;asp-table__cell\&quot;&gt;&lt;span class=\&quot;asp-table__responsive-heading\&quot; aria-hidden=\&quot;true\&quot;&gt;Assigned to&lt;/span&gt; Ashley Kristy&lt;/td&gt;<br />
      &lt;td class=\&quot;asp-table__cell\&quot;&gt;&lt;span class=\&quot;asp-table__responsive-heading\&quot; aria-hidden=\&quot;true\&quot;&gt;Processed&lt;/span&gt; 11 June 2023&lt;/td&gt;<br />
    &lt;/tr&gt;<br />
  &lt;/tbody&gt;<br />
&lt;/table&gt;&quot;, nunjucks: &quot;{{ aspTable({<br />
  modifier: \&quot;equal\&quot;,<br />
  head: [<br />
    { text: \&quot;Column 1 equal\&quot; },<br />
    { text: \&quot;Column 2 equal\&quot; },<br />
    { text: \&quot;Column 3 equal\&quot; },<br />
    { text: \&quot;Column 4 equal\&quot; }<br />
  ],<br />
  rows: [<br />
    {<br />
      href: \&quot;#\&quot;,<br />
      cells: [<br />
        { text: \&quot;RAF-RUAYY-EXTRA-EXTRA-LONG-CONTENT\&quot; },<br />
        { text: \&quot;John Smith\&quot; },<br />
        { text: \&quot;13 June 2023 09:35\&quot; },<br />
        { number: \&quot;11 June 2023\&quot; }<br />
      ]<br />
    },<br />
    {<br />
      href: \&quot;#\&quot;,<br />
      cells: [<br />
        { text: \&quot;RAF&#8211;EXTRA-EXTRA-LONG-CONTENT\&quot; },<br />
        { text: \&quot;Ashley Kristy\&quot; },<br />
        { text: \&quot;13 June 2023 18:37\&quot; },<br />
        { number: \&quot;11 June 2023\&quot; }<br />
      ]<br />
    }<br />
  ]<br />
}) }}&quot;, title: &quot;&quot;, id: &quot;6659cfaa4c7cd&quot;, url: &quot;&quot; }) }}


<h2 class="wp-block-heading">Table with links</h2>


 {{ aspExample({ code: &quot;&lt;table class=\&quot;asp-table\&quot;&gt;<br />
  &lt;thead class=\&quot;asp-table__head\&quot;&gt;<br />
    &lt;tr class=\&quot;asp-table__row asp-table__row&#8211;head\&quot;&gt;<br />
      &lt;th class=\&quot;asp-table__header\&quot; scope=\&quot;col\&quot;&gt;Reference&lt;/th&gt;<br />
      &lt;th class=\&quot;asp-table__header\&quot; scope=\&quot;col\&quot;&gt;Submitted&lt;/th&gt;<br />
      &lt;th class=\&quot;asp-table__header\&quot; scope=\&quot;col\&quot;&gt;Assigned to&lt;/th&gt;<br />
      &lt;th class=\&quot;asp-table__header\&quot; scope=\&quot;col\&quot;&gt;Processed&lt;/th&gt;<br />
    &lt;/tr&gt;<br />
  &lt;/thead&gt;<br />
  &lt;tbody class=\&quot;asp-table__body\&quot;&gt;<br />
    &lt;tr class=\&quot;asp-table__row asp-table__row&#8211;link\&quot;&gt;<br />
      &lt;td class=\&quot;asp-table__cell\&quot;&gt;&lt;span class=\&quot;asp-table__responsive-heading\&quot; aria-hidden=\&quot;true\&quot;&gt;Reference&lt;/span&gt; &lt;a class=\&quot;asp-table__link\&quot; href=\&quot;#\&quot;&gt;RAF-RUAYY&lt;/a&gt;&lt;/td&gt;<br />
      &lt;td class=\&quot;asp-table__cell\&quot;&gt;&lt;span class=\&quot;asp-table__responsive-heading\&quot; aria-hidden=\&quot;true\&quot;&gt;Submitted&lt;/span&gt; 13 June 2023 09:35&lt;/td&gt;<br />
      &lt;td class=\&quot;asp-table__cell\&quot;&gt;&lt;span class=\&quot;asp-table__responsive-heading\&quot; aria-hidden=\&quot;true\&quot;&gt;Assigned to&lt;/span&gt; John Smith&lt;/td&gt;<br />
      &lt;td class=\&quot;asp-table__cell\&quot;&gt;&lt;span class=\&quot;asp-table__responsive-heading\&quot; aria-hidden=\&quot;true\&quot;&gt;Processed&lt;/span&gt; 11 June 2023&lt;/td&gt;<br />
    &lt;/tr&gt;<br />
    &lt;tr class=\&quot;asp-table__row asp-table__row&#8211;link\&quot;&gt;<br />
      &lt;td class=\&quot;asp-table__cell\&quot;&gt;&lt;span class=\&quot;asp-table__responsive-heading\&quot; aria-hidden=\&quot;true\&quot;&gt;Reference&lt;/span&gt; &lt;a class=\&quot;asp-table__link\&quot; href=\&quot;#\&quot;&gt;RAF-RUAYZ&lt;/a&gt;&lt;/td&gt;<br />
      &lt;td class=\&quot;asp-table__cell\&quot;&gt;&lt;span class=\&quot;asp-table__responsive-heading\&quot; aria-hidden=\&quot;true\&quot;&gt;Submitted&lt;/span&gt; 13 June 2023 18:37&lt;/td&gt;<br />
      &lt;td class=\&quot;asp-table__cell\&quot;&gt;&lt;span class=\&quot;asp-table__responsive-heading\&quot; aria-hidden=\&quot;true\&quot;&gt;Assigned to&lt;/span&gt; Ashley Kristy&lt;/td&gt;<br />
      &lt;td class=\&quot;asp-table__cell\&quot;&gt;&lt;span class=\&quot;asp-table__responsive-heading\&quot; aria-hidden=\&quot;true\&quot;&gt;Processed&lt;/span&gt; 11 June 2023&lt;/td&gt;<br />
    &lt;/tr&gt;<br />
  &lt;/tbody&gt;<br />
&lt;/table&gt;&quot;, nunjucks: &quot;{{ aspTable({<br />
  head: [<br />
    { text: \&quot;Column 1\&quot; },<br />
    { text: \&quot;Column 2\&quot; },<br />
    { text: \&quot;Column 3\&quot; },<br />
    { text: \&quot;Column 4\&quot; }<br />
  ],<br />
  rows: [<br />
    {<br />
      href: \&quot;#\&quot;,<br />
      cells: [<br />
        { text: \&quot;Row 1, cell 1, link\&quot; },<br />
        { text: \&quot;Row 1, cell 2\&quot; },<br />
        { text: \&quot;Row 1, cell 3\&quot; },<br />
        { text: \&quot;Row 1, cell 4\&quot; }<br />
      ]<br />
    },<br />
    {<br />
      href: \&quot;#\&quot;,<br />
      cells: [<br />
        { text: \&quot;Row 2, cell 1, link\&quot; },<br />
        { text: \&quot;Row 2, cell 2\&quot; },<br />
        { text: \&quot;Row 2, cell 3\&quot; },<br />
        { text: \&quot;Row 2, cell 4\&quot; }<br />
      ]<br />
    }<br />
  ]<br />
}) }}&quot;, title: &quot;&quot;, id: &quot;6659cfaa4c83c&quot;, url: &quot;&quot; }) }}


<h2 class="wp-block-heading">Unread Table</h2>


 {{ aspExample({ code: &quot;&lt;table class=\&quot;asp-table\&quot;&gt;<br />
  &lt;thead class=\&quot;asp-table__head\&quot;&gt;<br />
    &lt;tr class=\&quot;asp-table__row asp-table__row&#8211;head\&quot;&gt;<br />
      &lt;th class=\&quot;asp-table__header\&quot; scope=\&quot;col\&quot;&gt;Reference&lt;/th&gt;<br />
      &lt;th class=\&quot;asp-table__header\&quot; scope=\&quot;col\&quot;&gt;Submitted&lt;/th&gt;<br />
      &lt;th class=\&quot;asp-table__header\&quot; scope=\&quot;col\&quot;&gt;Assigned to&lt;/th&gt;<br />
      &lt;th class=\&quot;asp-table__header\&quot; scope=\&quot;col\&quot;&gt;Processed&lt;/th&gt;<br />
    &lt;/tr&gt;<br />
  &lt;/thead&gt;<br />
  &lt;tbody class=\&quot;asp-table__body\&quot;&gt;<br />
    &lt;tr class=\&quot;asp-table__row asp-table__row&#8211;unread asp-table__row&#8211;link\&quot;&gt;<br />
      &lt;td class=\&quot;asp-table__cell\&quot;&gt;&lt;span class=\&quot;asp-table__responsive-heading\&quot; aria-hidden=\&quot;true\&quot;&gt;Reference&lt;/span&gt; &lt;a class=\&quot;asp-table__link\&quot; href=\&quot;#\&quot;&gt;RAF-RUAYY&lt;/a&gt;&lt;/td&gt;<br />
      &lt;td class=\&quot;asp-table__cell\&quot;&gt;&lt;span class=\&quot;asp-table__responsive-heading\&quot; aria-hidden=\&quot;true\&quot;&gt;Submitted&lt;/span&gt; 13 June 2023 09:35&lt;/td&gt;<br />
      &lt;td class=\&quot;asp-table__cell\&quot;&gt;&lt;span class=\&quot;asp-table__responsive-heading\&quot; aria-hidden=\&quot;true\&quot;&gt;Assigned to&lt;/span&gt; John Smith&lt;/td&gt;<br />
      &lt;td class=\&quot;asp-table__cell\&quot;&gt;&lt;span class=\&quot;asp-table__responsive-heading\&quot; aria-hidden=\&quot;true\&quot;&gt;Processed&lt;/span&gt; 11 June 2023&lt;/td&gt;<br />
    &lt;/tr&gt;<br />
    &lt;tr class=\&quot;asp-table__row asp-table__row&#8211;unread asp-table__row&#8211;link\&quot;&gt;<br />
      &lt;td class=\&quot;asp-table__cell\&quot;&gt;&lt;span class=\&quot;asp-table__responsive-heading\&quot; aria-hidden=\&quot;true\&quot;&gt;Reference&lt;/span&gt; &lt;a class=\&quot;asp-table__link\&quot; href=\&quot;#\&quot;&gt;RAF-RUAYZ&lt;/a&gt;&lt;/td&gt;<br />
      &lt;td class=\&quot;asp-table__cell\&quot;&gt;&lt;span class=\&quot;asp-table__responsive-heading\&quot; aria-hidden=\&quot;true\&quot;&gt;Submitted&lt;/span&gt; 13 June 2023 18:37&lt;/td&gt;<br />
      &lt;td class=\&quot;asp-table__cell\&quot;&gt;&lt;span class=\&quot;asp-table__responsive-heading\&quot; aria-hidden=\&quot;true\&quot;&gt;Assigned to&lt;/span&gt; Ashley Kristy&lt;/td&gt;<br />
      &lt;td class=\&quot;asp-table__cell\&quot;&gt;&lt;span class=\&quot;asp-table__responsive-heading\&quot; aria-hidden=\&quot;true\&quot;&gt;Processed&lt;/span&gt; 11 June 2023&lt;/td&gt;<br />
    &lt;/tr&gt;<br />
  &lt;/tbody&gt;<br />
&lt;/table&gt;&quot;, nunjucks: &quot;{{ aspTable({<br />
  head: [<br />
    { text: \&quot;Column 1\&quot; },<br />
    { text: \&quot;Column 2\&quot; },<br />
    { text: \&quot;Column 3\&quot; },<br />
    { text: \&quot;Column 4\&quot; }<br />
  ],<br />
  rows: [<br />
    {<br />
      modifier: \&quot;unread\&quot;,<br />
      href: \&quot;#\&quot;,<br />
      cells: [<br />
        { text: \&quot;Row 1, cell 1, link\&quot; },<br />
        { text: \&quot;Row 1, cell 2\&quot; },<br />
        { text: \&quot;Row 1, cell 3\&quot; },<br />
        { text: \&quot;Row 1, cell 4\&quot; }<br />
      ]<br />
    },<br />
    {<br />
      modifier: \&quot;unread\&quot;,<br />
      href: \&quot;#\&quot;,<br />
      cells: [<br />
        { text: \&quot;Row 2, cell 1, link\&quot; },<br />
        { text: \&quot;Row 2, cell 2\&quot; },<br />
        { text: \&quot;Row 2, cell 3\&quot; },<br />
        { text: \&quot;Row 2, cell 4\&quot; }<br />
      ]<br />
    }<br />
  ]<br />
}) }}&quot;, title: &quot;&quot;, id: &quot;65a92fd59d469&quot;, url: &quot;&quot; }) }}


<h2 class="wp-block-heading">Read Table</h2>


 {{ aspExample({ code: &quot;{{ aspTable({<br />
  head: [<br />
    { text: \&quot;Column 1\&quot; },<br />
    { text: \&quot;Column 2\&quot; },<br />
    { text: \&quot;Column 3\&quot; },<br />
    { text: \&quot;Column 4\&quot; }<br />
  ],<br />
  rows: [<br />
    {<br />
      modifier: \&quot;read\&quot;,<br />
      href: \&quot;#\&quot;,<br />
      cells: [<br />
        { text: \&quot;Row 1, cell 1, link\&quot; },<br />
        { text: \&quot;Row 1, cell 2\&quot; },<br />
        { text: \&quot;Row 1, cell 3\&quot; },<br />
        { text: \&quot;Row 1, cell 4\&quot; }<br />
      ]<br />
    },<br />
    {<br />
      modifier: \&quot;read\&quot;,<br />
      href: \&quot;#\&quot;,<br />
      cells: [<br />
        { text: \&quot;Row 2, cell 1, link\&quot; },<br />
        { text: \&quot;Row 2, cell 2\&quot; },<br />
        { text: \&quot;Row 2, cell 3\&quot; },<br />
        { text: \&quot;Row 2, cell 4\&quot; }<br />
      ]<br />
    }<br />
  ]<br />
}) }}&quot;, nunjucks: &quot;&quot;, title: &quot;&quot;, id: &quot;65a92fd59d4d3&quot;, url: &quot;&quot; }) }}


<h2 class="wp-block-heading">Processed Table</h2>


 {{ aspExample({ code: &quot;&lt;table class=\&quot;asp-table\&quot;&gt;<br />
  &lt;thead class=\&quot;asp-table__head\&quot;&gt;<br />
    &lt;tr class=\&quot;asp-table__row asp-table__row&#8211;head\&quot;&gt;<br />
      &lt;th class=\&quot;asp-table__header\&quot; scope=\&quot;col\&quot;&gt;Reference&lt;/th&gt;<br />
      &lt;th class=\&quot;asp-table__header\&quot; scope=\&quot;col\&quot;&gt;Submitted&lt;/th&gt;<br />
      &lt;th class=\&quot;asp-table__header\&quot; scope=\&quot;col\&quot;&gt;Assigned to&lt;/th&gt;<br />
      &lt;th class=\&quot;asp-table__header\&quot; scope=\&quot;col\&quot;&gt;Processed&lt;/th&gt;<br />
    &lt;/tr&gt;<br />
  &lt;/thead&gt;<br />
  &lt;tbody class=\&quot;asp-table__body\&quot;&gt;<br />
    &lt;tr class=\&quot;asp-table__row asp-table__row&#8211;processed asp-table__row&#8211;link\&quot;&gt;<br />
      &lt;td class=\&quot;asp-table__cell\&quot;&gt;&lt;span class=\&quot;asp-table__responsive-heading\&quot; aria-hidden=\&quot;true\&quot;&gt;Reference&lt;/span&gt; &lt;a class=\&quot;asp-table__link\&quot; href=\&quot;#\&quot;&gt;RAF-RUAYY&lt;/a&gt;&lt;/td&gt;<br />
      &lt;td class=\&quot;asp-table__cell\&quot;&gt;&lt;span class=\&quot;asp-table__responsive-heading\&quot; aria-hidden=\&quot;true\&quot;&gt;Submitted&lt;/span&gt; 13 June 2023 09:35&lt;/td&gt;<br />
      &lt;td class=\&quot;asp-table__cell\&quot;&gt;&lt;span class=\&quot;asp-table__responsive-heading\&quot; aria-hidden=\&quot;true\&quot;&gt;Assigned to&lt;/span&gt; John Smith&lt;/td&gt;<br />
      &lt;td class=\&quot;asp-table__cell\&quot;&gt;&lt;span class=\&quot;asp-table__responsive-heading\&quot; aria-hidden=\&quot;true\&quot;&gt;Processed&lt;/span&gt; 11 June 2023&lt;/td&gt;<br />
    &lt;/tr&gt;<br />
    &lt;tr class=\&quot;asp-table__row asp-table__row&#8211;processed asp-table__row&#8211;link\&quot;&gt;<br />
      &lt;td class=\&quot;asp-table__cell\&quot;&gt;&lt;span class=\&quot;asp-table__responsive-heading\&quot; aria-hidden=\&quot;true\&quot;&gt;Reference&lt;/span&gt; &lt;a class=\&quot;asp-table__link\&quot; href=\&quot;#\&quot;&gt;RAF-RUAYZ&lt;/a&gt;&lt;/td&gt;<br />
      &lt;td class=\&quot;asp-table__cell\&quot;&gt;&lt;span class=\&quot;asp-table__responsive-heading\&quot; aria-hidden=\&quot;true\&quot;&gt;Submitted&lt;/span&gt; 13 June 2023 18:37&lt;/td&gt;<br />
      &lt;td class=\&quot;asp-table__cell\&quot;&gt;&lt;span class=\&quot;asp-table__responsive-heading\&quot; aria-hidden=\&quot;true\&quot;&gt;Assigned to&lt;/span&gt; Ashley Kristy&lt;/td&gt;<br />
      &lt;td class=\&quot;asp-table__cell\&quot;&gt;&lt;span class=\&quot;asp-table__responsive-heading\&quot; aria-hidden=\&quot;true\&quot;&gt;Processed&lt;/span&gt; 11 June 2023&lt;/td&gt;<br />
    &lt;/tr&gt;<br />
  &lt;/tbody&gt;<br />
&lt;/table&gt;&quot;, nunjucks: &quot;{{ aspTable({<br />
  head: [<br />
    { text: \&quot;Column 1\&quot; },<br />
    { text: \&quot;Column 2\&quot; },<br />
    { text: \&quot;Column 3\&quot; },<br />
    { text: \&quot;Column 4\&quot; }<br />
  ],<br />
  rows: [<br />
    {<br />
      modifier: \&quot;processed\&quot;,<br />
      href: \&quot;#\&quot;,<br />
      cells: [<br />
        { text: \&quot;Row 1, cell 1, link\&quot; },<br />
        { text: \&quot;Row 1, cell 2\&quot; },<br />
        { text: \&quot;Row 1, cell 3\&quot; },<br />
        { text: \&quot;Row 1, cell 4\&quot; }<br />
      ]<br />
    },<br />
    {<br />
      modifier: \&quot;processed\&quot;,<br />
      href: \&quot;#\&quot;,<br />
      cells: [<br />
        { text: \&quot;Row 2, cell 1, link\&quot; },<br />
        { text: \&quot;Row 2, cell 2\&quot; },<br />
        { text: \&quot;Row 2, cell 3\&quot; },<br />
        { text: \&quot;Row 2, cell 4\&quot; }<br />
      ]<br />
    }<br />
  ]<br />
}) }}&quot;, title: &quot;&quot;, id: &quot;65a92fd59d57e&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;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;Complete&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 />