Warming up the neural circuits...
Handbook Deep dive Quick Recall Quick recall What you'll learn 5 On this page 11 Layout Patterns: The Building Blocks of UI
Every web interface is built from a small set of recurring layout patterns. Master these, and you can build almost any page.
1. Card Pattern
Cards are the most common UI pattern on the web. Used for products, articles, users, features — anything that represents a single, self-contained unit.
< div class = " bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition " > <!-- Card image --> < img src = " photo.jpg " alt = " Card image " class = " w-full h-48 object-cover " /> <!-- Card body --> < div class = " p-6 " > < span class = " text-xs text-gray-700 brand-gray-text font-semibold uppercase tracking-wide " > Category </ span > < h3 class = " text-xl font-bold mt-1 mb-2 " > Card Title </ h3 > < p class = " text-gray-600 text-sm leading-relaxed mb-4 " > Brief description of what this card represents. Keep it to 2-3 lines. </ p > <!-- Card footer with author --> < div class = " flex items-center gap-3 pt-4 border-t border-gray-100 " > < img src = " avatar.jpg " alt = " Author " class = " w-8 h-8 rounded-full " /> < div > < p class = " text-sm font-medium " > John Doe </ p > < p class = " text-xs text-gray-500 " > 2 days ago </ p > </ div > </ div > </ div > </ div > Variations:
Horizontal card: flex Minimal card: No image, just title and descriptionInteractive card: Add hover:scale-105 cursor-pointer Card grid: Wrap in grid grid-cols-1 md:grid-cols-3 gap-6
2. Navigation Bar Pattern
Navigation is the most important layout decision on any website.
< nav class = " bg-white shadow-sm " > < div class = " max-w-7xl mx-auto px-4 " > < div class = " flex justify-between items-center h-16 " > <!-- Logo --> < div class = " flex items-center gap-2 " > 3. Hero Section Pattern
The hero is the first thing users see. It needs to communicate value instantly.
< section class = " relative bg-gradient-to-br from-blue-600 via-blue-700 to-indigo-800 text-white overflow-hidden " > <!-- Background pattern (optional) --> < div class = " absolute inset-0 opacity-10 " > < div class = " absolute top-10 left-10 w-72 h-72 bg-white rounded-full blur-3xl " ></ div > < div class = " absolute bottom-10 right-10 w-96 h-96 bg-white rounded-full blur-3xl 4. Sidebar + Main Layout (Dashboard Pattern)
The most common layout for web applications and dashboards.
< div class = " min-h-screen flex flex-col lg:flex-row bg-gray-50 " > <!-- Sidebar (collapsible on mobile) --> < aside class = " w-full lg:w-64 bg-gray-900 text-white flex-shrink-0 " > < div class = " p-4 " > <!-- Logo --> < div class 5. Modal / Dialog Pattern
<!-- Overlay backdrop --> < div class = " fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4 " > <!-- Modal content --> < div class = " bg-white rounded-2xl shadow-2xl max-w-lg w-full p-6 animate-in " > <!-- Modal header --> < div class < div class = " max-w-md mx-auto bg-white p-8 rounded-xl shadow-md " > < h2 class = " text-2xl font-bold mb-2 " > Sign In </ h2 > < p class = " text-gray-600 mb-6 " > Welcome back! Please enter your credentials. </ p > < form class = " space-y-4 " < footer class = " bg-gray-900 text-gray-300 " > < div class = " max-w-7xl mx-auto px-4 py-12 " > <!-- Newsletter --> < div class = " flex flex-col sm:flex-row justify-between items-center gap-6 pb-8 border-b border-gray-800 mb-8 " > < div > < h3 class = " text-white font-bold text-lg When to Use Flex vs Grid
Pattern Use Example One-dimensional (row OR column)Flexbox Navigation bar, button Two-dimensional (rows AND columns)Grid Card grids, photo galleries, dashboards Centering Flexbox Centered content, modal positioning Equal height items Grid Card rows where all cards must be same height Wrapping Flex with flex-wrap Tag lists, badges Complex layouts Grid Magazine layouts, full-page designs
Rule of thumb: If you only need one direction (row or column), use flex. If you need both directions (row AND column), use grid.
What You've Learned
✅ Cards: the most common UI unit, infinitely customizable
✅ Navigation: responsive with hamburger on mobile
✅ Hero: the first impression, with CTAs and trust signals
✅ Dashboard: sidebar + main content pattern
✅ Modal: overlay + centered dialog
✅ Form input
✅ Footer: link columns + newsletter + legal
✅ Flex vs Grid: when to use which
What's Next?
Chapter 7: Turn these patterns into reusable components Chapter 8: Add dark mode support to all your layoutsChapter 9-15: JavaScript <
span
class
=
"
text-2xl
"
>
🔷
</
span
>
< span class = " text-xl font-bold " > Brand </ span >
</ div >
<!-- Nav links (hidden on mobile) -->
< ul class = " hidden md:flex gap-8 " >
< li >< a href = " # " class = " text-gray-700 hover:text-gray-700 brand-gray-text font-medium " > Home </ a ></ li >
< li >< a href = " # " class = " text-gray-700 hover:text-gray-700 brand-gray-text font-medium " > Features </ a ></ li >
< li >< a href = " # " class = " text-gray-700 hover:text-gray-700 brand-gray-text font-medium " > Pricing </ a ></ li >
< li >< a href = " # " class = " text-gray-700 hover:text-gray-700 brand-gray-text font-medium " > Contact </ a ></ li >
</ ul >
<!-- CTA buttons -->
< div class = " hidden md:flex gap-3 " >
< button class = " px-4 py-2 text-gray-700 font-medium " > Log In </ button >
< button class = " px-4 py-2 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 " > Sign Up </ button >
</ div >
<!-- Mobile hamburger -->
< button class = " md:hidden text-2xl " > ☰ </ button >
</ div >
</ div >
</ nav >
"
></
div
>
</ div >
< div class = " relative max-w-7xl mx-auto px-4 py-24 md:py-32 " >
< div class = " max-w-3xl text-center md:text-left " >
<!-- Badge -->
< span class = " inline-block bg-white/20 text-white text-sm px-4 py-1 rounded-full mb-6 " >
🚀 New: AI-powered features
</ span >
<!-- Heading -->
< h1 class = " text-4xl md:text-6xl font-bold leading-tight mb-6 " >
Build Faster. < br />
< span class = " text-blue-200 " > Scale Smarter. </ span >
</ h1 >
<!-- Subtitle -->
< p class = " text-lg md:text-xl text-blue-100 mb-8 max-w-2xl " >
The platform that helps you build, deploy, and scale your applications in record time.
</ p >
<!-- CTAs -->
< div class = " flex flex-col sm:flex-row gap-4 justify-center md:justify-start " >
< button class = " bg-white text-gray-900 px-8 py-3 rounded-lg font-bold hover:bg-blue-50 transition shadow-lg " >
Get Started Free →
</ button >
< button class = " border-2 border-white text-white px-8 py-3 rounded-lg font-bold hover:bg-white hover:text-gray-900 transition " >
Watch Demo
</ button >
</ div >
<!-- Trust indicators -->
< div class = " mt-12 flex flex-wrap gap-8 justify-center md:justify-start text-sm text-blue-200 " >
< span > ⭐ 4.9/5 from 2,000+ reviews </ span >
< span > 🏢 Used by 10,000+ teams </ span >
< span > 🔒 SOC 2 certified </ span >
</ div >
</ div >
</ div >
</ section >
=
"
flex items-center gap-2 mb-8
"
>
< span class = " text-2xl " > 🔷 </ span >
< span class = " text-xl font-bold " > Dashboard </ span >
</ div >
<!-- Navigation -->
< nav >
< p class = " text-xs text-gray-400 uppercase tracking-wide mb-3 " > Main </ p >
< ul class = " space-y-1 " >
< li >
< a href = " # " class = " flex items-center gap-3 px-3 py-2 rounded-lg bg-blue-600 text-white " >
< span > 📊 </ span > Overview
</ a >
</ li >
< li >
< a href = " # " class = " flex items-center gap-3 px-3 py-2 rounded-lg text-gray-300 hover:bg-gray-800 " >
< span > 📁 </ span > Projects
</ a >
</ li >
< li >
< a href = " # " class = " flex items-center gap-3 px-3 py-2 rounded-lg text-gray-300 hover:bg-gray-800 " >
< span > 👥 </ span > Team
</ a >
</ li >
< li >
< a href = " # " class = " flex items-center gap-3 px-3 py-2 rounded-lg text-gray-300 hover:bg-gray-800 " >
< span > ⚙️ </ span > Settings
</ a >
</ li >
</ ul >
</ nav >
</ div >
</ aside >
<!-- Main content area -->
< main class = " flex-1 p-4 md:p-8 " >
<!-- Page header -->
< div class = " flex flex-col sm:flex-row justify-between items-start sm:items-center mb-8 " >
< h1 class = " text-2xl font-bold text-gray-900 " > Overview </ h1 >
< button class = " mt-2 sm:mt-0 bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 " >
+ New Project
</ button >
</ div >
<!-- Stats cards -->
< div class = " grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-8 " >
< div class = " bg-white p-4 rounded-lg shadow-sm border border-gray-100 " >
< p class = " text-sm text-gray-500 " > Total Revenue </ p >
< p class = " text-2xl font-bold text-gray-900 " > $45,231 </ p >
< p class = " text-sm text-green-600 " > +12.5% from last month </ p >
</ div >
<!-- More stat cards... -->
</ div >
<!-- Activity chart area -->
< div class = " bg-white p-6 rounded-lg shadow-sm border border-gray-100 " >
< h2 class = " text-lg font-bold mb-4 " > Recent Activity </ h2 >
< div class = " h-64 bg-gray-50 rounded-lg flex items-center justify-center text-gray-400 " >
Chart goes here (add a library later)
</ div >
</ div >
</ main >
</ div >
=
"
flex justify-between items-center mb-4
"
>
< h2 class = " text-xl font-bold " > Confirm Action </ h2 >
< button class = " text-gray-400 hover:text-gray-600 text-2xl " > & times ; </ button >
</ div >
<!-- Modal body -->
< p class = " text-gray-600 mb-6 " > Are you sure you want to delete this item? This action cannot be undone. </ p >
<!-- Modal footer -->
< div class = " flex justify-end gap-3 " >
< button class = " px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 " > Cancel </ button >
< button class = " px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 " > Delete </ button >
</ div >
</ div >
</ div >
>
<!-- Email field -->
< div >
< label for = " email " class = " block text-sm font-medium text-gray-700 mb-1 " > Email </ label >
< input
id = " email "
type = " email "
class = " w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none "
placeholder = " you@example.com "
/>
</ div >
<!-- Password field -->
< div >
< label for = " password " class = " block text-sm font-medium text-gray-700 mb-1 " > Password </ label >
< input
id = " password "
type = " password "
class = " w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none "
placeholder = " •••••••• "
/>
</ div >
<!-- Remember me checkbox -->
< div class = " flex items-center gap-2 " >
< input id = " remember " type = " checkbox " class = " w-4 h-4 text-gray-700 brand-gray-text rounded border-gray-300 " />
< label for = " remember " class = " text-sm text-gray-700 " > Remember me </ label >
</ div >
<!-- Submit button -->
< button type = " submit " class = " w-full bg-blue-600 text-white py-2 rounded-lg font-semibold hover:bg-blue-700 transition " >
Sign In
</ button >
<!-- Footer link -->
< p class = " text-center text-sm text-gray-600 " >
Don't have an account? < a href = " # " class = " text-gray-700 brand-gray-text hover:underline " > Sign up </ a >
</ p >
</ form >
</ div >
"
>
Stay updated
</
h3
>
< p class = " text-sm " > Get the latest news and updates delivered to your inbox. </ p >
</ div >
< div class = " flex gap-2 w-full sm:w-auto " >
< input type = " email " placeholder = " your@email.com " class = " flex-1 sm:w-64 px-4 py-2 rounded-lg bg-gray-800 border border-gray-700 text-white placeholder-gray-500 " />
< button class = " bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 " > Subscribe </ button >
</ div >
</ div >
<!-- Links grid -->
< div class = " grid grid-cols-2 md:grid-cols-4 gap-8 " >
< div >
< h4 class = " text-white font-bold mb-4 " > Product </ h4 >
< ul class = " space-y-2 text-sm " >< li >< a href = " # " class = " hover:text-white " > Features </ a ></ li >< li >< a href = " # " class = " hover:text-white " > Pricing </ a ></ li ></ ul >
</ div >
< div >
< h4 class = " text-white font-bold mb-4 " > Company </ h4 >
< ul class = " space-y-2 text-sm " >< li >< a href = " # " class = " hover:text-white " > About </ a ></ li >< li >< a href = " # " class = " hover:text-white " > Blog </ a ></ li ></ ul >
</ div >
< div >
< h4 class = " text-white font-bold mb-4 " > Support </ h4 >
< ul class = " space-y-2 text-sm " >< li >< a href = " # " class = " hover:text-white " > Docs </ a ></ li >< li >< a href = " # " class = " hover:text-white " > FAQ </ a ></ li ></ ul >
</ div >
< div >
< h4 class = " text-white font-bold mb-4 " > Legal </ h4 >
< ul class = " space-y-2 text-sm " >< li >< a href = " # " class = " hover:text-white " > Privacy </ a ></ li >< li >< a href = " # " class = " hover:text-white " > Terms </ a ></ li ></ ul >
</ div >
</ div >
< div class = " mt-8 pt-8 border-t border-gray-800 flex flex-col sm:flex-row justify-between items-center gap-4 text-sm " >
< p > & copy ; 2026 Brand. All rights reserved. </ p >
< div class = " flex gap-4 " >
< a href = " # " class = " hover:text-white " > Twitter </ a >
< a href = " # " class = " hover:text-white " > GitHub </ a >
< a href = " # " class = " hover:text-white " > LinkedIn </ a >
</ div >
</ div >
</ div >
</ footer >