kit

Description list

Labelled values, such as an item's details or settings at a glance, as rows that stack on narrow screens or as a grid of columns.

Tier 1 · CSS only Native dl preview

Example

Label
Value
Status
Online
Identifier
abc_123
Created
Label
Value
Count
1,024
Size
68 GB
Owner
Person A
Show the markup 
<div class="kit-stack demo-fill" data-gap="5">
  <dl class="kit-dl">
    <div><dt>Label</dt><dd>Value</dd></div>
    <div><dt>Status</dt><dd><span class="kit-status" data-tone="good">Online</span></dd></div>
    <div><dt>Identifier</dt><dd><code>abc_123</code></dd></div>
    <div><dt>Created</dt><dd><time datetime="2026-01-01">1 Jan 2026</time></dd></div>
  </dl>
  <dl class="kit-dl" data-layout="columns">
    <div><dt>Label</dt><dd>Value</dd></div>
    <div><dt>Count</dt><dd data-numeric>1,024</dd></div>
    <div><dt>Size</dt><dd data-numeric>68 GB</dd></div>
    <div><dt>Owner</dt><dd>Person A</dd></div>
  </dl>
</div>

Usage

<dl class="kit-dl">
  <div><dt>Label</dt><dd>Value</dd></div>
  <div><dt>Created</dt><dd><time datetime="2026-11-03">3 Nov 2026</time></dd></div>
</dl>
Attribute Values Default
data-layout stacked (label over value), columns (a grid of label-over-value cells) label beside value

Wrapping each pair in a <div> is valid HTML and lets the rows draw their dividers. The default layout stacks by itself when its container is narrower than 26rem. data-numeric on a <dd> lines up figures.

Accessibility

  • <dl>, <dt> and <dd> tell screen readers which label goes with which value, and many announce the list's size.
  • Use <time datetime> for dates and real text for statuses, so values read well out of context.