Skip to content
Relements Relements

Description list

A description list styles a native <dl> with <dt> terms and <dd> details — CSS only, no JavaScript. Use the flat form (terms and details as direct children, term first); add .re-description-list to the <dl>, .re-description-list__term to each <dt>, and .re-description-list__details to each <dd>.

Stacked

Section titled “Stacked”

The default — each term sits above its details, in normal block flow.

Full name
Ada Lovelace
Role
Engineer
Location
London
Live example
<dl class="re-description-list">
  <dt class="re-description-list__term">Full name</dt>
  <dd class="re-description-list__details">Ada Lovelace</dd>
  <dt class="re-description-list__term">Role</dt>
  <dd class="re-description-list__details">Engineer</dd>
  <dt class="re-description-list__term">Location</dt>
  <dd class="re-description-list__details">London</dd>
</dl>

Horizontal

Section titled “Horizontal”

data-layout="horizontal" lays terms and details into two columns (a CSS grid). Set the term column width with --re-dl-term-width (default 12rem). Multiple <dd> per <dt> each stack in the details column.

Plan
Pro
Seats
12 of 20 used
Renews
March 1, 2026
Live example
<dl class="re-description-list" data-layout="horizontal" style="--re-dl-term-width: 8rem">
  <dt class="re-description-list__term">Plan</dt>
  <dd class="re-description-list__details">Pro</dd>
  <dt class="re-description-list__term">Seats</dt>
  <dd class="re-description-list__details">12 of 20 used</dd>
  <dt class="re-description-list__term">Renews</dt>
  <dd class="re-description-list__details">March 1, 2026</dd>
</dl>

Bordered & divided

Section titled “Bordered & divided”

data-bordered frames the list; data-divided rules between rows; data-density="compact" tightens the spacing.

Status
Active
Owner
Ada Lovelace
Created
August 12, 1843
Live example
<dl class="re-description-list" data-layout="horizontal" data-bordered data-divided>
  <dt class="re-description-list__term">Status</dt>
  <dd class="re-description-list__details">Active</dd>
  <dt class="re-description-list__term">Owner</dt>
  <dd class="re-description-list__details">Ada Lovelace</dd>
  <dt class="re-description-list__term">Created</dt>
  <dd class="re-description-list__details">August 12, 1843</dd>
</dl>

Accessibility

Section titled “Accessibility”
  • Semantics — a native <dl> with <dt> terms and <dd> details; assistive technology announces it as a description list and pairs each term with its details. Keep the flat, term-first structure so the term/details association reads correctly — no roles or aria-* are added or needed. Multiple <dd> per <dt> are valid and announce as several details for the one term.
  • Notes — the list is read-only and non-interactive, so there is no keyboard model or focus styling; the borders, dividers, and density modifiers are purely visual and carry no semantics. See the accessibility guide.