Hero Image

Primary image or visual within the hero.

html

<figure class="hero-img hero-img--wide hero-img--rounded">
  <div class="hero-img__visual" style="background: linear-gradient(160deg, #D9C8F0, #FAF7F2 70%);" role="img" aria-label="Product dashboard showing a live activity feed"></div>
  <figcaption class="hero-img__badge">Live in 12 countries</figcaption>
</figure>
<style>
.hero-img { position: relative; margin: 0; max-width: 420px; overflow: hidden; }
.hero-img--rounded { border-radius: 20px; }
.hero-img--full-bleed { border-radius: 0; }
.hero-img__visual { width: 100%; }
.hero-img--square .hero-img__visual { aspect-ratio: 1 / 1; }
.hero-img--wide .hero-img__visual { aspect-ratio: 16 / 10; }
.hero-img--tall .hero-img__visual { aspect-ratio: 3 / 4; }
.hero-img__badge { position: absolute; left: 16px; bottom: 16px; background: #FAF7F2; color: #241430; font: 600 13px system-ui, sans-serif; padding: 8px 14px; border-radius: 999px; box-shadow: 0 8px 20px rgba(36,20,48,.18); margin: 0; }
</style>

tailwind

<figure class="hero-img-tw hero-img-tw--wide hero-img-tw--rounded relative m-0 max-w-[420px] overflow-hidden">
  <div class="hero-img-tw__visual w-full" style="background: linear-gradient(160deg, #D9C8F0, #FAF7F2 70%);" role="img" aria-label="Product dashboard showing a live activity feed"></div>
  <figcaption class="absolute left-4 bottom-4 bg-[#FAF7F2] text-[#241430] font-semibold text-[13px] px-3.5 py-2 rounded-full shadow-lg m-0">Live in 12 countries</figcaption>
</figure>
<style>
.hero-img-tw--rounded { border-radius: 20px; }
.hero-img-tw--full-bleed { border-radius: 0; }
.hero-img-tw--square .hero-img-tw__visual { aspect-ratio: 1 / 1; }
.hero-img-tw--wide .hero-img-tw__visual { aspect-ratio: 16 / 10; }
.hero-img-tw--tall .hero-img-tw__visual { aspect-ratio: 3 / 4; }
</style>

react

export function HeroImage({
  altText = "Product dashboard showing a live activity feed",
  aspect = "wide",
  framing = "rounded",
  accent = "#D9C8F0",
  showBadge = true,
}) {
  const ratio = { square: "1 / 1", wide: "16 / 10", tall: "3 / 4" }[aspect] ?? "16 / 10";
  return (
    <figure style={{ position: "relative", margin: 0, maxWidth: 420, overflow: "hidden",
      borderRadius: framing === "rounded" ? 20 : 0 }}>
      <div role="img" aria-label={altText} style={{ width: "100%", aspectRatio: ratio,
        background: `linear-gradient(160deg, ${accent}, #FAF7F2 70%)` }} />
      {showBadge && (
        <figcaption style={{ position: "absolute", left: 16, bottom: 16, background: "#FAF7F2", color: "#241430",
          font: "600 13px system-ui, sans-serif", padding: "8px 14px", borderRadius: 999, boxShadow: "0 8px 20px rgba(36,20,48,.18)", margin: 0 }}>
          Live in 12 countries
        </figcaption>
      )}
    </figure>
  );
}