Split

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

Use the pc-grid class to create a responsive grid with even spacing, allowing the number of columns to adjust when space is limited.

<div class="split-overview pc-split">
    <div></div>
    <div></div>
</div>

<style>
    .split-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#

Navigational elements#

Splits are especially useful for navigation, header and footer layouts.

<div class="split-navigation pc-flank">
    <div class="pc-split:column">
        <div class="pc-stack">
            <pc-button variant="plain">
                <pc-icon
                    library="default"
                    icon-style="solid"
                    name="house"
                    label="Home"
                ></pc-icon>
            </pc-button>
            <pc-button variant="plain">
                <pc-icon
                    library="default"
                    icon-style="solid"
                    name="calendar"
                    label="Calendar"
                ></pc-icon>
            </pc-button>
            <pc-button variant="plain">
                <pc-icon
                    library="default"
                    icon-style="solid"
                    name="envelope"
                    label="Mail"
                ></pc-icon>
            </pc-button>
        </div>
        <div class="pc-stack">
            <pc-divider></pc-divider>
            <pc-button variant="plain">
                <pc-icon
                    library="default"
                    icon-style="solid"
                    name="right-from-bracket"
                    label="Sign out"
                ></pc-icon>
            </pc-button>
        </div>
    </div>
    <div class="placeholder"></div>
</div>

<style>
    .split-navigation pc-button::part(base) {
        justify-content: flex-start;
        text-align: start;
    }

    .split-navigation .placeholder {
        min-block-size: 300px;
        background-color: var(--pc-color-neutral-fill-quiet);
        border: var(--pc-border-width-s) dashed
            var(--pc-color-neutral-border-normal);
        border-radius: var(--pc-border-radius-l);
    }
</style>

Code

Edit

<div class="pc-stack">
    <div class="pc-split">
        <pc-icon
            src="https://placer-toolkit.vercel.app/brand/logo.svg"
            label="Placer Toolkit"
            style="font-size: var(--pc-font-size-xxl)"
        ></pc-icon>

        <div class="pc-cluster">
            <pc-button appearance="primary">Sign up</pc-button>
            <pc-button variant="outlined">Log in</pc-button>
        </div>
    </div>
    <div class="placeholder"></div>
</div>

<style>
    .placeholder {
        min-block-size: 300px;
        background-color: var(--pc-color-neutral-fill-quiet);
        border: var(--pc-border-width-s) dashed
            var(--pc-color-neutral-border-normal);
        border-radius: var(--pc-border-radius-l);
    }
</style>

Code

Edit

Direction#

Items can be split across a row or a column by appending :row or :column to the pc-split class.

<div class="split-direction pc-flank pc-align-items-start" style="block-size: 16rem">
    <div class="pc-split:column">
        <div></div>
        <div></div>
    </div>
    <div class="pc-split:row">
        <div></div>
        <div></div>
    </div>
</div>

<style>
    .split-direction > [class*="pc-split"]: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);
    }

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

Align items#

By default, items are centred on the cross axis of the pc-split container. You can add any of the following pc-align-items-* classes to an element with pc-split to specify how items are aligned:

pc-align-items-start
pc-align-items-end
pc-align-items-center
pc-align-items-stretch
pc-align-items-baseline

These modifiers specify how items are aligned in the block direction for pc-split:row and in the inline direction for pc-split:column.

<div class="split-align-items pc-stack">
    <div class="pc-split pc-align-items-start" style="min-block-size: 8rem">
        <div></div>
        <div></div>
    </div>
    <div class="pc-split pc-align-items-end" style="min-block-size: 8rem">
        <div></div>
        <div></div>
    </div>
    <div class="pc-split pc-align-items-center" style="min-block-size: 8rem">
        <div></div>
        <div></div>
    </div>
    <div class="pc-split pc-align-items-stretch" style="min-block-size: 8rem">
        <div></div>
        <div></div>
    </div>
</div>

<style>
    .split-align-items > [class*="pc-split"]: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);
    }

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

A split’s gap determines how close items can be before they wrap. By default, the gap between split items uses --pc-spacing-m from your theme. You can add any of the following pc-gap-* classes to an element with pc-split 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

To see it in action, use the resize handle on the code demo to resize the demo’s viewport.

<div class="split-gap pc-stack">
    <div class="pc-split pc-gap-xs">
        <div></div>
        <div></div>
    </div>
    <div class="pc-split pc-gap-xxl">
        <div></div>
        <div></div>
    </div>
</div>

<style>
    .split-gap > [class*="pc-split"]: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);
    }

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