features zigzag alternating storytelling steps landing-page features zigzag alternating steps storytelling alternating feature rows with images zigzag product showcase
Features Alternating
Fetch pattern JSON:
curl https://webspire.de/patterns/features/alternating.json alternating.html
<section class="ws-features bg-[var(--ws-features-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-features-icon-color)]">How it works</p>
<h2 class="mt-3 text-balance text-3xl font-bold tracking-tight text-[var(--ws-features-text)] sm:text-4xl">Built for the way you work</h2>
</div>
<div class="mt-16 space-y-20">
<!-- Feature 1: Text left, visual right -->
<div class="grid items-center gap-10 lg:grid-cols-2">
<div>
<p class="text-sm font-semibold text-[var(--ws-features-icon-color)]">Step 1</p>
<h3 class="mt-2 text-2xl font-bold text-[var(--ws-features-text)]">Browse the registry</h3>
<p class="mt-4 text-base leading-relaxed text-[var(--ws-features-text-soft)]">Explore families of patterns organized by purpose — hero, pricing, testimonials, and more. Each entry includes live preview, responsive variants, and accessibility notes.</p>
<ul class="mt-6 space-y-3">
<li class="flex items-center gap-3 text-sm text-[var(--ws-features-text-soft)]">
<svg class="h-5 w-5 shrink-0 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
Search by intent, keyword, or family
</li>
<li class="flex items-center gap-3 text-sm text-[var(--ws-features-text-soft)]">
<svg class="h-5 w-5 shrink-0 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
Preview dark mode and responsive breakpoints
</li>
<li class="flex items-center gap-3 text-sm text-[var(--ws-features-text-soft)]">
<svg class="h-5 w-5 shrink-0 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
Machine-readable JSON API for agents
</li>
</ul>
</div>
<div class="rounded-2xl border border-[var(--ws-features-border)] bg-[var(--ws-features-card-bg)] p-8">
<div class="space-y-3">
<div class="h-4 w-3/4 rounded bg-[var(--ws-features-border)]"></div>
<div class="h-4 w-1/2 rounded bg-[var(--ws-features-border)]"></div>
<div class="mt-6 grid grid-cols-2 gap-3">
<div class="h-20 rounded-lg bg-[var(--ws-features-border)]"></div>
<div class="h-20 rounded-lg bg-[var(--ws-features-border)]"></div>
</div>
</div>
</div>
</div>
<!-- Feature 2: Visual left, text right -->
<div class="grid items-center gap-10 lg:grid-cols-2">
<div class="order-2 lg:order-1 rounded-2xl border border-[var(--ws-features-border)] bg-[var(--ws-features-card-bg)] p-8">
<div class="space-y-2">
<div class="flex gap-2">
<div class="h-8 w-8 rounded bg-[var(--ws-features-icon-bg)]"></div>
<div class="h-8 flex-1 rounded bg-[var(--ws-features-border)]"></div>
</div>
<div class="h-24 rounded-lg bg-[var(--ws-features-border)]"></div>
<div class="flex gap-2">
<div class="h-8 flex-1 rounded bg-emerald-200"></div>
<div class="h-8 w-20 rounded bg-[var(--ws-features-border)]"></div>
</div>
</div>
</div>
<div class="order-1 lg:order-2">
<p class="text-sm font-semibold text-[var(--ws-features-icon-color)]">Step 2</p>
<h3 class="mt-2 text-2xl font-bold text-[var(--ws-features-text)]">Copy and customize</h3>
<p class="mt-4 text-base leading-relaxed text-[var(--ws-features-text-soft)]">Grab the HTML, paste it into your project, and adjust Tailwind classes to match your brand. Every pattern uses standard utilities — no custom CSS required.</p>
<ul class="mt-6 space-y-3">
<li class="flex items-center gap-3 text-sm text-[var(--ws-features-text-soft)]">
<svg class="h-5 w-5 shrink-0 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
One-click copy for HTML, Astro, and Web Component
</li>
<li class="flex items-center gap-3 text-sm text-[var(--ws-features-text-soft)]">
<svg class="h-5 w-5 shrink-0 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
Live customization sliders for CSS properties
</li>
<li class="flex items-center gap-3 text-sm text-[var(--ws-features-text-soft)]">
<svg class="h-5 w-5 shrink-0 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
No framework lock-in — works everywhere
</li>
</ul>
</div>
</div>
<!-- Feature 3: Text left, visual right -->
<div class="grid items-center gap-10 lg:grid-cols-2">
<div>
<p class="text-sm font-semibold text-[var(--ws-features-icon-color)]">Step 3</p>
<h3 class="mt-2 text-2xl font-bold text-[var(--ws-features-text)]">Ship with confidence</h3>
<p class="mt-4 text-base leading-relaxed text-[var(--ws-features-text-soft)]">Every pattern is tested for accessibility, responsive behavior, and dark mode. Quality gates ensure consistent output across your team.</p>
<ul class="mt-6 space-y-3">
<li class="flex items-center gap-3 text-sm text-[var(--ws-features-text-soft)]">
<svg class="h-5 w-5 shrink-0 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
WCAG 2.1 AA accessible
</li>
<li class="flex items-center gap-3 text-sm text-[var(--ws-features-text-soft)]">
<svg class="h-5 w-5 shrink-0 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
Responsive from mobile to ultra-wide
</li>
<li class="flex items-center gap-3 text-sm text-[var(--ws-features-text-soft)]">
<svg class="h-5 w-5 shrink-0 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
SSR-safe, zero client JavaScript
</li>
</ul>
</div>
<div class="rounded-2xl border border-[var(--ws-features-border)] bg-[var(--ws-features-card-bg)] p-8">
<div class="space-y-3">
<div class="flex items-center gap-2">
<div class="h-3 w-3 rounded-full bg-emerald-400"></div>
<div class="h-3 w-32 rounded bg-[var(--ws-features-border)]"></div>
</div>
<div class="flex items-center gap-2">
<div class="h-3 w-3 rounded-full bg-emerald-400"></div>
<div class="h-3 w-28 rounded bg-[var(--ws-features-border)]"></div>
</div>
<div class="flex items-center gap-2">
<div class="h-3 w-3 rounded-full bg-emerald-400"></div>
<div class="h-3 w-36 rounded bg-[var(--ws-features-border)]"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
featureszigzagalternatingstorytellingstepslanding-page
Slots
| Name | Required | Description |
|---|---|---|
| heading | No | Section title. |
| features | Yes | Alternating feature blocks with text and visual. |
Three alternating feature blocks with text on one side and visual placeholder on the other. Each block includes step numbering, headline, description, and a checkmark list. On mobile, blocks stack vertically.