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

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. Component 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/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">Bird<span class="tna-!--visually-hidden">:</span></span>
          <span class="tna-index-grid__item-title">Pelicans</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-2" 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">Mammal<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-3" 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">Mammal<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 to 0 to visually hide the title.
headingSize string

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

Default value: 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.

A list of items to display in the index grid.

See macro options for items.
lazyImages boolean

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

Required.

The number of columns to display on large devices.
columnsMedium string

The number of columns to display on medium devices.
columnsSmall string

The number of columns to display on small devices.
columnsTiny string

The number of columns to display on tiny devices.
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.

The URL of the item.
src string

Required.

The URL of the item image.
alt string

Required.

Alternative text for the item image.
width number

Required.

The width of the image in pixels.
height number

Required.

The height of the image in pixels.
label string

An optional label for the item, displayed in the top left.
title string

Required.

The main title of the item.
subtitle string

An optional subtitle for the item.

 
{% 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: "Bird",
      title: "Pelicans",
      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-2",
      label: "Mammal",
      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-3",
      label: "Mammal",
      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
}) }}

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/index-grid/macro.html" import tnaIndexGrid %}

{{ tnaIndexGrid({
  "title": "My animals",
  "headingLevel": 2,
  "body": "<p>Animals that I like.</p>",
  "items": [
    {
      "href": "#/category-1",
      "label": "Bird",
      "title": "Pelicans",
      "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-2",
      "label": "Mammal",
      "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-3",
      "label": "Mammal",
      "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
}) }}

Component status

Phase
Official (ready to use in production)

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