bento grid featured highlight layout asymmetric bento grid featured highlight accent cards asymmetric layout bento grid with featured item highlight card grid layout
Featured Bento Grid
Fetch pattern JSON:
curl https://webspire.de/patterns/bento/featured.json featured.html
<section class="ws-bento bg-[var(--ws-bento-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 text-[var(--ws-bento-text)]">Why choose us</p>
<h2 class="mt-2 text-3xl font-bold tracking-tight text-[var(--ws-bento-text)] sm:text-4xl">Everything in one place</h2>
<p class="mt-4 text-lg text-[var(--ws-bento-text-soft)]">Powerful features designed to help your team ship faster and with confidence.</p>
</div>
<div class="mt-16 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 lg:grid-rows-2">
<!-- Featured card: spans 2 columns and 2 rows (decorative gradient — keep hardcoded) -->
<div class="row-span-1 flex flex-col justify-between rounded-2xl border border-indigo-200 bg-gradient-to-br from-indigo-600 to-violet-600 p-8 text-white sm:col-span-2 lg:col-span-2 lg:row-span-2">
<div>
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-white/20">
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.455 2.456L21.75 6l-1.036.259a3.375 3.375 0 00-2.455 2.456zM16.894 20.567L16.5 21.75l-.394-1.183a2.25 2.25 0 00-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 001.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 001.423 1.423l1.183.394-1.183.394a2.25 2.25 0 00-1.423 1.423z" /></svg>
</div>
<h3 class="mt-6 text-2xl font-bold">AI-powered automation</h3>
<p class="mt-3 text-base text-indigo-100">Automate repetitive tasks with intelligent workflows that learn from your team's patterns. Reduce manual work by up to 80% and focus on what matters most — building great products.</p>
</div>
<div class="mt-8 flex items-center gap-2 text-sm font-medium text-indigo-100">
<span>Learn more</span>
<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>
</div>
</div>
<!-- Small card 1 -->
<div class="rounded-2xl border border-[var(--ws-bento-border)] bg-[var(--ws-bento-card-bg)] p-8">
<div class="flex h-10 w-10 items-center justify-center rounded-lg bg-indigo-600 text-white">
<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="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z" /></svg>
</div>
<h3 class="mt-4 text-lg font-semibold text-[var(--ws-bento-text)]">Instant deployment</h3>
<p class="mt-2 text-sm text-[var(--ws-bento-text-soft)]">Push to production in seconds with zero-downtime deployments and automatic rollbacks.</p>
</div>
<!-- Small card 2 -->
<div class="rounded-2xl border border-[var(--ws-bento-border)] bg-[var(--ws-bento-card-bg)] p-8">
<div class="flex h-10 w-10 items-center justify-center rounded-lg bg-indigo-600 text-white">
<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="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" /></svg>
</div>
<h3 class="mt-4 text-lg font-semibold text-[var(--ws-bento-text)]">Built-in security</h3>
<p class="mt-2 text-sm text-[var(--ws-bento-text-soft)]">Enterprise-grade encryption, SSO integration, and compliance certifications out of the box.</p>
</div>
<!-- Small card 3 -->
<div class="rounded-2xl border border-[var(--ws-bento-border)] bg-[var(--ws-bento-card-bg)] p-8">
<div class="flex h-10 w-10 items-center justify-center rounded-lg bg-indigo-600 text-white">
<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="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-4 text-lg font-semibold text-[var(--ws-bento-text)]">Real-time analytics</h3>
<p class="mt-2 text-sm text-[var(--ws-bento-text-soft)]">Track performance metrics with live dashboards and customizable reports.</p>
</div>
<!-- Small card 4 -->
<div class="rounded-2xl border border-[var(--ws-bento-border)] bg-[var(--ws-bento-card-bg)] p-8">
<div class="flex h-10 w-10 items-center justify-center rounded-lg bg-indigo-600 text-white">
<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="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-4 text-lg font-semibold text-[var(--ws-bento-text)]">Team collaboration</h3>
<p class="mt-2 text-sm text-[var(--ws-bento-text-soft)]">Shared workspaces with real-time presence, comments, and version history.</p>
</div>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
bentogridfeaturedhighlightlayoutasymmetric
Slots
| Name | Required | Description |
|---|---|---|
| heading | Yes | Section title and description. |
| featured | Yes | Large featured card spanning 2 columns and 2 rows with gradient background. |
| grid | Yes | Smaller supporting cards arranged around the featured card. |
Bento grid layout with one large featured card spanning 2 columns and 2 rows, accented with a gradient background, surrounded by 4 smaller supporting cards. Each card includes an icon, title, and description. Responsive: stacks to single column on mobile. Supports dark mode.