Description List

Description List shows a title and a descriptor in a row

Class .wb-description-list

Use a .wb-description-list when you want to a set of items and their description next to each other. The descriptor can be anything, like links, tables, text, etc. Note that .wb-description-list should be applied to the parent <dl>, while the title should be in <dt>s and descritors in <dd>s.

Item 1
What is this
Item 2
What is that
Item 3
Call me Ishmael. Some years ago — never mind how long precisely — having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world.
Item 4
What is there
<dl class='wb-description-list'>
  <dt>Item 1</dt>
  <dd>What is this</dd>
  <dt>Item 2</dt>
  <dd>What is that</dd>
  <dt>Item 3</dt>
  <dd>
    Call me Ishmael. Some years ago — never mind how long precisely —
    having little or no money in my purse, and nothing particular to interest
    me on shore, I thought I would sail about a little and see the watery part
    of the world.
  </dd>
  <dt>Item 4</dt>
  <dd>What is there</dd>
</dl>

Modifier .wb-description-list--rows

Use .wb-description-list--row add dividers between each row. When using this modifier, the content in each <dt> needs to be wrapped with a <div> or another parent element for the divider to placed correctly between rows.

Item 1
What is this
Item 2
What is that
Item 3
Call me Ishmael. Some years ago — never mind how long precisely — having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world.
Item 4
What is there
<dl class='wb-description-list wb-description-list--rows'>
  <dt>Item 1</dt>
  <dd><div>What is this</div></dd>
  <dt>Item 2</dt>
  <dd><div>What is that</div></dd>
  <dt>Item 3</dt>
  <dd>
    <div>
       Call me Ishmael. Some years ago — never mind how long precisely —
       having little or no money in my purse, and nothing particular to interest
       me on shore, I thought I would sail about a little and see the watery part
       of the world.
    </div>
  </dd>
  <dt>Item 4</dt>
  <dd><div>What is there</div></dd>
</dl>