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

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 tna-files-list--full-click">
  <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>
      <i class="tna-files-list__item-icon fa-solid fa-fw fa-file-pdf" aria-hidden="true"></i>
      <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"> (XLSX, 0.9MB)</span></a>
      </h3>
      <i class="tna-files-list__item-icon fa-solid fa-fw fa-file-powerpoint" aria-hidden="true"></i>
      <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">XLSX</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"> (TXT, 3MB)</span></a>
      </h3>
      <i class="tna-files-list__item-icon fa-solid fa-fw fa-file-lines" aria-hidden="true"></i>
      <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">TXT</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 macro options for 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
icon 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.",
      icon: "pdf"
    },
    {
      id: "file-2",
      text: "Preservation policy part 2",
      href: "#",
      fileType: "XLSX",
      fileSize: "0.9MB",
      description:
        "The principles according to which The National Archives will preserve and care for our archival collections.",
      icon: "powerpoint"
    },
    {
      id: "file-3",
      text: "Preservation policy part 3",
      href: "#",
      fileType: "TXT",
      fileSize: "3MB",
      fileExtent: "200 pages",
      icon: "lines"
    }
  ],
  fullAreaClick: true
}) }}

Status

Status
Ready for production
Tested without CSS
Yes
Passed DAC audit
Yes
Documentation complete
No

Back to top