Skip to main content Skip to list of components
Service phase: Beta

This is a new service – give us your feedback to help improve it.

Components

Card

Use the card component for providing previews to articles and pages.

Contents

  1. Status
  2. Coloured cards
  3. Fully clickable
  4. Horizontal
  5. Images
  6. Meta information
  7. Actions
Open this example in new tab

HTML 

<article class="tna-card tna-card--demo">
  <hgroup class="tna-hgroup-m tna-card__heading">
    <p class="tna-hgroup__supertitle">Card supertitle</p>
    <h3 class="tna-hgroup__title">
      <a href="#" class="tna-card__heading-link">Card title</a>
    </h3>
  </hgroup>
  <a href="#" class="tna-card__image-container" tabindex="-1" aria-hidden="true">
    <picture class="tna-card__image">
      <img src="https://picsum.photos/600/400?1" alt="A random example image" width="600" height="400">
    </picture>
  </a>
  <div class="tna-card__body">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis.</p>
  </div>
</article>

Nunjucks

Nunjucks options
Primary options
Name Type Description
supertitle string

The smaller title to display above the main card title.
title string

Required.

The main title of the card.
headingLevel number

Required.

The heading level which represents an element from <h1> through to <h6>.
headingSize string

The physical size of the card title (xl, l, m or s).

Default: m
href string

A URL to use as a link in the card’s heading and image.
hrefClasses string

Classes to add to the elements of the card that use href.
hrefAttributes object

HTML attributes (for example data attributes) to add to the elements of the card that use href.
imageSrc string

The location of the card’s image.
imageAlt string

Alternative text for the image in the event that it can’t be displayed.
imageWidth number

The width of the image in pixels.
imageHeight number

The height of the image in pixels.
imageType string

The mime type of the image. Defaults to image/jpeg. Only required when using imageSources.
imageSources array

Alternative sources of the image.

See macro options for imageSources.
lazyImage boolean

If true, make the image a lazily-loaded image.
label string

A label which will appear over the top left of the card’s image. If there is no image, the label is not displayed.
labelColour string

The colour to use for the label. Can be set to black, pink, orange, yellow, green or blue. If not set, the default is the current accent colour.
meta array

Small pieces of additional information akin to subtitles, displayed between the title and the body.

See macro options for meta.
body string

The HTML for the main body of the card. Not displayed if text is set.
text string

The text for the card which will be inserted into a <p> element. Overwrites body if it is set.
actions array

An array of actions to add at the bottom of the card. Each action is displayed as a button.

See macro options for actions.
fullAreaClick boolean

If true, href is set and there are no actions, allow users to click anywhere on the card to follow the link.
horizontal boolean

If true, change the card to a horizontal layout, placing the image to the left of the content. This layout changes back to vertical on smaller devices.
horizontalOnSmall boolean

If true, use a horizontal layout on small devices.
horizontalFlipped boolean

If true, place the image on the right when using horizontal layouts.
horizontalSmallImage boolean

If true, use a smaller image when using horizontal layouts.
style string

The style of card to use which can be either contrast for an inverted card, tint for a tinted one or accent for a card that matches the page’s accent colour.
plainSupertitle boolean

If true, remove the accent or contrast colour from the card supertitle.
accentMeta boolean

If true, meta tags adopt an accented style.
htmlElement string

HTML element of the card.

Default: article
classes string

Classes to add to the card.
attributes object

HTML attributes (for example data attributes) to add to the card.
Options for imageSources
Name Type Description
src string

Required.

The location of the image.
type string

Required.

The mime type of the image.
media string

A media condition for the image.
width number

The width of the image in pixels.
height number

The height of the image in pixels.
Options for meta
Name Type Description
title string

Required.

The title of the meta data which is visually hidden.
text string

Required.

The text element of the meta data.
icon string

The name of a Font Awesome icon, without the prefixed fa-.
Options for actions
Name Type Description
text string

Required.

The text for the action.
href string

Required.

The URL of the action.
title string

An optional title for the action.
classes string

Classes to add to the card action.
attributes object

HTML attributes (for example data attributes) to add to the card action.

 
{% from "nationalarchives/components/card/macro.njk" import tnaCard %}

{{ tnaCard({
  supertitle: "Card supertitle",
  title: "Card title",
  headingLevel: 3,
  headingSize: "m",
  href: "#",
  imageSrc: "https://picsum.photos/600/400?1",
  imageAlt: "A random example image",
  imageWidth: 600,
  imageHeight: 400,
  body: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis.</p>",
  classes: "tna-card--demo"
}) }}

Status

Status
Ready for production
Tested without CSS
Yes
Passed DAC audit
Yes
Documentation complete
No

Coloured cards

Cards can be one of four additional styles; plain, contrast, tint and accent. Use different styles to direct user's attention and provide visual distinction.

Open this example in new tab

HTML 

