Empty tray

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

<section class="tui-empty-tray" data-shape="key" aria-labelledby="keys-t">
  <div class="tui-empty-tray__bed">
    <span class="tui-empty-tray__shape" aria-hidden="true"></span>
  </div>
  <div class="tui-empty-tray__front">
    <h3 class="tui-empty-tray__title" id="keys-t">No signing keys yet</h3>
    <p class="tui-empty-tray__reason">A key lets a service sign in to Lode without a person.
      Issue one and it is listed here.</p>
    <div class="tui-empty-tray__next">
      <button type="button" class="tui-key tui-key--primary">Issue a key</button>
      <a class="tui-link" href="/docs/keys">How keys work</a>
    </div>
  </div>
</section>

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

• 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 both finishes: the title is 12:1 and the reason more than 5.5:1 against the plate.
• Nothing moves, so there is nothing to turn off with reduced motion.

A raised plate with a bed let into it: the rim is 6px and so is the bed’s corner, which makes the plate’s 12px concentric. 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.