# Description list

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

## Usage

There is no component class necessary to create a description list, but UIkit provides a couple of modifier classes to display the list in a different style. The modifiers of the Description list component are not combinable with each other.

### Description list horizontal

Add the `.uk-description-list-horizontal` class to display terms and descriptions side by side.

#### Example

Description lists
  A description list defines terms and their corresponding descriptions.
Lorem ipsum
  Dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
A long term is truncated
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

### Markup

    <dl class="uk-description-list-horizontal">
        <dt>...</dt>
        <dd>...</dd>
    </dl>

### Responsive behavior

In narrower viewports, like phones, the style will change back to the default stacked description list.

### Description list line

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

#### Example

Description lists
  A description list defines terms and their corresponding descriptions.
Lorem ipsum
  Dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim
  Ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

### Markup

    <dl class="uk-description-list-line">...</dl>