Skip to content

Layout

Experimental

Build responsive-friendly page layouts with 2 columns.

Use with .container-xx classes to limit the overall layout structure size.

Elements

  • Layout-main
  • Layout-sidebar
  • Layout-divider
  • Layout-main-centered-md
  • Layout-main-centered-lg
  • Layout-main-centered-xl

Use 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.

Default

Dividers

Use Layout--divided in conjuction with a Layout-divider to show a divider between the main content and the sidebar. Flowing as row:

  • default: shows a 1px line between main and sidebar
  • Layout-divider--flowRow-shallow: shows a filled 8px divider.
  • Layout-divider--flowRow-hidden: hides the divider

Centered content

Modifiers

  • Default: [md: 256px, lg: 296px, xl: 320px]
  • Layout--sidebar-narrow [md: 240px, lg: 256px, xl: 296px]
  • Layout--sidebar-wide [md: 296px, lg: 320px, xl: 344px]

Column gutter

  • Default: [md: 16px, lg: 24px]
  • Layout--gutter-none: 0px
  • Layout--gutter-condensed 16px
  • Layout--gutter-spacious [md: 16px, lg: 32px, xl: 40px]
  • Layout--sidebarPosition-start (default): sidebar to the left
  • Layout--sidebarPosition-end: sidebar to the right
  • Layout--sidebarPosition-flowRow-start (default): when stacked, render the sidebar first
  • Layout--sidebarPosition-flowRow-end: when stacked, render the sidebar last
  • Layout--sidebarPosition-flowRow-none: when stacked, hide the sidebar

Layout stacking

  • Default: stacks when container is sm.
  • Layout--flowRow-until-md: stacks when container is md.
  • Layout--flowRow-until-lg: stacks when container is lg.

Nesting Layouts

It is possible to nest Layout components to generate 3-column layouts.

Accessibility and keyboard navigation

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.

Edit this page on GitHub
2 contributorsmanuelpuyoljonrohan
Last edited by manuelpuyol on May 26, 2021