Build responsive-friendly page layouts with 2 columns.
Use with .container-xx classes to limit the overall layout structure size.
Layout-mainLayout-sidebarLayout-dividerLayout-main-centered-mdLayout-main-centered-lgLayout-main-centered-xlUse Layout-main-centered-xx to wrap container-xx elements inside
Layout-main so the content remains centered on the screen regardless
of the sidebar position.
<div class="Layout"><div class="Layout-main border">.Layout-main</div><div class="Layout-sidebar border">.Layout-sidebar</div></div>
Use Layout--divided in conjunction with a Layout-divider to show a divider between the main content and the sidebar.
Flowing as row:
1px line between main and sidebarLayout-divider--flowRow-shallow: shows a filled 8px divider.Layout-divider--flowRow-hidden: hides the divider<div class="Layout Layout--divided"><div class="Layout-main border">main content</div><div class="Layout-divider"></div><div class="Layout-sidebar border">divider shown</div></div><div class="Layout"><div class="Layout-main border">main content</div><div class="Layout-divider"></div><div class="Layout-sidebar border">divider hidden</div></div><div class="Layout Layout--divided"><div class="Layout-main border">main content</div><div class="Layout-divider Layout-divider--flowRow-shallow"></div><div class="Layout-sidebar border">flowRow shallow divider</div></div><div class="Layout Layout--divided"><div class="Layout-main border">main content</div><div class="Layout-divider Layout-divider--flowRow-hidden"></div><div class="Layout-sidebar border">flowRow hidden divider</div></div>
<div class="Layout"><div class="Layout-main border"><div class="Layout-main-centered-md"><div class="container-md border color-border-accent">centered md</div></div></div><div class="Layout-sidebar border">sidebar</div></div><div class="Layout"><div class="Layout-main border"><div class="Layout-main-centered-lg"><div class="container-lg border color-border-accent">centered lg</div></div></div><div class="Layout-sidebar border">sidebar</div></div><div class="Layout"><div class="Layout-main border"><div class="Layout-main-centered-xl"><div class="container-xl border color-border-accent">centered xl</div></div></div><div class="Layout-sidebar border">sidebar</div></div>
Layout--sidebar-narrow [md: 240px, lg: 256px]Layout--sidebar-wide [md: 296px, lg: 320px, xl: 344px]<div class="Layout Layout--sidebar-narrow"><div class="Layout-main border">Layout--sidebar-narrow</div><div class="Layout-sidebar border">sidebar</div></div><div class="Layout Layout--sidebar-wide"><div class="Layout-main border">Layout--sidebar-wide</div><div class="Layout-sidebar border">sidebar</div></div>
Layout--gutter-none: 0pxLayout--gutter-condensed 16pxLayout--gutter-spacious [md: 16px, lg: 32px, xl: 40px]<div class="Layout Layout--gutter-none"><div class="Layout-main border">Layout--gutter-none</div><div class="Layout-sidebar border">sidebar</div></div><div class="Layout Layout--gutter-condensed"><div class="Layout-main border">Layout--gutter-condensed</div><div class="Layout-sidebar border">sidebar</div></div><div class="Layout"><div class="Layout-main border">Default</div><div class="Layout-sidebar border">sidebar</div></div><div class="Layout Layout--gutter-spacious"><div class="Layout-main border">Layout--gutter-spacious</div><div class="Layout-sidebar border">sidebar</div></div>
Layout--sidebarPosition-start (default): sidebar to the leftLayout--sidebarPosition-end: sidebar to the right<div class="Layout Layout--sidebarPosition-start"><div class="Layout-main border">main</div><div class="Layout-sidebar border">sidebar</div></div><div class="Layout Layout--sidebarPosition-end"><div class="Layout-main border">main</div><div class="Layout-sidebar border">sidebar</div></div>
Layout--sidebarPosition-flowRow-start (default): when stacked, render the sidebar firstLayout--sidebarPosition-flowRow-end: when stacked, render the sidebar lastLayout--sidebarPosition-flowRow-none: when stacked, hide the sidebar<div class="Layout Layout--sidebarPosition-flowRow-start"><div class="Layout-main border">main</div><div class="Layout-sidebar border">sidebar</div></div><div class="Layout Layout--sidebarPosition-flowRow-end"><div class="Layout-main border">main</div><div class="Layout-sidebar border">sidebar</div></div><div class="Layout Layout--sidebarPosition-flowRow-none"><div class="Layout-main border">main</div><div class="Layout-sidebar border">sidebar</div></div>
sm.Layout--flowRow-until-md: stacks when container is md.Layout--flowRow-until-lg: stacks when container is lg.<div class="Layout Layout--flowRow-until-md"><div class="Layout-main border">main</div><div class="Layout-sidebar border">sidebar</div></div><div class="Layout Layout--flowRow-until-lg"><div class="Layout-main border">main</div><div class="Layout-sidebar border">sidebar</div></div>
It is possible to nest Layout components to generate 3-column layouts.
<div class="Layout"><div class="Layout-main "><div class="Layout Layout--sidebarPosition-end Layout--sidebar-narrow"><div class="Layout-main border">main content</div><div class="Layout-sidebar border">metadata sidebar</div></div></div><div class="Layout-sidebar border">default sidebar</div></div><div class="Layout"><div class="Layout-main "><div class="Layout Layout--sidebarPosition-end Layout--flowRow-until-lg Layout--sidebar-narrow"><div class="Layout-main border">main content</div><div class="Layout-sidebar border">metadata sidebar</div></div></div><div class="Layout-sidebar border">default sidebar</div></div>
Keyboard navigation follows the markup order. Decide carefully how the
focus order should be be by deciding whether Layout-main or Layout-sidebar
comes first in code. The code order won’t affect the visual position.