<ul class="tna-container tna-!--padding-bottom-m">
  <li class="tna-column tna-column--width-1-4 tna-column--full-small tna-column--full-tiny tna-!--padding-top-m">
    <article class="tna-card tna-card--demo tna-card--padded tna-card--plain">
      <hgroup class="tna-hgroup-m tna-card__heading">
        <p class="tna-hgroup__supertitle">Supertitle</p>
        <h3 class="tna-hgroup__title">
          <a href="#" class="tna-card__heading-link">Plain card title</a>
        </h3>
      </hgroup>
      <a href="#" class="tna-card__image-container" tabindex="-1" aria-hidden="true">
        <picture class="tna-card__image">
          <img src="https://picsum.photos/600/400?1" alt="A random example image" width="600" height="400">
        </picture>
      </a>
      <div class="tna-card__body">
        <p>Lorem ipsum dolor sit amet.</p>
      </div>
    </article>
  </li>
  <li class="tna-column tna-column--width-1-4 tna-column--full-small tna-column--full-tiny tna-!--padding-top-m">
    <article class="tna-card tna-card--demo tna-card--padded tna-background-contrast">
      <hgroup class="tna-hgroup-m tna-card__heading">
        <p class="tna-hgroup__supertitle">Supertitle</p>
        <h3 class="tna-hgroup__title">
          <a href="#" class="tna-card__heading-link">Contrast card title</a>
        </h3>
      </hgroup>
      <a href="#" class="tna-card__image-container" tabindex="-1" aria-hidden="true">
        <picture class="tna-card__image">
          <img src="https://picsum.photos/600/400?2" alt="A random example image" width="600" height="400">
        </picture>
      </a>
      <div class="tna-card__body">
        <p>Lorem ipsum dolor sit amet.</p>
      </div>
    </article>
  </li>
  <li class="tna-column tna-column--width-1-4 tna-column--full-small tna-column--full-tiny tna-!--padding-top-m">
    <article class="tna-card tna-card--demo tna-card--padded tna-background-tint">
      <hgroup class="tna-hgroup-m tna-card__heading">
        <p class="tna-hgroup__supertitle">Supertitle</p>
        <h3 class="tna-hgroup__title">
          <a href="#" class="tna-card__heading-link">Tint card title</a>
        </h3>
      </hgroup>
      <a href="#" class="tna-card__image-container" tabindex="-1" aria-hidden="true">
        <picture class="tna-card__image">
          <img src="https://picsum.photos/600/400?3" alt="A random example image" width="600" height="400">
        </picture>
      </a>
      <div class="tna-card__body">
        <p>Lorem ipsum dolor sit amet.</p>
      </div>
    </article>
  </li>
  <li class="tna-column tna-column--width-1-4 tna-column--full-small tna-column--full-tiny tna-!--padding-top-m">
    <article class="tna-card tna-card--demo tna-card--padded tna-background-accent">
      <hgroup class="tna-hgroup-m tna-card__heading">
        <p class="tna-hgroup__supertitle">Supertitle</p>
        <h3 class="tna-hgroup__title">
          <a href="#" class="tna-card__heading-link">Accent card title</a>
        </h3>
      </hgroup>
      <a href="#" class="tna-card__image-container" tabindex="-1" aria-hidden="true">
        <picture class="tna-card__image">
          <img src="https://picsum.photos/600/400?4" alt="A random example image" width="600" height="400">
        </picture>
      </a>
      <div class="tna-card__body">
        <p>Lorem ipsum dolor sit amet.</p>
      </div>
    </article>
  </li>
</ul>

Nunjucks

Nunjucks options
Primary options
Name Type Description
supertitle string

The smaller title to display above the main card title.
title string

Required.

The main title of the card.
headingLevel number

Required.

The heading level which represents an element from <h1> through to <h6>.
headingSize string

The physical size of the card title (xl, l, m or s).

Default: m
href string

A URL to use as a link in the card’s heading and image.
hrefClasses string

Classes to add to the elements of the card that use href.
hrefAttributes object

HTML attributes (for example data attributes) to add to the elements of the card that use href.
imageSrc string

The location of the card’s image.
imageAlt string

Alternative text for the image in the event that it can’t be displayed.
imageWidth number

The width of the image in pixels.
imageHeight number

The height of the image in pixels.
imageType string

The mime type of the image. Defaults to image/jpeg. Only required when using imageSources.
imageSources array

Alternative sources of the image.

See macro options for imageSources.
lazyImage boolean

If true, make the image a lazily-loaded image.
label string

A label which will appear over the top left of the card’s image. If there is no image, the label is not displayed.
labelColour string

The colour to use for the label. Can be set to black, pink, orange, yellow, green or blue. If not set, the default is the current accent colour.
meta array

Small pieces of additional information akin to subtitles, displayed between the title and the body.

See macro options for meta.
body string

The HTML for the main body of the card. Not displayed if text is set.
text string

The text for the card which will be inserted into a <p> element. Overwrites body if it is set.
actions array

An array of actions to add at the bottom of the card. Each action is displayed as a button.

See macro options for actions.
fullAreaClick boolean

If true, href is set and there are no actions, allow users to click anywhere on the card to follow the link.
horizontal boolean

If true, change the card to a horizontal layout, placing the image to the left of the content. This layout changes back to vertical on smaller devices.
horizontalOnSmall boolean

If true, use a horizontal layout on small devices.
horizontalFlipped boolean

If true, place the image on the right when using horizontal layouts.
horizontalSmallImage boolean

If true, use a smaller image when using horizontal layouts.
style string

The style of card to use which can be either contrast for an inverted card, tint for a tinted one or accent for a card that matches the page’s accent colour.
plainSupertitle boolean

If true, remove the accent or contrast colour from the card supertitle.
accentMeta boolean

If true, meta tags adopt an accented style.
htmlElement string

HTML element of the card.

Default: article
classes string

Classes to add to the card.
attributes object

HTML attributes (for example data attributes) to add to the card.
Options for imageSources
Name Type Description
src string

Required.

The location of the image.
type string

Required.

The mime type of the image.
media string

A media condition for the image.
width number

The width of the image in pixels.
height number

The height of the image in pixels.
Options for meta
Name Type Description
title string

Required.

The title of the meta data which is visually hidden.
text string

Required.

The text element of the meta data.
icon string

The name of a Font Awesome icon, without the prefixed fa-.
Options for actions
Name Type Description
text string

Required.

The text for the action.
href string

Required.

The URL of the action.
title string

An optional title for the action.
classes string

Classes to add to the card action.
attributes object

HTML attributes (for example data attributes) to add to the card action.

 
{% from "nationalarchives/components/card/macro.njk" import tnaCard %}

