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 ul or ol element.
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 li element:
<i class="chevron"></i>Want a rounded list? Add the round class to your ul or ol element.
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 list-divider class.
For split list items, add the split-list class to your ul or ol element, and then use Foundation's standard grid inside your li elements.
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.