Cards Image Overlay

Fetch pattern JSON: curl https://webspire.de/patterns/cards/overlay.json

overlay.html

<section class="ws-cards bg-[var(--ws-cards-bg)] py-20">
  <div class="mx-auto max-w-7xl px-6">
    <div class="mx-auto max-w-2xl text-center">
      <p class="text-sm font-semibold uppercase tracking-[0.18em] text-[var(--ws-cards-text-soft)]">Stories</p>
      <h2 class="mt-3 text-balance text-3xl font-bold tracking-tight text-[var(--ws-cards-text)] sm:text-4xl">From the field</h2>
    </div>

    <div class="mt-12 grid gap-5 sm:grid-cols-2 lg:grid-cols-3">

      <!-- Card 1: Dark overlay -->
      <a href="#" class="group relative flex min-h-72 flex-col justify-end overflow-hidden rounded-3xl p-6"
         style="background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.75) 100%), url('https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800&q=80') center/cover no-repeat;"><!-- ws-ok -->
        <div class="relative z-10">
          <p class="text-xs font-semibold uppercase tracking-[0.15em] text-white/60">Landscape</p>
          <h3 class="mt-1 text-xl font-bold leading-snug text-white transition group-hover:text-white/90">Into the alpine — a two-week traverse</h3>
          <p class="mt-2 text-sm leading-relaxed text-white/70">Crossing four mountain passes with nothing but a pack and a compass.</p>
          <span class="mt-4 inline-flex items-center gap-1.5 text-sm font-semibold text-white/90 transition group-hover:gap-2.5">
            Read story
            <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"/></svg>
          </span>
        </div>
      </a>

      <!-- Card 2: Lighter gradient (mid-tone image) -->
      <a href="#" class="group relative flex min-h-72 flex-col justify-end overflow-hidden rounded-3xl p-6"
         style="background: linear-gradient(to bottom, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.65) 100%), url('https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80') center/cover no-repeat;"><!-- ws-ok -->
        <div class="relative z-10">
          <p class="text-xs font-semibold uppercase tracking-[0.15em] text-white/60">Night photography</p>
          <h3 class="mt-1 text-xl font-bold leading-snug text-white transition group-hover:text-white/90">Shooting the Milky Way at 4,000m</h3>
          <p class="mt-2 text-sm leading-relaxed text-white/70">Long exposures, cold fingers, and why it was worth every second.</p>
          <span class="mt-4 inline-flex items-center gap-1.5 text-sm font-semibold text-white/90 transition group-hover:gap-2.5">
            Read story
            <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"/></svg>
          </span>
        </div>
      </a>

      <!-- Card 3: Tinted gradient (brand color) -->
      <a href="#" class="group relative flex min-h-72 flex-col justify-end overflow-hidden rounded-3xl p-6"
         style="background: linear-gradient(to bottom, rgba(79,70,229,0.3) 0%, rgba(79,70,229,0.85) 100%), url('https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?w=800&q=80') center/cover no-repeat;"><!-- ws-ok -->
        <div class="relative z-10">
          <p class="text-xs font-semibold uppercase tracking-[0.15em] text-white/60">Desert</p>
          <h3 class="mt-1 text-xl font-bold leading-snug text-white transition group-hover:text-white/90">Red rock canyons of the Colorado Plateau</h3>
          <p class="mt-2 text-sm leading-relaxed text-white/70">A visual journey through Utah's most otherworldly landscapes.</p>
          <span class="mt-4 inline-flex items-center gap-1.5 text-sm font-semibold text-white/90 transition group-hover:gap-2.5">
            Read story
            <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"/></svg>
          </span>
        </div>
      </a>

    </div>
  </div>
</section>

Details

Family

cards

Tier

enhanced

Kind

section

Extends

cards/base

Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste

Stable Published

cardsimage-overlaygradientfullbleededitorialstorydarkphotography

Slots

Name	Required	Description
heading	No	Optional kicker and section title above the cards.
cards	Yes	Three cards with background-image+gradient inline style, category eyebrow, title, description, and arrow link.

Three-column cards where the entire card surface is a background image with a CSS gradient overlay. Text content (category eyebrow, title, description, “Read story →” arrow) sits in the lower portion of the card against the gradient. Three gradient variants shown: dark (80%→40% black), neutral, and brand-tinted (indigo 30%→85%). Different from cards/image (regular img element in card header) — here the image is the card itself.