features grid border editorial table flat publication features grid border editorial flat publication cells table editorial feature grid with borders flat feature cells no card background
Split Border Feature Grid
Fetch pattern JSON:
curl https://webspire.de/patterns/features/split-border-grid.json split-border-grid.html
<section class="ws-features-split-border-grid bg-[var(--ws-color-bg)] py-20">
<div class="mx-auto max-w-7xl px-6">
<div class="mb-12">
<p class="text-sm font-semibold uppercase tracking-wider text-[var(--ws-color-accent)]">Features</p>
<h2 class="mt-2 text-3xl font-bold tracking-tight text-[var(--ws-color-text)] sm:text-4xl">Everything you need</h2>
</div>
<!-- Light variant -->
<div class="border-l border-t border-[var(--ws-color-border)]">
<div class="grid grid-cols-2 lg:grid-cols-3">
<!-- Cell 1 -->
<div class="border-b border-r border-[var(--ws-color-border)] p-8">
<svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-[var(--ws-color-text)]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z" />
</svg>
<h3 class="mt-5 text-base font-bold text-[var(--ws-color-text)]">Instant preview</h3>
<p class="mt-2 text-sm text-[var(--ws-color-text-soft)]">Every pattern renders live in the browser. Copy, paste, ship — no setup needed.</p>
</div>
<!-- Cell 2 -->
<div class="border-b border-r border-[var(--ws-color-border)] p-8">
<svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-[var(--ws-color-text)]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" />
</svg>
<h3 class="mt-5 text-base font-bold text-[var(--ws-color-text)]">Token system</h3>
<p class="mt-2 text-sm text-[var(--ws-color-text-soft)]">Three-tier CSS custom property system. Swap your brand tokens once and the whole library updates.</p>
</div>
<!-- Cell 3 — last in row, no border-r on lg -->
<div class="border-b border-r border-[var(--ws-color-border)] p-8 lg:border-r-0">
<svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-[var(--ws-color-text)]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17H3a2 2 0 01-2-2V5a2 2 0 012-2h14a2 2 0 012 2v10a2 2 0 01-2 2h-2" />
</svg>
<h3 class="mt-5 text-base font-bold text-[var(--ws-color-text)]">Dark mode ready</h3>
<p class="mt-2 text-sm text-[var(--ws-color-text-soft)]">Every pattern ships with dark mode support out of the box — no extra classes.</p>
</div>
<!-- Cell 4 -->
<div class="border-b border-r border-[var(--ws-color-border)] p-8 [&:nth-last-child(-n+3)]:border-b-0 [&:nth-last-child(-n+2)]:border-b-0 lg:[&:last-child]:border-b-0">
<svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-[var(--ws-color-text)]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 8a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zm12 0a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z" />
</svg>
<h3 class="mt-5 text-base font-bold text-[var(--ws-color-text)]">Responsive grid</h3>
<p class="mt-2 text-sm text-[var(--ws-color-text-soft)]">Mobile-first layouts that scale gracefully to any viewport with Tailwind's utility classes.</p>
</div>
<!-- Cell 5 -->
<div class="border-b border-r border-[var(--ws-color-border)] p-8">
<svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-[var(--ws-color-text)]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
</svg>
<h3 class="mt-5 text-base font-bold text-[var(--ws-color-text)]">SSR-safe</h3>
<p class="mt-2 text-sm text-[var(--ws-color-text-soft)]">Zero runtime JavaScript. Patterns render correctly on any server-side framework from day one.</p>
</div>
<!-- Cell 6 — last row, no bottom border; last in row, no right border -->
<div class="border-b border-r border-[var(--ws-color-border)] p-8 lg:border-b-0 lg:border-r-0">
<svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-[var(--ws-color-text)]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M11 4a2 2 0 114 0v1a1 1 0 001 1h3a1 1 0 011 1v3a1 1 0 01-1 1h-1a2 2 0 100 4h1a1 1 0 011 1v3a1 1 0 01-1 1h-3a1 1 0 01-1-1v-1a2 2 0 10-4 0v1a1 1 0 01-1 1H7a1 1 0 01-1-1v-3a1 1 0 00-1-1H4a2 2 0 110-4h1a1 1 0 001-1V7a1 1 0 011-1h3a1 1 0 001-1V4z" />
</svg>
<h3 class="mt-5 text-base font-bold text-[var(--ws-color-text)]">MCP integration</h3>
<p class="mt-2 text-sm text-[var(--ws-color-text-soft)]">AI agents can search, compose, and insert patterns directly into your project via the Webspire MCP.</p>
</div>
</div>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
featuresgridbordereditorialtableflatpublication
Slots
| Name | Required | Description |
|---|---|---|
| heading | Yes | Section label and title above the grid. |
| cells | Yes | Six feature cells: icon, title, description. |
A 2×3 (mobile: 2-col, desktop: 3-col) feature grid where cells are defined entirely by border-r and border-b lines — no rounded corners, no card backgrounds, no shadows. The container provides the top and left border. Each cell has a 48px SVG icon, bold title, and a two-line description. The result is an editorial, publication-style layout reminiscent of a data table.