Description List
Easily create nice looking description lists, which come in different styles.
Usage
Add the .uk-description-list
class to display terms and descriptions below each other.
<dl class="uk-description-list">
<dt></dt>
<dd></dd>
</dl>
Copy to clipboard
-
- Description term
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Description term
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- Description term
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-
<dl class="uk-description-list"> <dt>Description term</dt> <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</dd> <dt>Description term</dt> <dd> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </dd> <dt>Description term</dt> <dd> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </dd> </dl>
Divider modifier
Add the .uk-description-list-divider
class to add a horizontal line between list items.
<dl class="uk-description-list uk-description-list-divider">
<dt></dt>
<dd></dd>
</dl>
Copy to clipboard
-
- Description term
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Description term
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- Description term
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-
<dl class="uk-description-list uk-description-list-divider"> <dt>Description term</dt> <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</dd> <dt>Description term</dt> <dd> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </dd> <dt>Description term</dt> <dd> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </dd> </dl>
- On This Page
- Usage
- Divider modifier