Skip to table of contents Use the pc-stack class to arrange elements in a vertical column with even spacing, ensuring a consistent rhythm in the document flow.
<div class="stack-overview pc-stack">
<div></div>
<div></div>
<div></div>
</div>
<style>
.stack-overview div:empty {
min-inline-size: 4rem;
min-block-size: 4rem;
background-color: var(--pc-color-indigo-60);
border-radius: var(--pc-border-radius-m);
}
</style>
Stacks are well‐suited for forms and text, which ensures consistent spacing between elements in the document flow.
<form class="pc-stack">
<pc-input label="E‐mail" type="email" required>
<pc-icon
library="default"
icon-style="solid"
name="envelope"
slot="prefix"
></pc-icon>
</pc-input>
<pc-input label="Password" type="password" required>
<pc-icon
library="default"
icon-style="solid"
name="key"
slot="prefix"
></pc-icon>
</pc-input>
<pc-checkbox>Remember me</pc-checkbox>
<pc-button appearance="primary" type="submit">
<pc-icon
library="default"
icon-style="solid"
name="arrow-right-to-bracket"
slot="prefix"
></pc-icon>
Sign in
</pc-button>
</form>
<div class="pc-stack pc-gap-xxl">
<h3>Example heading</h3>
<p>
This paragraph represents body text within a stacked layout and is long
enough to demonstrate natural wrapping behavior across multiple lines.
It helps illustrate how text content flows vertically when combined with
headings and other structural elements.
</p>
<p>
Additional text reinforces the layout by showing how multiple paragraphs
align, space and relate to the heading above. This mirrors common content
patterns such as articles, documentation sections or descriptive blocks
found throughout user interfaces.
</p>
</div>
By default, items stretch to fill the inline size of the pc-stack container. You can add any of the following pc-align-items-* classes to an element with pc-stack to specify how items are aligned in the inline direction:
pc-align-items-startpc-align-items-endpc-align-items-centerpc-align-items-stretchpc-align-items-baseline
<div class="stack-align-items pc-grid">
<div class="pc-stack pc-align-items-start">
<div style="min-inline-size: 4rem"></div>
<div style="min-inline-size: 8rem"></div>
<div style="min-inline-size: 6rem"></div>
</div>
<div class="pc-stack pc-align-items-end">
<div style="min-inline-size: 4rem"></div>
<div style="min-inline-size: 8rem"></div>
<div style="min-inline-size: 6rem"></div>
</div>
<div class="pc-stack pc-align-items-center">
<div style="min-inline-size: 4rem"></div>
<div style="min-inline-size: 8rem"></div>
<div style="min-inline-size: 6rem"></div>
</div>
<div class="pc-stack pc-align-items-stretch">
<div style="min-inline-size: 4rem"></div>
<div style="min-inline-size: 8rem"></div>
<div style="min-inline-size: 6rem"></div>
</div>
</div>
<style>
.stack-align-items > [class*="pc-stack"]:has(div:empty) {
padding: var(--pc-spacing-s);
border: var(--pc-border-width-s) dashed
var(--pc-color-neutral-border-normal);
border-radius: var(--pc-border-radius-l);
}
.stack-align-items div:empty {
min-inline-size: 4rem;
min-block-size: 4rem;
background-color: var(--pc-color-indigo-60);
border-radius: var(--pc-border-radius-m);
}
</style>
By default, the gap between stack items uses --pc-spacing-m from your theme. You can add any of the following pc-gap-* classes to an element with pc-cluster to specify the gap between items.
pc-gap-0pc-gap-xxxspc-gap-xxspc-gap-xspc-gap-spc-gap-mpc-gap-lpc-gap-xlpc-gap-xxlpc-gap-xxxlpc-gap-xxxxlpc-gap-xxxxxl
<div class="stack-gap pc-grid">
<div class="pc-stack pc-gap-xs">
<div></div>
<div></div>
<div></div>
</div>
<div class="pc-stack pc-gap-xxxl">
<div></div>
<div></div>
<div></div>
</div>
</div>
<style>
.stack-gap > [class*="pc-stack"]:has(div:empty) {
padding: var(--pc-spacing-s);
border: var(--pc-border-width-s) dashed
var(--pc-color-neutral-border-normal);
border-radius: var(--pc-border-radius-l);
}
.stack-gap div:empty {
min-inline-size: 4rem;
min-block-size: 4rem;
background-color: var(--pc-color-indigo-60);
border-radius: var(--pc-border-radius-m);
}
</style>