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.
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>