--- layout: default title: "Lists" date: 2013-05-17 23:24:04 --- Lists ===== You can style any list by adding the class `.list` to the `ul` or `div` container, and the class `.list-item` to every single item in the list. The default list item does not have any padding, in order to allow custom styling.
~~~html ~~~ Padding ------- The default list comes without padding. Add `.list-padding` to the list items to give them a default padding.
~~~html ~~~ Variations ---------- Gray list.
~~~html ~~~ Sizes ----- Add a size to the main list class to change the size of the list. ~~~html ~~~ This is a `.list-small`. This is a normal list without an extra size class. This is a `.list-medium`. This is a `.list-large`.
Icons ----- You can add a `list-icon` class to automatically flow the icon to the right of the list.
~~~html ~~~ Linked Lists ---- For those times when you want a link to occupy the entire list-item tag.
~~~html ~~~ Linked Lists + Clickable Icons ---- For those times when you want a link to occupy the entire list-item tag, **except** an icon to the right, to function as a button. Also note a `div` can be used instead of an `a`, for the case of a disabled link.
~~~html ~~~ Because the link's width is set with a percentage, this will break on lists with a width of less than about 375px. In that case, use `skinny`, as below.
~~~html ~~~