- Weight
- 2.4 kg
- Power
- 18 W
Spec list
Key and value facts, printed like the plate on the back of a device.
Kit part · Numbers
Readout
A printed label over a value: key figures, with the unit small and the change in words.
- Element
- <div>
- Needs
- kit.css
- Rules
- readout.rules.md · 3
- Finishes
- Aluminium · Graphite · Porcelain · Black
- Volumes
- Tactile · Quiet
Variants
Solar now4.82kW31.6 kWh so far
Latency182ms8 ms slower
Battery78%Charging at 1.9 kW
Every state, at once
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 | Up | Down | Neutral | With a status |
|---|---|---|---|---|
| Readout | Made31.6kWh4% on Monday | Sold£2.61£0.40 less | Used14.2kWhHeat pump, oven | Grid1.57kWExporting |
Graphite
| Part | Up | Down | Neutral | With a status |
|---|---|---|---|---|
| Readout | Made31.6kWh4% on Monday | Sold£2.61£0.40 less | Used14.2kWhHeat pump, oven | Grid1.57kWExporting |
API
| Name | Kind | Values | What it does |
|---|---|---|---|
| .tui-readout | class | — | A column: label, value, change, 6px apart. |
| .tui-readout__value | class | 26px | Semibold, tabular. The unit goes in <small> at half size, in --tui-ink-2. |
| .tui-delta | class | — | A line of change, in words. |
| data-dir | attribute | "up" · "down" | Prints a small green ▲ or red ▼ before the words. |
| font-size | CSS property | on the value | Resize freely; the unit follows at half size. |
Markup
<div class="tui-readout">
<span class="tui-label">Revenue</span>
<span class="tui-readout__value">£48,210<small>/mo</small></span>
<span class="tui-delta" data-dir="up">12.4% on August</span>
</div>Needs kit.css only, no script. How to install the kit.
Accessibility
- The arrow is a pseudo-element and is not read out, so the words must say the direction: “8 ms slower”.
- Units are real text in
<small>: “182 ms” is read as one figure.
How it’s built
Three lines of type in a grid. The only colour is the tiny triangle before a delta, a ::before in lamp green or red: a signal, sitting next to words. No images, no script.
Rules
readout.rules.mdIn the brain
A change always carries words: “8 ms slower”, not only an arrow.
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.
Related parts
02:52min
LCD
A value that changes, on grey-green liquid crystal, with a ghost of the unlit segments behind it: clocks, battery, counters.
Lamp
The only colour in the kit: a lamp that is on. Green is on, amber is waiting, red is recording or failing, blue is linked, white is standing by. Always next to words.