Skip to main content Skip to list of components
Beta

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

Components

Index grid

Use the index grid component to display a grid of links such as displaying a list of all child pages in a hierarchy.

Contents

  1. Status
  2. Images

The index grid includes a tna-container element so doesn’t need to be used within a column system.

Open this example in new tab

HTML 

<nav class="tna-index-grid" aria-label="My animals">
  <div class="tna-container">
    <div class="tna-column tna-column--width-2-3 tna-column--width-5-6-medium tna-column--full-small tna-column--full-tiny">
      <h2 class="tna-heading-l tna-index-grid__heading">
        My animals
      </h2>
      <p>Animals that I like.</p>
    </div>
  </div>
  <ul class="tna-index-grid__items tna-container">
    <li class="tna-index-grid__item-wrapper tna-column tna-column--width-1-4 tna-column--width-1-3-medium tna-column--width-1-2-small tna-column--full-tiny">
      <a href="#/category-1" class="tna-index-grid__item">
        <img src="https://picsum.photos/id/237/600/400" class="tna-index-grid__item-image" width="600" height="400" alt="A small puppy looking upwards">
        <span class="tna-index-grid__item-content">
          <span class="tna-chip tna-index-grid__item-label">Animal<span class="tna-!--visually-hidden">:</span></span>
          <span class="tna-index-grid__item-title">Dogs</span>
          <br>
          <span class="tna-index-grid__item-subtitle">
            <span class="tna-visually-hidden">(</span>29 photos<span class="tna-visually-hidden">)</span></span>
        </span>
      </a>
    </li>
    <li class="tna-index-grid__item-wrapper tna-column tna-column--width-1-4 tna-column--width-1-3-medium tna-column--width-1-2-small tna-column--full-tiny">
      <a href="#/category-2" class="tna-index-grid__item">
        <img src="https://picsum.photos/id/244/600/400" class="tna-index-grid__item-image" width="600" height="400" alt="Some sea birds on a wooden pier">
        <span class="tna-index-grid__item-content">
          <span class="tna-chip tna-index-grid__item-label">Animal<span class="tna-!--visually-hidden">:</span></span>
          <span class="tna-index-grid__item-title">Birds</span>
          <br>
          <span class="tna-index-grid__item-subtitle">
            <span class="tna-visually-hidden">(</span>6 photos<span class="tna-visually-hidden">)</span></span>
        </span>
      </a>
    </li>
    <li class="tna-index-grid__item-wrapper tna-column tna-column--width-1-4 tna-column--width-1-3-medium tna-column--width-1-2-small tna-column--full-tiny">
      <a href="#/category-3" class="tna-index-grid__item">
        <img src="https://picsum.photos/id/433/600/400" class="tna-index-grid__item-image" width="600" height="400" alt="A bear looking straight at the camera">
        <span class="tna-index-grid__item-content">
          <span class="tna-chip tna-index-grid__item-label">Animal<span class="tna-!--visually-hidden">:</span></span>
          <span class="tna-index-grid__item-title">Bears</span>
          <br>
          <span class="tna-index-grid__item-subtitle">
            <span class="tna-visually-hidden">(</span>18 photos<span class="tna-visually-hidden">)</span></span>
        </span>
      </a>
    </li>
    <li class="tna-index-grid__item-wrapper tna-column tna-column--width-1-4 tna-column--width-1-3-medium tna-column--width-1-2-small tna-column--full-tiny">
      <a href="#/category-4" class="tna-index-grid__item">
        <img src="https://picsum.photos/id/593/600/400" class="tna-index-grid__item-image" width="600" height="400" alt="A tiger lying down in an enclosure">
        <span class="tna-index-grid__item-content">
          <span class="tna-chip tna-index-grid__item-label">Animal<span class="tna-!--visually-hidden">:</span></span>
          <span class="tna-index-grid__item-title">Tigers</span>
          <br>
          <span class="tna-index-grid__item-subtitle">
            <span class="tna-visually-hidden">(</span>7 photos<span class="tna-visually-hidden">)</span></span>
        </span>
      </a>
    </li>
  </ul>
</nav>

Nunjucks

Nunjucks options
Primary options
Name Type Description
supertitle string

The smaller title to display above the main index grid title.
title string

Required.

The main title of the index grid.
headingLevel number

Required.

The heading level which represents an element from <h1> through to <h6>. Set a headingLevel of 0 to visually hide the title.
headingSize string

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

Default: m
href string

A URL to use as a link in the grids heading.
hrefClasses string

Classes to add to the elements of the index grid that use href.
hrefAttributes object

HTML attributes (for example data attributes) to add to the elements of the index grid that use href.
body string

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

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

Required.

See items.
lazyImages boolean

If true, make the images a lazily-loaded.
columns string

Required.

columnsMedium string
columnsSmall string
columnsTiny string
plainSupertitle boolean

Use a plain supertitle, removing the accented background colour.
classes string

Classes to add to the container.
attributes object

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

Required.

src string

Required.

alt string

Required.

width number

Required.

height number

Required.

label string
title string

Required.

subtitle string 
{% from "nationalarchives/components/index-grid/macro.njk" import tnaIndexGrid %}

{{ tnaIndexGrid({
  title: "My animals",
  headingLevel: 2,
  body: "<p>Animals that I like.</p>",
  items: [
    {
      href: "#/category-1",
      label: "Animal",
      title: "Dogs",
      subtitle: "29 photos",
      src: "https://picsum.photos/id/237/600/400",
      alt: "A small puppy looking upwards",
      width: 600,
      height: 400
    },
    {
      href: "#/category-2",
      label: "Animal",
      title: "Birds",
      subtitle: "6 photos",
      src: "https://picsum.photos/id/244/600/400",
      alt: "Some sea birds on a wooden pier",
      width: 600,
      height: 400
    },
    {
      href: "#/category-3",
      label: "Animal",
      title: "Bears",
      subtitle: "18 photos",
      src: "https://picsum.photos/id/433/600/400",
      alt: "A bear looking straight at the camera",
      width: 600,
      height: 400
    },
    {
      href: "#/category-4",
      label: "Animal",
      title: "Tigers",
      subtitle: "7 photos",
      src: "https://picsum.photos/id/593/600/400",
      alt: "A tiger lying down in an enclosure",
      width: 600,
      height: 400
    }
  ],
  columns: 4,
  columnsMedium: 3,
  columnsSmall: 2,
  columnsTiny: 1
}) }}

Status

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

Images

Use 3:2 aspect ratio images as the default for thumbnails on index grid items.

Thumbnails should be around 600px wide and 400px tall to ensure they display well across all screen sizes.

Back to top