71Definition list

Term and value pairs: course specs, Salesforce metadata attributes, an order summary. Terms are mono — Principle 2 doing its job, so the eye separates key from content without a rule between them.

Use it for

Specs, attributes, metadata — anything shaped like key: value
Where a two-column Table would be overkill

Not for

Tabular data with more than two columns — that is a Table
A form — values here are read-only

Two column

Level: Beginner
Duration: 6 hours 40 minutes
Last updated: January 2026
Includes: 12 lessons, 4 exercises, a certificate

markup

<dl class="ns-deflist">
  <dt>Level</dt><dd>Beginner</dd>
  <dt>Duration</dt><dd>6 hours 40 minutes</dd>
  <dt>Last updated</dt><dd>January 2026</dd>
  <dt>Includes</dt><dd>12 lessons, 4 exercises, a certificate</dd>
</dl>

Stacked

For a narrow rail, where even a short term column costs more than it explains.

Object: Opportunity
Field: StageName

markup

<dl class="ns-deflist ns-deflist--stack">
  <dt>Object</dt><dd>Opportunity</dd>
  <dt>Field</dt><dd>StageName</dd>
</dl>

Accessibility contract

A real <dl>, because that is exactly what a <dl> is for and screen readers announce the pairing
Stacks to one column below 48rem — a 12rem term column is unreadable on a phone