{{ aspExample({ code: &quot;&lt;ul class=\&quot;asp-grid\&quot;&gt;<br />
  &lt;li class=\&quot;asp-grid__item asp-grid__item&#8211;large-one-half asp-card\&quot;&gt;<br />
    &lt;div class=\&quot;asp-skeleton asp-skeleton&#8211;image\&quot;&gt;<br />
      &lt;picture&gt;<br />
        &lt;source srcset=\&quot;https://media.aspolice.net/uploads/production/20200725104248/Crest-744&times;374.jpg.webp 1x, https://media.aspolice.net/uploads/production/20200725104248/Crest-1488&times;748.jpg.webp 2x\&quot; type=\&quot;image/webp\&quot;&gt;<br />
        &lt;source srcset=\&quot;https://media.aspolice.net/uploads/production/20200725104248/Crest-744&times;374.jpg 1x, https://media.aspolice.net/uploads/production/20200725104248/Crest-1488&times;748.jpg 2x\&quot; type=\&quot;image/jpeg\&quot;&gt;<br />
        &lt;img class=\&quot;asp-skeleton__image\&quot; src=\&quot;https://media.aspolice.net/uploads/production/20200725104248/Crest-744&times;374.jpg\&quot; width=\&quot;744\&quot; height=\&quot;372\&quot; alt=\&quot;Image of the police crest\&quot;&gt;<br />
      &lt;/picture&gt;<br />
    &lt;/div&gt;<br />
    &lt;h3 class=\&quot;asp-card__title\&quot;&gt;<br />
      &lt;a class=\&quot;asp-card__title-link\&quot; href=\&quot;#\&quot;&gt;Statement on disorder in Bristol&lt;/a&gt;<br />
    &lt;/h3&gt;<br />
    &lt;p class=\&quot;asp-card__excerpt\&quot;&gt;Fourteen people have so far been arrested and more arrests will follow in the coming days.&lt;/p&gt;<br />
    &lt;div class=\&quot;asp-card__meta\&quot;&gt;<br />
      &lt;a class=\&quot;asp-card__meta-link\&quot; href=\&quot;#\&quot;&gt;Forcewide News&lt;/a&gt;<br />
      &lt;span class=\&quot;asp-card__meta-date\&quot;&gt;3 August 2024&lt;/span&gt;<br />
    &lt;/div&gt;<br />
  &lt;/li&gt;<br />
&lt;/ul&gt;&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: \&quot;Card 1 text. modifier: [&amp;quot;medium-one-third&amp;quot;]\&quot;,<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: \&quot;Card 2 text. modifier: [&amp;quot;medium-one-third&amp;quot;]\&quot;,<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: \&quot;Card 3 text. modifier: [&amp;quot;medium-one-third&amp;quot;]\&quot;,<br />
      meta: {<br />
        href: \&quot;#\&quot;,<br />
        category: \&quot;Category\&quot;,<br />
        date: \&quot;3 August 2024\&quot;<br />
      }<br />
    }<br />
  ]<br />
}) }}&quot;, title: &quot;&quot;, id: &quot;65a92b83efc16&quot;, url: &quot;&quot; }) }}

 {{ aspExample({ code: &quot;&lt;ul class=\&quot;asp-grid\&quot;&gt;<br />
  &lt;li class=\&quot;asp-grid__item asp-grid__item&#8211;medium-one-half asp-grid__item&#8211;large-one-third asp-card\&quot;&gt;<br />
    &lt;div class=\&quot;asp-skeleton asp-skeleton&#8211;image\&quot;&gt;<br />
      &lt;picture&gt;<br />
        &lt;source srcset=\&quot;https://media.aspolice.net/uploads/production/20220302105928/PCs-web-recruitment-page-744&#215;374.jpg.webp 1x, https://media.aspolice.net/uploads/production/20220302105928/PCs-web-recruitment-page-1488&#215;748.jpg.webp 2x\&quot; type=\&quot;image/webp\&quot;&gt;<br />
        &lt;source srcset=\&quot;https://media.aspolice.net/uploads/production/20220302105928/PCs-web-recruitment-page-744&#215;374.jpg 1x, https://media.aspolice.net/uploads/production/20220302105928/PCs-web-recruitment-page-1488&#215;748.jpg 2x\&quot; type=\&quot;image/jpeg\&quot;&gt;<br />
        &lt;img class=\&quot;asp-skeleton__image\&quot; src=\&quot;https://media.aspolice.net/uploads/production/20220302105928/PCs-web-recruitment-page-744&#215;374.jpg\&quot; width=\&quot;744\&quot; height=\&quot;372\&quot; alt=\&quot;\&quot; loading=\&quot;lazy\&quot;&gt;<br />
      &lt;/picture&gt;<br />
    &lt;/div&gt;<br />
    &lt;h3 class=\&quot;asp-card__title\&quot;&gt;<br />
      &lt;a class=\&quot;asp-card__title-link\&quot; href=\&quot;#\&quot;&gt;Police officer&lt;/a&gt;<br />
    &lt;/h3&gt;<br />
    &lt;p class=\&quot;asp-card__excerpt\&quot;&gt;Apply to become a police officer for the first time or re-join to serve and protect the communities of Avon and Somerset.&lt;/p&gt;<br />
  &lt;/li&gt;<br />
&lt;/ul&gt;&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;, title: &quot;&quot;, id: &quot;66bb5e5b988d2&quot;, url: &quot;&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;yellow&quot;&gt;In Progress&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 />