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

Gallery

Use the gallery component to show a list of images.

Contents

  1. Component status
Open this example in new tab

HTML 

<section class="tna-gallery" data-module="tna-gallery">
  <div class="tna-gallery__header">
    <div class="tna-gallery__header-inner">
      <h3 class="tna-heading-m">
        My gallery
      </h3>
      <p>Lorem ipsum</p>
    </div>
  </div>
  <div class="tna-gallery__items">
    <div class="tna-gallery__item" id="test-gallery-item-1">
      <p class="tna-gallery__item-header">Image 1 of 3</p>
      <figure class="tna-gallery__item-figure">
        <div class="tna-gallery__item-figure-inner">
          <img src="https://picsum.photos/id/50/600/400" class="tna-gallery__item-image" alt="Photo 1" width="600" height="400" loading="lazy">
        </div>
        <figcaption class="tna-gallery__item-description">
          <p>This is photo number 1</p>
        </figcaption>
      </figure>
    </div>
    <div class="tna-gallery__item" id="test-gallery-item-2">
      <p class="tna-gallery__item-header">Image 2 of 3</p>
      <figure class="tna-gallery__item-figure">
        <div class="tna-gallery__item-figure-inner">
          <img src="https://picsum.photos/id/51/600/600" class="tna-gallery__item-image" alt="Photo 2" width="400" height="400" loading="lazy">
        </div>
        <figcaption class="tna-gallery__item-description">
          <p>This is photo number 2</p>
        </figcaption>
      </figure>
    </div>
    <div class="tna-gallery__item" id="test-gallery-item-3">
      <p class="tna-gallery__item-header">Image 3 of 3</p>
      <figure class="tna-gallery__item-figure">
        <div class="tna-gallery__item-figure-inner">
          <img src="https://picsum.photos/id/52/400/600" class="tna-gallery__item-image" alt="Photo 3" width="400" height="600" loading="lazy">
        </div>
        <figcaption class="tna-gallery__item-description">
          <p>This is photo number 3</p>
        </figcaption>
      </figure>
    </div>
  </div>
  <div class="tna-gallery__navigation-buttons" hidden>
    <button type="button" class="tna-gallery__navigation-button tna-gallery__navigation-prev" aria-label="Show previous image in 'My gallery' gallery">
      <span class="tna-button tna-gallery__navigation-button-label">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" height="24" aria-hidden="true" focusable="false"><!--!Font Awesome Free v7.0.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
          <path d="M169.4 297.4C156.9 309.9 156.9 330.2 169.4 342.7L361.4 534.7C373.9 547.2 394.2 547.2 406.7 534.7C419.2 522.2 419.2 501.9 406.7 489.4L237.3 320L406.6 150.6C419.1 138.1 419.1 117.8 406.6 105.3C394.1 92.8 373.8 92.8 361.3 105.3L169.3 297.3z" />
        </svg>
        Previous
      </span>
    </button>
    <button type="button" class="tna-gallery__navigation-button tna-gallery__navigation-next" aria-label="Show next image in 'My gallery' gallery">
      <span class="tna-button tna-button--icon-right tna-gallery__navigation-button-label">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" height="24" aria-hidden="true" focusable="false"><!--!Font Awesome Free v7.0.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
          <path d="M471.1 297.4C483.6 309.9 483.6 330.2 471.1 342.7L279.1 534.7C266.6 547.2 246.3 547.2 233.8 534.7C221.3 522.2 221.3 501.9 233.8 489.4L403.2 320L233.9 150.6C221.4 138.1 221.4 117.8 233.9 105.3C246.4 92.8 266.7 92.8 279.2 105.3L471.2 297.3z" />
        </svg>
        Next
      </span>
    </button>
  </div>
  <div class="tna-gallery__navigation" hidden><button type="button" class="tna-gallery__navigation-item" aria-label="Show image 1 of 3 of 'My gallery' gallery" aria-controls="test-gallery-item-1">
      <img src="https://picsum.photos/id/50/600/400" class="tna-gallery__navigation-item-image" alt="" width="600" height="400" loading="lazy">
      <span class="tna-visually-hidden">Image</span>
      <span class="tna-gallery__navigation-item-label">1</span>
      <span class="tna-visually-hidden"> of 3</span>
    </button><button type="button" class="tna-gallery__navigation-item" aria-label="Show image 2 of 3 of 'My gallery' gallery" aria-controls="test-gallery-item-2">
      <img src="https://picsum.photos/id/51/600/600" class="tna-gallery__navigation-item-image" alt="" width="400" height="400" loading="lazy">
      <span class="tna-visually-hidden">Image</span>
      <span class="tna-gallery__navigation-item-label">2</span>
      <span class="tna-visually-hidden"> of 3</span>
    </button><button type="button" class="tna-gallery__navigation-item" aria-label="Show image 3 of 3 of 'My gallery' gallery" aria-controls="test-gallery-item-3">
      <img src="https://picsum.photos/id/52/400/600" class="tna-gallery__navigation-item-image" alt="" width="400" height="600" loading="lazy">
      <span class="tna-visually-hidden">Image</span>
      <span class="tna-gallery__navigation-item-label">3</span>
      <span class="tna-visually-hidden"> of 3</span>
    </button></div>
