Pairs

A <dl data-pairs> is a two-column list of keys and values: an uppercase label on the left, the value on the right. It is the quietest way to put facts in a card.

Basic

<article data-tone="card">
  <dl data-pairs>
    <dt>Version</dt><dd>atlas 1.4.0</dd>
    <dt>Folder</dt><dd><code>~/code/atlas</code></dd>
    <dt>Started</dt><dd>2 October, 14:02</dd>
    <dt>Pages</dt><dd>182 (1 warning)</dd>
  </dl>
</article>

The key column is as wide as its longest key, so the values start on one line.

Notes

• <dt> takes the small uppercase label style; <dd> keeps the body size and loses its indent.
• Keep keys short: the column takes max-content, so one long key widens every row.
• Use Policy list instead when each row needs a verdict chip on the right.