Stack

Dieser Inhalt ist noch nicht in deiner Sprache verfügbar.

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>

Code

Edit

Demos

Forms and text

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>

Code

Edit

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

Code

Edit

Align items

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-start
pc-align-items-end
pc-align-items-center
pc-align-items-stretch
pc-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>

Code

Edit

Gap

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-0
pc-gap-xxxs
pc-gap-xxs
pc-gap-xs
pc-gap-s
pc-gap-m
pc-gap-l
pc-gap-xl
pc-gap-xxl
pc-gap-xxxl
pc-gap-xxxxl
pc-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>

Code

Edit