The classic five-zone web layout: sticky header, three equal-height columns (left nav, main content, right sidebar), and a persistent footer. The gold standard for productivity dashboards, admin panels, and documentation sites.
Five zones — equal-height columns guaranteed by Flexbox
Toggle between viewports to see how the layout collapses. On tablet, the right sidebar hides. On mobile, all columns stack vertically.
Each zone has a specific purpose, fixed or adaptive dimensions, and defined Tailwind classes. Together they create a predictable, scannable page structure.
Fixed at top. Contains brand logo, global navigation, and user actions. Always visible during scroll.
sticky top-0 z-50 h-14Fixed-width left column. Houses the primary navigation menu with active state indicators.
w-60 flex-shrink-0The primary canvas. flex-1 makes it fill remaining space. min-w-0 prevents overflow blowout.
flex-1 min-w-0Fixed-width right column. Secondary info: activity feeds, contextual tools, quick actions.
w-64 flex-shrink-0Anchored below main body. Copyright, secondary links, version info. Always at bottom.
bg-white border-tEvery interactive element follows strict interaction physics: crisp 150ms transitions, 0.5px content card lifts, anchored nav links, and tactile button press states.
hover:-translate-y-0.5 hover:shadow-md transition-all duration-150 ease-out
Track key metrics across all your projects in one unified view.
Monitor revenue streams and financial health at a glance.
Page load times, error rates, and uptime status monitoring.
New signups, active users, and retention rate trends.
Open tickets, response times, and satisfaction scores.
Recent deployment history and environment health status.
Four named interaction patterns govern all Holy Grail components. Hover or interact with each demo card to feel the physics. Productivity tools demand crisp, predictable responses.
Main content cards: minimal, non-distracting float. Enough to signal interactivity without disrupting reading focus.
Sidebar nav hover uses left-border highlight only. Zero vertical displacement. Nav must feel anchored and stable — it is the user's spatial reference.
All transitions must be 150ms or less. Productivity tools require instant response. Sluggish animations erode trust and interrupt workflow.
Three-state button: hover floats 0.5px with glow shadow, active micro-presses with scale(0.98) + translate-y-0 (resets lift), focus shows WCAG 2.1 AA ring.
Press Tab to see the focus ring — WCAG 2.1 AA required
These rules are non-negotiable. Every violation degrades the layout's structural integrity or interaction quality. Apply them without exception.
<div className="min-h-screen flex flex-col bg-[#f1f5f9]">
{/* Header — sticky, always visible */}
<header className="sticky top-0 z-50 bg-white border-b border-gray-200 shadow-sm">
<div className="px-6 py-3 flex items-center justify-between h-14">
...
</div>
</header>
{/* Three-column body — equal-height via flex */}
<div className="flex-1 flex">
{/* Left nav — fixed width */}
<aside className="w-60 bg-white border-r border-gray-200 p-4 flex-shrink-0 hidden md:block">
...
</aside>
{/* Main content — adaptive, source-first for SEO */}
<main className="flex-1 p-6 min-w-0">
...
</main>
{/* Right sidebar — fixed width, hidden on tablet */}
<aside className="w-64 bg-white border-l border-gray-200 p-4 flex-shrink-0 hidden lg:block">
...
</aside>
</div>
{/* Footer */}
<footer className="bg-white border-t border-gray-200">
...
</footer>
</div>