Description list

A description list presents compact labelled facts. Use semantic <dl>, <dt>, and <dd> elements, with one wrapper <div> for each term and value pair. The shared .description-list class keeps the label column stable and moves the value below it on narrow screens.

Example#

Variants#

• Use one value in a plain <dd> when the value is short
• Add description-list-values to a <dd> that contains several files, links, or other discrete values
• The layout stacks each pair on narrow screens and uses a fixed label column from the small breakpoint onward

When to use#

• Compact, labelled facts that readers compare as terms and values
• Interface manifests, record details, and stable page metadata
• Not for prose definitions, tabular comparisons, or editable fields

Implementation#

<dl class="description-list">
  <div>
    <dt>Label</dt>
    <dd>Value</dd>
  </div>
</dl>

The shared CSS in assets/css/site.css provides the borders, responsive two-column grid, label treatment, and multi-value stack. Do not replace the semantic elements with generic <div> or <span> pairs.

Accessibility#

• Use <dl> only when each <dt> is a term, label, or name for its paired <dd> value
• Keep each <dt> and <dd> inside the same wrapper <div> so the pair remains intact across responsive layouts
• Put links inside the value when the value is a destination; labels remain plain text unless they need their own independent action
• Do not use a description list for a control group or a data table with column headers