Styles

Lists

Create lists of content to more easily allow users to find what they need.

Unordered lists
Ordered lists
Description lists
Card lists
Lists of files

Unordered lists

Use lists to make blocks of text easier to read, and to break information into manageable chunks.

Introduce bulleted lists with a lead-in line ending in a colon. Start each item with a lowercase letter, and do not use a full stop at the end.

Open this example in new tab

HTML

<p>You can buy:</p>
<ul class="tna-ol">
  <li>apples</li>
  <li>oranges</li>
  <li>pears</li>
</ul>

Large unordered lists

If a list is hard to read because the items run across multiple lines you can add extra spacing.

Consider adding a bold title to each list item to make skimming the content easier.

Open this example in new tab

HTML

<p>The key functions of a government according to Google are:</p>
<ul class="tna-ul tna-ul--spaced">
  <li><strong>lawmaking:</strong> Governments create and implement laws that regulate the behavior of citizens and organizations within their jurisdiction</li>
  <li><strong>public service provision:</strong> They are responsible for providing essential services like education, healthcare, infrastructure (roads, bridges), and public safety</li>
  <li><strong>protection:</strong> Governments protect citizens from external threats (war, invasion) and internal threats (crime, terrorism)</li>
  <li><strong>economic management:</strong> Governments set taxes, manage public finances, and implement economic policies to promote economic growth and stability</li>
  <li><strong>representation:</strong> Governments represent the interests of their citizens in international affairs and other areas where decisions are made that affect them</li>
  <li><strong>conflict resolution:</strong> Governments are responsible for resolving disputes and conflicts within society</li>
</ul>

Dashed lists

Only use dashed lists for navigational items like in sidebars or tables of content.

Open this example in new tab

HTML

<ul class="tna-ul tna-ul--dashed">
  <li>
    <a href="#">Alpha</a>
  </li>
  <li>
    <a href="#">Beta</a>
  </li>
  <li>
    <a href="#">Gamma</a>
  </li>
</ul>

Plain lists

In rare instances, you may want to remove the item markers from a list. Exercise caution when doing this as users will no longer be able to easily tell that the content is a list.

Open this example in new tab

HTML

<ul class="tna-ul tna-ul--plain">
  <li>Alpha</li>
  <li>Beta</li>
  <li>Gamma</li>
</ul>

Ordered lists

Use numbered lists instead of bulleted lists when the order of the items is relevant.

You do not need to use a lead-in line for numbered lists. Items in a numbered list should end in a full stop because each should be a complete sentence.

Open this example in new tab

HTML

<ol class="tna-ol">
  <li>Delivery address.</li>
  <li>Payment.</li>
  <li>Confirmation.</li>
</ol>

Description lists

The description lists can be plain or contain icons.

Open this example in new tab

HTML

<dl class="tna-dl">
  <dt>Alpha</dt>
  <dd>Lorem ipsum</dd>
  <dt>Beta</dt>
  <dd>Lorem ipsum</dd>
  <dt>Gamma</dt>
  <dd>Lorem ipsum</dd>
  <dt>Delta</dt>
  <dd>Lorem ipsum</dd>
  <dt>Epsilon</dt>
  <dd>Lorem ipsum</dd>
</dl>

Plain description lists

To reduce visual clutter, description lists can have the zebra-striped background removed.

Open this example in new tab

HTML

<dl class="tna-dl tna-dl--plain">
  <dt>Alpha</dt>
  <dd>Lorem ipsum</dd>
  <dt>Beta</dt>
  <dd>Lorem ipsum</dd>
  <dt>Gamma</dt>
  <dd>Lorem ipsum</dd>
</dl>

Chip lists

You can use a chip list to display a list of chips.

The chips in a chip list can be links and can also contain chip icons. If necessary, the chips can be a plain style with no background.

Open this example in new tab

HTML

