Components / Display & Media / Descriptions

Descriptions stable

Label-and-value pairs, set as a list: the invoice header, the record detail, the spec sheet.

Preview
Invoice
INV-2041
Billed to
Northwind KK — Accounts
Issued
November 2, 2026
Due
December 31, 2026
Total
¥128,400 (tax included)
<dl class="k-desc boxed">
  <div class="row"><dt>Invoice</dt><dd>INV-2041</dd></div>
  <div class="row"><dt>Billed to</dt><dd>Northwind KK — Accounts</dd></div>
  <div class="row"><dt>Issued</dt><dd>November 2, 2026</dd></div>
  <div class="row"><dt>Due</dt><dd>December 31, 2026</dd></div>
  <div class="row"><dt>Total</dt><dd>¥128,400 (tax included)</dd></div>
</dl>
/* KATA Descriptions — a definition list with hairlines. */
.k-desc{font-family:var(--k-font);color:var(--k-ink);max-width:520px}
.k-desc .row{display:grid;grid-template-columns:150px 1fr;gap:14px;padding:10px 2px;border-top:1px solid var(--k-line)}
.k-desc .row:first-child{border-top:0}
.k-desc dt{font-size:12.5px;color:var(--k-ink-3);font-weight:500;padding-top:1px}
.k-desc dd{font-size:13.5px;line-height:1.65}
.k-desc.boxed{border:1px solid var(--k-line);border-radius:var(--k-radius-lg);padding:6px 16px}
.k-desc.pairs .row{grid-template-columns:110px 1fr 110px 1fr}
@media (max-width:560px){.k-desc .row{grid-template-columns:110px 1fr}.k-desc.pairs .row{grid-template-columns:110px 1fr}}

Installation

CLI

node kata-ui.mjs add descriptions

Writes the part’s CSS into your project. New to the CLI? See the CLI doc.

Manual

  1. Load tokens.css once, before any part.
  2. Copy the CSS tab into your stylesheet.
  3. Copy the HTML where it belongs.

Examples

Two pairs per row

Plan
Studio
Seats
12
Region
Tokyo
Renewal
March 1, 2027
Owner
Aoki Ren
Status
Active
<dl class="k-desc pairs">
  <div class="row"><dt>Plan</dt><dd>Studio</dd><dt>Seats</dt><dd>12</dd></div>
  <div class="row"><dt>Region</dt><dd>Tokyo</dd><dt>Renewal</dd><dd>March 1, 2027</dd></div>
  <div class="row"><dt>Owner</dt><dd>Aoki Ren</dd><dt>Status</dt><dd>Active</dd></div>
</dl>

Usage

For reading a record, not editing it — the moment the pairs become inputs, it is a form and Field takes over. Keep labels short and values complete; the pair is the sentence.

Accessibility

A real dl: term and description stay paired for assistive technology. Do not fake the pairing with two loose columns of divs.

Anatomy

The public surface of this part, read from its own source. Class names are the API — the CSS tab above is the full contract.

.k-descclass
.rowclass
.boxedclass
.pairsclass

Related parts

Aspect Ratio beta

A box that holds its shape — 16/9 for video, 4/3 for photos, 1/1 for avatars — whatever fills it.

ratiomediaresponsive

Avatar beta

Initials first, photo when there is one. Three sizes, a status dot, and a stacking group.

userprofileinitials

Bar Chart beta

Columns for comparing a handful of values — the chart people read correctly at a glance.

chartcolumnscomparison

Candlestick Chart beta

Open, high, low, close as cast candles — price action for a session at a glance.

chartfinancetradingohlc
Previous
Data Table