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
- list item
- list item
<ol class="List List--dec">
<li>list item</li>
<li>list item</li>
</ol>
Check
- list item
- list item
<ol class="List List--check">
<li>list item</li>
<li>list item</li>
</ol>
Double Space
- list item
- 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>
Link lists
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>
Menu
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>