<ul class="tna-container tna-!--padding-bottom-m">
  <li class="tna-column tna-column--width-1-4 tna-column--full-small tna-column--full-tiny tna-!--padding-top-m">
    {{ tnaCard({
      supertitle: "Supertitle",
      title: "Plain card title",
      headingLevel: 3,
      headingSize: "m",
      href: "#",
      imageSrc: "https://picsum.photos/600/400?1",
      imageAlt: "A random example image",
      imageWidth: 600,
      imageHeight: 400,
      body: "<p>Lorem ipsum dolor sit amet.</p>",
      style: "plain",
      classes: "tna-card--demo"
    }) }}
  </li>
  <li class="tna-column tna-column--width-1-4 tna-column--full-small tna-column--full-tiny tna-!--padding-top-m">
    {{ tnaCard({
      supertitle: "Supertitle",
      title: "Contrast card title",
      headingLevel: 3,
      headingSize: "m",
      href: "#",
      imageSrc: "https://picsum.photos/600/400?2",
      imageAlt: "A random example image",
      imageWidth: 600,
      imageHeight: 400,
      body: "<p>Lorem ipsum dolor sit amet.</p>",
      style: "contrast",
      classes: "tna-card--demo"
    }) }}
  </li>
  <li class="tna-column tna-column--width-1-4 tna-column--full-small tna-column--full-tiny tna-!--padding-top-m">
    {{ tnaCard({
      supertitle: "Supertitle",
      title: "Tint card title",
      headingLevel: 3,
      headingSize: "m",
      href: "#",
      imageSrc: "https://picsum.photos/600/400?3",
      imageAlt: "A random example image",
      imageWidth: 600,
      imageHeight: 400,
      body: "<p>Lorem ipsum dolor sit amet.</p>",
      style: "tint",
      classes: "tna-card--demo"
    }) }}
  </li>
  <li class="tna-column tna-column--width-1-4 tna-column--full-small tna-column--full-tiny tna-!--padding-top-m">
    {{ tnaCard({
      supertitle: "Supertitle",
      title: "Accent card title",
      headingLevel: 3,
      headingSize: "m",
      href: "#",
      imageSrc: "https://picsum.photos/600/400?4",
      imageAlt: "A random example image",
      imageWidth: 600,
      imageHeight: 400,
      body: "<p>Lorem ipsum dolor sit amet.</p>",
      style: "accent",
      classes: "tna-card--demo"
    }) }}
  </li>
</ul>

Fully clickable

By default, if there is a link defined then the card title and image are clickable. If you have a large number of cards, it may be easier to allow users to click anywhere on the card with fullAreaClick.

Open this example in new tab

HTML 

<ul class="tna-container tna-!--padding-bottom-m">
  <li class="tna-column tna-column--width-1-3 tna-column--full-small tna-column--full-tiny tna-!--padding-top-m">
    <article class="tna-card tna-card--demo tna-card--full-click">
      <hgroup class="tna-hgroup-m tna-card__heading">
        <p class="tna-hgroup__supertitle">Supertitle</p>
        <h3 class="tna-hgroup__title">
          <a href="#" class="tna-card__heading-link">Card title</a>
        </h3>
      </hgroup>
      <div class="tna-card__image-container">
        <picture class="tna-card__image">
          <img src="https://picsum.photos/600/400?1" alt="A random example image" width="600" height="400">
        </picture>
      </div>
      <div class="tna-card__body">
        <p>Lorem ipsum dolor sit amet.</p>
      </div>
    </article>
  </li>
  <li class="tna-column tna-column--width-1-3 tna-column--full-small tna-column--full-tiny tna-!--padding-top-m">
    <article class="tna-card tna-card--demo tna-card--full-click tna-card--padded tna-card--plain">
      <hgroup class="tna-hgroup-m tna-card__heading">
        <p class="tna-hgroup__supertitle">Supertitle</p>
        <h3 class="tna-hgroup__title">
          <a href="#" class="tna-card__heading-link">Plain card title</a>
        </h3>
      </hgroup>
      <div class="tna-card__image-container">
        <picture class="tna-card__image">
          <img src="https://picsum.photos/600/400?2" alt="A random example image" width="600" height="400">
        </picture>
      </div>
      <div class="tna-card__body">
        <p>Lorem ipsum dolor sit amet.</p>
      </div>
    </article>
  </li>
  <li class="tna-column tna-column--width-1-3 tna-column--full-small tna-column--full-tiny tna-!--padding-top-m">
    <article class="tna-card tna-card--demo tna-card--full-click tna-card--padded tna-background-contrast">
      <hgroup class="tna-hgroup-m tna-card__heading">
        <p class="tna-hgroup__supertitle">Supertitle</p>
        <h3 class="tna-hgroup__title">
          <a href="#" class="tna-card__heading-link">Contrast card title</a>
        </h3>
      </hgroup>
      <div class="tna-card__image-container">
        <picture class="tna-card__image">
          <img src="https://picsum.photos/600/400?3" alt="A random example image" width="600" height="400">
        </picture>
      </div>
      <div class="tna-card__body">
        <p>Lorem ipsum dolor sit amet.</p>
      </div>
    </article>
  </li>
  <li class="tna-column tna-column--width-1-3 tna-column--full-small tna-column--full-tiny tna-!--padding-top-m">
    <article class="tna-card tna-card--demo tna-card--full-click tna-card--padded tna-background-tint">
      <hgroup class="tna-hgroup-m tna-card__heading">
        <p class="tna-hgroup__supertitle">Supertitle</p>
        <h3 class="tna-hgroup__title">
          <a href="#" class="tna-card__heading-link">Tint card title</a>
        </h3>
      </hgroup>
      <div class="tna-card__image-container">
        <picture class="tna-card__image">
          <img src="https://picsum.photos/600/400?4" alt="A random example image" width="600" height="400">
        </picture>
      </div>
      <div class="tna-card__body">
        <p>Lorem ipsum dolor sit amet.</p>
      </div>
    </article>
  </li>
  <li class="tna-column tna-column--width-1-3 tna-column--full-small tna-column--full-tiny tna-!--padding-top-m">
    <article class="tna-card tna-card--demo tna-card--full-click tna-card--padded tna-background-accent">
      <hgroup class="tna-hgroup-m tna-card__heading">
        <p class="tna-hgroup__supertitle">Supertitle</p>
        <h3 class="tna-hgroup__title">
          <a href="#" class="tna-card__heading-link">Accent card title</a>
        </h3>
      </hgroup>
      <div class="tna-card__image-container">
        <picture class="tna-card__image">
          <img src="https://picsum.photos/600/400?5" alt="A random example image" width="600" height="400">
        </picture>
      </div>
      <div class="tna-card__body">
        <p>Lorem ipsum dolor sit amet.</p>
      </div>
    </article>
  </li>
</ul>

Nunjucks

Nunjucks options
Primary options
Name Type Description
supertitle string

The smaller title to display above the main card title.
title string

Required.

The main title of the card.
headingLevel number

Required.

The heading level which represents an element from <h1> through to <h6>.
headingSize string

