Foundations · Layout
Layout & Breakpoints
Structural primitives and responsive layout containers enforcing max-width scales, edge gutters, and flexible grids.
Responsive Breakpoints
Live @/design render| Prefix | Min Width | Target Device | Container Width |
|---|---|---|---|
| sm | 640px | Large Phones / Small Tablets | 100% (guttered) |
| md | 768px | Tablets Portrait / Mini Laptops | 768px |
| lg | 1024px | Desktop / Tablet Landscape | 1024px |
| xl | 1280px | Standard Desktop Monitors | 1280px |
| 2xl | 1536px | Ultrawide / Large Displays | 1536px |
Container Scales (<Container size='...'>)
Live @/design rendersize="sm" (max-w-3xl · 768px)
Container sm (768px max-width)
size="md" (max-w-5xl · 1024px)
Container md (1024px max-width)
size="lg" (max-w-7xl · 1280px - Default)
Container lg (1280px max-width)
Grid System (<Grid smCols={1} mdCols={2} lgCols={4}>)
Live @/design renderColumn 1
Span 1 column item.
Column 2
Span 1 column item.
Column 3
Span 1 column item.
Column 4
Span 1 column item.
import { … } from "@/design"
// source: design/layout/Container.tsx