hero grid frame border geometry editorial design-system hero grid border frame ruled editorial hero with decorative grid lines ruled frame background effect grid column decoration hero
Hero Border Frame
Fetch pattern JSON:
curl https://webspire.de/patterns/hero/border-frame.json border-frame.html
<!--
Border Frame Hero
Decorative 1px grid columns create a ruled frame effect on either side of the content.
Works without any custom CSS — pure Tailwind utility classes.
-->
<section class="ws-hero relative overflow-hidden bg-[var(--ws-hero-bg)] py-28 sm:py-36">
<!-- Decorative column grid: thin 1px vertical lines flanking the content -->
<div class="pointer-events-none absolute inset-0 grid grid-cols-[1fr_min(72rem,100%)_1fr]" aria-hidden="true">
<!-- Left ruled zone -->
<div class="col-start-1 border-r border-[var(--ws-hero-border)]">
<!-- inner dividers -->
<div class="grid h-full grid-cols-4">
<div class="border-r border-[var(--ws-hero-border)]/40"></div>
<div class="border-r border-[var(--ws-hero-border)]/40"></div>
<div class="border-r border-[var(--ws-hero-border)]/40"></div>
<div></div>
</div>
</div>
<!-- Right ruled zone -->
<div class="col-start-3 border-l border-[var(--ws-hero-border)]">
<div class="grid h-full grid-cols-4">
<div></div>
<div class="border-l border-[var(--ws-hero-border)]/40"></div>
<div class="border-l border-[var(--ws-hero-border)]/40"></div>
<div class="border-l border-[var(--ws-hero-border)]/40"></div>
</div>
</div>
</div>
<!-- Horizontal rule lines (top and bottom of content area) -->
<div class="pointer-events-none absolute inset-x-0 top-0 h-px bg-[var(--ws-hero-border)]" aria-hidden="true"></div>
<div class="pointer-events-none absolute inset-x-0 bottom-0 h-px bg-[var(--ws-hero-border)]" aria-hidden="true"></div>
<!-- Content -->
<div class="relative mx-auto max-w-3xl px-6 text-center">
<!-- Corner tick marks for a "grid intersection" feel -->
<div class="absolute -top-6 left-0 h-5 w-px bg-[var(--ws-hero-border)]" aria-hidden="true"></div>
<div class="absolute -top-6 right-0 h-5 w-px bg-[var(--ws-hero-border)]" aria-hidden="true"></div>
<div class="absolute -bottom-6 left-0 h-5 w-px bg-[var(--ws-hero-border)]" aria-hidden="true"></div>
<div class="absolute -bottom-6 right-0 h-5 w-px bg-[var(--ws-hero-border)]" aria-hidden="true"></div>
<p class="mb-4 font-mono text-xs tracking-widest text-[var(--ws-hero-text-muted)] uppercase">Design System • v4.0</p>
<h1 class="text-balance text-5xl font-bold tracking-tight text-[var(--ws-hero-text)] sm:text-6xl">
Structure in every pixel
</h1>
<p class="mx-auto mt-6 max-w-lg text-lg leading-relaxed text-[var(--ws-hero-text-soft)]">
A pattern library built on an invisible grid. Geometry that guides, frames that breathe.
</p>
<div class="mt-10 flex flex-wrap items-center justify-center gap-4">
<a href="#"
class="rounded-lg bg-[var(--ws-hero-action-bg)] px-6 py-3 text-sm font-semibold text-[var(--ws-hero-action-text)] transition hover:bg-[var(--ws-hero-action-bg-hover)]">
Browse patterns
</a>
<a href="#"
class="inline-flex items-center gap-1.5 rounded-lg border border-[var(--ws-hero-border)] px-6 py-3 text-sm font-semibold text-[var(--ws-hero-text)] transition hover:bg-[var(--ws-hero-badge-bg)]">
View on GitHub
<svg class="h-4 w-4 opacity-50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M5.22 14.78a.75.75 0 001.06 0l7.22-7.22v5.69a.75.75 0 001.5 0v-7.5a.75.75 0 00-.75-.75h-7.5a.75.75 0 000 1.5h5.69l-7.22 7.22a.75.75 0 000 1.06z" clip-rule="evenodd"/>
</svg>
</a>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
herogridframebordergeometryeditorialdesign-system
Slots
| Name | Required | Description |
|---|---|---|
| eyebrow | No | Mono-text label above the headline (version number, category). |
| heading | Yes | Primary headline. |
| subtext | No | Supporting description. |
| cta-primary | No | Primary action button. |
| cta-secondary | No | Secondary ghost/outline action. |
Decorative 1px columns on both sides of the content create a ruled-frame effect — the content sits inside an invisible grid that’s made just barely visible. No custom CSS, no SVG backgrounds: just nested Tailwind grid divisions with border-r / border-l utilities.
The outer grid-cols-[1fr_min(72rem,100%)_1fr] layout constrains the content width while letting the frame columns fill the viewport margins.
On a dark background
<section class="ws-hero relative overflow-hidden bg-gray-950 py-28">
<!-- same structure; tokens pick up dark colors automatically -->
</section>