features list sticky split icons features list sticky split icons vertical detailed feature list with sticky heading split features section
Features List
Fetch pattern JSON:
curl https://webspire.de/patterns/features/list.json list.html
<section class="ws-features bg-[var(--ws-features-bg)] py-20">
<div class="mx-auto max-w-7xl px-6">
<div class="grid gap-16 lg:grid-cols-2 lg:items-start">
<!-- Heading -->
<div class="lg:sticky lg:top-24">
<p class="text-sm font-semibold uppercase tracking-[0.18em] text-[var(--ws-features-icon-color)]">Features</p>
<h2 class="mt-3 text-balance text-3xl font-bold tracking-tight text-[var(--ws-features-text)] sm:text-4xl">Everything your team needs</h2>
<p class="mt-4 text-pretty text-lg text-[var(--ws-features-text-soft)]">A complete platform to build, customize, and ship production-ready interfaces.</p>
<a href="#" class="mt-6 inline-flex items-center gap-2 text-sm font-semibold text-[var(--ws-features-icon-color)] hover:opacity-80">
Learn more
<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>
</a>
</div>
<!-- Feature list -->
<div class="space-y-8">
<div class="flex gap-5">
<div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-[var(--ws-features-icon-bg)] text-[var(--ws-features-icon-color)]">
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M14.25 9.75L16.5 12l-2.25 2.25m-4.5 0L7.5 12l2.25-2.25M6 20.25h12A2.25 2.25 0 0020.25 18V6A2.25 2.25 0 0018 3.75H6A2.25 2.25 0 003.75 6v12A2.25 2.25 0 006 20.25z"/></svg>
</div>
<div>
<h3 class="text-base font-semibold text-[var(--ws-features-text)]">Copy-paste patterns</h3>
<p class="mt-1 text-sm text-[var(--ws-features-text-muted)]">Every pattern is production-ready HTML with Tailwind utilities. Copy into your project and customize immediately.</p>
</div>
</div>
<div class="flex gap-5">
<div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-[var(--ws-features-icon-bg)] text-[var(--ws-features-icon-color)]">
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M21 7.5l-2.25-1.313M21 7.5v2.25m0-2.25l-2.25 1.313M3 7.5l2.25-1.313M3 7.5l2.25 1.313M3 7.5v2.25m9 3l2.25-1.313M12 12.75l-2.25-1.313M12 12.75V15m0 6.75l2.25-1.313M12 21.75V19.5m0 2.25l-2.25-1.313m0-16.875L12 2.25l2.25 1.313M21 14.25v2.25l-2.25 1.313m-13.5 0L3 16.5v-2.25"/></svg>
</div>
<div>
<h3 class="text-base font-semibold text-[var(--ws-features-text)]">Family model</h3>
<p class="mt-1 text-sm text-[var(--ws-features-text-muted)]">Patterns are organized in families with a base and enhanced variants. Start minimal, add complexity along clear axes.</p>
</div>
</div>
<div class="flex gap-5">
<div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-[var(--ws-features-icon-bg)] text-[var(--ws-features-icon-color)]">
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9.53 16.122a3 3 0 00-5.78 1.128 2.25 2.25 0 01-2.4 2.245 4.5 4.5 0 008.4-2.245c0-.399-.078-.78-.22-1.128zm0 0a15.998 15.998 0 003.388-1.62m-5.043-.025a15.994 15.994 0 011.622-3.395m3.42 3.42a15.995 15.995 0 004.764-4.648l3.876-5.814a1.151 1.151 0 00-1.597-1.597L14.146 6.32a15.996 15.996 0 00-4.649 4.763m3.42 3.42a6.776 6.776 0 00-3.42-3.42"/></svg>
</div>
<div>
<h3 class="text-base font-semibold text-[var(--ws-features-text)]">Design tokens</h3>
<p class="mt-1 text-sm text-[var(--ws-features-text-muted)]">Every pattern uses consistent spacing, color, and typography tokens. Change your brand colors once, update everywhere.</p>
</div>
</div>
<div class="flex gap-5">
<div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-[var(--ws-features-icon-bg)] text-[var(--ws-features-icon-color)]">
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z"/></svg>
</div>
<div>
<h3 class="text-base font-semibold text-[var(--ws-features-text)]">Accessible by default</h3>
<p class="mt-1 text-sm text-[var(--ws-features-text-muted)]">Semantic HTML, ARIA attributes, keyboard navigation, and prefers-reduced-motion support in every pattern.</p>
</div>
</div>
<div class="flex gap-5">
<div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-[var(--ws-features-icon-bg)] text-[var(--ws-features-icon-color)]">
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6.75 7.5l3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0021 18V6a2.25 2.25 0 00-2.25-2.25H5.25A2.25 2.25 0 003 6v12a2.25 2.25 0 002.25 2.25z"/></svg>
</div>
<div>
<h3 class="text-base font-semibold text-[var(--ws-features-text)]">CLI & API</h3>
<p class="mt-1 text-sm text-[var(--ws-features-text-muted)]">Add patterns via the CLI or fetch from the JSON API. AI agents can discover and compose sections through MCP tools.</p>
</div>
</div>
<div class="flex gap-5">
<div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-[var(--ws-features-icon-bg)] text-[var(--ws-features-icon-color)]">
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z"/></svg>
</div>
<div>
<h3 class="text-base font-semibold text-[var(--ws-features-text)]">Dark mode ready</h3>
<p class="mt-1 text-sm text-[var(--ws-features-text-muted)]">Every pattern includes carefully crafted dark mode variants using Tailwind's dark: modifier. No extra setup needed.</p>
</div>
</div>
</div>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
featuresliststickyspliticons
Slots
| Name | Required | Description |
|---|---|---|
| heading | Yes | Sticky left column with kicker, headline, description, and CTA link. |
| features | Yes | Vertical list of icon + title + description items. |
Split features layout. Left column is sticky with kicker, headline, description, and learn-more link. Right column has a vertical list of 6 features, each with an icon badge, title, and description. As you scroll, the heading stays visible while features scroll past.