<dl class="tna-dl-chips">
  <dt>Date</dt>
  <dd>
    <a href="#" class="tna-dl-chips__item">
      Saturday 28 June 2014
    </a>
  </dd>
  <dt>Event type</dt>
  <dd>
    <span class="tna-dl-chips__item">
      In-person
    </span>
  </dd>
  <dt>Price</dt>
  <dd>
    <span class="tna-dl-chips__item">
      Free
    </span>
  </dd>
  <dt>Accessiblity</dt>
  <dd>
    <span class="tna-dl-chips__item">
      Wheelchair accessible
    </span>
  </dd>
</dl>
<dl class="tna-dl-chips tna-dl-chips--plain">
  <dt>Date</dt>
  <dd>
    <a href="#" class="tna-dl-chips__item">
      Saturday 28 June 2014
    </a>
  </dd>
  <dt>Event type</dt>
  <dd>
    <span class="tna-dl-chips__item">
      In-person
    </span>
  </dd>
  <dt>Price</dt>
  <dd>
    <span class="tna-dl-chips__item">
      Free
    </span>
  </dd>
  <dt>Accessiblity</dt>
  <dd>
    <span class="tna-dl-chips__item">
      Wheelchair accessible
    </span>
  </dd>
</dl>

Card lists

Use a <ul> element to create a list of card components.

Open this example in new tab

HTML

<div class="tna-section tna-!--no-padding-bottom">
  <ul class="tna-container">
    <li class="tna-column tna-column--width-1-3 tna-column--width-1-2-medium tna-column--width-1-2-small tna-column--full-tiny tna-!--margin-bottom-l">
      <article class="tna-card">
        <h3 class="tna-heading-m tna-card__heading">
          <a href="#" class="tna-card__heading-link">Card 1</a>
        </h3>
        <a href="#" class="tna-card__image-container" tabindex="-1" aria-hidden="true">
          <picture class="tna-card__image">
            <img src="https://fakeimg.pl/600x400/00623b/fff?text=Image&amp;font=museo&amp;font_size=48" alt="A random example image" width="600" height="400">
          </picture>
        </a>
        <div class="tna-card__body">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis.</p>
        </div>
      </article>
    </li>
    <li class="tna-column tna-column--width-1-3 tna-column--width-1-2-medium tna-column--width-1-2-small tna-column--full-tiny tna-!--margin-bottom-l">
      <article class="tna-card">
        <h3 class="tna-heading-m tna-card__heading">
          <a href="#" class="tna-card__heading-link">Card 2</a>
        </h3>
        <a href="#" class="tna-card__image-container" tabindex="-1" aria-hidden="true">
          <picture class="tna-card__image">
            <img src="https://fakeimg.pl/600x400/00623b/fff?text=Image&amp;font=museo&amp;font_size=48" alt="A random example image" width="600" height="400">
          </picture>
        </a>
        <div class="tna-card__body">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis.</p>
        </div>
      </article>
    </li>
    <li class="tna-column tna-column--width-1-3 tna-column--width-1-2-medium tna-column--width-1-2-small tna-column--full-tiny tna-!--margin-bottom-l">
      <article class="tna-card">
        <h3 class="tna-heading-m tna-card__heading">
          <a href="#" class="tna-card__heading-link">Card 3</a>
        </h3>
        <a href="#" class="tna-card__image-container" tabindex="-1" aria-hidden="true">
          <picture class="tna-card__image">
            <img src="https://fakeimg.pl/600x400/00623b/fff?text=Image&amp;font=museo&amp;font_size=48" alt="A random example image" width="600" height="400">
          </picture>
        </a>
        <div class="tna-card__body">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis.</p>
        </div>
      </article>
    </li>
  </ul>
</div>

Nunjucks

{% from "nationalarchives/components/card/macro.njk" import tnaCard %}

<div class="tna-section tna-!--no-padding-bottom">
  <ul class="tna-container">
    {% for i in range(0, 3) -%}
    <li class="tna-column tna-column--width-1-3 tna-column--width-1-2-medium tna-column--width-1-2-small tna-column--full-tiny tna-!--margin-bottom-l">
      {{ tnaCard({
        title: "Card " + (i + 1),
        headingLevel: 3,
        headingSize: "m",
        href: "#",
        imageSrc: "https://fakeimg.pl/600x400/00623b/fff?text=Image&font=museo&font_size=48",
        imageAlt: "A random example image",
        imageWidth: 600,
        imageHeight: 400,
        body: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis.</p>"
      }) }}
    </li>
    {% endfor -%}
  </ul>
