Add examples of lists of files

src/styles/lists/index.md

@@ -68,3 +68,24 @@ Use a `<ul>` element to create a list of [card components](../../components/card
 Cards don't require an image. It could be benificial to use them for a list of pages.
 
 {{ example({ group: "components", item: "card", example: "list-plain", html: true, nunjucks: false, size: "xxl", noPadding: true }) }}
+
+## Lists of files
+
+When listing files, ensure that the link to each file includes:
+
+- the name of the file (or the filename if it is human-readable)
+- the type of file in a human-readable format rather than a MIME type (e.g. PDF)
+- the size of the file (if known)
+- the extent of the file (optional, if known) - this is the number of pages/slides/tables
+
+Including this data will help people who use screen readers and keyboard navigation.
+
+The file size should not be more than two decimal places and use the appropriate SI units such as bytes, kB, and MB.
+
+{{ example({ group: "styles", item: "lists", example: "links-list", html: true, nunjucks: false, size: "xs", openHTML: true }) }}
+
+If necessary, you can split out the data into separate elements to make the list more readable in a similar fashion to the [files list component](../../components/files-list/).
+
+All the information needs to be available to both sighted and non-signed users.
+
+{{ example({ group: "styles", item: "lists", example: "links-list-split", html: true, nunjucks: false, size: "xl", openHTML: true }) }}

src/styles/lists/links-list-split/index.njk

@@ -0,0 +1,53 @@
+---
+title: List of links
+layout: examples/plain.njk
+private: true
+---
+
+<ul class="tna-ul">
+    <li>
+        <p>
+            <a href="#attendees-2000-01-01.pdf" aria-describedby="file-1">Attendee list for 2000-01-01
+                <span class="tna-visually-hidden"> (PDF, 2.1MB, 120 pages)</span>
+            </a>
+        </p>
+        <dl class="tna-dl tna-dl--plain tna-!--no-margin-top" id="file-1">
+          <dt>File type</dt>
+          <dd>PDF</dd>
+          <dt>File size</dt>
+          <dd>2.1MB</dd>
+          <dt>Extent</dt>
+          <dd>120 pages</dd>
+        </dl>
+    </li>
+    <li>
+        <p>
+            <a href="#spreadsheet_new_NEW-final-2b.xlsx" aria-describedby="file-2">Summary of catalogue imports
+                <span class="tna-visually-hidden"> (XLSX, 756Kb, 3 sheets)</span>
+            </a>
+        </p>
+        <dl class="tna-dl tna-dl--plain tna-!--no-margin-top" id="file-2">
+          <dt>File type</dt>
+          <dd>XLSX</dd>
+          <dt>File size</dt>
+          <dd>756Kb</dd>
+          <dt>Extent</dt>
+          <dd>3 sheets</dd>
+        </dl>
+    </li>
+    <li>
+        <p>
+            <a href="#doc.pdf" aria-describedby="file-3">Example email signature
+                <span class="tna-visually-hidden"> (DOC, 543 bytes, 1 page)</span>
+            </a>
+        </p>
+        <dl class="tna-dl tna-dl--plain tna-!--no-margin-top" id="file-3">
+          <dt>File type</dt>
+          <dd>DOC</dd>
+          <dt>File size</dt>
+          <dd>543 bytes</dd>
+          <dt>Extent</dt>
+          <dd>1 page</dd>
+        </dl>
+    </li>
+</ul>

src/styles/lists/links-list/index.njk

@@ -0,0 +1,17 @@
+---
+title: List of links
+layout: examples/plain.njk
+private: true
+---
+
+<ul class="tna-ul">
+    <li>
+        <a href="#attendees-2000-01-01.pdf">Attendee list for 2000-01-01 (PDF, 2.1MB, 120 pages)</a>
+    </li>
+    <li>
+        <a href="#spreadsheet_new_NEW-final-2b.xlsx">Summary of catalogue imports (XLSX, 756Kb, 3 sheets)</a>
+    </li>
+    <li>
+        <a href="#doc.doc">Example email signature (DOC, 543 bytes, 1 page)</a>
+    </li>
+</ul>