Description list

How to use it

Use to summarise one record as label/value pairs, such as an order, an invoice or an account profile. Keep labels short and values plain; for many records that share the same fields, use a table instead so they can be compared. Replace the heading and pairs with your data -- the layout switches from two columns to stacked labels below 30rem with no extra classes.

Accessibility

Uses a native <dl> with each <dt>/<dd> pair grouped in a <div> (valid HTML), so screen readers expose term-and-description pairs and announce the list size. The heading names the record, and the content order is the same in the two-column and stacked layouts, so reading and visual order never diverge. There are no interactive parts. Muted labels (#475569) and dark values (#0f172a) on white are 7.6:1 and 17.9:1.

Source (copy-ready)

Copy code

<section class="dcl-desclist" aria-labelledby="dcl-desclist-title">
  <h3 class="dcl-desclist__title" id="dcl-desclist-title">Order 48213</h3>
  <dl class="dcl-desclist__list">
    <div class="dcl-desclist__row"><dt class="dcl-desclist__term">Status</dt><dd class="dcl-desclist__value">Shipped</dd></div>
    <div class="dcl-desclist__row"><dt class="dcl-desclist__term">Placed on</dt><dd class="dcl-desclist__value"><time datetime="2026-11-02">2 November 2026</time></dd></div>
    <div class="dcl-desclist__row"><dt class="dcl-desclist__term">Customer</dt><dd class="dcl-desclist__value">Hannah Weber</dd></div>
    <div class="dcl-desclist__row"><dt class="dcl-desclist__term">Ship to</dt><dd class="dcl-desclist__value">14 Harbour Road, Apartment 3B, Portsmouth PO1 3AB</dd></div>
    <div class="dcl-desclist__row"><dt class="dcl-desclist__term">Total</dt><dd class="dcl-desclist__value">&pound;86.40 (3 items)</dd></div>
  </dl>
</section>
<style>
.dcl-desclist { max-width: 36rem; padding: 1rem; border: 1px solid #e2e8f0; border-radius: 0.5rem; font: inherit; color: #0f172a; background-color: #ffffff; }
.dcl-desclist__title { margin: 0 0 0.5rem; font-size: 1.125rem; color: #0f172a; background-color: #ffffff; }
.dcl-desclist__list { margin: 0; }
.dcl-desclist__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.125rem; padding: 0.625rem 0; border-top: 1px solid #e2e8f0; }
.dcl-desclist__term { font-size: 0.875rem; font-weight: 600; color: #475569; background-color: #ffffff; }
.dcl-desclist__value { margin: 0; min-width: 0; overflow-wrap: anywhere; color: #0f172a; background-color: #ffffff; }
@media (min-width: 30rem) {
  .dcl-desclist__row { grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); gap: 1rem; }
}
</style>