Components

Description list

A <dl> laid out as a two-column grid — an auto-width uppercase ds-dl__term column and a 1fr ds-dl__desc value column. Each pair is one row, divided from the next by a soft rule. Built for key/value detail readouts with tabular figures.

Key / value rows

Uppercase faint terms on the left, ink values on the right. Rows are separated by --ds-rule-soft.

Detail readout
Day rate
€900
Salary
€48,000
Margin
32.5%
Status
Confirmed
<dl class="ds-dl">
  <dt class="ds-dl__term">Day rate</dt><dd class="ds-dl__desc">€900</dd>
  <dt class="ds-dl__term">Salary</dt><dd class="ds-dl__desc">€48,000</dd>
  <dt class="ds-dl__term">Margin</dt><dd class="ds-dl__desc">32.5%</dd>
  <dt class="ds-dl__term">Status</dt><dd class="ds-dl__desc">Confirmed</dd>
</dl>

Long values

The value column wraps; the term column stays on one line.

Wrapping values
Client
Acme Consulting Group International
Note
Rate includes rebilled travel expenses, capped at €200 per day.
<dl class="ds-dl">
  <dt class="ds-dl__term">Client</dt><dd class="ds-dl__desc">Acme Consulting Group International</dd>
  <dt class="ds-dl__term">Note</dt><dd class="ds-dl__desc">Rate includes rebilled travel expenses…</dd>
</dl>

React

The DescriptionList component takes an items array of { term, desc } pairs.

<DescriptionList /> 
import { DescriptionList } from "@diametral/design-system/react";

<DescriptionList
  items={[
    { term: "Day rate", desc: "€900" },
    { term: "Salary", desc: "€48,000" },
    { term: "Margin", desc: "32.5%" },
  ]}
/>