The mobile-lists component makes unordered and ordered list elements full-width and taller for easier touch-clicking.
Just add the
mobile-list class to your
Want icons in your unordered list? Just tack on the
with-icons class to your
ul.mobile-list element, and place your icons inside the list links.
The icons above are from the Foundation Icons font set.
Need a chevron at the end of your list item? Add the
with-chevrons class to your
ul.mobile-list element, and add this inside your
Want a rounded list? Add the
round class to your
Sometimes, you may have lists sub-divided into groups of list elements. Foundation Mobile includes some default styles for
li elements within mobile-lists with the
For split list items, add the
split-list class to your
ol element, and then use Foundation's standard grid inside your
You may also nest a grid inside one of the links. Below, we have a table with two columns within the first link.
If you want to use list dividers in a split-list, you must add a div with the
row class within the
li elements, instead of adding the
row class to the
li elements directly.
This is due to CSS
display: table-cell's lack of a
colspan property. If using the
row class directly on the
li elements, the list-divider could only span the width of the first split-list column.