Hover Card Component

Overview

Hover Card shows a compact preview of a link’s title, description, and image, either fetched from the website or supplied manually. It scales or fades in after a short delay, its content fades in separately, it can drift with the pointer, and an animated underline marks the active link.

Use it when users may want to check a destination before leaving the page, such as article references, resource lists, and learning platforms. The preview should feel tied to its link while staying readable and easy to dismiss.

Theme and Interaction Customisation

Choose Website preview or Manual details as the content source and set the card’s roundness. Interaction settings include Scale + fade or Fade opening, Start scale, Fade content, Open after and Close after delays, Follow the pointer, and Underline draws in.

Example Production Use Case

A technical blog can add Hover Card to reference links, so readers see a documentation page’s title, summary, and image before deciding whether to leave the article.

A curated tools directory can use website previews on each entry, helping visitors compare resources at a glance while the plain links still work normally.

An agency portfolio can use manual details to preview related case studies, controlling exactly what each card says instead of relying on site metadata.

Best Used For

• Editorial websites with external references.
• Resource directories.
• Educational platforms.
• Developer documentation.
• SaaS knowledge bases and workspaces.
• Content discovery and reading lists.
• Agency and portfolio websites.

Not For

Links that already make their destination clear don’t need previews, and adding them everywhere becomes noise.

Never put essential instructions or warnings only in a hover card, since touch, keyboard, and screen-reader users may miss it.

Interactive content belongs in a Popover or Dialog, and unreliable metadata or strict privacy needs suit manual details or a simple linked card better.

Performance Budget

Use efficient scale and fade transitions and keep pointer drift local to the active card. Avoid fetching metadata on every brief hover, cache and deduplicate requests, handle timeouts and missing images gracefully, and keep inactive previews unmounted.

Accessibility and Mobile

The link text must make sense without the preview, and any essential preview content needs an accessible route. Let users move onto the card without it closing, keep it open long enough to read, and support Escape to dismiss. On mobile, keep the link working by tap, offer a tap preview if the information matters, and fit the card in narrow viewports. With reduced motion, remove scaling and pointer drift.

Common Mistakes

• Assuming every website supports previews.
• Expecting the Website field to work when source=“text”.
• Setting Start scale with fade-only entrances.
• Opening on every incidental hover.
• Closing before users can reach the card.
• Making pointer following too strong.
• Fetching arbitrary URLs without security checks.
• Rendering untrusted metadata as HTML.
• Relying on hover for essential information.
• Ignoring mobile behaviour.
• Overanimating the entrance.
• Leaving empty or broken cards when previews fail.