Use a List for unordered or ordered lists of text.
Unordered List
Use the base class pier-list that wraps elements with the class pier-list__item that wraps an element with the class pier-list__content for the List item content.
Use the modifier classes pier-list--sm, pier-list--md, or pier-list--lg to change the size of the List.
Small List Item
Small List Item
Small List Item
Medium List Item
Medium List Item
Medium List Item
Large List Item
Large List Item
Large List Item
HTML markup
<ul class="pier-list pier-list--sm"><li class="pier-list__item"><div class="pier-list__content">Small List Item</div></li><li class="pier-list__item"><div class="pier-list__content">Small List Item</div></li><li class="pier-list__item"><div class="pier-list__content">Small List Item</div></li></ul><ul class="pier-list pier-list--md"><li class="pier-list__item"><div class="pier-list__content">Medium List Item</div></li><li class="pier-list__item"><div class="pier-list__content">Medium List Item</div></li><li class="pier-list__item"><div class="pier-list__content">Medium List Item</div></li></ul><ul class="pier-list pier-list--lg"><li class="pier-list__item"><div class="pier-list__content">Large List Item</div></li><li class="pier-list__item"><div class="pier-list__content">Large List Item</div></li><li class="pier-list__item"><div class="pier-list__content">Large List Item</div></li></ul>
Dark
Use the modifier class pier-list--dark to change the style of the List for dark UI themes.
