Hero With Image

Fetch pattern JSON: curl https://webspire.de/patterns/hero/with-image.json

with-image.html

<section class="ws-hero relative isolate overflow-hidden bg-[var(--ws-hero-bg)] text-[var(--ws-hero-text)]">
  <div class="pointer-events-none absolute inset-0 bg-gradient-to-br from-indigo-500/20 via-transparent to-cyan-400/20"></div>
  <div class="mx-auto grid max-w-7xl gap-10 px-6 py-20 lg:grid-cols-2 lg:items-center lg:py-28">
    <div class="relative z-10">
      <p class="mb-4 inline-flex rounded-full border border-white/15 bg-white/5 px-3 py-1 text-xs font-medium uppercase tracking-[0.2em] text-[var(--ws-hero-text-soft)]">Hero With Image</p>
      <h1 class="text-balance text-4xl font-bold tracking-tight sm:text-5xl lg:text-6xl">Show the product where decisions happen.</h1>
      <p class="mt-5 max-w-xl text-pretty text-lg text-[var(--ws-hero-text-soft)]">A balanced hero variant with clear hierarchy and a dedicated media slot for screenshots, mockups, or analytics snapshots.</p>
      <div class="mt-8 flex flex-wrap gap-3">
        <a href="#" class="rounded-xl bg-cyan-300 px-5 py-3 text-sm font-semibold text-slate-900 transition hover:bg-cyan-200">Book demo</a>
        <a href="#" class="rounded-xl border border-white/20 bg-white/5 px-5 py-3 text-sm font-semibold text-slate-100 transition hover:bg-white/10">Explore docs</a>
      </div>
    </div>
    <div class="relative z-10">
      <div class="rounded-2xl border border-white/15 bg-white/5 p-4 shadow-2xl backdrop-blur">
        <div class="flex aspect-[3/2] w-full items-center justify-center rounded-xl bg-gradient-to-br from-cyan-200 to-cyan-300" aria-label="Dashboard preview">
          <svg class="h-12 w-12 text-[var(--ws-hero-text-muted)]" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909M3.75 21h16.5A2.25 2.25 0 0023.25 18.75V5.25A2.25 2.25 0 0020.25 3H3.75A2.25 2.25 0 001.5 5.25v13.5A2.25 2.25 0 003.75 21z" /></svg>
        </div>
      </div>
    </div>
  </div>
</section>

Details

Family

hero

Tier

enhanced

Kind

section

Extends

hero/base

Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste

Stable Published

landing-pageheroimagescreenshotproduct

Slots

Name	Required	Description
headline	Yes	Main value proposition.
body	Yes	Supporting paragraph.
actions	Yes	CTA group.
media	Yes	Screenshot or mockup panel.

Props

Name	Type	Default	Description
imageAlt	string	Dashboard preview	Accessible alt text for hero media image.

Use this when the product visual itself is part of the message and should be visible above the fold.