Skip to table of contents 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>