COMPONENTS

Description lists

One description-list class arranges native term and description pairs. Use this pattern for record summaries and profile metadata.

Usage

Markup: dl.description-list, dt, dd

Behaviour: Pairs adapt to their available container width.

  • Use dl, dt and dd for associations, not a table when there are no tabular column relationships. A native div may group each term with its description.
  • Pairs stack when their own container is narrow; a viewport fallback supports browsers without container queries. Use --re-description-label to customise the label column.
  • Colours, density and borders inherit. Basic dl without this class retains normal document formatting.

Component API and styling module · Inherited appearance settings

Record details

Each native div groups a term and its value.

Project
RevaCSS
Status
Active
Documentation
Getting started
HTMLSelect text to copy
<dl class="description-list">
  <div><dt>Project</dt><dd>RevaCSS</dd></div>
  <div><dt>Status</dt><dd><span class="badge" data-variant="success">Active</span></dd></div>
  <div><dt>Documentation</dt><dd><a href="/RevaCSS/guide/">Getting started</a></dd></div>
</dl>

Metadata inside a card

The label width is optional; the enclosing card supplies its inherited surface.

Account summary

Plan
Professional
Billing
Monthly
Team
12 members
HTMLSelect text to copy
<article class="card">
  <h3>Account summary</h3>
  <dl class="description-list" style="--re-description-label: 8rem;">
    <div><dt>Plan</dt><dd>Professional</dd></div>
    <div><dt>Billing</dt><dd>Monthly</dd></div>
    <div><dt>Team</dt><dd>12 members</dd></div>
  </dl>
</article>