External Link Preview

Inline external link that reveals a popup preview of the destination on hover (Open Graph image + title + description). OG data is fetched via /api/og-image and cached in-memory across the session. Used on the /about page.

Live Preview

The component has no built-in styling — it inherits font size from its parent and colour from className. Both previews below use the same className as the /about page.

Recent clients include RewardPay, Monaco Lawyers.

Popup only renders on lg+ viewports. On narrow viewports the component degrades to a plain link.

Inside an experience bullet

Production context on /about: the link sits inside a bullet rendered at body-sm so it reads as supporting text rather than a CTA.

Redesigned CommBank's Home and Car Insurance products, creating a faster, more intuitive quote flow.

Props

Prop	Type	Default	Description
`href`*	`string`	-	Destination URL. Opens in a new tab with `rel="noopener noreferrer"`.
`children`*	`React.ReactNode`	-	Inline content rendered as the clickable text.
`className`	`string`	-	Classes applied to the inline <a>.

Behavior

OG fetch

Prefetched on mount and cached in an in-memory `Map` by `href`. Hover shows the popup immediately if cached, otherwise fetches.

Image preload

When OG data arrives with an image, the component creates an `Image` object to warm the browser cache before the popup shows.

Fallback

If the fetch fails or no OG data exists, the popup renders an animated-pulse skeleton.

Usage

tsx

<ExternalLinkPreview
  href="https://rewardpay.com.au"
  className="text-foreground-secondary decoration-text-muted hover:text-foreground hover:decoration-foreground/50 underline underline-offset-2 transition-colors"
>
  RewardPay
</ExternalLinkPreview>

Import

tsx

import { ExternalLinkPreview } from '@/components/ui/ExternalLinkPreview'