List

Easily create nicely looking lists, which come in different styles.

Usage

To apply this component, add the .uk-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="uk-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 .uk-list class. The modifiers of the List component are not combinable with each other.

List line

Add the .uk-list-line class to separate list items with lines.

Example

• List item 1
• List item 2
• List item 3

Markup

<ul class="uk-list uk-list-line">...</ul>

List striped

Add zebra-striping to a list using the .uk-list-striped class.

Example

• List item 1
• List item 2
• List item 3

Markup

<ul class="uk-list uk-list-striped">...</ul>

List space

Add the .uk-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="uk-list uk-list-space">...</ul>