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 Clique.UI 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.

Usage

  • Class Description
    .dl-horizontal Modifier to display the dt and dd elements in a horizontal layout.
    .dl-line Modifier to add a line seperator between each item.
  • Horizontal
    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.
    Lorem ipsum dolor sit amet.
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

    Line
    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.
    Lorem ipsum dolor sit amet.
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  • <dl class="dl-horizontal">
        <dt>... </dt>
        <dd>... </dd>
    </dl>
    
    <dl class="dl-line">
        <dt>... </dt>
        <dd>... </dd>
    </dl>