{{ aspExample({ code: &quot;&quot;, nunjucks: &quot;{{ aspCard({<br />
  rows: [<br />
    {<br />
      modifier: [\&quot;medium-one-third\&quot;],<br />
      href: \&quot;#\&quot;,<br />
      title: \&quot;Card 1 title\&quot;,<br />
      text: &#039;Card 1 text. modifier: [\&quot;medium-one-third\&quot;]&#039;,<br />
      image: {<br />
        src: \&quot;https://media.aspolice.net/uploads/production/20220302105928/PCs-web-recruitment-page\&quot;<br />
      },<br />
      meta: {<br />
        href: \&quot;#\&quot;,<br />
        category: \&quot;Category\&quot;,<br />
        date: \&quot;Date. j F Y\&quot;<br />
      }<br />
    },<br />
    {<br />
      modifier: [\&quot;medium-one-third\&quot;],<br />
      href: \&quot;#\&quot;,<br />
      title: \&quot;Card 2 title\&quot;,<br />
      text: &#039;Card 1 text. modifier: [\&quot;medium-one-third\&quot;]&#039;,<br />
      meta: {<br />
        href: \&quot;#\&quot;,<br />
        category: \&quot;Category\&quot;,<br />
        date: \&quot;3 August 2024\&quot;<br />
      }<br />
    },<br />
    {<br />
      modifier: [\&quot;medium-one-third\&quot;],<br />
      href: \&quot;#\&quot;,<br />
      title: \&quot;Card 3 title\&quot;,<br />
      text: &#039;Card 1 text. modifier: [\&quot;medium-one-third\&quot;]&#039;,<br />
      meta: {<br />
        href: \&quot;#\&quot;,<br />
        category: \&quot;Category\&quot;,<br />
        date: \&quot;3 August 2024\&quot;<br />
      }<br />
    }<br />
  ]<br />
}) }}&quot;, json: &quot;&quot;, title: &quot;&quot;, example: &quot;&quot;, id: &quot;65a92b83efc16&quot; }) }}

 {{ aspExample({ code: &quot;&quot;, nunjucks: &quot;{{ aspCard({<br />
  rows: [<br />
    {<br />
      modifier: [\&quot;medium-one-third\&quot;],<br />
      href: \&quot;#\&quot;,<br />
      title: \&quot;Card 1 title\&quot;,<br />
      image: {<br />
        src: \&quot;https://media.aspolice.net/uploads/production/20220302105928/PCs-web-recruitment-page\&quot;<br />
      }<br />
    },<br />
    {<br />
      modifier: [\&quot;medium-one-third\&quot;],<br />
      href: \&quot;#\&quot;,<br />
      title: \&quot;Card 2 title\&quot;<br />
    },<br />
    {<br />
      modifier: [\&quot;medium-one-third\&quot;],<br />
      href: \&quot;#\&quot;,<br />
      title: \&quot;Card 3 title\&quot;<br />
    }<br />
  ]<br />
}) }}&quot;, json: &quot;&quot;, title: &quot;&quot;, example: &quot;&quot;, id: &quot;66bb5e5b988d2&quot; }) }}


<p>WIP &#8211; Mention skeleton loading</p>



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



<p>What was known as a card component on the &#8216;frontend&#8217; is now a signage component.<br>Previously known as a story component on the &#8216;citizen site&#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&#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>