Flank

Dieser Inhalt ist noch nicht in deiner Sprache verfügbar.

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>

Code

Edit

Demos#

Adjacent elements#

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>

Code

Edit

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

Code

Edit

Position#

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>

Code

Edit

Sizing#

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>

Code

Edit

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>

Code

Edit

Align items#

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-start
pc-align-items-end
pc-align-items-center
pc-align-items-stretch
pc-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>

Code

Edit

Gap#

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-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="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>

Code

Edit