1.8 #Atoms.Lists List

Toggle example guides Toggle HTML markup

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: components/atoms/list.less, line 8