ASP Digital Design System

Card

Open this example in a new tab: card

<ul class="asp-grid">
  <li class="asp-grid__item asp-grid__item--medium-one-third asp-card">
    <div class="asp-skeleton asp-skeleton--image">
      <picture>
        <source srcset="https://media.aspolice.net/uploads/production/20220302105928/PCs-web-recruitment-page-744x372.jpg.webp 1x, https://media.aspolice.net/uploads/production/20220302105928/PCs-web-recruitment-page-1488x748.jpg.webp 2x" type="image/webp">
        <source srcset="https://media.aspolice.net/uploads/production/20220302105928/PCs-web-recruitment-page-744x372.jpg 1x, https://media.aspolice.net/uploads/production/20220302105928/PCs-web-recruitment-page-1488x748.jpg 2x" type="image/jpeg">
        <img class="asp-skeleton__image" src="https://media.aspolice.net/uploads/production/20220302105928/PCs-web-recruitment-page-744x372.jpg" width="744" height="372" alt="">
      </picture>
    </div>
    <h3 class="asp-card__title">
      <a class="asp-card__title-link" href="#">Card 1 title</a>
    </h3>
    <p class="asp-card__content">Card 1 text. modifier: [&amp;quot;medium-one-third&amp;quot;]</p>
    <div class="asp-card__meta">
      <a class="asp-card__meta-link" href="#">Category</a>
      <span class="asp-card__meta-date">Date. j F Y</span>
    </div>
  </li>
  <li class="asp-grid__item asp-grid__item--medium-one-third asp-card">
    <div class="asp-skeleton asp-skeleton--image">
      <picture>
        <img class="asp-skeleton__image" src="https://cdn.aspolice.net/tasks/production/121/img/default.jpg" width="744" height="372" alt="">
      </picture>
    </div>
    <h3 class="asp-card__title">
      <a class="asp-card__title-link" href="#">Card 2 title</a>
    </h3>
    <p class="asp-card__content">Card 2 text. modifier: [&amp;quot;medium-one-third&amp;quot;]</p>
    <div class="asp-card__meta">
      <a class="asp-card__meta-link" href="#">Category</a>
      <span class="asp-card__meta-date">3 August 2024</span>
    </div>
  </li>
  <li class="asp-grid__item asp-grid__item--medium-one-third asp-card">
    <div class="asp-skeleton asp-skeleton--image">
      <picture>
        <img class="asp-skeleton__image" src="https://cdn.aspolice.net/tasks/production/121/img/default.jpg" width="744" height="372" alt="" loading=&quot;lazy&quot;>
      </picture>
    </div>
    <h3 class="asp-card__title">
      <a class="asp-card__title-link" href="#">Card 3 title</a>
    </h3>
    <p class="asp-card__content">Card 3 text. modifier: [&amp;quot;medium-one-third&amp;quot;]</p>
    <div class="asp-card__meta">
      <a class="asp-card__meta-link" href="#">Category</a>
      <span class="asp-card__meta-date">3 August 2024</span>
    </div>
  </li>
</ul>
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Name Type Description
rows object Required. Object of each card. See rows.

Options for rows

Name Type Description
modifier array or false (boolean) Array of sizes for the card component. Default values are false (boolean) or null. WIP
href string Required. The URL for the card component.
title string Required. The card component title.
text string or false (boolean) The card component text.
image array Required. Array of image attributes. See image.
meta array or false (boolean) Array of meta attributes for news stories. Default values are false (boolean) or null. If false (boolean), the following parameters will be ignored. See meta.

Options for image

Name Type Description
src string or false (boolean) The image url. Default values are 'default', false (boolean) or null. Note; 'default', false (boolean) or null will return the default image.
alt string or false (boolean) The text that displays in the image alt. Default values are '', false (boolean) or null (returns a blank alt). Note; 'default' for src, will also return a blank alt.
lazyLoading boolean Default values are false (boolean), true (boolean) or null. Note; If the card is the third or after card in the array, lazyLoading is added by default.

Options for meta

Name Type Description
href string Required. The URL that the category will link to.
category string Required. The category. Note; Must correspond with meta.href.
date string Required. The date of publication. Note; Format is Day (no leading zero) Month (in full) Year (in full). For example, 7 August 2024. 
{% from "card/macro.njk" import aspCard %}


{{ aspCard({
  rows: [
    {
      modifier: ["medium-one-third"],
      href: "#",
      title: "Card 1 title",
      text: "Card 1 text. modifier: [&quot;medium-one-third&quot;]",
      image: {
        src: "https://media.aspolice.net/uploads/production/20220302105928/PCs-web-recruitment-page"
      },
      meta: {
        href: "#",
        category: "Category",
        date: "Date. j F Y"
      }
    },
    {
      modifier: ["medium-one-third"],
      href: "#",
      title: "Card 2 title",
      text: "Card 2 text. modifier: [&quot;medium-one-third&quot;]",
      meta: {
        href: "#",
        category: "Category",
        date: "3 August 2024"
      }
    },
    {
      modifier: ["medium-one-third"],
      href: "#",
      title: "Card 3 title",
      text: "Card 3 text. modifier: [&quot;medium-one-third&quot;]",
      meta: {
        href: "#",
        category: "Category",
        date: "3 August 2024"
      }
    }
  ]
}) }}

