Components
Gallery
Use the gallery component to show a list of images.
Contents
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
| Name | Type | Description |
|---|---|---|
| title | string |
The main title of the gallery. |
| headingLevel | number |
The heading level which represents an element from |
| headingSize | string |
The physical size of the gallery title ( Default value: |
| body | string |
The HTML for the main body of the gallery. Not displayed if |
| text | string |
The text for the gallery which will be inserted into a |
| items | array |
Required. The list of images to display. |
| id | string |
Required. A unique ID for the gallery component. |
| bounded | boolean |
If Default value: |
| classes | string |
Classes to add to the gallery. |
| attributes | object |
HTML attributes (for example data attributes) to add to the gallery. |
| 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 showing a Jinja2 macro 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"
}) }}