The physical size of the card title (xl, l, m or s).

Default: m
href string

A URL to use as a link in the card’s heading and image.
hrefClasses string

Classes to add to the elements of the card that use href.
hrefAttributes object

HTML attributes (for example data attributes) to add to the elements of the card that use href.
imageSrc string

The location of the card’s image.
imageAlt string

Alternative text for the image in the event that it can’t be displayed.
imageWidth number

The width of the image in pixels.
imageHeight number

The height of the image in pixels.
imageType string

The mime type of the image. Defaults to image/jpeg. Only required when using imageSources.
imageSources array

Alternative sources of the image.

See macro options for imageSources.
lazyImage boolean

If true, make the image a lazily-loaded image.
label string

A label which will appear over the top left of the card’s image. If there is no image, the label is not displayed.
labelColour string

The colour to use for the label. Can be set to black, pink, orange, yellow, green or blue. If not set, the default is the current accent colour.
meta array

Small pieces of additional information akin to subtitles, displayed between the title and the body.

See macro options for meta.
body string

The HTML for the main body of the card. Not displayed if text is set.
text string

The text for the card which will be inserted into a <p> element. Overwrites body if it is set.
actions array

An array of actions to add at the bottom of the card. Each action is displayed as a button.

See macro options for actions.
fullAreaClick boolean

If true, href is set and there are no actions, allow users to click anywhere on the card to follow the link.
horizontal boolean

If true, change the card to a horizontal layout, placing the image to the left of the content. This layout changes back to vertical on smaller devices.
horizontalOnSmall boolean

If true, use a horizontal layout on small devices.
horizontalFlipped boolean

If true, place the image on the right when using horizontal layouts.
horizontalSmallImage boolean

If true, use a smaller image when using horizontal layouts.
style string

The style of card to use which can be either contrast for an inverted card, tint for a tinted one or accent for a card that matches the page’s accent colour.
plainSupertitle boolean

If true, remove the accent or contrast colour from the card supertitle.
accentMeta boolean

If true, meta tags adopt an accented style.
htmlElement string

HTML element of the card.

Default: article
classes string

Classes to add to the card.
attributes object

HTML attributes (for example data attributes) to add to the card.
Options for imageSources
Name Type Description
src string

Required.

The location of the image.
type string

Required.

The mime type of the image.
media string

A media condition for the image.
width number

The width of the image in pixels.
height number

The height of the image in pixels.
Options for meta
Name Type Description
title string

Required.

The title of the meta data which is visually hidden.
text string

Required.

The text element of the meta data.
icon string

The name of a Font Awesome icon, without the prefixed fa-.
Options for actions
Name Type Description
text string

Required.

The text for the action.
href string

Required.

The URL of the action.
title string

An optional title for the action.
classes string

Classes to add to the card action.
attributes object

HTML attributes (for example data attributes) to add to the card action.

 
{% from "nationalarchives/components/card/macro.njk" import tnaCard %}

<ul class="tna-container tna-!--padding-bottom-m">
  <li class="tna-column tna-column--width-1-3 tna-column--full-small tna-column--full-tiny tna-!--padding-top-m">
    {{ tnaCard({
      supertitle: "Supertitle",
      title: "Card title",
      headingLevel: 3,
      headingSize: "m",
      href: "#",
      imageSrc: "https://picsum.photos/600/400?1",
      imageAlt: "A random example image",
      imageWidth: 600,
      imageHeight: 400,
      body: "<p>Lorem ipsum dolor sit amet.</p>",
      fullAreaClick: true,
      classes: "tna-card--demo"
    }) }}
  </li>
  <li class="tna-column tna-column--width-1-3 tna-column--full-small tna-column--full-tiny tna-!--padding-top-m">
    {{ tnaCard({
      supertitle: "Supertitle",
      title: "Plain card title",
      headingLevel: 3,
      headingSize: "m",
      href: "#",
      imageSrc: "https://picsum.photos/600/400?2",
      imageAlt: "A random example image",
      imageWidth: 600,
      imageHeight: 400,
      body: "<p>Lorem ipsum dolor sit amet.</p>",
      fullAreaClick: true,
      style: "plain",
      classes: "tna-card--demo"
    }) }}
  </li>
  <li class="tna-column tna-column--width-1-3 tna-column--full-small tna-column--full-tiny tna-!--padding-top-m">
    {{ tnaCard({
      supertitle: "Supertitle",
      title: "Contrast card title",
      headingLevel: 3,
      headingSize: "m",
      href: "#",
      imageSrc: "https://picsum.photos/600/400?3",
      imageAlt: "A random example image",
      imageWidth: 600,
      imageHeight: 400,
      body: "<p>Lorem ipsum dolor sit amet.</p>",
      fullAreaClick: true,
      style: "contrast",
      classes: "tna-card--demo"
    }) }}
  </li>
  <li class="tna-column tna-column--width-1-3 tna-column--full-small tna-column--full-tiny tna-!--padding-top-m">
    {{ tnaCard({
      supertitle: "Supertitle",
      title: "Tint card title",
      headingLevel: 3,
      headingSize: "m",
      href: "#",
      imageSrc: "https://picsum.photos/600/400?4",
      imageAlt: "A random example image",
      imageWidth: 600,
      imageHeight: 400,
      body: "<p>Lorem ipsum dolor sit amet.</p>",
      fullAreaClick: true,
      style: "tint",
      classes: "tna-card--demo"
    }) }}
  </li>
  <li class="tna-column tna-column--width-1-3 tna-column--full-small tna-column--full-tiny tna-!--padding-top-m">
    {{ tnaCard({
      supertitle: "Supertitle",
      title: "Accent card title",
      headingLevel: 3,
      headingSize: "m",
      href: "#",
      imageSrc: "https://picsum.photos/600/400?5",
      imageAlt: "A random example image",
      imageWidth: 600,
      imageHeight: 400,
      body: "<p>Lorem ipsum dolor sit amet.</p>",
      fullAreaClick: true,
      style: "accent",
      classes: "tna-card--demo"
    }) }}
  </li>
</ul>

Horizontal

Use larger horizontal cards to draw attention to a specific article.

You can use smaller images to make the cards smaller with horizontalSmallImage.

