sidecar
A fixed + flexible pair that stacks when narrow. This page's shell uses it.
Example
sidecar
content
Basic usage
<m-sidecar>
<nav>…</nav>
<main>…</main>
</m-sidecar>API
Pairs one fixed-width sidecar with flexible content and stacks them when space is narrow.
Attributes
| Name | Type/Values | Default | Description |
|---|---|---|---|
gap | none · 2xs · xs · sm · md · lg · xl · 2xl | md | Sets the space between the pair. |
side | end | start | Makes the last child the sidecar without visual reordering. |
side-width | xs · sm · md | xs | Sets the sidecar's preferred width. |
Content/markup contract
| Name | Type/Values | Default | Description |
|---|---|---|---|
| Children | exactly two | first child is fixed | The first child is the sidecar and the last is flexible content. With side="end", the last child is the sidecar. |