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 class="tna-gallery__options tna-button-group tna-button-group--small" hidden>
      <button class="tna-button tna-button--icon-only-mobile" type="button" hidden value="enter-fullscreen">
        <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="M128 96C110.3 96 96 110.3 96 128L96 224C96 241.7 110.3 256 128 256C145.7 256 160 241.7 160 224L160 160L224 160C241.7 160 256 145.7 256 128C256 110.3 241.7 96 224 96L128 96zM160 416C160 398.3 145.7 384 128 384C110.3 384 96 398.3 96 416L96 512C96 529.7 110.3 544 128 544L224 544C241.7 544 256 529.7 256 512C256 494.3 241.7 480 224 480L160 480L160 416zM416 96C398.3 96 384 110.3 384 128C384 145.7 398.3 160 416 160L480 160L480 224C480 241.7 494.3 256 512 256C529.7 256 544 241.7 544 224L544 128C544 110.3 529.7 96 512 96L416 96zM544 416C544 398.3 529.7 384 512 384C494.3 384 480 398.3 480 416L480 480L416 480C398.3 480 384 494.3 384 512C384 529.7 398.3 544 416 544L512 544C529.7 544 544 529.7 544 512L544 416z" />
        </svg>
        <span class="tna-visually-hidden">View the My gallery gallery in </span>Full screen
      </button>
      <button class="tna-button tna-button--icon-only-mobile" type="button" hidden value="exit-fullscreen">
        <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="M256 128C256 110.3 241.7 96 224 96C206.3 96 192 110.3 192 128L192 192L128 192C110.3 192 96 206.3 96 224C96 241.7 110.3 256 128 256L224 256C241.7 256 256 241.7 256 224L256 128zM128 384C110.3 384 96 398.3 96 416C96 433.7 110.3 448 128 448L192 448L192 512C192 529.7 206.3 544 224 544C241.7 544 256 529.7 256 512L256 416C256 398.3 241.7 384 224 384L128 384zM448 128C448 110.3 433.7 96 416 96C398.3 96 384 110.3 384 128L384 224C384 241.7 398.3 256 416 256L512 256C529.7 256 544 241.7 544 224C544 206.3 529.7 192 512 192L448 192L448 128zM416 384C398.3 384 384 398.3 384 416L384 512C384 529.7 398.3 544 416 544C433.7 544 448 529.7 448 512L448 448L512 448C529.7 448 544 433.7 544 416C544 398.3 529.7 384 512 384L416 384z" />
        </svg>
        Exit full screen
      </button>
      <button class="tna-button tna-button--icon-only-mobile" type="button" hidden value="show-index">
        <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="M152 160C174.1 160 192 177.9 192 200L192 248C192 270.1 174.1 288 152 288L104 288C81.9 288 64 270.1 64 248L64 200C64 177.9 81.9 160 104 160L152 160zM344 288L296 288C273.9 288 256 270.1 256 248L256 200C256 177.9 273.9 160 296 160L344 160C366.1 160 384 177.9 384 200L384 248C384 270.1 366.1 288 344 288zM536 288L488 288C465.9 288 448 270.1 448 248L448 200C448 177.9 465.9 160 488 160L536 160C558.1 160 576 177.9 576 200L576 248C576 270.1 558.1 288 536 288zM536 480L488 480C465.9 480 448 462.1 448 440L448 392C448 369.9 465.9 352 488 352L536 352C558.1 352 576 369.9 576 392L576 440C576 462.1 558.1 480 536 480zM344 352C366.1 352 384 369.9 384 392L384 440C384 462.1 366.1 480 344 480L296 480C273.9 480 256 462.1 256 440L256 392C256 369.9 273.9 352 296 352L344 352zM152 480L104 480C81.9 480 64 462.1 64 440L64 392C64 369.9 81.9 352 104 352L152 352C174.1 352 192 369.9 192 392L192 440C192 462.1 174.1 480 152 480z" />
        </svg>
        See all images
      </button>
    </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.

See macro options for items.
id string

Required.

A unique ID for the gallery component.
showGrid boolean

If true, don't select the first image when the gallery loads and instead show a grid of images.
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.

alt string

Required.

width number

Required.

height number

Required.

description string 
{% 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"
}) }}

Component status

Phase
Official (ready to use in production)
Analytics integrated
Yes

Back to top