Kit part · Spec lists

Spec list

Key and value facts, printed like the plate on the back of a device.

On this page

Variants

Short

With a status value

Both finishes, side by side. Hover, pressed and focus are forced with .is-hover, .is-down and .is-focus; checked and disabled are real.

Aluminium

Part	Two rows	Status in a value
Spec	Seats 5 Checks 250	Meter Syncing Every 10 s

Graphite

Part	Two rows	Status in a value
Spec	Seats 5 Checks 250	Meter Syncing Every 10 s

Name	Kind	Values	What it does
.tui-spec	class	on <dl>	A two-column grid; terms left in --tui-ink-2, values right in tabular figures.
<dt> · <dd>	element	pairs	One pair per row, a hairline under each except the last.

<dl class="tui-spec">
  <dt>Weight</dt><dd>2.4 kg</dd>
  <dt>Power</dt><dd>18 W</dd>
  <dt>Inputs</dt><dd>2 × XLR, 1 × USB-C</dd>
</dl>

Needs kit.css only, no script. How to install the kit.

It is a real description list, so screen readers announce the pairs and their count.

A CSS grid on the <dl> with auto 1fr columns; hairlines on every cell but the last two. Nothing else.

readout.rules.mdIn the brain

A back plate keeps to eight rows.

3 rules in this file, with the foundations they rest on and the anti-patterns that break them. Full rules ship in the brain with the Pass.

Latency p95182ms

A printed label over a value: key figures, with the unit small and the change in words.

Reel 3	42:10
Mixed	0:30

Rows of data with printed column labels, figures right-aligned in columns, and status in lamps with words.

Output

A face plate that groups what belongs together: a head, a rule, then the parts. Screws only on device-like panels.