Hover card
A preview that hangs from a link when the pointer rests on it or the keyboard reaches it. The popover’s card and leader, opened by a short delay and put away by leaving.
Kit parts
Foil card
A laminated foil card you handle, not a surface you hover: grab it anywhere and turn it in your hand by dragging. The foil shimmers with the angle you hold it at against the one fixed lamp, light and shadow across the desk show its depth, and it springs back level the moment you let go.
Anatomy
Under it, a conic gradient holds the foil’s own fixed iridescence, a rainbow baked into the laminate rather than any finish (real holographic foil reads the same colours under any card), blended at low opacity with mix-blend-mode. A small specular layer (mix-blend-mode. The seal is a real guilloche rosette, three interleaved sinusoidal rings as SVG paths (currentColor, the kit’s own tertiary-ink token), not a flat ring. Every layer but the foil’s own rainbow is tokens only, so every finish follows with no rule of its own.
Variants
- Level (at rest)
- Turned right
- Turned back
- Compact
- Disabled
States
- At rest
- Hover
- Focus
- Dragging
- Disabled
Props and options
| Name | Kind | Description |
|---|---|---|
| label | attribute | Names the card for a screen reader (e.g. "Tilt the studio pass"); it stays fixed, since aria-valuetext carries the changing tilt. |
| title-text / sub-text | attribute | The two printed lines on the card face. |
| max-tilt | attribute | How far the card turns either way from level. |
| step | attribute | How far one held arrow key turns the card. |
| disabled | attribute | The card stops taking pointer or keyboard input. |
| rx / ry | property | |
| change | event | |
| Arrow keys (held) | key | Turn the card that way while held; releasing any of them springs it back to level. |
| foilCardHTML(options) | function |
Usage notes
Drag the card to turn it, or Tab to it and hold an arrow key; let go and it springs back level.
Accessibility
- The card is a native button.
- The card’s own aria-label names the action and never changes; only aria-valuetext changes as the tilt changes.
- The tilt is never colour alone: the printed plate under the card repeats the same words aria-valuetext carries.
- A polite status region echoes the same words on every change, for a screen reader that announces status regions rather than aria-valuetext changes.
- Reduced motion drops the return transition: releasing the card sets it level at once, nothing lost (it only changes state).
- Dragging uses pointer capture and touch-action: none, so the one gesture that turns the card never fights the page’s own scroll.
Related parts
Avatar
A person’s mark, struck like a coin: initials stamped into the field, or a photo set under the rim, with a status lamp mounted at five o’clock. Stacks into a group with a count.
ID plate
A staff badge for a person. An engraved metal plate with a clip slot cut through its top edge, a photo well and the name, role and serial engraved beneath. With no photo, the initials are debossed into the well. A lamp shows whether they are online, away or offline, and the word is always printed beside it. A compact plate does the same in one line, for lists.