Page Layouts
Page Layouts
Section titled “Page Layouts”Standard page templates for common interface types. Each layout is responsive and adapts to viewport width.
Single Column
Section titled “Single Column”The most common layout — used for focused content like articles, forms, and detail views.
| Property | Value |
|---|---|
| Max width | 640px (sm) / 768px (md) / 1024px (lg) |
| Padding | 24px mobile / 40px desktop |
| Alignment | Centered |
Best for: Documentation, blog posts, form wizards, settings pages.
Two Column
Section titled “Two Column”Sidebar + main content area for navigation-heavy interfaces.
| Property | Value |
|---|---|
| Sidebar | 240–280px fixed |
| Content | Flexible, max 960px |
| Collapse | Below 768px, sidebar becomes drawer |
Best for: Dashboards, documentation, file browsers, messaging.
Grid Cards
Section titled “Grid Cards”Multi-column card grid for browsing and discovery.
| Property | Value |
|---|---|
| Columns | 2 (sm) / 3 (md) / 4 (lg) |
| Gap | 16–24px |
| Card min width | 280px |
Best for: Galleries, product listings, search results.
Full Bleed
Section titled “Full Bleed”Edge-to-edge layout for immersive experiences.
| Property | Value |
|---|---|
| Width | 100% viewport |
| Content zones | Constrained inner containers |
Best for: Landing pages, hero sections, dashboards with data viz.