Preview Card

import {
  PreviewCard,
  PreviewCardContent,

When to use it#

Use a preview card to tell people what is behind a link before they click: a profile, an account, a term in a glossary. It appears after a short delay when the pointer rests on the link or the link gets keyboard focus, and goes away when either leaves.

The link still has to work without the card. The card is a convenience for pointer and keyboard users, and it is not read to screen readers or shown on touch screens, so never put anything in it that people cannot find on the page it links to.

For a plain name or hint on a button, use a Tooltip. For content people open on purpose and can interact with, use a Popover.

Import#

Copyimport {
  PreviewCard,
  PreviewCardTrigger,
  PreviewCardContent,
  createPreviewCardHandle,
} from "@hel/ui/preview-card"

Anatomy#

PreviewCard holds the open state, PreviewCardTrigger is the link, and PreviewCardContent is the card.

The trigger is a real inline link, styled as one, so it sits in a sentence. Give it an href, because that is where the link goes when it is clicked.

Copy<PreviewCard>
  <PreviewCardTrigger href="/accounts/northwind">Northwind Accounting</PreviewCardTrigger>
  <PreviewCardContent className="w-64">...</PreviewCardContent>
</PreviewCard>

Examples#

One card for several links#

When many links in a text each have a card, share one card between them. Create a handle with createPreviewCardHandle, pass it to each trigger together with a payload, and pass the same handle to a single PreviewCard. The card takes its content from the payload of the link that is hovered, and moves smoothly from one link to the next instead of closing and opening again.

import {
  PreviewCard,
  PreviewCardContent,

Position and looks#

side is the side of the link the card opens on, bottom by default, and it flips when there is no room. align is start, center or end, and sideOffset is the gap, 8px by default. Use inline-start and inline-end when the layout can be right to left. padding takes a step of the spacing scale, and a small step suits a card with an image that goes to the edge. Set the width with className. disableAnimation turns the motion off.

Props#

PreviewCardContent#

PreviewCardTrigger#

PreviewCard#

Takes every prop of the Base UI preview card, such as open, defaultOpen, onOpenChange and handle.