Skip to main content Skip to list of components
Beta

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

Components

Records list

The records list component can be used to show a list of related or interesting records.

Contents

  1. Status
Open this example in new tab

HTML 

<ul class="tna-records-list">
  <li class="tna-records-list__item">
    <img src="https://picsum.photos/id/237/400/600" width="400" height="600" class="tna-records-list__image" alt="">
    <dl class="tna-records-list__details">
      <dt class="tna-records-list__collection-label tna-chip tna-chip--plain">From our collection</dt>
      <dd class="tna-records-list__collection-description tna-chip tna-chip--plain">TS 11/45/167</dd>
      <dt class="tna-records-list__title-label">Title</dt>
      <dd class="tna-records-list__title-description">
        <a href="#">Court records relating to Robert Wedderburn’s trial</a>
      </dd>
      <dt class="tna-records-list__date-label">Date</dt>
      <dd class="tna-records-list__date-description">1819–1820</dd>
    </dl>
  </li>
  <li class="tna-records-list__item">
    <dl class="tna-records-list__details">
      <dt class="tna-records-list__collection-label tna-chip tna-chip--plain">From our collection</dt>
      <dd class="tna-records-list__collection-description tna-chip tna-chip--plain">HO 42/191</dd>
      <dt class="tna-records-list__title-label">Title</dt>
      <dd class="tna-records-list__title-description">
        <a href="#">Home office letters</a>
      </dd>
      <dt class="tna-records-list__date-label">Date</dt>
      <dd class="tna-records-list__date-description">1819</dd>
    </dl>
  </li>
</ul>

Nunjucks

Nunjucks options
Primary options
Name Type Description
items array

Required.

See items.
classes string

Classes to add to the filters.
attributes object

HTML attributes (for example data attributes) to add to the filters.
Options for items
Name Type Description
imageSrc string
imageAlt string
imageWidth number
imageHeight number
collection string

Required.

title string

Required.

href string

Required.

date string 
{% from "nationalarchives/components/records-list/macro.njk" import tnaRecordsList %}

{{ tnaRecordsList({
  items: [
    {
      imageSrc: "https://picsum.photos/id/237/400/600",
      imageWidth: 400,
      imageHeight: 600,
      collection: "TS 11/45/167",
      title: "Court records relating to Robert Wedderburn’s trial",
      href: "#",
      date: "1819–1820"
    },
    {
      collection: "HO 42/191",
      title: "Home office letters",
      href: "#",
      date: "1819"
    }
  ]
}) }}

Status

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

Back to top