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 448 512" height="24" aria-hidden="true" focusable="false"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
          <path d="M32 32C14.3 32 0 46.3 0 64v96c0 17.7 14.3 32 32 32s32-14.3 32-32V96h64c17.7 0 32-14.3 32-32s-14.3-32-32-32H32zM64 352c0-17.7-14.3-32-32-32s-32 14.3-32 32v96c0 17.7 14.3 32 32 32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H64V352zM320 32c-17.7 0-32 14.3-32 32s14.3 32 32 32h64v64c0 17.7 14.3 32 32 32s32-14.3 32-32V64c0-17.7-14.3-32-32-32H320zM448 352c0-17.7-14.3-32-32-32s-32 14.3-32 32v64H320c-17.7 0-32 14.3-32 32s14.3 32 32 32h96c17.7 0 32-14.3 32-32V352z" />
        </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 448 512" height="24" aria-hidden="true" focusable="false"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
          <path d="M160 64c0-17.7-14.3-32-32-32s-32 14.3-32 32v64H32c-17.7 0-32 14.3-32 32s14.3 32 32 32h96c17.7 0 32-14.3 32-32V64zM32 320c-17.7 0-32 14.3-32 32s14.3 32 32 32H96v64c0 17.7 14.3 32 32 32s32-14.3 32-32V352c0-17.7-14.3-32-32-32H32zM352 64c0-17.7-14.3-32-32-32s-32 14.3-32 32v96c0 17.7 14.3 32 32 32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H352V64zM320 320c-17.7 0-32 14.3-32 32v96c0 17.7 14.3 32 32 32s32-14.3 32-32V384h64c17.7 0 32-14.3 32-32s-14.3-32-32-32H320z" />
        </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 448 512" height="24" aria-hidden="true" focusable="false"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
          <path d="M128 136c0-22.1-17.9-40-40-40L40 96C17.9 96 0 113.9 0 136l0 48c0 22.1 17.9 40 40 40H88c22.1 0 40-17.9 40-40l0-48zm0 192c0-22.1-17.9-40-40-40H40c-22.1 0-40 17.9-40 40l0 48c0 22.1 17.9 40 40 40H88c22.1 0 40-17.9 40-40V328zm32-192v48c0 22.1 17.9 40 40 40h48c22.1 0 40-17.9 40-40V136c0-22.1-17.9-40-40-40l-48 0c-22.1 0-40 17.9-40 40zM288 328c0-22.1-17.9-40-40-40H200c-22.1 0-40 17.9-40 40l0 48c0 22.1 17.9 40 40 40h48c22.1 0 40-17.9 40-40V328zm32-192v48c0 22.1 17.9 40 40 40h48c22.1 0 40-17.9 40-40V136c0-22.1-17.9-40-40-40l-48 0c-22.1 0-40 17.9-40 40zM448 328c0-22.1-17.9-40-40-40H360c-22.1 0-40 17.9-40 40v48c0 22.1 17.9 40 40 40h48c22.1 0 40-17.9 40-40V328z" />
        </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-gallery__navigation-button-label">
        <span class="tna-gallery__navigation-button-icon"></span>
        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-gallery__navigation-button-label">
        Next
        <span class="tna-gallery__navigation-button-icon"></span>
      </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: 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.
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
Ready for production
Tested without JavaScript
Yes
Tested without CSS
Yes
Passed DAC audit
Yes
Analytics integrated
Yes
Documentation complete
No

Back to top