Primer / Live
Storybook

  • Theme

  • Light
  • Dark
  • System

  • Light tone

  • Light
  • Light high contrast
  • Light colorblind
  • Light Tritanopia

  • Dark tone

  • Dark
  • Dark dimmed
  • Dark high contrast
  • Dark colorblind
  • Dark Tritanopia
  • Reset to default

Layout

Layout provides foundational patterns for responsive pages.

Default position

Sidebar content
Main content

Sidebar at the right

Sidebar content
Main content

Sidebar below

Place the sidebar slot below the main slot using is_sidebar_position_flow_row_end.
Sidebar content
Main content

Narrow sidebar

Sidebar content
Main content

Wide sidebar

Sidebar content
Main content

No gutter

Sidebar content
Main content

Condensed gutter

Sidebar content
Main content

Spacious gutter

Sidebar content
Main content

With a divider

Sidebar content
Main content

Centered content

Sidebar content
Centered md

Nested layout 1

Default sidebar
Metadata sidebar
Main content

Nested layout 2

Default sidebar
Metadata sidebar
Main content

Rendering order

Change the rendering order with the order attribute on slots.
Sidebar content
Main content
Main content
Sidebar content