features alternating vertical list divider icon rhythm saas features alternating list divider icon vertical zigzag stacked alternating icon feature list vertical feature rows with dividers zigzag icon feature section
Features Vertical Alternating
Fetch pattern JSON:
curl https://webspire.de/patterns/features/vertical-alternating.json vertical-alternating.html
<section class="ws-features ws-features-alternating bg-[var(--ws-features-bg)] py-20">
<div class="mx-auto max-w-4xl px-6">
<!-- Section header -->
<div class="mb-14 text-center">
<h2 class="text-3xl font-bold text-[var(--ws-features-text)] sm:text-4xl">Built for how teams work</h2>
<p class="mt-4 text-lg text-[var(--ws-features-text-soft)]">Four principles that shape every decision we make.</p>
</div>
<!-- Feature list -->
<div class="divide-y divide-[var(--ws-features-border)]">
<!-- Feature 1 — icon left, text right (default) -->
<div class="flex flex-col items-start gap-6 py-10 sm:flex-row sm:items-center">
<!-- Icon -->
<div class="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-violet-100">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-violet-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z"/>
</svg>
</div>
<!-- Text -->
<div>
<h3 class="text-lg font-bold text-[var(--ws-features-text)]">Speed without shortcuts</h3>
<p class="mt-2 leading-relaxed text-[var(--ws-features-text-soft)]">We optimize every layer of the stack so your product ships faster — without cutting corners on reliability or user experience.</p>
</div>
</div>
<!-- Feature 2 — text left, icon right (reversed) -->
<div class="flex flex-col items-start gap-6 py-10 sm:flex-row-reverse sm:items-center">
<div class="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-emerald-100">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/>
</svg>
</div>
<div>
<h3 class="text-lg font-bold text-[var(--ws-features-text)]">Collaboration at the core</h3>
<p class="mt-2 leading-relaxed text-[var(--ws-features-text-soft)]">Every feature is designed for teams — shared context, real-time updates, and clear ownership so nothing falls through the cracks.</p>
</div>
</div>
<!-- Feature 3 — icon left, text right -->
<div class="flex flex-col items-start gap-6 py-10 sm:flex-row sm:items-center">
<div class="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-sky-100">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-sky-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
</svg>
</div>
<div>
<h3 class="text-lg font-bold text-[var(--ws-features-text)]">Decisions backed by data</h3>
<p class="mt-2 leading-relaxed text-[var(--ws-features-text-soft)]">Surface the metrics that matter — usage, performance, and outcomes — directly in your workflow, not buried in a separate dashboard.</p>
</div>
</div>
<!-- Feature 4 — text left, icon right (reversed) -->
<div class="flex flex-col items-start gap-6 py-10 sm:flex-row-reverse sm:items-center">
<div class="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-rose-100">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-rose-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
</svg>
</div>
<div>
<h3 class="text-lg font-bold text-[var(--ws-features-text)]">Security you can trust</h3>
<p class="mt-2 leading-relaxed text-[var(--ws-features-text-soft)]">Enterprise-grade encryption, granular permissions, and audit logs — so your data stays yours and compliance stays effortless.</p>
</div>
</div>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
featuresalternatingverticallistdividericonrhythmsaas
Four feature rows stacked vertically with divide-y dividers between each. Odd rows have the icon on the left; even rows use flex-row-reverse to place the icon on the right, creating a visual zigzag rhythm. No card backgrounds — flat on the section background for a clean, editorial feel. Icons stack above text on mobile.