PreviewCard
A card that previews a link on hover.
Link previews
Use a preview card to preview a linked page. Hover a link to see its card. Each trigger here renders a Gatsby Link.
Watch real users with session replay, then roll out the fix with feature flags.
Open delay
Pass delay to PreviewCard.Trigger to set how long the hover lasts before the card opens. This demo uses 200 ms.
The code for this website is on GitHub.
Usage
These are defaults, not laws. Break one when you have a good reason, or when it makes the design more cohesive or more interesting.
- Choose the component from the trigger and the content. A hover card on a trigger that is not a link hides its content from touch users, so use a popover there.
Component Trigger Content Opens on Tooltip Any control A short text label Hover, focus PreviewCard A link A rich preview of the link target Hover, focus Popover with openOnHover Not a link Rich content, with or without controls Hover, click, tap, keyboard - Touch screens cannot hover, so do not put information in the card that the linked page does not have.
- For an internal link, pass
render={<GatsbyLink to="/path" />}toPreviewCard.Trigger.
API
Props that the library adds. Every part also takes all the Base UI props.
PreviewCard.Trigger
| Prop | Type | Default | Description |
|---|---|---|---|
| appearance | 'link' | 'none' | 'link' | link styles the trigger as a text link. none adds no styles, for a trigger that has its own look, such as a chip. |
PreviewCard.Popup
| Prop | Type | Default | Description |
|---|---|---|---|
| sideOffset | number | 8 | The gap between the link and the card, in pixels. |
| container | HTMLElement | ShadowRoot | RefObject | null | – | The element that the card renders into. The default is the document body. |