1.8 #Atoms.Lists List
Listing content in either horizontal or vertical direction, while supporting all gutter sizes. It is often used in combination with a UL/OL
tag but it is not required.
Examples
Default styling
- Item 1
- Item 2
- Item 3
.List--center
center align list items
- Item 1
- Item 2
- Item 3
.List--right
right align list items
- Item 1
- Item 2
- Item 3
.List--bordered
list with a border
- Item 1
- Item 2
- Item 3
.List--striped
striped list
- Item 1
- Item 2
- Item 3
.List--horizontal
horizontal list
- Item 1
- Item 2
- Item 3
Markup
<ul class="List [modifier class]">
<li class="List-item">Item 1</li>
<li class="List-item">Item 2</li>
<li class="List-item">Item 3</li>
</ul>
Source:
src/components/atoms/list.less
, line 8