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>
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>
<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>
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-startpc-align-items-endpc-align-items-centerpc-align-items-stretchpc-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>
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-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="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>