Components
Files list
Display a list of files available to download.
Contents
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
| Name | Type | Description |
|---|---|---|
| itemHeadingLevel | number |
Required. The heading level which represents an element from |
| items | array |
Required. The list of files to display. |
| fullAreaClick | boolean |
If |
| classes | string |
Classes to add to the files list. |
| attributes | object |
HTML attributes (for example data attributes) to add to the files list. |
| Name | Type | Description |
|---|---|---|
| id | string |
Required. A unique ID for the file item. |
| title | string |
Required. The name of the file to show. |
| href | string |
Required. The URL to the file. |
| fileType | string |
Required. A short name for the file type (for example, PDF, DOCX, ZIP). |
| fileSize | string |
Required. The physical size of the file including the units (for example, 2MB, 512KB). |
| fileExtent | string |
The human-readable size of the file (for example, number of pages, duration). |
| icon | string |
An optional Font Awesome icon, without the |
| description | string |
A short description of the file. |
{% 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
}) }}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/files-list/macro.html" 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
}) }}