Panes
Two full-height panes in 1 : φ. The quiet side and the working side.
Examples
Panes
Welcome back
The quiet side.
Anatomy
.panes | Full-height grid (at least 100dvh): one column under 64rem, 1 : φ above. |
> section | Two panes. Each centres its content vertically, padded --ae-space-7 block and a gutter inline. Add .bg-fill to the quiet one. |
API
| Attribute | Values | Description |
|---|---|---|
data-flip | boolean | From 64rem, makes the first pane the wide one. The order stays the same. |
Accessibility
data-flipswaps the widths, not the panes. Under 64rem they stack in markup order, so the quiet side, if it comes first, sits above the form on a phone.- Make the working pane the
<main>landmark, or wrap both panes in one, so the form is reachable from the landmark list.