Tray
A recess cut into the plate that holds other parts: keys, a selector, an empty state waiting for its first thing.
Kit part · Empty states
Empty state
What a view shows before it has anything: an empty tray with the outline of what goes in it printed on its floor, one sentence and one key.
- Element
- <div>
- Needs
- kit.css
- Rules
- empty-state.rules.md · 4
- Finishes
- Aluminium · Graphite · Porcelain · Black
- Volumes
- Tactile · Quiet
Variants
No takes on this reel
Record, or drop audio files here.
No bills yet
Your first bill arrives on 1 October.
No readings today
The meter has been quiet since 00:00.
No alerts this week
The hub raises one when something needs you.
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 | Slots | Sheet | Plot | Key focused |
|---|---|---|---|---|
| Empty | No circuits One sentence says how it fills. | No bills One sentence says how it fills. | No readings One sentence says how it fills. | No schedules One sentence says how it fills. |
Graphite
| Part | Slots | Sheet | Plot | Key focused |
|---|---|---|---|---|
| Empty | No circuits One sentence says how it fills. | No bills One sentence says how it fills. | No readings One sentence says how it fills. | No schedules One sentence says how it fills. |
API
| Name | Kind | Values | What it does |
|---|---|---|---|
| .tui-empty | class | on <div> | The tray: the kit’s recess, 12px corners, everything centred. |
| .tui-empty__outline | class | aria-hidden="true" | The printed outline. By default a stack of dashed slots, one per <i>, fading down. |
| .tui-empty__outline--sheet | class | — | A page with a turned corner and three printed lines: for files, bills, exports. |
| .tui-empty__outline--plot | class | — | Two axes and dashed gridlines: for a chart with no data. |
| .tui-status + an unlit .tui-lamp | class | the title | What is missing, as a noun phrase: “No circuits yet”. |
| .tui-empty__text | class | on <p> | One sentence: what goes here and how it arrives. |
| .tui-key | element | one | The one action. It may be the contrast key if nothing else on the surface is. |
| .tui-empty--row · .tui-empty__words | class | — | Side by side, for a short tray under a table head; folds back to a column when narrow. |
| --line | CSS property | from --tui-ink-3 | The outline’s ink. Set by the part; read it for your own outlines. |
Markup
<div class="tui-empty">
<div class="tui-empty__outline" aria-hidden="true"><i></i><i></i><i></i></div>
<span class="tui-status"><span class="tui-lamp"></span>No circuits yet</span>
<p class="tui-empty__text">Circuits appear here once the hub has seen them on the board.</p>
<button class="tui-key tui-key--primary">Pair the hub</button>
</div>Needs kit.css only, no script. How to install the kit.
Accessibility
- The outline is
aria-hidden: it is a picture of what is missing, and the title already says it. - The unlit lamp is a second signal; the words “No circuits yet” carry the meaning.
- The key says what it does: “Pair the hub”, not “Get started”.
- Nothing moves, so there is nothing for reduced motion to take away.
How it’s built
No script, no images. The tray is the kit’s recess; each slot is an <i> with a 1.5px dashed border in --tui-ink-3 and a printed dot for where a lamp would sit, the lower ones fading the way a tool board’s outlines do toward the back. The sheet is one dashed box with its corner rounded wide and a second dashed corner drawn over it; the plot is two solid axes and two dashed gridlines from repeating gradients.
Rules
empty-state.rules.mdIn the brain
Say what will be here and how it arrives, in one sentence, then give the one key that starts it.
4 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.