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>