List
Easily create nicely looking lists, which come in different styles.
Usage
To apply this component, add the .f-list
class to an unordered or ordered list. The list will now display without any spacing or list-style.
Example
- List item 1
- List item 2
- List item 3
Markup
<ul class="f-list">
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
Modifiers
To display the list in a different style, just add a modifier class to the the .f-list
class. The modifiers of the List component are not combinable with each other.
List line
Add the .f-list-line
class to separate list items with lines.
Example
- List item 1
- List item 2
- List item 3
Markup
<ul class="f-list f-list-line">...</ul>
List striped
Add zebra-striping to a list using the .f-list-striped
class.
Example
- List item 1
- List item 2
- List item 3
Markup
<ul class="f-list f-list-striped">...</ul>
List space
Add the .f-list-space
class to increase the spacing between list items.
Example
- This modifier may be useful for for list items with multiple lines of text.
- Lorem ipsum dolor sit amet, consectetur adipisicing elit.
- Ut enim ad minim veniam, quis nostrud exercitation ullamco.
Markup
<ul class="f-list f-list-space">...</ul>
List inline
Add the .f-list-inline
class to add an inline list.
Example
- List item 1
- List item 2
- List item 3
Markup
<ul class="f-list f-list-inline">...</ul>