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.

data-layout-gap="xs"

Item 1
Item 2
Item 3

data-layout-gap="m" (default)

Item 1
Item 2
Item 3

data-layout-gap="xl"

Item 1
Item 2
Item 3

Code

<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.

data-layout-align="start"

data-layout-align="center"

data-layout-align="end"

Code

<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

<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 Title

Card description text that explains the 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

Section 1

Content for section 1

Section 2

Content for section 2
<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>

CSS Implementation

layout-stack { display: flex; flex-direction: column; gap: var(--_gap, var(--size-m)); &[data-layout-gap="none"] { --_gap: 0; } &[data-layout-gap="3xs"] { --_gap: var(--size-3xs); } &[data-layout-gap="2xs"] { --_gap: var(--size-2xs); } &[data-layout-gap="xs"] { --_gap: var(--size-xs); } &[data-layout-gap="s"] { --_gap: var(--size-s); } &[data-layout-gap="m"] { --_gap: var(--size-m); } &[data-layout-gap="l"] { --_gap: var(--size-l); } &[data-layout-gap="xl"] { --_gap: var(--size-xl); } &[data-layout-gap="2xl"] { --_gap: var(--size-2xl); } &[data-layout-gap="3xl"] { --_gap: var(--size-3xl); } &[data-layout-align="start"] { align-items: flex-start; } &[data-layout-align="center"] { align-items: center; } &[data-layout-align="end"] { align-items: flex-end; } &[data-layout-align="stretch"] { align-items: stretch; } }

Related Elements