If some cards in the list have images and others don't, consider aligning the images to the right with horizontalFlipped. This will keep all the text in the cards aligned.

Horizontal cards generally benefit from using one of the different card colours to create boundaries.

Open this example in new tab

HTML 

<article class="tna-card tna-card--demo-horizontal tna-card--horizontal tna-card--padded tna-background-tint">
  <hgroup class="tna-hgroup-m tna-card__heading">
    <p class="tna-hgroup__supertitle">Card supertitle</p>
    <h3 class="tna-hgroup__title">
      <a href="#" class="tna-card__heading-link">Card title</a>
    </h3>
  </hgroup>
  <a href="#" class="tna-card__image-container" tabindex="-1" aria-hidden="true">
    <picture class="tna-card__image">
      <img src="https://picsum.photos/600/400?1" alt="A random example image" width="600" height="400">
    </picture>
  </a>
  <div class="tna-card__body">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis.</p>
  </div>
</article>
<article class="tna-card tna-card--demo-horizontal tna-!--margin-top-s tna-card--horizontal tna-card--horizontal-small-image tna-card--padded tna-background-tint">
  <hgroup class="tna-hgroup-m tna-card__heading">
    <p class="tna-hgroup__supertitle">Card supertitle</p>
    <h3 class="tna-hgroup__title">
      <a href="#" class="tna-card__heading-link">Card title</a>
    </h3>
  </hgroup>
  <a href="#" class="tna-card__image-container" tabindex="-1" aria-hidden="true">
    <picture class="tna-card__image">
      <img src="https://picsum.photos/600/400?2" alt="A random example image" width="600" height="400">
    </picture>
  </a>
  <div class="tna-card__body">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis.</p>
  </div>
</article>
<article class="tna-card tna-card--demo-horizontal tna-!--margin-top-s tna-card--horizontal tna-card--flipped tna-card--padded tna-background-tint">
  <hgroup class="tna-hgroup-m tna-card__heading">
    <p class="tna-hgroup__supertitle">Card supertitle</p>
    <h3 class="tna-hgroup__title">
      <a href="#" class="tna-card__heading-link">Card title</a>
    </h3>
  </hgroup>
  <a href="#" class="tna-card__image-container" tabindex="-1" aria-hidden="true">
    <picture class="tna-card__image">
      <img src="https://picsum.photos/600/400?3" alt="A random example image" width="600" height="400">
    </picture>
  </a>
  <div class="tna-card__body">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis.</p>
  </div>
</article>

Nunjucks

Nunjucks options
Primary options
Name Type Description
supertitle string

The smaller title to display above the main card title.
title string

Required.

The main title of the card.
headingLevel number

Required.

The heading level which represents an element from <h1> through to <h6>.
headingSize string

The physical size of the card title (xl, l, m or s).

Default: m
href string

A URL to use as a link in the card’s heading and image.
hrefClasses string

Classes to add to the elements of the card that use href.
hrefAttributes object

HTML attributes (for example data attributes) to add to the elements of the card that use href.
imageSrc string

The location of the card’s image.
imageAlt string

Alternative text for the image in the event that it can’t be displayed.
imageWidth number

The width of the image in pixels.
imageHeight number

The height of the image in pixels.
imageType string

The mime type of the image. Defaults to image/jpeg. Only required when using imageSources.
imageSources array

Alternative sources of the image.

See macro options for imageSources.
lazyImage boolean

If true, make the image a lazily-loaded image.
label string

A label which will appear over the top left of the card’s image. If there is no image, the label is not displayed.
labelColour string

The colour to use for the label. Can be set to black, pink, orange, yellow, green or blue. If not set, the default is the current accent colour.
meta array

Small pieces of additional information akin to subtitles, displayed between the title and the body.

See macro options for meta.
body string

The HTML for the main body of the card. Not displayed if text is set.
text string

The text for the card which will be inserted into a <p> element. Overwrites body if it is set.
actions array

An array of actions to add at the bottom of the card. Each action is displayed as a button.

See macro options for actions.
fullAreaClick boolean

If true, href is set and there are no actions, allow users to click anywhere on the card to follow the link.
horizontal boolean

If true, change the card to a horizontal layout, placing the image to the left of the content. This layout changes back to vertical on smaller devices.
horizontalOnSmall boolean

If true, use a horizontal layout on small devices.
horizontalFlipped boolean

If true, place the image on the right when using horizontal layouts.
horizontalSmallImage boolean

If true, use a smaller image when using horizontal layouts.
style string

The style of card to use which can be either contrast for an inverted card, tint for a tinted one or accent for a card that matches the page’s accent colour.
plainSupertitle boolean

If true, remove the accent or contrast colour from the card supertitle.
accentMeta boolean

If true, meta tags adopt an accented style.
htmlElement string

HTML element of the card.

Default: article
classes string

Classes to add to the card.
attributes object

HTML attributes (for example data attributes) to add to the card.
Options for imageSources
Name Type Description
src string

Required.

The location of the image.
type string

Required.

The mime type of the image.
media string

A media condition for the image.
width number

The width of the image in pixels.
height number

The height of the image in pixels.
Options for meta
Name Type Description
title string

Required.

The title of the meta data which is visually hidden.
text string

Required.

The text element of the meta data.
icon string

The name of a Font Awesome icon, without the prefixed fa-.
Options for actions
Name Type Description
text string

Required.

The text for the action.
href string

Required.

The URL of the action.
title string

An optional title for the action.
classes string

Classes to add to the card action.
attributes object

HTML attributes (for example data attributes) to add to the card action.

 
{% from "nationalarchives/components/card/macro.njk" import tnaCard %}

