Prefetching

Load anticipated content in advance.

html

<div class="lod-pfc-stage" data-trigger="hover">
  <a href="#" class="lod-pfc-link">View pricing <span class="lod-pfc-badge" style="background:#D9C8F0;">prefetched</span></a>
  <p class="lod-pfc-caption">On hover, the next page's data loads quietly in the background &mdash; so the click feels instant</p>
</div>
<style>
.lod-pfc-stage { width: 100%; max-width: 320px; padding: 18px; background: #FAF7F2; border: 1px solid #24143022; border-radius: 12px; font: 13px system-ui, sans-serif; color: #241430aa; }
.lod-pfc-link { display: inline-flex; align-items: center; gap: 8px; color: #241430; font-weight: 600; text-decoration: none; border-bottom: 1.5px solid #241430; padding-bottom: 2px; }
.lod-pfc-badge { font-size: 10px; font-weight: 700; text-transform: uppercase; color: #241430; padding: 2px 6px; border-radius: 999px; }
.lod-pfc-caption { margin: 12px 0 0; }
</style>

tailwind

<div class="w-full max-w-[320px] p-[18px] bg-[#FAF7F2] border border-[#24143022] rounded-xl font-sans text-sm text-[#241430]/70" data-trigger="hover">
  <a href="#" class="inline-flex items-center gap-2 text-[#241430] font-semibold no-underline border-b-[1.5px] border-[#241430] pb-0.5">View pricing <span class="text-[10px] font-bold uppercase text-[#241430] px-1.5 py-0.5 rounded-full" style="background:#D9C8F0;">prefetched</span></a>
  <p class="mt-3">On hover, the next page's data loads quietly in the background &mdash; so the click feels instant</p>
</div>

react

export function Prefetching({
  trigger = "hover",
  prefetched = true,
  linkLabel = "View pricing",
  accent = "#D9C8F0",
}) {
  return (
    <div style={{ width: "100%", maxWidth: 320, padding: 18, background: "#FAF7F2", border: "1px solid #24143022", borderRadius: 12, fontFamily: "system-ui, sans-serif", fontSize: 13, color: "#241430aa" }}>
      <a href="#" style={{ display: "inline-flex", alignItems: "center", gap: 8, color: "#241430", fontWeight: 600, textDecoration: "none", borderBottom: "1.5px solid #241430", paddingBottom: 2 }}>
        {linkLabel} {prefetched && <span style={{ fontSize: 10, fontWeight: 700, textTransform: "uppercase", color: "#241430", padding: "2px 6px", borderRadius: 999, background: accent }}>prefetched</span>}
      </a>
      <p style={{ margin: "12px 0 0" }}>On {trigger}, the next page's data loads quietly in the background &mdash; so the click feels instant</p>
    </div>
  );
}