Lists

You can style any list by adding the class .list to the ul or div container, and the class .list-item to every single item in the list. The default list item does not have any padding, in order to allow custom styling.

  • Item 1
  • Item 2
  • Item 3
  • Item 4


1<ul class="list">
2    <li class="list-item">Item 1</li>
3    <li class="list-item">Item 2</li>
4    <li class="list-item">Item 3</li>
5    <li class="list-item">Item 4</li>
6</ul>

Padding

The default list comes without padding. Add .list-padding to the list items to give them a default padding.


1<ul class="list">
2    <li class="list-item list-padding"><a href="#">Item 1</a></li>
3    <li class="list-item list-padding"><a href="#">Item 2</a></li>
4    <li class="list-item list-padding"><a href="#">Item 3</a></li>
5    <li class="list-item list-padding"><a href="#">Item 4</a></li>
6</ul>

Variations

Gray list.


1<ul class="list list-gray">
2    <li class="list-item list-padding"><a href="#">Item 1</a></li>
3    <li class="list-item list-padding"><a href="#">Item 2</a></li>
4    <li class="list-item list-padding"><a href="#">Item 3</a></li>
5    <li class="list-item list-padding"><a href="#">Item 4</a></li>
6</ul>

Sizes

Add a size to the main list class to change the size of the list.

1<ul class="list list-SIZE">
2    ...
3</ul>

This is a .list-small.

This is a normal list without an extra size class.

This is a .list-medium.

This is a .list-large.


Icons

You can add a list-icon class to automatically flow the icon to the right of the list.


1<ul class="list">
2    <li class="list-item list-padding"><a href="#">Item 1<i class="icon-angle-right list-icon"></i></a></li>
3    <li class="list-item list-padding"><a href="#">Item 2<i class="icon-angle-right list-icon"></i></a></li>
4    <li class="list-item list-padding"><a href="#">Item 3<i class="icon-angle-right list-icon"></i></a></li>
5    <li class="list-item list-padding"><a href="#">Item 4<i class="icon-angle-right list-icon"></i></a></li>
6</ul>

Linked Lists

For those times when you want a link to occupy the entire list-item tag.


1<ul class="list">
2    <li class="list-item"><a class='list-padding' href="#">Item 1 (no icon)</a></li>
3    <li class="list-item"><a class='list-padding' href="#">Item 2 (with icon)<i class="icon-angle-right list-icon"></i></a></li>
4    <li class="list-item"><a class='list-padding' href="#">Item 3<i class="icon-angle-right list-icon"></i></a></li>
5    <li class="list-item"><a class='list-padding' href="#">Item 4<i class="icon-angle-right list-icon"></i></a></li>
6</ul>

Linked Lists + Clickable Icons

For those times when you want a link to occupy the entire list-item tag, except an icon to the right, to function as a button. Also note a div can be used instead of an a, for the case of a disabled link.


1<ul class="list">
2    <li class="list-item has-icon-outside-link"><a class='list-padding' href="#">Item 1</a><i class="icon-trash icn-round list-icon"></i></li>
3    <li class="list-item has-icon-outside-link"><div class='list-padding' href="#">Item 2</div><i class="icon-trash icn-round list-icon"></i></li>
4    <li class="list-item has-icon-outside-link"><a class='list-padding' href="#">Item 3</a><i class="icon-trash icn-round list-icon"></i></li>
5    <li class="list-item"><a class='list-padding' href="#">Item 4<i class="icon-angle-right list-icon"></i></a></li>
6    <li class="list-item has-icon-outside-link"><a class='list-padding' href="#">Item 5</a><i class="icon-trash icn-round list-icon"></i></li>
7</ul>

Because the link’s width is set with a percentage, this will break on lists with a width of less than about 375px. In that case, use skinny, as below.


1<ul class="list list-small list-skinny" style='width: 200px;'>
2    <li class="list-item has-icon-outside-link"><a class='list-padding' href="#">Item 1</a><i class="icon-trash icn-round list-icon"></i></li>
3    <li class="list-item has-icon-outside-link"><a class='list-padding' href="#">Item 2</a><i class="icon-trash icn-round list-icon"></i></li>
4    <li class="list-item has-icon-outside-link"><a class='list-padding' href="#">Item 3</a><i class="icon-trash icn-round list-icon"></i></li>
5    <li class="list-item"><a class='list-padding' href="#">Item 4<i class="icon-angle-right list-icon"></i></a></li>
6    <li class="list-item has-icon-outside-link"><a class='list-padding' href="#">Item 5</a><i class="icon-trash icn-round list-icon"></i></li>
7</ul>