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>