Lists

Basic list styling, using BEM notation.

  • list item
  • list item
<ul class="List">
	<li>list item</li>
	<li>list item</li>
</ul>

Bullets

  • list item
  • list item
<ul class="List List--disc">
	<li>list item</li>
	<li>list item</li>
</ul>

Numbered

  1. list item
  2. list item
<ol class="List List--dec">
	<li>list item</li>
	<li>list item</li>
</ol>

Check

  1. list item
  2. list item
<ol class="List List--check">
	<li>list item</li>
	<li>list item</li>
</ol>

Double Space

  1. list item
  2. list item
<ol class="List List--double">
	<li>list item</li>
	<li>list item</li>
</ol>

Inline

  • list item
  • list item
<ul class="List List--inline">
	<li>list item</li>
	<li>list item</li>
</ul>

Small bold

A slightly smaller and bolder list with no link underlines.

<ul class="List List--small-bold">
	<li><a href="#">list item</a></li>
	<li><a href="#">list item</a></li>
</ul>

Padding

Adds default padding around the list items for larger click areas.

<ul class="List List--padding">
	<li><a href="#">list item</a></li>
	<li><a href="#">list item</a></li>
</ul>

Adds default padding around the list items for larger click areas.

<ul class="List List__menu">
	<li>
		<a href="#">
			<p class="List__menu--title">list item</p>
			<p class="List__menu--description">list item description</p>
		</a>
	</li>
	<li>
		<a href="#">
			<p class="List__menu--title">list item</p>
			<p class="List__menu--description">list item description</p>
		</a>
	</li>
</ul>