Description list

Label and value pairs, such as the properties of a record.

CSS only components/dl.css

Invoice details

Client: Novama s.r.o.
Due: 12 October 2026
Status: Paid

<dl class="dsgn-dl" style="max-inline-size: 32rem">
  <div><dt>Client</dt><dd>Novama s.r.o.</dd></div><div><dt>Due</dt><dd>12 October 2026</dd></div>
  <div><dt>Status</dt><dd><span class="dsgn-badge" data-intent="success">Paid</span></dd></div>
</dl>

Usage

Two columns (label 1 : value 2) with a hairline between rows; row padding = row-pad-y, the same rhythm as Table and List. Below 28rem of its own width it stacks label over value (container query, so it works in a narrow sidebar on a wide screen too). data-layout="stacked" forces the stacked form.

Details

Classes: .dsgn-dl .dsgn-badge
Tokens used: --dsgn-border --dsgn-font-sans --dsgn-font-size-body-s --dsgn-line-height-body-s --dsgn-line-height-caption --dsgn-line-separator --dsgn-row-pad-y --dsgn-space-16 --dsgn-space-2 --dsgn-text --dsgn-text-muted
In Figma: Description list · Description row
Import alone: dsgn.systems/components/dl.css