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.