List

The list component represents variations on the unordered list.

Overall usage

Used to organise information in a logical, linear formation.

Accessibility

N/A

Basic unordered list

Used to present information in an unordered linear formation.

List item 1
List item 2
List item 3
List item 4

<ul>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
  <li>List item 4</li>
</ul>

Basic ordered list

Used to present information in a ordered linear formation.

List item 1
List item 2
List item 3
List item 4

<ol>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
  <li>List item 4</li>
</ol>

.list--unstyled

Used to display an unordered list without bullets.

List item 1
List item 2
List item 3
List item 4

<ul class="list--unstyled">
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
  <li>List item 4</li>
</ul>

.list--inline

Used to display an unordered list with each list item inline.

List item 1
List item 2
List item 3
List item 4

<ul class="list--inline">
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
  <li>List item 4</li>
</ul>

.list--inline-greater

Used to display "greater-than" symbols between inline list items.

Home
Events
Event 1

<ul class="list--inline-greater">
  <li><a href="#">Home</a></li>
  <li><a href="#">Events</a></li>
  <li class="list-item-active">Event 1</li>
</ul>

.list--inline-pipe

Used to display "pipe" symbols between inline list items.

Home
Event
Event 1

<ul class="list--inline-pipe">
  <li><a href="#">Home</a></li>
  <li><a href="#">Events</a></li>
  <li class="list-item-active">Event 1</li>
</ul>

.list--inline-slash

Used to display "slash" symbols between inline list items.

Home
Events
Event 1

<ul class="list--inline-slash">
  <li><a href="#">Home</a></li>
  <li><a href="#">Events</a></li>
  <li class="list-item-active">Event 1</li>
</ul>

.list--pagination

Used to display an inline list in a form that can be used for pagination.

<ul class="list--pagination">
  <li><a href="#"><span class="fas fa-chevron-left" aria-hidden="true"></span><span class="u-hidden"> Go to previous page</span></a></li>
  <li class="list-item-active"><a href="#"><span class="u-hidden">Currently on page </span>1</a></li>
  <li><a href="#"><span class="u-hidden">Go to page</span>2</a></li>
  <li><a href="#"><span class="u-hidden">Go to page</span>3</a></li>
  <li><a href="#"><span class="u-hidden">Go to page</span>4</a></li>
  <li><a href="#"><span class="u-hidden">Go to page</span>5</a></li>
  <li><a href="#"><span class="fas fa-chevron-right" aria-hidden="true"></span><span class="u-hidden"> Go to next page</span></a></li>
</ul>

.list--navigation

Used to display a list for navigation purposes.

<ul class="list--navigation">
  <li><a href="#">List item 1</a></li>
  <li><b>List item 2</b></li>
  <li><a href="#">List item 3</a></li>
  <li><a href="#">List item 4</a></li>
</ul>

Icons can be placed inside the list.

<ul class="list--navigation">
  <li><a href="#"><span class="fas fa-home c-gray-40" aria-hidden="true"></span>List item 1</a></li>
  <li class="list-item-active"><b><span class="fas fa-envelope" aria-hidden="true"></span>List item 2</b></li>
  <li><a href="#"><span class="fas fa-file c-primary" aria-hidden="true"></span>List item 3</a></li>
  <li><a href="#"><span class="fas fa-chevron-right c-secondary" aria-hidden="true"></span>List item 4</a></li>
  <li><a href="#"><span class="fas fa-chevron-right c-black" aria-hidden="true"></span>List item 5</a></li>
  <li><a href="#"><span class="fas fa-chevron-right c-red" aria-hidden="true"></span>List item 6</a></li>
  <li><a href="#"><span class="fas fa-chevron-right c-green" aria-hidden="true"></span>List item 7</a></li>
</ul>

Components