Card

Preview
HTML
Nunjucks
Twig

<ul class="asp-grid">
  <li class="asp-grid__item asp-grid__item--medium-one-third asp-card">
    <div class="asp-skeleton asp-skeleton--image">
      <img class="asp-skeleton__image" src="https://cdn.aspolice.net/tasks/production/121/img/default.jpg" width="744" height="372" alt="">
    </div>
    <h2 class="asp-card__title">
      <a class="asp-card__title-link" href="#">Card 1 title</a>
    </h2>
    <p class="asp-card__content">Card 1 text. modifier: [&quot;medium-one-third&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">
      <img class="asp-skeleton__image" src="https://cdn.aspolice.net/tasks/production/121/img/default.jpg" width="744" height="372" alt="">
    </div>
    <h2 class="asp-card__title">
      <a class="asp-card__title-link" href="#">Card 2 title</a>
    </h2>
    <p class="asp-card__content">Card 1 text. modifier: [&quot;medium-one-third&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">
      <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;>
    </div>
    <h2 class="asp-card__title">
      <a class="asp-card__title-link" href="#">Card 3 title</a>
    </h2>
    <p class="asp-card__content">Card 1 text. modifier: [&quot;medium-one-third&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
source	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 source, 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.
sources	array or false (boolean)	Array of image urls all needed to create the srcsets options within the picture element. Default values are false (boolean) or null. If false (boolean), the following parameters will be ignored. See sources.

Options for sources

Name	Type	Description
webpx1	string	Required. The url for 1:1 pixel density for a webp format image.
webpx2	string	Required. The url for 2:1 pixel density for a webp format image.
jpgpx1	string	Required. The url for 1:1 pixel density for a jpg or jpeg format image.
jpgpx2	string	Required. The url for 2:1 pixel density for a jpg or jpeg format image.

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: ["medium-one-third"]',
      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 1 text. modifier: ["medium-one-third"]',
      meta: {
        href: "#",
        category: "Category",
        date: "3 August 2024"
      }
    },
    {
      modifier: ["medium-one-third"],
      href: "#",
      title: "Card 3 title",
      text: 'Card 1 text. modifier: ["medium-one-third"]',
      meta: {
        href: "#",
        category: "Category",
        date: "3 August 2024"
      }
    }
  ]
}) }}

Twig 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
source	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 source, 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.
sources	array or false (boolean)	Array of image urls all needed to create the srcsets options within the picture element. Default values are false (boolean) or null. If false (boolean), the following parameters will be ignored. See sources.

Options for sources

Name	Type	Description
webpx1	string	Required. The url for 1:1 pixel density for a webp format image.
webpx2	string	Required. The url for 2:1 pixel density for a webp format image.
jpgpx1	string	Required. The url for 1:1 pixel density for a jpg or jpeg format image.
jpgpx2	string	Required. The url for 2:1 pixel density for a jpg or jpeg format image.

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: ["medium-one-third"]',
      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 1 text. modifier: ["medium-one-third"]',
      meta: {
        href: "#",
        category: "Category",
        date: "3 August 2024"
      }
    },
    {
      modifier: ["medium-one-third"],
      href: "#",
      title: "Card 3 title",
      text: 'Card 1 text. modifier: ["medium-one-third"]',
      meta: {
        href: "#",
        category: "Category",
        date: "3 August 2024"
      }
    }
  ]
}) }}

Preview
HTML
Nunjucks
Twig

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">
      <img class="asp-skeleton__image" src="https://cdn.aspolice.net/tasks/production/121/img/default.jpg" width="744" height="372" alt="">
    </div>
    <h2 class="asp-card__title">
      <a class="asp-card__title-link" href="#">Card 1 title</a>
    </h2>
  </li>
  <li class="asp-grid__item asp-grid__item--medium-one-third asp-card">
    <div class="asp-skeleton asp-skeleton--image">
      <img class="asp-skeleton__image" src="https://cdn.aspolice.net/tasks/production/121/img/default.jpg" width="744" height="372" alt="">
    </div>
    <h2 class="asp-card__title">
      <a class="asp-card__title-link" href="#">Card 2 title</a>
    </h2>
  </li>
  <li class="asp-grid__item asp-grid__item--medium-one-third asp-card">
    <div class="asp-skeleton asp-skeleton--image">
      <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;>
    </div>
    <h2 class="asp-card__title">
      <a class="asp-card__title-link" href="#">Card 3 title</a>
    </h2>
  </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
source	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 source, 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.
sources	array or false (boolean)	Array of image urls all needed to create the srcsets options within the picture element. Default values are false (boolean) or null. If false (boolean), the following parameters will be ignored. See sources.

Options for sources

Name	Type	Description
webpx1	string	Required. The url for 1:1 pixel density for a webp format image.
webpx2	string	Required. The url for 2:1 pixel density for a webp format image.
jpgpx1	string	Required. The url for 1:1 pixel density for a jpg or jpeg format image.
jpgpx2	string	Required. The url for 2:1 pixel density for a jpg or jpeg format image.

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"
    }
  ]
}) }}

Twig 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
source	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 source, 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.
sources	array or false (boolean)	Array of image urls all needed to create the srcsets options within the picture element. Default values are false (boolean) or null. If false (boolean), the following parameters will be ignored. See sources.

Options for sources

Name	Type	Description
webpx1	string	Required. The url for 1:1 pixel density for a webp format image.
webpx2	string	Required. The url for 2:1 pixel density for a webp format image.
jpgpx1	string	Required. The url for 1:1 pixel density for a jpg or jpeg format image.
jpgpx2	string	Required. The url for 2:1 pixel density for a jpg or jpeg format image.

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	Completed
Figma version	Not started
M365 versions	Not started
Documentation	In progress

Published 3 May 2024
Last updated 10 December 2024