Components

Card

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

Status
Horizontal
Images

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

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://fakeimg.pl/600x400/00623b/fff?text=Image&amp;font=museo&amp;font_size=48" alt="An example image containing the text &#39;Image&#39;" 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 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 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 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://fakeimg.pl/600x400/00623b/fff?text=Image&font=museo&font_size=48",
  imageAlt: "An example image containing the text '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: In development
Tested without CSS: In development
WCAG 2.2 AA compliant: In development
Analytics integrated: In development
Documentation complete: No

Horizontal

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

Open this example in new tab

HTML

<article class="tna-card tna-card--horizontal tna-card--padded tna-background-contrast">
  <hgroup class="tna-hgroup-l 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://fakeimg.pl/600x400/00623b/fff?text=Image&amp;font=museo&amp;font_size=48" alt="An example image containing the text &#39;Image&#39;" 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 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 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 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: "l",
  href: "#",
  imageSrc: "https://fakeimg.pl/600x400/00623b/fff?text=Image&font=museo&font_size=48",
  imageAlt: "An example image containing the text '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: "contrast"
}) }}

Images

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

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

An example image for the card component — An example 600x400 pixel image that is a suitable size for the card component.

This website uses cookies

Card

Contents

HTML

Nunjucks

Status

Horizontal

HTML

Nunjucks

Images