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.
Kit parts
Empty tray
An empty state drawn as an empty machined tray. The shape of what goes in it, a file, a key or a card, is cut into its floor the way a case is cut for the thing it carries. Under it: what is missing, one line on why, a key that fills it and, if you like, a link to read more. It is markup and nothing else.
Seats open in 11 days. Want one email that morning?
Anatomy
A raised plate with a bed let into it. The bed has deeper walls than the kit’s plain recess, because it is a tray and not a field. The shape is one SVG silhouette (a sheet with its corner turned, a key, a card with its chip) used twice as a mask: a lit copy a pixel and a half lower, which shows along the lower lip of the cut, and a dark copy that is deepest under its upper wall. The holes in the silhouette, the chip and the lines of print, are the floor showing through. So the cut is drawn with the same one light as everything else, and there is no image to load.
Variants
- A file
- A key
- A card
- No link
- Nothing to add: no key
- Wide and short
States
- File
- Key
- Card
- Key focus
Props and options
| Name | Kind | Description |
|---|---|---|
| data-shape | attribute | What is cut into the floor. File by default. |
Usage notes
Choose what goes in the tray: the shape, the words and the key change, and nothing runs. Tab reaches the key and then the link.
Accessibility
- The words are real text under a real heading, and the tray is named by it, so a screen reader arrives at “No signing keys yet” and not at a picture.
- The shape is a decoration and is hidden from assistive technology; nothing depends on seeing it.
- The key is a real button, or a link if the act is a page, and the link is a real link. Tab reaches the key, then the link, in the order they are read.
- The tray keeps to ink on the face in aluminium and graphite.
- Nothing moves, so there is nothing to turn off with reduced motion.
Related parts
Drop zone
An in-tray for files. A machined lip stands round a ribbed floor; the floor rises a little when a file is dragged over it, and a lamp on the lip lights. What goes in lands in the tray as a sheet of paper and is listed as printed rows, a refusal says why, and the key inside the tray is a real file input.
List
Rows in a rack: a mark, a title, a second line and a fact or a key at the end. Chosen rows sink into a recess with their check key latched; in a running order, a row lifts out of the rack on its skirt and slides past the others, from the keyboard or by its grip.