Cluster

Use the pc-cluster class to arrange elements inline with even spacing, allowing items to wrap when space is limited.

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

<style>
    .cluster-overview {
        max-inline-size: 50ch;
    }

    .cluster-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);
    }

    /* In this demo, div sizes will vary to show the flow of cluster elements */
    .cluster-overview div:empty:nth-child(3n) {
        min-inline-size: 6rem !important;
    }

    .cluster-overview div:empty:nth-child(3n + 2) {
        min-inline-size: 8rem;
    }
</style>

Code

Edit

Demos

Inline lists

Clusters are great for inline lists and aligning items of varying sizes.

<div class="pc-cluster">
    <pc-icon src="https://placer-toolkit.vercel.app/brand/logo.svg"></pc-icon>
    <a href="#">Design tokens</a>
    <a href="#">Components</a>
    <a href="#">Layout</a>
    <a href="#">Style utilities</a>
</div>

Code

Edit

<div class="pc-stack">
    <h3 class="pc-heading-xl">Withywindle Pub and Eatery</h3>
    <div class="pc-cluster pc-gap-xs">
        <pc-rating value="4.5" readonly></pc-rating>
        <strong>4,5</strong>
        <span class="pc-caption-l">(419 reviews)</span>
    </div>
    <div class="pc-cluster pc-gap-xs">
        <div class="pc-cluster pc-gap-xxs">
            <pc-icon
                library="default"
                icon-style="solid"
                name="dollar"
                style="color: var(--pc-color-green-60)"
                auto-width
            ></pc-icon>
            <pc-icon
                library="default"
                icon-style="solid"
                name="dollar"
                style="color: var(--pc-color-green-60)"
                auto-width
            ></pc-icon>
            <pc-icon
                library="default"
                icon-style="solid"
                name="dollar"
                style="color: var(--pc-color-green-60)"
                auto-width
            ></pc-icon>
        </div>
        <span
            class="pc-caption-m"
            style="margin-inline: var(--pc-spacing-xs)"
        >
            •
        </span>
        <pc-tag size="small">Comfort food</pc-tag>
        <pc-tag size="small">Gastropub</pc-tag>
        <pc-tag size="small">Cocktail bar</pc-tag>
        <pc-tag size="small">Vegetarian</pc-tag>
        <pc-tag size="small">Gluten‐free</pc-tag>
    </div>
</div>

Code

Edit

Align items

By default, items are centred in the block direction of the pc-cluster container. You can add any of the following pc-align-items-* classes to an element with pc-cluster to specify how items are aligned in the block direction:

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

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

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

    .cluster-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 cluster 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="cluster-gap pc-stack">
    <div class="pc-cluster pc-gap-xs">
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div class="pc-cluster pc-gap-xxxl">
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>

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

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