</div>

Plain card lists

Cards don’t require an image. It could be benificial to use them for a list of pages.

Open this example in new tab

HTML

<ul class="tna-container tna-!--padding-top-m">
  <li class="tna-column tna-column--width-1-4 tna-column--width-1-3-medium tna-column--width-1-2-small tna-column--full-tiny tna-!--margin-bottom-l">
    <article class="tna-card">
      <h3 class="tna-heading-m tna-card__heading">
        <a href="#" class="tna-card__heading-link">Card 1</a>
      </h3>
      <div class="tna-card__body">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis.</p>
      </div>
    </article>
  </li>
  <li class="tna-column tna-column--width-1-4 tna-column--width-1-3-medium tna-column--width-1-2-small tna-column--full-tiny tna-!--margin-bottom-l">
    <article class="tna-card">
      <h3 class="tna-heading-m tna-card__heading">
        <a href="#" class="tna-card__heading-link">Card 2</a>
      </h3>
      <div class="tna-card__body">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis.</p>
      </div>
    </article>
  </li>
  <li class="tna-column tna-column--width-1-4 tna-column--width-1-3-medium tna-column--width-1-2-small tna-column--full-tiny tna-!--margin-bottom-l">
    <article class="tna-card">
      <h3 class="tna-heading-m tna-card__heading">
        <a href="#" class="tna-card__heading-link">Card 3</a>
      </h3>
      <div class="tna-card__body">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis.</p>
      </div>
    </article>
  </li>
  <li class="tna-column tna-column--width-1-4 tna-column--width-1-3-medium tna-column--width-1-2-small tna-column--full-tiny tna-!--margin-bottom-l">
    <article class="tna-card">
      <h3 class="tna-heading-m tna-card__heading">
        <a href="#" class="tna-card__heading-link">Card 4</a>
      </h3>
      <div class="tna-card__body">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis.</p>
      </div>
    </article>
  </li>
  <li class="tna-column tna-column--width-1-4 tna-column--width-1-3-medium tna-column--width-1-2-small tna-column--full-tiny tna-!--margin-bottom-l">
    <article class="tna-card">
      <h3 class="tna-heading-m tna-card__heading">
        <a href="#" class="tna-card__heading-link">Card 5</a>
      </h3>
      <div class="tna-card__body">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis.</p>
      </div>
    </article>
  </li>
</ul>

Nunjucks

{% from "nationalarchives/components/card/macro.njk" import tnaCard %}

<ul class="tna-container tna-!--padding-top-m">
  {% for i in range(0, 5) -%}
  <li class="tna-column tna-column--width-1-4 tna-column--width-1-3-medium tna-column--width-1-2-small tna-column--full-tiny tna-!--margin-bottom-l">
    {{ tnaCard({
      title: "Card " + (i + 1),
      headingLevel: 3,
      headingSize: "m",
      href: "#",
      body: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis.</p>"      }) }}
  </li>
  {% endfor -%}
</ul>

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.

Make the file size no more than two decimal places long and use the appropriate SI units such as bytes, kB, and MB.

Open this example in new tab

HTML

<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>

If necessary, split out the data into separate elements to make the list more readable in a similar fashion to the files list component.

All the information needs to be available to both sighted and non-signed users.

Open this example in new tab

HTML

<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>

This website uses cookies

Lists

Contents

Unordered lists

HTML

Large unordered lists

HTML

Dashed lists

HTML

Plain lists

HTML

Ordered lists

HTML

Description lists

HTML

Plain description lists

HTML

Chip lists

HTML

Card lists

HTML

Nunjucks

Plain card lists

HTML

Nunjucks

Lists of files

HTML

HTML