Description List

A native <dl> laid out as a two column grid. Each <dt> sits in the label column with its <dd> beside it, so the values line up all the way down the list.

Standalone

<link rel="stylesheet" href="https://esm.sh/@erikt/ui/description-list.css" />

Default

No class names. Write the list and the terms align.

Name: Ada Lovelace
Role: Mathematician
Known for: The first published algorithm for a machine

<dl>
  <dt>Name</dt>
  <dd>Ada Lovelace</dd>
  <dt>Role</dt>
  <dd>Mathematician</dd>
  <dt>Known for</dt>
  <dd>The first published algorithm for a machine</dd>
</dl>

Grouped pairs

A <div> is the one element a <dl> may wrap its pairs in. Use it when a row needs its own border, background, or click target. The wrapper spans both tracks and re-uses them with grid-template-columns: subgrid, so the columns stay aligned across every row.

Plan: Team
Seats: 24 of 30 used
Renews: 1 April 2026

<dl>
  <div>
    <dt>Plan</dt>
    <dd>Team</dd>
  </div>
  <div>
    <dt>Seats</dt>
    <dd>24 of 30 used</dd>
  </div>
</dl>

Label width

The label column is max-content by default, so it is as wide as the longest term. Set --ui-description-list-label to pin it instead.

Status: Shipped
Carrier: PostNord
Tracking: SE1148203372

<dl style="--ui-description-list-label: 8rem">
  <dt>Status</dt>
  <dd>Shipped</dd>
  <dt>Carrier</dt>
  <dd>PostNord</dd>
</dl>

Several values

A term may carry more than one <dd>. The extra values stack under the first one instead of flowing back into the label column.

Maintainers: Isaac Newton; Ada Lovelace
Licence: MIT

<dl>
  <dt>Maintainers</dt>
  <dd>Isaac Newton</dd>
  <dd>Ada Lovelace</dd>
  <dt>Licence</dt>
  <dd>MIT</dd>
</dl>

API reference

Type	Classes / attributes	What it does
Label width	`--ui-description-list-label: 8rem`	Fixed width for the label column instead of sizing to content