A block with a main column and one sidebar on either the left or right. A single page should only have one main section and one sidebar.
The columns will stack in small viewports, form a 1/3-2/3 split in medium sized viewports, and a 1/4-3/4 split in wider viewports (limiting the width of the sidebar).
This layout template only sets up the basic columns. The main content column is quite wide in large viewports and can result in uncomfortably long lines of text. You may want to use other nested elements to limit line lengths.
- Use the layout classes
mzp-l-sidebar-rightto indicate the layout.
- The layout is reversed in right to left (RTL) languages; e.g., a left sidebar will appear on the right.
- The main content can be wrapped in any valid HTML element. We're using
mainin this example but it could also be an
- The sidebar should usually be an
asideelement but you could use other elements.
- The layout works regardless of source order, so arrange elements to suit the content. Some sidebar content is less important than the main and should come after it in source.
- If the sidebar contains a sidebar menu, it should come before the main content so the menu can appear collapsed at the top of the page in small viewports.