Two-Column Layout
Side-by-side content arrangement with a main content area and secondary sidebar or complementary section
What is it?
A two-column layout divides a page or container into two adjacent vertical sections. Typically, the left column is wider and contains primary content, while the right column (the sidebar) holds secondary information, navigation, filtering options, or meta information.
This layout is versatile and appears across many UI patterns: dashboards with a sidebar navigation, blog posts with a table of contents, settings pages with a navigation menu, and more.
Mockdown
``` ┌────────────────────────────────────────────┐ │ Header │ ├──────────────┬──────────────────────────────┤ │ │ │ │ Sidebar │ Main Content │ │ │ (Content, Cards, │ │ • Nav 1 │ Forms, etc.) │ │ • Nav 2 │ │ │ • Nav 3 │ │ │ │ │ │ │ │ ├──────────────┴──────────────────────────────┤ │ Footer │ └────────────────────────────────────────────┘ ``` Key design considerations: - **Sidebar width**: Usually 200–300px on desktop, hidden or collapsed on mobile - **Content flexibility**: The main column expands/contracts based on available space - **Navigation**: Sidebar often contains navigation links or filter menus - **Responsive**: On mobile, sidebars typically stack above/below or slide out as a drawer - **Visual distinction**: Sidebar often has a background color or border to separate from main content
Layouts Using This Pattern
┌───────────────────────────────────────────────┐
│ ← Settings 👤 User │
├───────────────────────────────────────────────┤
│ │
│ ┌─ Profile ─────────────────────────────┐ │
│ │ Avatar: [ 👤 ] [ Upload ] │ │
│ │ Name: [___________________] │ │
│ │ Email: [___________________] │ │
│ │ Bio: [___________________] │ │
│ └───────────────────────────────────────┘ │
│ │
│ ┌─ Preferences ─────────────────────────┐ │
│ │ Theme: ○ Light ● Dark │ │
│ │ Language: [ English ▾ ] │ │
│ │ Timezone: [ UTC-5 ▾ ] │ │
│ └───────────────────────────────────────┘ │
│ │
│ ┌─ Notifications ──────────────────────┐ │
│ │ Email alerts: [■] On │ │
│ │ Push: [□] Off │ │
│ └──────────────────────────────────────┘ │
│ [ Save Changes ] │
└───────────────────────────────────────────────┘Settings
Account Settings Panel
A tabbed account settings page with sections for profile, password, notifications, billing, and danger zone — clean and accessible for SaaS apps.
--settings--profile--account
Medium
┌──────────┬────────────────────────────────────┐
│ ☰ Menu │ ◉ Dashboard 🔔 👤 │
│ ├────────────────────────────────────┤
│ ● Home │ ┌────────┐ ┌────────┐ ┌────────┐ │
│ ○ Stats │ │ ▲ 1,234│ │ ● 87% │ │ $9.4K │ │
│ ○ Users │ │ KPI ···│ │ KPI ···│ │ KPI ···│ │
│ ○ Config │ └────────┘ └────────┘ └────────┘ │
│ │ ┌──────────────────────────────┐ │
│ │ │ 📈 Chart │ │
│ │ │ ╱╲ ╱╲ ╱╲ │ │
│ │ │ ╱ ╲╱╱ ╲╱ ╲╱─── │ │
│ │ └──────────────────────────────┘ │
│ │ ┌──────────────────────────────┐ │
│ │ │ Name Role Status │ │
│ │ │ ───── ───── ──────── │ │
│ │ │ Alice Admin ● Active │ │
│ │ │ Bob User ○ Idle │ │
│ │ └──────────────────────────────┘ │
└──────────┴────────────────────────────────────┘Dashboard
SaaS Analytics Dashboard
A full-featured analytics dashboard with KPI cards, revenue charts, user activity tables, and a collapsible sidebar nav — ideal for SaaS admin panels.
--analytics--kpi--charts
Complex
Use these prompts to generate layouts built with this pattern.
Ready to build?
Use this pattern as inspiration when creating UI layouts with AI tools.