</section>

Nunjucks

Nunjucks options
Primary options
Name Type Description
title string

The main title of the gallery.
headingLevel number

The heading level which represents an element from <h1> through to <h6>. Required if title is set.
headingSize string

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

Default value: m
body string

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

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

Required.

The list of images to display.

See macro options for items.
id string

Required.

A unique ID for the gallery component.
bounded boolean

If true, add a background to the gallery to separate it from surrounding contnet.
classes string

Classes to add to the gallery.
attributes object

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

Required.

The URL of the image.
alt string

Required.

Alternative text for the image.
width number

Required.

The width of the image in pixels.
height number

Required.

The height of the image in pixels.
description string

A caption or description for the image.

 
{% from "nationalarchives/components/gallery/macro.njk" import tnaGallery %}

{{ tnaGallery({
  title: "My gallery",
  headingLevel: 3,
  text: "Lorem ipsum",
  items: [
    {
      alt: "Photo 1",
      width: 600,
      height: 400,
      src: "https://picsum.photos/id/50/600/400",
      description: "<p>This is photo number 1</p>"
    },
    {
      alt: "Photo 2",
      width: 400,
      height: 400,
      src: "https://picsum.photos/id/51/600/600",
      description: "<p>This is photo number 2</p>"
    },
    {
      alt: "Photo 3",
      width: 400,
      height: 600,
      src: "https://picsum.photos/id/52/400/600",
      description: "<p>This is photo number 3</p>"
    }
  ],
  id: "test-gallery"
}) }}

Jinja

Important information

This is an experimental feature that outputs a Jinja template based on the Nunjucks example. Check the converted code for accuracy. 
{% from "components/gallery/macro.html" import tnaGallery %}

{{ tnaGallery({
  "title": "My gallery",
  "headingLevel": 3,
  "text": "Lorem ipsum",
  "items": [
    {
      "alt": "Photo 1",
      "width": 600,
      "height": 400,
      "src": "https://picsum.photos/id/50/600/400",
      "description": "<p>This is photo number 1</p>"
    },
    {
      "alt": "Photo 2",
      "width": 400,
      "height": 400,
      "src": "https://picsum.photos/id/51/600/600",
      "description": "<p>This is photo number 2</p>"
    },
    {
      "alt": "Photo 3",
      "width": 400,
      "height": 600,
      "src": "https://picsum.photos/id/52/400/600",
      "description": "<p>This is photo number 3</p>"
    }
  ],
  "id": "test-gallery"
}) }}

Component status

Phase
Official (ready to use in production)

Back to top