{{ tnaCard({
  supertitle: "Card supertitle",
  title: "Card title",
  headingLevel: 3,
  headingSize: "m",
  href: "#",
  imageSrc: "https://picsum.photos/600/400?1",
  imageAlt: "A random example image",
  imageWidth: 600,
  imageHeight: 400,
  body: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis.</p>",
  horizontal: true,
  style: "tint",
  classes: "tna-card--demo-horizontal"
}) }}{{ tnaCard({
  supertitle: "Card supertitle",
  title: "Card title",
  headingLevel: 3,
  headingSize: "m",
  href: "#",
  imageSrc: "https://picsum.photos/600/400?2",
  imageAlt: "A random example image",
  imageWidth: 600,
  imageHeight: 400,
  body: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis.</p>",
  horizontal: true,
  horizontalSmallImage: true,
  style: "tint",
  classes: "tna-card--demo-horizontal tna-!--margin-top-s"
}) }}{{ tnaCard({
  supertitle: "Card supertitle",
  title: "Card title",
  headingLevel: 3,
  headingSize: "m",
  href: "#",
  imageSrc: "https://picsum.photos/600/400?3",
  imageAlt: "A random example image",
  imageWidth: 600,
  imageHeight: 400,
  body: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis.</p>",
  horizontal: true,
  horizontalFlipped: true,
  style: "tint",
  classes: "tna-card--demo-horizontal tna-!--margin-top-s"
}) }}

Images

Use 3:2 aspect ratio images as the default for card components.

Single images should be around 600px wide and 400px tall to ensure they display well across all screen sizes.

You can use imageSources to define a list of different resolutions and screen widths to make responsive card images.

When cards are far enough down the page, you can wait to load the image until the user scrolls close enough. This is called lazy loading and can be enabled with lazyImage. Lazily loading images will help speed up the load time of your page.

Cards with no images

Card images are optional and pages with a lot of cards could benefit from using cards without images.

Open this example in new tab

HTML 

<ul class="tna-container tna-!--margin-bottom-m">
  <li class="tna-column tna-column--width-1-3 tna-column--full-small tna-column--full-tiny tna-!--margin-top-m">
    <article class="tna-card tna-card--demo">
      <h3 class="tna-heading-m tna-card__heading">
        <a href="#" class="tna-card__heading-link">Card title</a>
      </h3>
      <div class="tna-card__body">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
    </article>
  </li>
  <li class="tna-column tna-column--width-1-3 tna-column--full-small tna-column--full-tiny tna-!--margin-top-m">
    <article class="tna-card tna-card--demo">
      <h3 class="tna-heading-m tna-card__heading">
        <a href="#" class="tna-card__heading-link">Card title</a>
      </h3>
      <div class="tna-card__body">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
    </article>
  </li>
  <li class="tna-column tna-column--width-1-3 tna-column--full-small tna-column--full-tiny tna-!--margin-top-m">
    <article class="tna-card tna-card--demo">
      <h3 class="tna-heading-m tna-card__heading">
        <a href="#" class="tna-card__heading-link">Card title</a>
      </h3>
      <div class="tna-card__body">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
    </article>
  </li>
  <li class="tna-column tna-column--width-1-3 tna-column--full-small tna-column--full-tiny tna-!--margin-top-m">
    <article class="tna-card tna-card--demo">
      <h3 class="tna-heading-m tna-card__heading">
        <a href="#" class="tna-card__heading-link">Card title</a>
      </h3>
      <div class="tna-card__body">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
    </article>
  </li>
  <li class="tna-column tna-column--width-1-3 tna-column--full-small tna-column--full-tiny tna-!--margin-top-m">
    <article class="tna-card tna-card--demo">
      <h3 class="tna-heading-m tna-card__heading">
        <a href="#" class="tna-card__heading-link">Card title</a>
      </h3>
      <div class="tna-card__body">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
    </article>
  </li>
  <li class="tna-column tna-column--width-1-3 tna-column--full-small tna-column--full-tiny tna-!--margin-top-m">
    <article class="tna-card tna-card--demo">
      <h3 class="tna-heading-m tna-card__heading">
        <a href="#" class="tna-card__heading-link">Card title</a>
      </h3>
      <div class="tna-card__body">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
    </article>
  </li>
</ul>

Nunjucks

Nunjucks options
Primary options
Name Type Description
supertitle string

The smaller title to display above the main card title.
title string

Required.

The main title of the card.
headingLevel number

Required.

The heading level which represents an element from <h1> through to <h6>.
headingSize string

The physical size of the card title (xl, l, m or s).

Default: m
href string

A URL to use as a link in the card’s heading and image.
hrefClasses string

Classes to add to the elements of the card that use href.
hrefAttributes object

HTML attributes (for example data attributes) to add to the elements of the card that use href.
imageSrc string

The location of the card’s image.
imageAlt string

Alternative text for the image in the event that it can’t be displayed.
imageWidth number

The width of the image in pixels.
imageHeight number

The height of the image in pixels.
imageType string

The mime type of the image. Defaults to image/jpeg. Only required when using imageSources.
imageSources array

Alternative sources of the image.

See macro options for imageSources.
lazyImage boolean

If true, make the image a lazily-loaded image.
label string

A label which will appear over the top left of the card’s image. If there is no image, the label is not displayed.
labelColour string

The colour to use for the label. Can be set to black, pink, orange, yellow, green or blue. If not set, the default is the current accent colour.
meta array

Small pieces of additional information akin to subtitles, displayed between the title and the body.

See macro options for meta.
body string

The HTML for the main body of the card. Not displayed if text is set.
text string

The text for the card which will be inserted into a <p> element. Overwrites body if it is set.
actions array

An array of actions to add at the bottom of the card. Each action is displayed as a button.

See macro options for actions.
fullAreaClick boolean

If true, href is set and there are no actions, allow users to click anywhere on the card to follow the link.
horizontal boolean

If true, change the card to a horizontal layout, placing the image to the left of the content. This layout changes back to vertical on smaller devices.
horizontalOnSmall boolean

If true, use a horizontal layout on small devices.
horizontalFlipped boolean

If true, place the image on the right when using horizontal layouts.
horizontalSmallImage boolean

If true, use a smaller image when using horizontal layouts.
style string

The style of card to use which can be either contrast for an inverted card, tint for a tinted one or accent for a card that matches the page’s accent colour.
plainSupertitle boolean

If true, remove the accent or contrast colour from the card supertitle.
accentMeta boolean

If true, meta tags adopt an accented style.
htmlElement string

HTML element of the card.

Default: article
classes string

Classes to add to the card.
attributes object

HTML attributes (for example data attributes) to add to the card.
Options for imageSources
Name Type Description
src string

Required.

The location of the image.
type string

Required.

The mime type of the image.
media string

A media condition for the image.
width number

