ds
Components
Description list

Description list

Key and value pairs for detail panes and resource pages.

Bucket: acme-raw-ap-south-1
Region: Mumbai ap-south-1
Status: Available
Objects: 4,812,330
Size: 2.84 TB
Versioning: On, noncurrent versions kept 30 days
ARN: arn:aws:s3:::acme-raw-ap-south-1
Created: 3 Mar 2024 by sameer@acme.dev

Code

<dl class="dlist">
  <div><dt>Bucket</dt><dd class="mono">acme-raw-ap-south-1 <button class="btn xs ghost" data-copy="acme-raw-ap-south-1"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg><span>Copy</span></button></dd></div>
  <div><dt>Region</dt><dd>Mumbai <span class="badge">ap-south-1</span></dd></div>
  <div><dt>Status</dt><dd><span class="status"><span class="status-dot"></span>Available</span></dd></div>
  <div><dt>Objects</dt><dd class="mono">4,812,330</dd></div>
  <div><dt>Size</dt><dd class="mono">2.84 TB</dd></div>
  <div><dt>Versioning</dt><dd>On, noncurrent versions kept 30 days</dd></div>
  <div><dt>ARN</dt><dd class="mono">arn:aws:s3:::acme-raw-ap-south-1 <button class="btn xs ghost" data-copy="arn:aws:s3:::acme-raw-ap-south-1"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg><span>Copy</span></button></dd></div>
  <div><dt>Created</dt><dd>3 Mar 2024 by <a href="#">sameer@acme.dev</a></dd></div>
</dl>

Keys on the left in the muted colour, values on the right in ink. Identifiers, sizes and counts are mono so they line up and copy cleanly. Rows are split by hairlines that run across both columns. Copy buttons appear on hover, and are always shown on touch screens. Below 30rem the key moves above the value.

Stacked

Service: orders-api
Version: v2.14.0
Replicas: 6 / 6
Owner: data-platform
Last deploy: 2 hours ago

Code

<dl class="dlist stack">
  <div><dt>Service</dt><dd>orders-api</dd></div>
  <div><dt>Version</dt><dd class="mono">v2.14.0</dd></div>
  <div><dt>Replicas</dt><dd class="mono">6 / 6</dd></div>
  <div><dt>Owner</dt><dd>data-platform</dd></div>
  <div><dt>Last deploy</dt><dd>2 hours ago</dd></div>
</dl>

Labels above values, flowing into as many columns as fit. For the head of a resource page, above the tabs.

Compact

Engine: PostgreSQL 16.4
Instance: db.r6g.xlarge
Storage: 500 GiB gp3, 41% used
Backups: Daily at 02:00 UTC, kept 14 days

Code

<dl class="dlist sm ruled">
  <dt>Engine</dt><dd>PostgreSQL 16.4</dd>
  <dt>Instance</dt><dd class="mono">db.r6g.xlarge</dd>
  <dt>Storage</dt><dd class="mono">500 GiB gp3, 41% used</dd>
  <dt>Backups</dt><dd>Daily at 02:00 UTC, kept 14 days</dd>
</dl>

Pairs can sit straight in the dl or be wrapped in a div. .ruled adds rules above and below the whole list, for use inside a panel.

API

Class	On	What it does
`.dlist`	dl	Two columns: keys sized to the longest, values take the rest.
`dd.mono / dd > code`	dd	Mono values.
`.btn`	dd > button	A copy or edit button at the end of the row, shown on hover.
`.stack`	.dlist	Label above value, in columns. Wrap each pair in a div.
`.sm`	.dlist	Tighter rows.
`.ruled`	.dlist	A rule above the first row and below the last.

The same order on every resource page.
A dash for values that are not set, and say why if it matters.
Units in the value: 2.84 TB, 41% used.

Don't

Long paragraphs as values.
Editable fields that look like plain values.
Bold keys. The value is what people read.

Accessibility

A real dl lets screen readers announce each key with its value.
Copy buttons are still in the tab order while hidden, and show on focus.