features icons grid circles capabilities visual features icons grid circles colored visual capabilities icon grid feature section visual feature showcase with icons
Features Icon Grid
Fetch pattern JSON:
curl https://webspire.de/patterns/features/icon-grid.json icon-grid.html
<section class="ws-features bg-[var(--ws-features-bg)] py-24">
<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)]">Why choose us</p>
<h2 class="mt-3 text-balance text-3xl font-bold tracking-tight text-[var(--ws-features-text)] sm:text-4xl">Built for teams that move fast</h2>
<p class="mt-4 text-pretty text-lg text-[var(--ws-features-text-muted)]">Everything you need to ship beautiful products — from design to deployment, without the overhead.</p>
</div>
<div class="mt-16 grid gap-x-8 gap-y-12 sm:grid-cols-2 lg:grid-cols-3">
<div class="text-center">
<div class="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-[var(--ws-features-icon-bg)] text-[var(--ws-features-icon-color)]">
<svg class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z"/></svg>
</div>
<h3 class="mt-5 text-lg font-semibold text-[var(--ws-features-text)]">Lightning fast</h3>
<p class="mt-2 text-sm leading-relaxed text-[var(--ws-features-text-muted)]">Optimized for speed at every layer. Sub-second builds, instant previews, and zero runtime overhead.</p>
</div>
<div class="text-center">
<div class="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-emerald-100 text-emerald-600">
<svg class="h-8 w-8" 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>
<h3 class="mt-5 text-lg font-semibold text-[var(--ws-features-text)]">Secure by default</h3>
<p class="mt-2 text-sm leading-relaxed text-[var(--ws-features-text-muted)]">Enterprise-grade security baked in. Automatic vulnerability scanning, audit logs, and role-based access control.</p>
</div>
<div class="text-center">
<div class="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-amber-100 text-amber-600">
<svg class="h-8 w-8" 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>
<h3 class="mt-5 text-lg font-semibold text-[var(--ws-features-text)]">Fully customizable</h3>
<p class="mt-2 text-sm leading-relaxed text-[var(--ws-features-text-muted)]">Tailor every aspect to your brand. Live previews, design tokens, and one-click theme switching built right in.</p>
</div>
<div class="text-center">
<div class="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-rose-100 text-rose-600">
<svg class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z"/></svg>
</div>
<h3 class="mt-5 text-lg font-semibold text-[var(--ws-features-text)]">Team collaboration</h3>
<p class="mt-2 text-sm leading-relaxed text-[var(--ws-features-text-muted)]">Real-time editing, shared workspaces, and granular permissions so your whole team can contribute seamlessly.</p>
</div>
<div class="text-center">
<div class="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-sky-100 text-sky-600">
<svg class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z"/></svg>
</div>
<h3 class="mt-5 text-lg font-semibold text-[var(--ws-features-text)]">Advanced analytics</h3>
<p class="mt-2 text-sm leading-relaxed text-[var(--ws-features-text-muted)]">Actionable insights with real-time dashboards, custom reports, and automated alerts to keep you informed.</p>
</div>
<div class="text-center">
<div class="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-violet-100 text-violet-600">
<svg class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M14.25 6.087c0-.355.186-.676.401-.959.221-.29.349-.634.349-1.003 0-1.036-1.007-1.875-2.25-1.875s-2.25.84-2.25 1.875c0 .369.128.713.349 1.003.215.283.401.604.401.959v0a.64.64 0 01-.657.643 48.39 48.39 0 01-4.163-.3c.186 1.613.293 3.25.315 4.907a.656.656 0 01-.658.663v0c-.355 0-.676-.186-.959-.401a1.647 1.647 0 00-1.003-.349c-1.036 0-1.875 1.007-1.875 2.25s.84 2.25 1.875 2.25c.369 0 .713-.128 1.003-.349.283-.215.604-.401.959-.401v0c.31 0 .555.26.532.57a48.039 48.039 0 01-.642 5.056c1.518.19 3.058.309 4.616.354a.64.64 0 00.657-.643v0c0-.355-.186-.676-.401-.959a1.647 1.647 0 01-.349-1.003c0-1.035 1.008-1.875 2.25-1.875 1.243 0 2.25.84 2.25 1.875 0 .369-.128.713-.349 1.003-.215.283-.4.604-.4.959v0c0 .333.277.599.61.58a48.1 48.1 0 005.427-.63 48.05 48.05 0 00.582-4.717.532.532 0 00-.533-.57v0c-.355 0-.676.186-.959.401-.29.221-.634.349-1.003.349-1.035 0-1.875-1.007-1.875-2.25s.84-2.25 1.875-2.25c.37 0 .713.128 1.003.349.283.215.604.401.96.401v0a.656.656 0 00.657-.663 48.422 48.422 0 00-.37-5.36c-1.886.342-3.81.574-5.766.689a.578.578 0 01-.61-.58v0z"/></svg>
</div>
<h3 class="mt-5 text-lg font-semibold text-[var(--ws-features-text)]">Extensible plugins</h3>
<p class="mt-2 text-sm leading-relaxed text-[var(--ws-features-text-muted)]">A rich plugin ecosystem lets you add functionality on demand. Build custom integrations or choose from the marketplace.</p>
</div>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
featuresiconsgridcirclescapabilitiesvisual
Slots
| Name | Required | Description |
|---|---|---|
| heading | No | Section title and subtitle centered above the grid. |
| features | Yes | 3x2 grid of feature cards with large icon circles, title, and description. |
Icon-focused 3x2 feature grid. Each card features a large colored circle with an SVG icon, a bold title, and a short description. Responsive: 3 → 2 → 1 columns. Icon circles use distinct colors for visual variety.