Layout

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.

Arguments

Name	Default	Description
stacking_breakpoint	:md	Symbol When the Layout should change from rows into columns. One of :lg, :md, or :sm.
first_in_source	:sidebar	Symbol Which element to render first in the HTML. This will change the keyboard navigation order. One of :main or :sidebar.
gutter	:default	Symbol The amount of space between the main section and the sidebar. One of :condensed, :default, :none, or :spacious.
system_arguments	N/A	Hash System arguments

Examples

Slots

main

The layout's main content.

Name	Default	Description
width	N/A	Symbol One of :full, :lg, :md, or :xl.
system_arguments	N/A	Hash System arguments

sidebar

The layout's sidebar.

Name	Default	Description
width	N/A	Symbol One of :default, :narrow, or :wide.
col_placement	N/A	Symbol Sidebar placement when Layout is in column modes. One of :end or :start.
row_placement	N/A	Symbol Sidebar placement when Layout is in row mode. One of :end, :none, or :start.
system_arguments	N/A	Hash System arguments

Layout::Sidebar

The layout's sidebar content.

Layout::Main

The layout's main content.

Arguments

Name	Default	Description
width	:full	Symbol One of :full, :lg, :md, or :xl.
system_arguments	N/A	Hash System arguments