Design system

Hover card

A preview surface that adds context to a link without interrupting navigation.

Hover cards provide optional supporting detail for a link, such as a person, vehicle, or document preview. The link remains useful without opening the preview.

Built on Radix Hover CardUpstream API

Assigned to Jordan Lee.

Import

import {
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
} from "@workshop1/ui/components/hover-card"

Behaviour

Keyboard users can focus the trigger to open the card, while pointer users can hover. Use a short openDelay to avoid flashing a card as the pointer crosses a page. Keep the trigger's original destination intact.

Accessibility

Treat the card as supplementary. A user who never opens it must still understand and activate the trigger. Do not place buttons, form controls, or required instructions inside it; use a popover for interactive content.

Best practices

  • Preview a single linked object.
  • Keep the content concise and read-only.
  • Avoid nesting hover cards or using them on touch-only actions.