Preview Card

A link that shows a destination preview without interrupting keyboard or screen reader navigation. The popup is visual only (aria-hidden); keep essential information on the linked page. The popup has no stroke and the arrow matches that surface.

The principles of good typography remain in the digital age.

Anatomy

<UiPreviewCardRoot>
  <UiPreviewCardTrigger href="/page">Link</UiPreviewCardTrigger>
  <UiPreviewCardPortal>
    <UiPreviewCardPositioner>
      <UiPreviewCardPopup>
        <UiPreviewCardArrow />
        Preview
      </UiPreviewCardPopup>
    </UiPreviewCardPositioner>
  </UiPreviewCardPortal>
</UiPreviewCardRoot>

Parts

  • Root — owns open state. delay / closeDelay for hover.
  • Trigger — a link. Hover or focus opens the preview.
  • Portal / Positioner / Popup — supplementary preview. Pointer can move onto it. Esc is not required; blur and pointer leave close.
  • Arrow — matches the popup surface. No drop-shadow.