Open this example in a new tab: card

<ul class="asp-grid">
  <li class="asp-grid__item asp-grid__item--medium-one-third asp-card">
    <div class="asp-skeleton asp-skeleton--image">
      <picture>
        <source srcset="https://media.aspolice.net/uploads/production/20220302105928/PCs-web-recruitment-page-744x372.jpg.webp 1x, https://media.aspolice.net/uploads/production/20220302105928/PCs-web-recruitment-page-1488x748.jpg.webp 2x" type="image/webp">
        <source srcset="https://media.aspolice.net/uploads/production/20220302105928/PCs-web-recruitment-page-744x372.jpg 1x, https://media.aspolice.net/uploads/production/20220302105928/PCs-web-recruitment-page-1488x748.jpg 2x" type="image/jpeg">
        <img class="asp-skeleton__image" src="https://media.aspolice.net/uploads/production/20220302105928/PCs-web-recruitment-page-744x372.jpg" width="744" height="372" alt="">
      </picture>
    </div>
    <h3 class="asp-card__title">
      <a class="asp-card__title-link" href="#">Card 1 title</a>
    </h3>
  </li>
  <li class="asp-grid__item asp-grid__item--medium-one-third asp-card">
    <div class="asp-skeleton asp-skeleton--image">
      <picture>
        <img class="asp-skeleton__image" src="https://cdn.aspolice.net/tasks/production/121/img/default.jpg" width="744" height="372" alt="">
      </picture>
    </div>
    <h3 class="asp-card__title">
      <a class="asp-card__title-link" href="#">Card 2 title</a>
    </h3>
  </li>
  <li class="asp-grid__item asp-grid__item--medium-one-third asp-card">
    <div class="asp-skeleton asp-skeleton--image">
      <picture>
        <img class="asp-skeleton__image" src="https://cdn.aspolice.net/tasks/production/121/img/default.jpg" width="744" height="372" alt="" loading=&quot;lazy&quot;>
      </picture>
    </div>
    <h3 class="asp-card__title">
      <a class="asp-card__title-link" href="#">Card 3 title</a>
    </h3>
  </li>
</ul>
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Name Type Description
rows object Required. Object of each card. See rows.

Options for rows

Name Type Description
modifier array or false (boolean) Array of sizes for the card component. Default values are false (boolean) or null. WIP
href string Required. The URL for the card component.
title string Required. The card component title.
text string or false (boolean) The card component text.
image array Required. Array of image attributes. See image.
meta array or false (boolean) Array of meta attributes for news stories. Default values are false (boolean) or null. If false (boolean), the following parameters will be ignored. See meta.

Options for image

Name Type Description
src string or false (boolean) The image url. Default values are 'default', false (boolean) or null. Note; 'default', false (boolean) or null will return the default image.
alt string or false (boolean) The text that displays in the image alt. Default values are '', false (boolean) or null (returns a blank alt). Note; 'default' for src, will also return a blank alt.
lazyLoading boolean Default values are false (boolean), true (boolean) or null. Note; If the card is the third or after card in the array, lazyLoading is added by default.

Options for meta

Name Type Description
href string Required. The URL that the category will link to.
category string Required. The category. Note; Must correspond with meta.href.
date string Required. The date of publication. Note; Format is Day (no leading zero) Month (in full) Year (in full). For example, 7 August 2024. 
{% from "card/macro.njk" import aspCard %}


{{ aspCard({
  rows: [
    {
      modifier: ["medium-one-third"],
      href: "#",
      title: "Card 1 title",
      image: {
        src: "https://media.aspolice.net/uploads/production/20220302105928/PCs-web-recruitment-page"
      }
    },
    {
      modifier: ["medium-one-third"],
      href: "#",
      title: "Card 2 title"
    },
    {
      modifier: ["medium-one-third"],
      href: "#",
      title: "Card 3 title"
    }
  ]
}) }}

WIP -- Mention skeleton loading

Alias

What was known as a card component on the ‘frontend’ is now a signage component.
Previously known as a story component on the ‘citizen site’.

Status of development

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.

Development criteria Status
WCAG 2.2 compliant Not started
WCAG 2.1 compliant Completed
HTML / Nunjucks version In Progress
Figma version Not started
M365 versions Not started
Documentation In progress

Published 3 May 2024
Last updated 17 September 2024