💠 Hover Card

For sighted users to preview content available behind a link.

Usage

The Hover Card component is a UI pattern that provides sighted users with a preview of the content available behind a hyperlink or another actionable element.

It's commonly triggered by a mouse hover and presents a small overlay close to the cursor or element, offering additional information or a glimpse of the linked content without navigating away from the current page.

When to use

• Link preview: Use a Hover Card to give users a quick preview of the content they can expect to see if they follow a link, which can help them decide whether to click through.
• Supplementary information: Employ Hover Cards to provide additional context or supplementary information about an item without cluttering the UI.
• Enhanced user engagement: Utilize Hover Cards to engage users by providing interactive elements or information that adds value to their browsing experience.
• Non-disruptive interaction: Hover Cards can offer more detail about an element or feature without requiring a click, keeping users in their current context.

Avoid using Hover Cards for critical information that users must see, as they are only accessible to sighted users with a mouse. They should not replace tooltips, which are a more suitable choice for short descriptions or label information. Ensure that the use of Hover Cards doesn't compromise the accessibility of your application; provide alternative ways for keyboard-only users and those using screen readers to access the same information.

Examples

Default

Useful links

Here you go! Here are all the resources you might need if you are a designer, a developer or a content manager:

Accessibility

Keyboard interactions

The hover card is intended for mouse users only so will not respond to keyboard navigation.