Unordered List
The unordered list creates a vertical list of items with a standardized padding and branded bullets. It also removes padding from the last item in the list.
- Lorem ipsum dolor sit amet consectetur adipiscing elit, sed do eiusmod tempor.
- Duis aute irure dolor in prehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
- Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut.
- Lorem ipsum dolor sit amet consectetur adipiscing elit, sed do eiusmod tempor.
<ul class="o-list-unordered">
<li class="o-list-unordered__item">Lorem ipsum dolor sit amet consectetur adipiscing elit, sed do eiusmod tempor.</li>
<li class="o-list-unordered__item">Duis aute irure dolor in prehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</li>
<li class="o-list-unordered__item">Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut.</li>
<li class="o-list-unordered__item">Lorem ipsum dolor sit amet consectetur adipiscing elit, sed do eiusmod tempor.</li>
</ul>
Ordered List
The ordered list creates a vertical list with items with a standardized padding and branded numbers. It also removes padding from the last item in the list.
- Lorem ipsum dolor sit amet consectetur adipiscing elit, sed do eiusmod tempor.
- Duis aute irure dolor in prehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
- Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut.
- Lorem ipsum dolor sit amet consectetur adipiscing elit, sed do eiusmod tempor.
<ul class="o-list-ordered">
<li class="o-list-ordered__item">Lorem ipsum dolor sit amet consectetur adipiscing elit, sed do eiusmod tempor.</li>
<li class="o-list-ordered__item">Duis aute irure dolor in prehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</li>
<li class="o-list-ordered__item">Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut.</li>
<li class="o-list-ordered__item">Lorem ipsum dolor sit amet consectetur adipiscing elit, sed do eiusmod tempor.</li>
</ul>
List Pack
An inline list with items that have right and bottom margins for things like button groups and other common patterns where we want stacking, margin support and the an inner container to add negative spacing to the object but maintains the default spacing so other objects can keep their :last-child operations.
<div class="o-list-pack">
<ul class="o-list-pack__list">
<li class="o-list-pack__item">
<a href="#" class="c-button">Trees</a>
</li>
<li class="o-list-pack__item">
<a href="#" class="c-button">Mountain</a>
</li>
<li class="o-list-pack__item">
<a href="#" class="c-button">Grass</a>
</li>
</ul>
</div>