Content w/ sidebar

ID: mantra_starter:content_w_sidebar

Main column with a sidebar beside it. `meta` is the sidebar itself and `footer` sits under it; both fall below the content once there is no room for a second column.

Name Label Type Description
content Content Slot
meta Sidebar Slot
footer Sidebar footer Slot

Default

Content, a sidebar and the block under the sidebar. The two-column rule is a `@container mantra-layout-sidebar` query, and a container query only ever matches an ancestor -- never the element itself -- so the story declares the container on a wrapper of its own. Without that wrapper the component is correct and stays in one column forever, which looks like the query is broken. The theme does the same thing for the library overview page in `libraries/modules/ui_patterns_library.css`.

What the layout does

The content column takes whatever the sidebar leaves. Both tracks are sized from leftover space rather than from the container width, so neither can push the other out of the grid.Below the breakpoint the sidebar and its footer fall under the content, in that order.

On this page

< data-component-id="mantra_starter:list_items" class="list_items">
  • What the layout does
  • Where the tracks come from
  • What happens below the breakpoint