Description list

wu-desc-list styles a <dl> of terms and descriptions. Wrap each pair in a <div> for grouped and divided rows.

Class or variable	Effect
`wu-desc-list`	Root. Stacked: muted term above its description
`horizontal`	Terms in a column beside their descriptions
`divided`	Lines between `<div>` groups
`bordered`	Table look: cell lines, terms on the alternate background, terms beside their descriptions
`columns`	Several pairs per row; wrap each pair in a `<div>`
`--wu-desc-list--TermWidth`	Width of the term column in `horizontal` and `bordered`
`--wu-desc-list--Columns`	Most pairs per row in `columns`, 3 by default
`--wu-desc-list--ColumnWidth`	Narrowest pair in `columns` before a row holds fewer pairs, 10rem by default

Stacked

Plan: Team, billed yearly
Seats: 5 of 10 used
Renewal: March 1

<dl class="wu-desc-list">
  <dt>Plan</dt>
  <dd>Team, billed yearly</dd>
  <dt>Seats</dt>
  <dd>5 of 10 used</dd>
  <dt>Renewal</dt>
  <dd>March 1</dd>
</dl>

Horizontal

Plan: Team, billed yearly
Seats: 5 of 10 used
Billing contact: [email protected]

<dl class="wu-desc-list horizontal">
  <dt>Plan</dt>
  <dd>Team, billed yearly</dd>
  <dt>Seats</dt>
  <dd>5 of 10 used</dd>
  <dt>Billing contact</dt>
  <dd>[email protected]</dd>
</dl>

Divided groups

Company: Northwind Traders
Address: 12 Harbor Road, Suite 4
Phone numbers: Office: 555 0100; Support: 555 0199

<dl class="wu-desc-list horizontal divided">
  <div>
    <dt>Company</dt>
    <dd>Northwind Traders</dd>
  </div>
  <div>
    <dt>Address</dt>
    <dd>12 Harbor Road, Suite 4</dd>
  </div>
  <div>
    <dt>Phone numbers</dt>
    <dd>Office: 555 0100</dd>
    <dd>Support: 555 0199</dd>
  </div>
</dl>

Term width

Status: Active
Owner: Ana Lopez

<dl class="wu-desc-list horizontal" style="--wu-desc-list--TermWidth: 8rem">
  <dt>Status</dt>
  <dd>Active</dd>
  <dt>Owner</dt>
  <dd>Ana Lopez</dd>
</dl>

Bordered

The detail view of admin screens: each term and description in its own cell. Use one description per term.

Order: #10482
Customer: Northwind Traders
Shipping address: 12 Harbor Road, Suite 4
Status: Paid, waiting to ship

<dl class="wu-desc-list bordered">
  <dt>Order</dt>
  <dd>#10482</dd>
  <dt>Customer</dt>
  <dd>Northwind Traders</dd>
  <dt>Shipping address</dt>
  <dd>12 Harbor Road, Suite 4</dd>
  <dt>Status</dt>
  <dd>Paid, waiting to ship</dd>
</dl>

Columns

columns places several pairs in each row, three by default. A row holds fewer pairs when each would be narrower than --wu-desc-list--ColumnWidth, so the list fits a phone without a breakpoint.

Plan: Team, billed yearly
Seats: 5 of 10 used
Renewal: March 1
Owner: Ana Lopez

<dl class="wu-desc-list columns">
  <div>
    <dt>Plan</dt>
    <dd>Team, billed yearly</dd>
  </div>
  <div>
    <dt>Seats</dt>
    <dd>5 of 10 used</dd>
  </div>
  <div>
    <dt>Renewal</dt>
    <dd>March 1</dd>
  </div>
  <div>
    <dt>Owner</dt>
    <dd>Ana Lopez</dd>
  </div>
</dl>

With bordered, each pair becomes a term cell beside its description cell. Set the number of pairs per row with --wu-desc-list--Columns.

Order: #10482
Placed: May 4
Customer: Northwind Traders
Total: $1,240.00

<dl class="wu-desc-list bordered columns" style="--wu-desc-list--Columns: 2">
  <div>
    <dt>Order</dt>
    <dd>#10482</dd>
  </div>
  <div>
    <dt>Placed</dt>
    <dd>May 4</dd>
  </div>
  <div>
    <dt>Customer</dt>
    <dd>Northwind Traders</dd>
  </div>
  <div>
    <dt>Total</dt>
    <dd>$1,240.00</dd>
  </div>
</dl>

Right to left

Terms stay at the inline start, on the right, and column grids fill from the right.

الخطة: فريق، فوترة سنوية
المقاعد: استُخدم 5 من 10

<dl class="wu-desc-list bordered">
  <dt>الخطة</dt>
  <dd>فريق، فوترة سنوية</dd>
  <dt>المقاعد</dt>
  <dd>استُخدم 5 من 10</dd>
</dl>

Load only the description list

@use "@wovenui/components/desc-list";

The description list needs no other component.