Description List shows a title and a descriptor in a row
.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.
<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>
.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.
<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>