The width of the image in pixels.
height number

The height of the image in pixels.
Options for meta
Name Type Description
title string

Required.

The title of the meta data which is visually hidden.
text string

Required.

The text element of the meta data.
icon string

The name of a Font Awesome icon, without the prefixed fa-.
Options for actions
Name Type Description
text string

Required.

The text for the action.
href string

Required.

The URL of the action.
title string

An optional title for the action.
classes string

Classes to add to the card action.
attributes object

HTML attributes (for example data attributes) to add to the card action.

 
{% from "nationalarchives/components/card/macro.njk" import tnaCard %}

<ul class="tna-container tna-!--margin-bottom-m">
  <li class="tna-column tna-column--width-1-3 tna-column--full-small tna-column--full-tiny tna-!--margin-top-m">
    {{ tnaCard({
      title: "Card title",
      headingLevel: 3,
      headingSize: "m",
      href: "#",
      body: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>",
      classes: "tna-card--demo"
    }) }}
  </li>
  <li class="tna-column tna-column--width-1-3 tna-column--full-small tna-column--full-tiny tna-!--margin-top-m">
    {{ tnaCard({
      title: "Card title",
      headingLevel: 3,
      headingSize: "m",
      href: "#",
      body: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>",
      classes: "tna-card--demo"
    }) }}
  </li>
  <li class="tna-column tna-column--width-1-3 tna-column--full-small tna-column--full-tiny tna-!--margin-top-m">
    {{ tnaCard({
      title: "Card title",
      headingLevel: 3,
      headingSize: "m",
      href: "#",
      body: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>",
      classes: "tna-card--demo"
    }) }}
  </li>
  <li class="tna-column tna-column--width-1-3 tna-column--full-small tna-column--full-tiny tna-!--margin-top-m">
    {{ tnaCard({
      title: "Card title",
      headingLevel: 3,
      headingSize: "m",
      href: "#",
      body: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>",
      classes: "tna-card--demo"
    }) }}
  </li>
  <li class="tna-column tna-column--width-1-3 tna-column--full-small tna-column--full-tiny tna-!--margin-top-m">
    {{ tnaCard({
      title: "Card title",
      headingLevel: 3,
      headingSize: "m",
      href: "#",
      body: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>",
      classes: "tna-card--demo"
    }) }}
  </li>
  <li class="tna-column tna-column--width-1-3 tna-column--full-small tna-column--full-tiny tna-!--margin-top-m">
    {{ tnaCard({
      title: "Card title",
      headingLevel: 3,
      headingSize: "m",
      href: "#",
      body: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>",
      classes: "tna-card--demo"
    }) }}
  </li>
</ul>

Meta information

Add additional bits of small information to the card with meta.

Keep the meta information short and enhance with icons if necessary.

Open this example in new tab

HTML 

<article class="tna-card tna-card--demo tna-card--padded tna-background-accent">
  <hgroup class="tna-hgroup-m tna-card__heading">
    <p class="tna-hgroup__supertitle">Event</p>
    <h3 class="tna-hgroup__title">
      <a href="#" class="tna-card__heading-link">Christmas at Kew</a>
    </h3>
  </hgroup>
  <a href="#" class="tna-card__image-container" tabindex="-1" aria-hidden="true">
    <picture class="tna-card__image">
      <img src="https://picsum.photos/id/828/600/400" alt="A random example image" width="600" height="400">
    </picture>
  </a>
  <div class="tna-card__body">
    <dl class="tna-card__meta tna-dl-chips tna-dl-chips--plain">
      <dt>Cost</dt>
      <dd>
        <span class="tna-dl-chips__item">
          <i class="fa-solid fa-fw fa-ticket" aria-hidden="true"></i>
          From £10
        </span>
      </dd>
      <dt>Date</dt>
      <dd>
        <span class="tna-dl-chips__item">
          <i class="fa-solid fa-fw fa-calendar" aria-hidden="true"></i>
          21 December 2025
        </span>
      </dd>
    </dl>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit.</p>
  </div>
</article>

Nunjucks

Nunjucks options
Primary options
Name Type Description
supertitle string

The smaller title to display above the main card title.
title string

Required.

The main title of the card.
headingLevel number

Required.

The heading level which represents an element from <h1> through to <h6>.
headingSize string

The physical size of the card title (xl, l, m or s).

Default: m
href string

A URL to use as a link in the card’s heading and image.
hrefClasses string

Classes to add to the elements of the card that use href.
hrefAttributes object

HTML attributes (for example data attributes) to add to the elements of the card that use href.
imageSrc string

The location of the card’s image.
imageAlt string

Alternative text for the image in the event that it can’t be displayed.
imageWidth number

The width of the image in pixels.
imageHeight number

The height of the image in pixels.
imageType string

The mime type of the image. Defaults to image/jpeg. Only required when using imageSources.
imageSources array

Alternative sources of the image.

See macro options for imageSources.
lazyImage boolean

If true, make the image a lazily-loaded image.
label string

A label which will appear over the top left of the card’s image. If there is no image, the label is not displayed.
labelColour string

The colour to use for the label. Can be set to black, pink, orange, yellow, green or blue. If not set, the default is the current accent colour.
meta array

Small pieces of additional information akin to subtitles, displayed between the title and the body.

See macro options for meta.
body string

The HTML for the main body of the card. Not displayed if text is set.
text string

The text for the card which will be inserted into a <p> element. Overwrites body if it is set.
actions array

An array of actions to add at the bottom of the card. Each action is displayed as a button.

See macro options for actions.
fullAreaClick boolean

If true, href is set and there are no actions, allow users to click anywhere on the card to follow the link.
horizontal boolean

If true, change the card to a horizontal layout, placing the image to the left of the content. This layout changes back to vertical on smaller devices.
horizontalOnSmall boolean

If true, use a horizontal layout on small devices.
horizontalFlipped boolean

If true, place the image on the right when using horizontal layouts.
horizontalSmallImage boolean

If true, use a smaller image when using horizontal layouts.
style string

The style of card to use which can be either contrast for an inverted card, tint for a tinted one or accent for a card that matches the page’s accent colour.
plainSupertitle boolean

If true, remove the accent or contrast colour from the card supertitle.
accentMeta boolean

