When space is limited, items inside a flank wrap.
<div class="flank-overview pc-flank"> <div></div> <div></div></div><style> .flank-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>
Flanks work especially well for asides, inputs with adjacent buttons and rich description lists.
<div class="pc-flank:end pc-gap-s"> <pc-input> <pc-icon library="default" icon-style="solid" name="magnifying-glass" slot="prefix" ></pc-icon> </pc-input> <pc-button appearance="primary">Search</pc-button></div>
<div class="pc-stack pc-gap-xxl"> <div class="pc-flank pc-align-items-start"> <pc-avatar image="https://placer-toolkit.vercel.app/avatars/questionable-coffee-cup.png" label="@questionable-coffee-cup’s avatar" ></pc-avatar> <div class="pc-stack pc-gap-xxs"> <strong>@questionable-coffee-cup</strong> <p class="pc-body-s"> Love how clean the alpha’s turning out! The new theming API makes everything easier to imagine at a glance. </p> </div> </div> <div class="pc-flank pc-align-items-start"> <pc-avatar image="https://placer-toolkit.vercel.app/avatars/vectorist.png" label="@vectorist’s avatar" ></pc-avatar> <div class="pc-stack pc-gap-xxs"> <strong>@vectorist</strong> <p class="pc-body-s"> The component API feels intuitive. I especially like that there’s built‐in accessibility out‐of‐the‐box. </p> </div> </div> <div class="pc-flank pc-align-items-start"> <pc-avatar image="https://placer-toolkit.vercel.app/avatars/tactical-462.png" label="@tactical462’s avatar" ></pc-avatar> <div class="pc-stack pc-gap-xxs"> <strong>@tactical462</strong> <p class="pc-body-s"> 70 locales in the first Placer Toolkit alpha—and it’s the first version to even support <span aria-label="internationalisation">i18n</span>? That’s wild. Most libraries don’t reach that number even after years. </p> </div> </div></div>
By default, the first item in the pc-flank container will flank the other content. You can specify whether the first or last item will flank the remaining content by appending :start or :end to the pc-flank class.
<div class="flank-position pc-stack"> <div class="pc-flank:start"> <div></div> <div></div> </div> <div class="pc-flank:end"> <div></div> <div></div> </div></div><style> .flank-position > [class*="pc-flank"]: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); } .flank-position 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>
The flank’s initial size is determined by the size of its content, but you can set a target size using the --flank-size property. When the flank wraps, it stretches to fill the inline size of the container.
<div class="flank-sizing pc-stack"> <div class="pc-flank" style="--flank-size: 12.5rem"> <div></div> <div></div> </div> <div class="pc-flank" style="--flank-size: 6rem"> <div></div> <div></div> </div></div><style> .flank-sizing > [class*="pc-flank"]: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); } .flank-sizing 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>
The main content fills the remaining inline space of the container. By default, the items wrap when the main content is less than 50 % of the container. You can change the minimum size of the main content with the --content-percentage custom property.
<div class="flank-sizing-content-percentage pc-stack"> <div class="pc-flank" style="--content-percentage: 70%"> <div></div> <div></div> </div> <div class="pc-flank" style="--content-percentage: 85%"> <div></div> <div></div> </div></div><style> .flank-sizing-content-percentage > [class*="pc-flank"]: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); } .flank-sizing-content-percentage 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, items are centred in the block direction of the pc-flank container. You can add any of the following pc-align-items-* classes to an element with pc-flank 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="flank-align-items pc-stack"> <div class="pc-flank pc-align-items-start" style="min-block-size: 8rem"> <div></div> <div></div> <div></div> </div> <div class="pc-flank pc-align-items-end" style="min-block-size: 8rem"> <div></div> <div></div> <div></div> </div> <div class="pc-flank pc-align-items-center" style="min-block-size: 8rem"> <div></div> <div></div> <div></div> </div> <div class="pc-flank pc-align-items-stretch" style="min-block-size: 8rem"> <div></div> <div></div> <div></div> </div></div><style> .flank-align-items > [class*="pc-flank"]: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); } .flank-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 flanks uses --pc-spacing-m from your theme. You can add any of the following pc-gap-* classes to an element with pc-flank 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="flank-gap pc-stack"> <div class="pc-flank pc-gap-xs"> <div></div> <div></div> </div> <div class="pc-flank pc-gap-xxxl"> <div></div> <div></div> </div></div><style> .flank-gap > [class*="pc-flank"]: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); } .flank-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>