# Description list

> A record's details as label and value pairs, in two columns that stack on compact screens.

## Anatomy

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`](/helpers.html.md#display) narrower than 600px, each label sits above its value. For big numbers in tiles, use [stat](/stat.html.md) 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`.

| Token | Default |
| --- | --- |
| `--md-comp-description-list-label-width` | minmax(8rem, 33%) |
| `--md-comp-description-list-divider-color` | `--md-sys-color-outline-variant` |
| `--md-comp-description-list-padding` | 12px |