features image-grid asymmetric split bullets icons visual features image-grid asymmetric split bullets collage visual-storytelling features section with asymmetric image grid split features layout with photo collage
Features Image Grid Asymmetric
Fetch pattern JSON:
curl https://webspire.de/patterns/features/image-grid-asymmetric.json image-grid-asymmetric.html
<section class="ws-features ws-features-image-grid-asymmetric bg-[var(--ws-features-bg)]">
<div class="mx-auto grid max-w-7xl gap-14 px-6 py-16 lg:grid-cols-2 lg:items-center lg:py-24">
<!-- Left: text content -->
<div>
<p class="mb-4 inline-flex rounded-full bg-[var(--ws-features-card-bg)] px-3 py-1 text-xs font-semibold uppercase tracking-widest text-[var(--ws-features-icon-color)]">What we offer</p>
<h2 class="text-balance text-3xl font-bold tracking-tight text-[var(--ws-features-text)] sm:text-4xl">
A complete platform for modern teams.
</h2>
<p class="mt-4 max-w-lg text-pretty text-base text-[var(--ws-features-text-soft)]">
Webspire combines a production-ready pattern registry with AI tooling and a semantic design system — everything your team needs to ship great UI at scale.
</p>
<!-- Feature bullets -->
<ul class="mt-8 space-y-5">
<li class="flex items-start gap-4">
<span class="flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-xl bg-[var(--ws-features-icon-bg)]">
<svg class="h-5 w-5 text-[var(--ws-features-icon-color)]" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
</span>
<div>
<p class="text-sm font-semibold text-[var(--ws-features-text)]">500+ ready patterns</p>
<p class="mt-0.5 text-sm text-[var(--ws-features-text-soft)]">Tailwind-only, SSR-safe, token-aligned from day one.</p>
</div>
</li>
<li class="flex items-start gap-4">
<span class="flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-xl bg-[var(--ws-features-icon-bg)]">
<svg class="h-5 w-5 text-[var(--ws-features-icon-color)]" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><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>
</span>
<div>
<p class="text-sm font-semibold text-[var(--ws-features-text)]">MCP-powered AI tools</p>
<p class="mt-0.5 text-sm text-[var(--ws-features-text-soft)]">Compose full pages in seconds with semantic MCP tools.</p>
</div>
</li>
<li class="flex items-start gap-4">
<span class="flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-xl bg-[var(--ws-features-icon-bg)]">
<svg class="h-5 w-5 text-[var(--ws-features-icon-color)]" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><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>
</span>
<div>
<p class="text-sm font-semibold text-[var(--ws-features-text)]">Design token system</p>
<p class="mt-0.5 text-sm text-[var(--ws-features-text-soft)]">Three-layer token architecture for consistent theming.</p>
</div>
</li>
</ul>
</div>
<!-- Right: asymmetric image grid -->
<div class="relative">
<div class="grid gap-3" style="grid-template-columns: 1fr 1.5fr; grid-template-rows: 1.5fr 1fr;">
<!-- Image 1: top-left, smaller -->
<div class="overflow-hidden rounded-2xl" style="aspect-ratio: auto; min-height: 160px; background: linear-gradient(135deg, #6366f1, #8b5cf6);"></div><!-- ws-ok -->
<!-- Image 2: top-right, tall (row-span-2) -->
<div class="row-span-2 overflow-hidden rounded-2xl" style="background: linear-gradient(160deg, var(--ws-features-icon-color), #f59e0b); min-height: 320px;"></div><!-- ws-ok -->
<!-- Image 3: bottom-left -->
<div class="overflow-hidden rounded-2xl" style="min-height: 120px; background: linear-gradient(135deg, #10b981, #0ea5e9);"></div><!-- ws-ok -->
</div>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
featuresimage-gridasymmetricsplitbulletsiconsvisual
Slots
| Name | Required | Description |
|---|---|---|
| eyebrow | No | Pre-heading label badge. |
| headline | Yes | Section main heading. |
| body | Yes | Supporting description paragraph. |
| features | Yes | Three icon + title + text feature bullets. |
| images | Yes | Asymmetric grid of three images — top-left, tall right (row-span-2), bottom-left. |
Props
| Name | Type | Default | Description |
|---|---|---|---|
| imagePosition | 'left' | 'right' | right | Side of the image grid relative to text. |
Asymmetric image grids give a premium editorial feel compared to uniform 2x2 layouts. The grid-template-columns: 1fr 1.5fr and row-span-2 on the tall right image create the hierarchy. Swap the gradient placeholders with real photos using object-cover inside the colored containers.