layout-stack
Vertical stacking layout with configurable gap. The fundamental building block for vertical rhythm.
Attributes
| Attribute | Values | Default | Description |
|---|---|---|---|
data-layout-gap |
none, 3xs, 2xs, xs, s, m, l, xl, 2xl, 3xl |
m |
Controls the vertical gap between child elements |
data-layout-align |
start, center, end, stretch |
stretch |
Controls horizontal alignment of child elements |
Gap Variants
The data-layout-gap attribute controls the spacing between stacked items.
Gap variants example
<layout-stack data-layout-gap="xs"> <div>Item 1</div> <div>Item 2</div> <div>Item 3</div></layout-stack> <layout-stack data-layout-gap="m"> <!-- Default gap --></layout-stack> <layout-stack data-layout-gap="xl"> <!-- Large gap --></layout-stack>Alignment Variants
The data-layout-align attribute controls horizontal alignment of items.
Alignment variants example
<layout-stack data-layout-gap="s" data-layout-align="start"> <button type="button">Short</button> <button type="button">Medium Button</button> <button type="button">Longer Button Text</button></layout-stack> <layout-stack data-layout-gap="s" data-layout-align="center"> <!-- Centered items --></layout-stack> <layout-stack data-layout-gap="s" data-layout-align="end"> <!-- End-aligned items --></layout-stack>Usage Examples
Form Layout
Form layout with nested stacks
<layout-stack data-layout-gap="m"> <layout-stack data-layout-gap="xs"> <label for="name">Name</label> <input type="text" id="name" /> </layout-stack> <layout-stack data-layout-gap="xs"> <label for="email">Email</label> <input type="email" id="email" /> </layout-stack> <button type="submit">Submit</button></layout-stack>Card Content
Card with stacked content
<layout-card> <layout-stack data-layout-gap="s"> <h3>Card Title</h3> <p>Card description text.</p> <layout-cluster data-layout-gap="s"> <button type="button">Action</button> <button type="button" class="secondary">Cancel</button> </layout-cluster> </layout-stack></layout-card>Nested Stacks
Nested stacks with different gaps
<layout-stack data-layout-gap="xl"> <layout-stack data-layout-gap="s"> <h3>Section 1</h3> <p>Content for section 1</p> </layout-stack> <layout-stack data-layout-gap="s"> <h3>Section 2</h3> <p>Content for section 2</p> </layout-stack></layout-stack>Related
<layout-cluster>— Horizontal grouping with wrapping<layout-grid>— Auto-fit grid layout<layout-sidebar>— Two-column layout with sidebar<layout-card>— Card container