Lil Regie's front-end workshop


Horizontal list

Instead of running vertically, this list runs horizontally at larger breakpoints. All the markers are removed.

Example

0 375 640 768 1024

Open in a new window

Code sample

1
2
3
4
5
6
7
8
<ol class="list_horizontal">
  <li>First item</li>
  <li>
    Second item<br>
    With text on the next line
  </li>
  <li>Third item</li>
</ol>

Usage notes

  • No elements are allowed between the <ol> or <ul> and <li> elements.

  • At small breakpoints, this list behaves like list_stripped except the items are centered.

  • At large breakpoints, all items are aligned to the top.

Source files