<div class="pc-stack pc-gap-xxl">
<div class="pc-flank pc-align-items-start">
<pc-avatar
image="https://placer-toolkit.netlify.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.netlify.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.netlify.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.
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.
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.
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:
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.
