Hero Product Tile

Fetch pattern JSON: curl https://webspire.de/patterns/hero/product-tile.json

product-tile.html

<!-- Apple-style full-width product hero tile.
     Always-dark section — hardcoded product colors, no dark: variants needed. -->
<section class="ws-hero relative flex min-h-[600px] flex-col items-center justify-start overflow-hidden bg-[#1d1d1f] pb-0 pt-14 text-center sm:min-h-[680px]"
  aria-label="iPhone 16 – Produkthero">

  <!-- Eyebrow label (optional: "Neu", "Ab sofort", "Jetzt vorbestellen") -->
  <p class="text-sm font-semibold tracking-wide text-[#6e6e73]">Neu</p>

  <!-- Product name -->
  <h1 class="mt-1 text-5xl font-bold tracking-tight text-white sm:text-6xl lg:text-7xl">
    iPhone&nbsp;16
  </h1>

  <!-- Tagline -->
  <p class="mt-3 text-xl text-[var(--ws-hero-text)] sm:text-2xl">
    Hello, Apple&nbsp;Intelligence.
  </p>

  <!-- Dual text-link CTAs — the Apple signature CTA pattern -->
  <div class="mt-5 flex items-center justify-center gap-1 text-base sm:text-lg"
    role="group" aria-label="iPhone 16 Aktionen">
    <a href="#" class="font-medium text-[#2997ff] transition hover:underline">
      Weitere Infos
    </a>
    <span class="mx-2 text-[#6e6e73]" aria-hidden="true">|</span>
    <a href="#" class="font-medium text-[#2997ff] transition hover:underline">
      Kaufen
    </a>
  </div>

  <!-- Product image area — replace this div with an img or picture element -->
  <!-- The image bleeds off the bottom edge: no bottom padding on section -->
  <div class="relative mt-10 flex w-full flex-1 items-end justify-center">
    <!-- Placeholder: phone silhouette. Replace with real product image. -->
    <div class="relative mx-auto w-56 sm:w-64 lg:w-72"
      role="img" aria-label="iPhone 16 Produktabbildung">
      <!-- Phone body -->
      <div class="relative mx-auto h-[400px] w-48 overflow-hidden rounded-[44px] bg-gradient-to-b from-slate-500 to-slate-800 shadow-[0_40px_80px_rgba(0,0,0,0.7)] sm:h-[480px] sm:w-56">
        <!-- Screen -->
        <div class="absolute inset-x-3 top-3 bottom-0 overflow-hidden rounded-[38px] bg-gradient-to-b from-indigo-900 via-slate-900 to-slate-950">
          <!-- Dynamic Island -->
          <div class="mx-auto mt-3 h-5 w-20 rounded-full bg-black"></div> <!-- ws-ok -->
          <!-- Screen glow -->
          <div class="mt-8 flex h-32 items-center justify-center">
            <div class="h-20 w-20 rounded-full bg-blue-500/20 blur-2xl"></div>
          </div>
        </div>
      </div>
    </div>
  </div>

</section>

Details

Family

hero

Tier

enhanced

Kind

section

Extends

hero/dark

Responsive Tailwind Only SSR Safe Copy & Paste

Stable Published

heroproductappleconsumerhardwaredual-ctafull-widthdarkpremiumdeviceecommerce

Slots

Name	Required	Description
eyebrow	No	Small label above product name (e.g. "Neu", "Ab sofort", "Jetzt vorbestellen").
product-name	Yes	Bold product name, typically 5xl–7xl depending on name length.
tagline	Yes	One-line product tagline, 1xl–2xl, slightly muted.
cta	Yes	Inline dual text-link CTAs separated by a pipe — "Weitere Infos" and "Kaufen".
product-image	Yes	Product image area. Replace the CSS placeholder div with a real <img> or <picture>. Bleeds off bottom edge — no bottom padding on the section.

Apple-style full-width product hero tile. Meant to be used as the primary product showcase — either standalone or stacked with multiple product tiles (one per product in the lineup).

The signature detail: the dual text-link CTA row with a pipe separator (“Weitere Infos | Kaufen”) — no buttons, just blue text links. Replace the CSS phone mockup with an actual product photo that bleeds off the bottom of the section.