Skip to main content Skip to list of components
Beta

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

Components

Picture

The picture component can display an image with additional information.

Contents

  1. Status
  2. Image sizes
Open this example in new tab

HTML 

<figure class="tna-picture" data-module="tna-picture">
  <div class="tna-picture__image-wrapper tna-background-tint">
    <picture>
      <img class="tna-picture__image" width="1996" height="1331" src="https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg" alt="The National Archives office" loading="lazy">
    </picture>
  </div>
  <figcaption class="tna-picture__caption">
    <p>This is a pretty image</p>
  </figcaption>
</figure>

Nunjucks

Nunjucks options
Primary options
Name Type Description
src string

Required.

alt string

Required.

width number

Required.

height number

Required.

sources array

See sources.
caption string
informationLabelOpen string
informationLabelClose string
informationItemHeadingLevel number

The heading level which represents an element from <h1> through to <h6> for each of the information items. Required if information is set.
information array

See information.
classes string

Classes to add to the picture.
attributes object

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

Required.

type string

Required.

media string
width number
height number
Options for information
Name Type Description
id string

Required.

title string

Required.

body string

Required. 

{% from "nationalarchives/components/picture/macro.njk" import tnaPicture %}

{{ tnaPicture({
  src: "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
  alt: "The National Archives office",
  width: 1996,
  height: 1331,
  caption: "<p>This is a pretty image</p>",
  transcript: "<p>Lorem ipsum transcript</p>",
  translation: "<p>Lorem ipsum translation</p>"
}) }}

Status

Status
In development
Tested without JavaScript
In development
Tested without CSS
In development
WCAG 2.2 AA compliant
In development
Analytics integrated
In development
Documentation complete
No

Image sizes

Picture components need to show the entire image so they are free from aspect ratio restrictions.

Ensure the longest side of the image is no more than 900px.

Back to top