# 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>