Open Graph Image

Preview image shown when a link is shared.

html

<div class="og-card og-card--light">
  <div class="og-card__image" style="aspect-ratio:1.91 / 1;" aria-hidden="true">
    <svg viewBox="0 0 400 210" width="100%" height="100%" preserveAspectRatio="xMidYMid slice"><rect width="400" height="210" fill="#F5C2E0"/><circle cx="320" cy="50" r="26" fill="#E8A020"/><path d="M0 170 L100 110 L200 160 L300 90 L400 150 L400 210 L0 210 Z" fill="#BFD9F2"/></svg>
  </div>
  <div class="og-card__body">
    <p class="og-card__title">How we redesigned our onboarding flow</p>
    <p class="og-card__domain">example.com</p>
  </div>
</div>
<style>
.og-card { max-width: 360px; border-radius: 10px; overflow: hidden; border: 1px solid #24143022; font: 13px/1.4 system-ui, sans-serif; }
.og-card--light { background: #FAF7F2; color: #241430; }
.og-card--dark { background: #241430; color: #FAF7F2; }
.og-card__image { display: block; width: 100%; }
.og-card__body { padding: 10px 12px; }
.og-card__title { margin: 0 0 4px; font-weight: 600; }
.og-card__domain { margin: 0; opacity: .6; text-transform: uppercase; font-size: 11px; letter-spacing: .04em; }
</style>

tailwind

<div class="og-card-tw og-card-tw--light max-w-[360px] rounded-[10px] overflow-hidden border border-[#24143022] font-sans text-[13px]">
  <div class="block w-full" style="aspect-ratio:1.91 / 1;" aria-hidden="true">
    <svg viewBox="0 0 400 210" width="100%" height="100%" preserveAspectRatio="xMidYMid slice"><rect width="400" height="210" fill="#F5C2E0"/><circle cx="320" cy="50" r="26" fill="#E8A020"/><path d="M0 170 L100 110 L200 160 L300 90 L400 150 L400 210 L0 210 Z" fill="#BFD9F2"/></svg>
  </div>
  <div class="px-3 py-2.5">
    <p class="m-0 mb-1 font-semibold">How we redesigned our onboarding flow</p>
    <p class="m-0 opacity-60 uppercase text-[11px] tracking-wide">example.com</p>
  </div>
</div>
<style>
.og-card-tw--light { background: #FAF7F2; color: #241430; }
.og-card-tw--dark { background: #241430; color: #FAF7F2; }
</style>

react

export function OpenGraphImage({
  title = "How we redesigned our onboarding flow",
  domain = "example.com",
  theme = "light",
  ratio = "1.91 / 1",
}) {
  const dark = theme === "dark";
  return (
    <div style={{ maxWidth: 360, borderRadius: 10, overflow: "hidden", border: "1px solid #24143022",
      font: "13px/1.4 system-ui, sans-serif", background: dark ? "#241430" : "#FAF7F2", color: dark ? "#FAF7F2" : "#241430" }}>
      <div style={{ display: "block", width: "100%", aspectRatio: ratio }} aria-hidden="true">
        <svg viewBox="0 0 400 210" width="100%" height="100%" preserveAspectRatio="xMidYMid slice">
          <rect width="400" height="210" fill="#F5C2E0" />
          <circle cx="320" cy="50" r="26" fill="#E8A020" />
          <path d="M0 170 L100 110 L200 160 L300 90 L400 150 L400 210 L0 210 Z" fill="#BFD9F2" />
        </svg>
      </div>
      <div style={{ padding: "10px 12px" }}>
        <p style={{ margin: "0 0 4px", fontWeight: 600 }}>{title}</p>
        <p style={{ margin: 0, opacity: 0.6, textTransform: "uppercase", fontSize: 11, letterSpacing: "0.04em" }}>{domain}</p>
      </div>
    </div>
  );
}