Key-value list

How to use it

Use for a compact read-only summary of settings or profile details where each value can be edited on its own page. When values have no edit action, a description list (<dl>) is the simpler choice, and when everything is edited together use a form. After copying, point each href at the page that edits that setting (the demo links go to ../index.html) and keep each hidden label in sync with its key.

Accessibility

A heading names the <ul> through aria-labelledby; each item puts the setting name and its value side by side, and each Edit link's accessible name includes the setting through visually hidden text ("Edit email address"), so links make sense when listed out of context. Links are real <a href> elements with an underline and a 2px focus outline. Setting names are #475569 on #ffffff (7.58:1), values #0f172a on #ffffff (17.85:1) and links #1d4ed8 on #ffffff (6.70:1).

Source (copy-ready)

Copy code

<div class="dcl-key-value-list">
  <h2 class="dcl-key-value-list__heading" id="dcl-key-value-list-heading">Account details</h2>
  <ul class="dcl-key-value-list__list" aria-labelledby="dcl-key-value-list-heading">
    <li class="dcl-key-value-list__item"><span class="dcl-key-value-list__key">Display name</span><span class="dcl-key-value-list__value">Ana Ruiz</span><a class="dcl-key-value-list__edit" href="../index.html">Edit<span class="dcl-key-value-list__sr"> display name</span></a></li>
    <li class="dcl-key-value-list__item"><span class="dcl-key-value-list__key">Email address</span><span class="dcl-key-value-list__value">ana.ruiz@example.com</span><a class="dcl-key-value-list__edit" href="../index.html">Edit<span class="dcl-key-value-list__sr"> email address</span></a></li>
    <li class="dcl-key-value-list__item"><span class="dcl-key-value-list__key">Time zone</span><span class="dcl-key-value-list__value">Central European Time</span><a class="dcl-key-value-list__edit" href="../index.html">Edit<span class="dcl-key-value-list__sr"> time zone</span></a></li>
    <li class="dcl-key-value-list__item"><span class="dcl-key-value-list__key">Two-step sign-in</span><span class="dcl-key-value-list__value">On, authenticator app</span><a class="dcl-key-value-list__edit" href="../index.html">Edit<span class="dcl-key-value-list__sr"> two-step sign-in</span></a></li>
  </ul>
</div>
<style>
.dcl-key-value-list { max-width: 32rem; font: inherit; color: #0f172a; background-color: #ffffff; }
.dcl-key-value-list__heading { margin: 0 0 0.5rem; font-size: 1.15rem; color: #0f172a; background-color: #ffffff; }
.dcl-key-value-list__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid #e2e8f0; }
.dcl-key-value-list__item { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 1rem; padding: 0.6rem 0; border-bottom: 1px solid #e2e8f0; }
.dcl-key-value-list__key { flex: 0 0 9rem; max-width: 100%; font-size: 0.9rem; color: #475569; background-color: #ffffff; }
.dcl-key-value-list__value { flex: 1 1 10rem; min-width: 0; overflow-wrap: anywhere; font-weight: 600; color: #0f172a; background-color: #ffffff; }
.dcl-key-value-list__edit { margin-left: auto; font-size: 0.9rem; color: #1d4ed8; background-color: #ffffff; text-decoration: underline; }
.dcl-key-value-list__edit:hover { color: #1e40af; background-color: #ffffff; }
.dcl-key-value-list__edit:focus-visible { outline: 2px solid #1d4ed8; outline-offset: 2px; }
.dcl-key-value-list__sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
</style>