If true, meta tags adopt an accented style.
htmlElement string

HTML element of the card.

Default: article
classes string

Classes to add to the card.
attributes object

HTML attributes (for example data attributes) to add to the card.
Options for imageSources
Name Type Description
src string

Required.

The location of the image.
type string

Required.

The mime type of the image.
media string

A media condition for the image.
width number

The width of the image in pixels.
height number

The height of the image in pixels.
Options for meta
Name Type Description
title string

Required.

The title of the meta data which is visually hidden.
text string

Required.

The text element of the meta data.
icon string

The name of a Font Awesome icon, without the prefixed fa-.
Options for actions
Name Type Description
text string

Required.

The text for the action.
href string

Required.

The URL of the action.
title string

An optional title for the action.
classes string

Classes to add to the card action.
attributes object

HTML attributes (for example data attributes) to add to the card action.

 
{% from "nationalarchives/components/card/macro.njk" import tnaCard %}

{{ tnaCard({
  supertitle: "Event",
  title: "Christmas at Kew",
  headingLevel: 3,
  headingSize: "m",
  href: "#",
  meta: [
    {
      title: "Cost",
      text: "From £10",
      icon: "ticket"
    },
    {
      title: "Date",
      text: "21 December 2025",
      icon: "calendar"
    }
  ],
  imageSrc: "https://picsum.photos/id/828/600/400",
  imageAlt: "A random example image",
  imageWidth: 600,
  imageHeight: 400,
  body: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit.</p>",
  style: "accent",
  classes: "tna-card--demo"
}) }}

Actions

Cards can have a list of "actions" which are displayed as links at the bottom of the card.

Cards with actions should not also have an href property.

Open this example in new tab

HTML 

<article class="tna-card tna-card--demo-horizontal tna-card--horizontal tna-card--padded tna-background-contrast">
  <hgroup class="tna-hgroup-l tna-card__heading">
    <p class="tna-hgroup__supertitle">Talk</p>
    <h3 class="tna-hgroup__title">
      The history of agriculture
    </h3>
  </hgroup>
  <div class="tna-card__image-container">
    <picture class="tna-card__image">
      <img src="https://picsum.photos/id/729/600/400" alt="A random example image" width="600" height="400">
    </picture>
  </div>
  <div class="tna-card__body">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit.</p>
    <div class="tna-card__actions">
      <a href="#" class="tna-card__action">
        Book now
      </a>
      <a href="#" class="tna-card__action">
        More information
      </a>
    </div>
  </div>
</article>

Nunjucks

Nunjucks options
Primary options
Name Type Description
supertitle string

The smaller title to display above the main card title.
title string

Required.

The main title of the card.
headingLevel number

Required.

The heading level which represents an element from <h1> through to <h6>.
headingSize string

The physical size of the card title (xl, l, m or s).

Default: m
href string

A URL to use as a link in the card’s heading and image.
hrefClasses string

Classes to add to the elements of the card that use href.
hrefAttributes object

HTML attributes (for example data attributes) to add to the elements of the card that use href.
imageSrc string

The location of the card’s image.
imageAlt string

Alternative text for the image in the event that it can’t be displayed.
imageWidth number

The width of the image in pixels.
imageHeight number

The height of the image in pixels.
imageType string

The mime type of the image. Defaults to image/jpeg. Only required when using imageSources.
imageSources array

Alternative sources of the image.

See macro options for imageSources.
lazyImage boolean

If true, make the image a lazily-loaded image.
label string

A label which will appear over the top left of the card’s image. If there is no image, the label is not displayed.
labelColour string

The colour to use for the label. Can be set to black, pink, orange, yellow, green or blue. If not set, the default is the current accent colour.
meta array

Small pieces of additional information akin to subtitles, displayed between the title and the body.

See macro options for meta.
body string

The HTML for the main body of the card. Not displayed if text is set.
text string

The text for the card which will be inserted into a <p> element. Overwrites body if it is set.
actions array

An array of actions to add at the bottom of the card. Each action is displayed as a button.

See macro options for actions.
fullAreaClick boolean

If true, href is set and there are no actions, allow users to click anywhere on the card to follow the link.
horizontal boolean

If true, change the card to a horizontal layout, placing the image to the left of the content. This layout changes back to vertical on smaller devices.
horizontalOnSmall boolean

If true, use a horizontal layout on small devices.
horizontalFlipped boolean

If true, place the image on the right when using horizontal layouts.
horizontalSmallImage boolean

If true, use a smaller image when using horizontal layouts.
style string

The style of card to use which can be either contrast for an inverted card, tint for a tinted one or accent for a card that matches the page’s accent colour.
plainSupertitle boolean

If true, remove the accent or contrast colour from the card supertitle.
accentMeta boolean

If true, meta tags adopt an accented style.
htmlElement string

HTML element of the card.

Default: article
classes string

Classes to add to the card.
attributes object

HTML attributes (for example data attributes) to add to the card.
Options for imageSources
Name Type Description
src string

Required.

The location of the image.
type string

Required.

The mime type of the image.
media string

A media condition for the image.
width number

The width of the image in pixels.
height number

The height of the image in pixels.
Options for meta
Name Type Description
title string

Required.

The title of the meta data which is visually hidden.
text string

Required.

The text element of the meta data.
icon string

The name of a Font Awesome icon, without the prefixed fa-.
Options for actions
Name Type Description
text string

Required.

The text for the action.
href string

Required.

The URL of the action.
title string

An optional title for the action.
classes string

Classes to add to the card action.
attributes object

HTML attributes (for example data attributes) to add to the card action.

 
{% from "nationalarchives/components/card/macro.njk" import tnaCard %}

{{ tnaCard({
  supertitle: "Talk",
  title: "The history of agriculture",
  headingLevel: 3,
  headingSize: "l",
  imageSrc: "https://picsum.photos/id/729/600/400",
  imageAlt: "A random example image",
  imageWidth: 600,
  imageHeight: 400,
  body: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit.</p>",
  actions: [
    {
      text: "Book now",
      href: "#"
    },
    {
      text: "More information",
      href: "#"
    }
  ],
  horizontal: true,
  style: "contrast",
  classes: "tna-card--demo-horizontal"
}) }}

Back to top