Lists

Overview

Lists are a great way of grouping related items such as links, images, and/or products as well as providing an accessible way for users to navigate through content.

Alignments

Horizontal - Inline Items

Lists that have their items aligned horizontally are typically used for (but not restricted to) top-level navigation menus, logos, products, and/or breadcrumbs. Apply the .am-list__item--inline class to list items:

<ul>
  <li class="am-list__item am-list__item--inline"><a href="#">Item 1</a></li>
  <li class="am-list__item am-list__item--inline"><a href="#">Item 2</a></li>
  <li class="am-list__item am-list__item--inline"><a href="#">Item 3</a></li>
</ul>

Horizontal - Float Items

In situations where inline horizontal items is not an option, e.g. you want bullets to show, the .am-pull--left utility class can be used:

<ul class="am-list--disc">
  <li class="am-list__item am-pull--left"><a href="#">Item 1</a></li>
  <li class="am-list__item am-pull--left"><a href="#">Item 2</a></li>
  <li class="am-list__item am-pull--left"><a href="#">Item 3</a></li>
</ul>

Vertical

Lists that have their items aligned vertically are typically used for (but not restricted to) sub-level navigation menus.

<ul class="am-list--disc">
  <li class="am-list__item"><a href="#">Item 1</a></li>
  <li class="am-list__item"><a href="#">Item 2</a></li>
  <li class="am-list__item"><a href="#">Item 3</a></li>
</ul>

Bullets

By default, the Pattern Library will apply list-style: none; on all <ul> and <ol> elements. Use the following classes to apply bullets on an entire list:

.am-list--disc
.am-list--circle
.am-list--square
<ul class="am-list--disc">
  <li class="am-list__item"><a href="#">Item 1</a></li>
  <li class="am-list__item"><a href="#">Item 2</a></li>
  <li class="am-list__item"><a href="#">Item 3</a></li>
</ul>

<ul class="am-list--circle">
  <li class="am-list__item"><a href="#">Item 1</a></li>
  <li class="am-list__item"><a href="#">Item 2</a></li>
  <li class="am-list__item"><a href="#">Item 3</a></li>
</ul>

<ul class="am-list--square">
  <li class="am-list__item"><a href="#">Item 1</a></li>
  <li class="am-list__item"><a href="#">Item 2</a></li>
  <li class="am-list__item"><a href="#">Item 3</a></li>
</ul>

Or apply a bullet to a specific item in a list:

<ul>
  <li class="am-list__item am-pull--left">Item 1</li>
  <li class="am-list__item am-pull--left am-list--disc"><a href="#">Item 2</a></li>
  <li class="am-list__item am-pull--left">Item 3</li>
</ul>

<ul>
  <li class="am-list__item"><a href="#">Item 1</a></li>
  <li class="am-list__item"><a href="#">Item 2</a></li>
  <li class="am-list__item am-list--circle">Item 3</li>
</ul>