Description list
Label and value pairs for a detail page, such as an order or a customer. A semantic dl in three layouts.
Stacked
The default. A muted label above each value. Wrap each label and value in a div.
- Order
- #110963
- Customer
- Emma Wilson
- emma.wilson@example.com
- Shipping address
- 12 Harbour Street, Unit 4, Wellington 6011
- Coupon
- Note
<dl class="desc">
<div><dt>Order</dt><dd>#110963</dd></div>
<div><dt>Customer</dt><dd>Emma Wilson</dd></div>
<div><dt>Email</dt><dd>emma.wilson@example.com</dd></div>
<div><dt>Shipping address</dt><dd>12 Harbour Street, Unit 4, Wellington 6011</dd></div>
<div><dt>Coupon</dt><dd></dd></div>
<div><dt>Note</dt><dd data-empty></dd></div>
</dl>Inline
data-layout="inline" puts the label on the left. Under 40rem it stacks again.
- Order
- #110963
- Customer
- Emma Wilson
- emma.wilson@example.com
- Shipping address
- 12 Harbour Street, Unit 4, Wellington 6011
- Coupon
- Note
<dl class="desc" data-layout="inline">
<div><dt>Order</dt><dd>#110963</dd></div>
<div><dt>Customer</dt><dd>Emma Wilson</dd></div>
<div><dt>Email</dt><dd>emma.wilson@example.com</dd></div>
<div><dt>Shipping address</dt><dd>12 Harbour Street, Unit 4, Wellington 6011</dd></div>
<div><dt>Coupon</dt><dd></dd></div>
<div><dt>Note</dt><dd data-empty></dd></div>
</dl>Grid
data-layout="grid" fills the width with as many columns as fit, at least 14rem each.
- Order
- #110963
- Customer
- Emma Wilson
- emma.wilson@example.com
- Shipping address
- 12 Harbour Street, Unit 4, Wellington 6011
- Coupon
- Note
<dl class="desc" data-layout="grid">
<div><dt>Order</dt><dd>#110963</dd></div>
<div><dt>Customer</dt><dd>Emma Wilson</dd></div>
<div><dt>Email</dt><dd>emma.wilson@example.com</dd></div>
<div><dt>Shipping address</dt><dd>12 Harbour Street, Unit 4, Wellington 6011</dd></div>
<div><dt>Coupon</dt><dd></dd></div>
<div><dt>Note</dt><dd data-empty></dd></div>
</dl>Dividers
data-divided adds a line between rows. It works with every layout.
- Order
- #110963
- Customer
- Emma Wilson
- emma.wilson@example.com
- Shipping address
- 12 Harbour Street, Unit 4, Wellington 6011
- Coupon
- Note
<dl class="desc" data-layout="inline" data-divided>
<div><dt>Order</dt><dd>#110963</dd></div>
<div><dt>Customer</dt><dd>Emma Wilson</dd></div>
<div><dt>Email</dt><dd>emma.wilson@example.com</dd></div>
<div><dt>Shipping address</dt><dd>12 Harbour Street, Unit 4, Wellington 6011</dd></div>
<div><dt>Coupon</dt><dd></dd></div>
<div><dt>Note</dt><dd data-empty></dd></div>
</dl>Long values
Values wrap, even a string with no spaces.
- Tracking URL
- https://tracking.example.com/parcels/9f8e7d6c5b4a39281706f5e4d3c2b1a09f8e7d6c5b4a3928
- Delivery note
- Leave with the neighbour at number 14 if nobody answers, and ring the bell twice because it is quiet.
<dl class="desc" data-layout="inline">
<div><dt>Tracking URL</dt><dd>https://tracking.example.com/parcels/9f8e7d6c5b4a39281706f5e4d3c2b1a09f8e7d6c5b4a3928</dd></div>
<div><dt>Delivery note</dt><dd>Leave with the neighbour at number 14 if nobody answers, and ring the bell twice because it is quiet.</dd></div>
</dl>Behavior
Pure CSS, no script. An empty dd shows a muted dash.
A dd that holds only whitespace is not empty for
CSS, so mark it with data-empty.
Attributes
| Attribute / element | Values | Description |
|---|---|---|
dl. | The list. Each pair sits in a div. | |
dt | Label, muted and small | |
dd | Value. Long text wraps. | |
data-layout | inline, grid (default stacked) | Label on the left, or several columns |
data-divided | present / absent | Lines between rows |
dd[data-empty] | present / absent | Shows a dash for a dd with only whitespace |