Related content
A stack keeps related content together.
Layout primitives
Stack, cluster and columns compose with the page container. These primitives ship in foundations.
Compose a layout
A second column
Columns share the available width. Add data-from="md" inside sp-cq to stack them on narrow screens.
Usage
<div class="sp-columns" data-columns="2" data-from="md"><article class="sp-card sp-stack"><h3>Related content</h3><p>A stack keeps related content together.</p><div class="sp-cluster"><button class="sp-button">Continue</button><button class="sp-button" data-variant="outline">Cancel</button></div></article><article class="sp-card sp-stack"><h3>A second column</h3><p>Columns share the available width. Add data-from="md" inside sp-cq to stack them on narrow screens.</p></article></div>