Home/Components/Hover card

Hover card

Like a tooltip, but with rich content — name, avatar, status, action. Used on mentions, references, profile chips.

Stable .hover-card Hover-reveal

Usage

Hover-only — never click-to-open. Delay 500 ms in, 200 ms out.

Posted to ledger by @stanford.kuda

SK
Stanford Kuda
Plant manager · Mazowe
YTD pours
184
Avg fineness
94.2 %
Profile hover card

Do & don't

Do

Use for cross-references — mention a record once, the operator hovers to confirm without clicking.

Don't

Trigger on focus alone. Keyboard users can press Tab to land on the trigger; they don’t need a card popping up.

Do

Keep the content scannable — three to five facts max.

Don't

Put primary actions inside. Hover means the card disappears the moment the user moves to click.