features sticky value-props enterprise ai platform sticky value-props dividers enterprise platform features sticky heading features section scrollable value propositions enterprise feature list with dividers
Features Sticky Left
Fetch pattern JSON:
curl https://webspire.de/patterns/features/sticky-left.json sticky-left.html
<section class="ws-features bg-[var(--ws-features-bg)] py-24">
<div class="mx-auto max-w-7xl px-6">
<div class="grid gap-16 lg:grid-cols-2 lg:gap-24">
<!-- Left: sticky heading -->
<div class="lg:sticky lg:top-28 lg:self-start">
<p class="text-sm font-semibold uppercase tracking-[0.15em] text-[var(--ws-features-icon-color)]">Platform</p>
<h2 class="mt-4 text-balance text-3xl font-bold tracking-tight text-[var(--ws-features-text)] sm:text-4xl">Your AI future belongs in your hands</h2>
<p class="mt-5 text-base leading-relaxed text-[var(--ws-features-text-soft)]">Every capability built for enterprise-grade control — from fine-tuning to private deployment to production-ready agents.</p>
<a href="#" class="mt-8 inline-flex items-center gap-2 rounded-lg bg-[var(--ws-features-icon-bg)] px-5 py-2.5 text-sm font-semibold text-[var(--ws-features-icon-color)] transition hover:opacity-80">
Explore the platform
<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.5 21 12m0 0-7.5 7.5M21 12H3"/></svg>
</a>
</div>
<!-- Right: stacked value cards with dividers -->
<div class="divide-y divide-[var(--ws-features-border)]">
<div class="py-8 first:pt-0">
<div class="flex items-start gap-4">
<span class="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-[var(--ws-features-icon-bg)]">
<svg class="h-4 w-4 text-[var(--ws-features-icon-color)]" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904 9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.091Z"/></svg>
</span>
<div>
<h3 class="text-base font-semibold text-[var(--ws-features-text)]">Frontier intelligence, customized</h3>
<p class="mt-2 text-sm leading-relaxed text-[var(--ws-features-text-soft)]">Fine-tune on your proprietary data. Build models that know your domain, your language, and your customers — not generic answers.</p>
</div>
</div>
</div>
<div class="py-8">
<div class="flex items-start gap-4">
<span class="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-[var(--ws-features-icon-bg)]">
<svg class="h-4 w-4 text-[var(--ws-features-icon-color)]" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6A2.25 2.25 0 0 1 6 3.75h2.25A2.25 2.25 0 0 1 10.5 6v2.25a2.25 2.25 0 0 1-2.25 2.25H6a2.25 2.25 0 0 1-2.25-2.25V6ZM3.75 15.75A2.25 2.25 0 0 1 6 13.5h2.25a2.25 2.25 0 0 1 2.25 2.25V18a2.25 2.25 0 0 1-2.25 2.25H6A2.25 2.25 0 0 1 3.75 18v-2.25ZM13.5 6a2.25 2.25 0 0 1 2.25-2.25H18A2.25 2.25 0 0 1 20.25 6v2.25A2.25 2.25 0 0 1 18 10.5h-2.25a2.25 2.25 0 0 1-2.25-2.25V6ZM13.5 15.75a2.25 2.25 0 0 1 2.25-2.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-2.25A2.25 2.25 0 0 1 13.5 18v-2.25Z"/></svg>
</span>
<div>
<h3 class="text-base font-semibold text-[var(--ws-features-text)]">Enterprise agents with full context</h3>
<p class="mt-2 text-sm leading-relaxed text-[var(--ws-features-text-soft)]">Connect your internal tools, documents, and databases. Agents that understand your stack and act within defined guardrails.</p>
</div>
</div>
</div>
<div class="py-8">
<div class="flex items-start gap-4">
<span class="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-[var(--ws-features-icon-bg)]">
<svg class="h-4 w-4 text-[var(--ws-features-icon-color)]" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z"/></svg>
</span>
<div>
<h3 class="text-base font-semibold text-[var(--ws-features-text)]">Private, secure deployments</h3>
<p class="mt-2 text-sm leading-relaxed text-[var(--ws-features-text-soft)]">Deploy on-premise or in your own cloud. Data stays in your infrastructure — no model provider ever sees your sensitive content.</p>
</div>
</div>
</div>
<div class="py-8 last:pb-0">
<div class="flex items-start gap-4">
<span class="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-[var(--ws-features-icon-bg)]">
<svg class="h-4 w-4 text-[var(--ws-features-icon-color)]" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18 9 11.25l4.306 4.306a11.95 11.95 0 0 1 5.814-5.518l2.74-1.22m0 0-5.94-2.281m5.94 2.28-2.28 5.941"/></svg>
</span>
<div>
<h3 class="text-base font-semibold text-[var(--ws-features-text)]">Applied AI for your vertical</h3>
<p class="mt-2 text-sm leading-relaxed text-[var(--ws-features-text-soft)]">Industry-specific solutions for legal, healthcare, finance, and logistics — built on the same configurable foundation.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
featuresstickyvalue-propsenterpriseaiplatform
Slots
| Name | Required | Description |
|---|---|---|
| eyebrow | No | Small uppercase label above the heading. |
| heading | Yes | Sticky section title on the left column. |
| subtext | No | Supporting paragraph beneath the heading. |
| cta | No | Action link below the heading text. |
| cards | Yes | Stacked value cards with icon, title, and description separated by dividers. |
Two-column features section: sticky heading on the left, stacked cards with divide-y separators on the right. The heading stays pinned as the user scrolls past the cards. Ideal for enterprise or platform pages with 3–6 distinct value propositions.