Styles
Lists
Create lists of content to more easily allow users to find what they need.
Contents
Unordered lists
HTML
<ul class="tna-ul">
<li>Alpha</li>
<li>Beta</li>
<li>Gamma</li>
</ul>Spaced unordered lists
HTML
<ul class="tna-ul tna-ul--spaced">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pulvinar molestie turpis at tristique. Quisque elementum turpis vitae interdum blandit. Nullam euismod egestas lorem.</li>
<li>Aliquam id est id nulla eleifend feugiat eu euismod neque. Sed nec imperdiet felis, ut posuere dolor. Cras dapibus ligula aliquet, mattis libero quis, tristique augue. Donec posuere tincidunt condimentum.</li>
<li>Sed pulvinar lacus a magna iaculis commodo. Pellentesque congue ex nunc, maximus tincidunt risus tincidunt eu. Nunc consequat, ligula a finibus placerat, mi risus rhoncus lacus, in gravida justo lorem ut augue. Morbi quis feugiat nunc.</li>
</ul>Ordered lists
HTML
<ol class="tna-ol">
<li>Alpha</li>
<li>Beta</li>
<li>Gamma</li>
</ol>Description lists
The description lists can be plain or contain icons.
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>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.
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.
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&font=museo&font_size=48" alt="An example image containing the text '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&font=museo&font_size=48" alt="An example image containing the text '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&font=museo&font_size=48" alt="An example image containing the text '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>Dashed lists
Dashed unordered lists
HTML
<ul class="tna-ul tna-ul--dashed">
<li>Alpha</li>
<li>Beta</li>
<li>Gamma</li>
</ul>Dashed ordered lists
HTML
<ol class="tna-ol tna-ol--dashed">
<li>Alpha</li>
<li>Beta</li>
<li>Gamma</li>
</ol>Plain lists
Plain unordered lists
HTML
<ul class="tna-ul tna-ul--plain">
<li>Alpha</li>
<li>Beta</li>
<li>Gamma</li>
</ul>Plain ordered lists
HTML
<ol class="tna-ol tna-ol--plain">
<li>Alpha</li>
<li>Beta</li>
<li>Gamma</li>
</ol>Plain description lists
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>Plain card lists
Cards don't require an image. It could be benificial to use them for a list of pages.
HTML
<div class="tna-section tna-!--no-padding-bottom">
<ul class="tna-container">
<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>
</div>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.
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, you can 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.
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>