Description list

A dl.description-list shows a record's details as label and value pairs, such as an order's status, address and total.

Each <dt> is a label, and the <dd> after it is its value. From Medium widths up, labels take the first column and a divider runs above each pair. At Compact widths, and inside a .query-container narrower than 600px, each label sits above its value. For big numbers in tiles, use stat instead.

Status

Shipped

Ship to

Alvin Lee, 12 Harbor Road, Portland

Total

$87.00

<dl class="description-list">
  <dt>Status</dt><dd>Shipped</dd>
  <dt>Ship to</dt><dd>Alvin Lee, 12 Harbor Road, Portland</dd>
  <dt>Total</dt><dd>$87.00</dd>
</dl>

Groups and several values

You can wrap each pair in a <div>, as HTML allows. The wrapper adds no box. To give a label several values, list them as consecutive <dd> elements. They stack in the value column with no divider between them.

<dl class="description-list">
  <div>
    <dt>Contacts</dt>
    <dd>ada@example.com</dd>
    <dd>+1 555 0100</dd>
  </div>
</dl>

Tokens

Override these on the .description-list.