We're sorry, but this feature is not yet available. We are working hard to make it happen as soon as possible. Thank you for your patience and understanding. Please check back later for updates.
The element you clicked is for demonstration purposes only and does not lead to actual content. Everything you see here is a simulation intended to demonstrate how the UI elements might look and behave in a real application.
Easily create nice looking description lists, which come in different styles.
Note If you are not using Tailwind
CSS, you can skip this step. On your tailwind.config.js file, add the Description
List component within the ui() plugin.
import ui from "franken-ui";
ui({
components: {
'description-list': {
hooks: {}
}
}
}),Add the .uk-description-list class to display terms and descriptions below each other.
<dl class="uk-description-list">
<dt></dt>
<dd></dd>
</dl><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>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><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>Learn more about using hooks.
| Hook Name | Affected Classes |
|---|---|
hook-term | .uk-description-list > dt |
hook-description | .uk-description-list > dd |
hook-divider-term | .uk-description-list-divider > dt:nth-child(n+2) |
hook-misc | * |