Key-value list

Two-column list pairing a label with a value.

A two-column list for pairing a label with a value — used for metadata, related-post lists, EXIF data and so on. The class attaches to a list (ul or dl) and each row is a .key-value--item.

Default

<ul class="key-value">
  <li class="key-value--item">
    <span class="key-value--key">Released</span>
    <span class="key-value--value">2026-04-18</span>
  </li>
</ul>

With heading

<h1 class="key-value--heading key-value--heading--small">Related posts</h1>
  <ul class="related-posts key-value">   
    <li class="key-value--item">
      <a class="key-value--link" href="/game/elden-ring/">
        <p class="key-value--value small-text secondary-text"><time datetime="2024-08-11">11 August 2024</time></p>
        <p class="key-value--key">Elden Ring</p>
      </a>
    </li>
    <li class="key-value--item">
      <a class="key-value--link" href="/game/lies-of-p/">
        <p class="key-value--value small-text secondary-text"><time datetime="2025-05-02">2 May 2025</time></p>
        <p class="key-value--key">Lies of P</p>
      </a>
    </li>
    <li class="key-value--item">
      <a class="key-value--link" href="/game/bloodborne/">
        <p class="key-value--value small-text secondary-text"><time datetime="2024-12-29">29 December 2024</time></p>
        <p class="key-value--key">Bloodborne</p>
      </a>
    </li>
  </ul>

As a description list

When each row is semantically a term/definition pair (metadata, EXIF), use <dl>/<dt>/<dd> instead.

<dl id="exif" class="card key-value key-value--with-value">
  <h2 class="key-value--heading key-value--heading--small">Metadata</h2>
  <div class="key-value--item key-value--with-value">
    <dt class="key-value--key">Date taken</dt>
    <dd class="key-value--value">29 November 2024</dd>
  </div>
  <div class="key-value--item key-value--with-value">
    <dt class="key-value--key">Camera</dt>
    <dd class="key-value--value">Apple iPhone 15 Pro Max</dd>
  </div>
  <div class="key-value--item key-value--with-value">
    <dt class="key-value--key">Aperture</dt>
    <dd class="key-value--value">ƒ/1.8</dd>
  </div>
  <div class="key-value--item key-value--with-value">
    <dt class="key-value--key">Shutter speed</dt>
    <dd class="key-value--value">1/20</dd>
  </div>
  <div class="key-value--item key-value--with-value">
    <dt class="key-value--key">Focal length</dt>
    <dd class="key-value--value">6.8mm</dd>
  </div>
  <div class="key-value--item key-value--with-value">
    <dt class="key-value--key">ISO</dt>
    <dd class="key-value--value">5000</dd>
  </div>
</dl>