Skip to main content Skip to list of components
Beta

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

Components

Files list

Display a list of files available to download.

Contents

  1. Status
Open this example in new tab

HTML 

<div class="tna-files-list">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="tna-files-list__icon" width="24" height="24"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
    <path d="M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32V274.7l-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7V32zM64 352c-35.3 0-64 28.7-64 64v32c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V416c0-35.3-28.7-64-64-64H346.5l-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352H64zm368 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z" />
  </svg>
  <ul class="tna-files-list__items">
    <li class="tna-files-list__item">
      <h3 class="tna-files-list__item-title tna-heading-s">
        <a href="#" class="tna-files-list__link" aria-describedby="file-1-extent">Preservation policy part 1<span class="tna-visually-hidden"> (PDF, 1.7MB)</span></a>
      </h3>
      <div class="tna-files-list__item-body" id="file-1">
        <dl class="tna-dl-chips tna-dl-chips--plain tna-files-list__item-meta">
          <dt>File type</dt>
          <dd>
            <span class="tna-dl-chips__item">PDF</span>
          </dd>
          <dt>File size</dt>
          <dd>
            <span class="tna-dl-chips__item">1.7MB</span>
          </dd>
          <dt>Extent</dt>
          <dd>
            <span id="file-1-extent" class="tna-dl-chips__item">120 pages</span>
          </dd>
        </dl>
        <p class="tna-files-list__item-description">The principles according to which The National Archives will preserve and care for our archival collections.</p>
      </div>
    </li>
    <li class="tna-files-list__item">
      <h3 class="tna-files-list__item-title tna-heading-s">
        <a href="#" class="tna-files-list__link">Preservation policy part 2<span class="tna-visually-hidden"> (PDF, 0.9MB)</span></a>
      </h3>
      <div class="tna-files-list__item-body" id="file-2">
        <dl class="tna-dl-chips tna-dl-chips--plain tna-files-list__item-meta">
          <dt>File type</dt>
          <dd>
            <span class="tna-dl-chips__item">PDF</span>
          </dd>
          <dt>File size</dt>
          <dd>
            <span class="tna-dl-chips__item">0.9MB</span>
          </dd>
        </dl>
        <p class="tna-files-list__item-description">The principles according to which The National Archives will preserve and care for our archival collections.</p>
      </div>
    </li>
    <li class="tna-files-list__item">
      <h3 class="tna-files-list__item-title tna-heading-s">
        <a href="#" class="tna-files-list__link" aria-describedby="file-3-extent">Preservation policy part 3<span class="tna-visually-hidden"> (PDF, 3MB)</span></a>
      </h3>
      <div class="tna-files-list__item-body" id="file-3">
        <dl class="tna-dl-chips tna-dl-chips--plain tna-files-list__item-meta">
          <dt>File type</dt>
          <dd>
            <span class="tna-dl-chips__item">PDF</span>
          </dd>
          <dt>File size</dt>
          <dd>
            <span class="tna-dl-chips__item">3MB</span>
          </dd>
          <dt>Extent</dt>
          <dd>
            <span id="file-3-extent" class="tna-dl-chips__item">200 pages</span>
          </dd>
        </dl>
      </div>
    </li>
  </ul>
</div>

Nunjucks

Nunjucks options
Primary options
Name Type Description
itemHeadingLevel number

Required.

The heading level which represents an element from <h1> through to <h6> for each of the file item titles.
items array

Required.

See items.
fullAreaClick boolean

If true, allow users to click anywhere on one of the files to follow the link.
classes string

Classes to add to the files list.
attributes object

HTML attributes (for example data attributes) to add to the files list.
Options for items
Name Type Description
id string

Required.

title string

Required.

href string

Required.

fileType string

Required.

fileSize string

Required.

fileExtent string
description string 
{% from "nationalarchives/components/files-list/macro.njk" import tnaFilesList %}

{{ tnaFilesList({
  itemHeadingLevel: 3,
  items: [
    {
      id: "file-1",
      text: "Preservation policy part 1",
      href: "#",
      fileType: "PDF",
      fileSize: "1.7MB",
      fileExtent: "120 pages",
      description:
        "The principles according to which The National Archives will preserve and care for our archival collections."
    },
    {
      id: "file-2",
      text: "Preservation policy part 2",
      href: "#",
      fileType: "PDF",
      fileSize: "0.9MB",
      description:
        "The principles according to which The National Archives will preserve and care for our archival collections."
    },
    {
      id: "file-3",
      text: "Preservation policy part 3",
      href: "#",
      fileType: "PDF",
      fileSize: "3MB",
      fileExtent: "200 pages"
    }
  ]
}) }}

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