Responsive rows and columns that stack on mobile and expand on larger screens.
Main content area. On mobile this stacks above the secondary column.
Supporting content beside the primary column.
Additional equal-width content column on desktop.
Waiting for action
Copy this complete component into a page file. Edit and run it in the Playground.
Loading editor…
Responsive page layout primitive with rows and columns.
Section — vertical stack of rows with optional title.Section.Row — one responsive band configured with sidebar and columns.Section.Column — optional slot for custom span or width.| Setting | Values | Description |
|---|---|---|
sidebar | none, left, right | Optional sidebar track beside the main area. |
columns | 1–5 | Number of equal content columns in the main area. |
stackBelow | mobile, tablet, never | When layouts collapse to one column. |
sidebarRatio | 1:2, 1:3, 2:3 | Sidebar width vs main area when a sidebar is active. |
When sidebar is set with columns greater than 1, the main area uses a nested Section.Row for the content columns.
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | — | Section heading. |
description | string | — | Section subtitle. |
gap | "sm" | "md" | "lg" | "md" | Vertical gap between rows. |
sidebar | "none" | "left" | "right" | "none" | Sidebar placement on Section.Row. |
columns | 1–5 | 1 | Equal content columns. |
stackBelow | "mobile" | "tablet" | "never" | "mobile" | Collapse breakpoint. |
template | Partial<Record<breakpoint, string>> | — | Custom CSS grid templates per breakpoint. |
section with optional h2 heading.