Description list

The .pl-c-description wraps a native <dl> as a two-column label + value grid. It is the workhorse of SaaS detail panels: account info, case metadata, user profiles, order summaries — anywhere you need to display structured key-value data read-only.

Every app reimplements this pattern with ad-hoc grids and inline styles. This component replaces all of that with a single semantic element.

Semantic HTML

Basic grid

<dl class="pl-c-description">
  <div class="pl-c-description__row">
    <dt class="pl-c-description__term">Account</dt>
    <dd class="pl-c-description__detail">Acme Corporation</dd>
  </div>
  <div class="pl-c-description__row">
    <dt class="pl-c-description__term">Status</dt>
    <dd class="pl-c-description__detail">Active</dd>
  </div>
  <div class="pl-c-description__row">
    <dt class="pl-c-description__term">MRR</dt>
    <dd class="pl-c-description__detail">$2,400/mo</dd>
  </div>
</dl>

Rich detail values

The detail slot accepts any content — badges, avatars, links:

<div class="pl-c-description__row">
  <dt class="pl-c-description__term">Status</dt>
  <dd class="pl-c-description__detail">
    <span class="pl-c-badge" data-tone="success">Active</span>
  </dd>
</div>

<div class="pl-c-description__row">
  <dt class="pl-c-description__term">Owner</dt>
  <dd class="pl-c-description__detail">
    <div class="pl-c-avatar" data-size="sm">JS</div>
    Jane Smith
  </dd>
</div>

With dividers

<dl class="pl-c-description" data-dividers>
  <!-- each row gets a hairline border -->
</dl>

Stacked layout

For narrow sidebars or long-form values, stack terms above details:

<dl class="pl-c-description" data-layout="stacked">
  <!-- term above, detail below -->
</dl>

Layout modes

Mode	Class	When to use
Grid (default)	`.pl-c-description`	Detail panels, metadata grids. Two columns: label right-aligned, value on the right. Collapses to stacked below 32rem container width.
Stacked	`.pl-c-description[data-layout="stacked"]`	Narrow sidebars, long-form values, mobile-first layouts. Term above, detail below.

Responsive behavior

The grid mode uses a container query (not a viewport media query), so it adapts to its container’s width. A description list inside a 25rem-wide drawer panel stacks even on a wide-screen desktop — no viewport hack needed.

Class contract

Selector	Role
`.pl-c-description`	The `<dl>` container (grid + query container).
`.pl-c-description__row`	A wrapper `<div>` around each `<dt>`/`<dd>` pair.
`.pl-c-description__term`	The `<dt>` label (muted, semibold, right-aligned).
`.pl-c-description__detail`	The `<dd>` value (accepts any content).
`[data-layout="stacked"]`	Single-column layout (term above detail).
`[data-dividers]`	Hairline border between rows.

Tokens exposed

Token	Default	Purpose
`--pl-c-description-term-w`	`auto`	Term column width. Set to `12rem` for a uniform label gutter.
`--pl-c-description-row-gap`	`var(--pl-space-3)`	Vertical spacing between rows.
`--pl-c-description-col-gap`	`var(--pl-space-4)`	Horizontal spacing between term and detail.
`--pl-c-description-term-color`	`var(--pl-color-text-muted)`	Label text color.
`--pl-c-description-term-size`	`var(--pl-text-sm)`	Label font size.

Accessibility

Uses the native <dl>, <dt>, and <dd> elements, which are semantically correct for description lists and announced as such by screen readers. No ARIA attributes are needed.