Layout
Layout provides foundational patterns for responsive pages.
On this page
Description
Layout provides foundational patterns for responsive pages.
Layout can be used for simple two-column pages, or it can be nested to provide flexible 3-column experiences.
On smaller screens, Layout uses vertically stacked rows to display content.
Layout flows as both column, when there's enough horizontal space to render both Main and Sidebarside-by-side (on a desktop of tablet device, per instance);
or it flows as a row, when Main and Sidebar are stacked vertically (e.g. on a mobile device).
Layout should always work in any screen size.
Accessibility
Keyboard navigation follows the markup order. Decide carefully how the focus order should be be by deciding whether
main or sidebar comes first in code. The code order won’t affect the visual position.
Arguments
| Name | Default | Description |
|---|---|---|
stacking_breakpoint |
| SymbolWhen the |
first_in_source |
| SymbolWhich element to render first in the HTML. This will change the keyboard navigation order. One of |
gutter |
| SymbolThe amount of space between the main section and the sidebar. One of |
system_arguments | N/A | Hash |
Examples
Slots
main
The layout's main content.
| Name | Default | Description |
|---|---|---|
width | N/A | SymbolOne of |
system_arguments | N/A | Hash |
sidebar
The layout's sidebar.
| Name | Default | Description |
|---|---|---|
width | N/A | SymbolOne of |
col_placement | N/A | SymbolSidebar placement when |
row_placement | N/A | SymbolSidebar placement when |
system_arguments | N/A | Hash |
Layout::Sidebar
The layout's sidebar content.
Layout::Main
The layout's main content.
Arguments
| Name | Default | Description |
|---|---|---|
width |
| SymbolOne of |
system_arguments | N/A | Hash |