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>