Frame

Frames are containers that maintain a consistent aspect ratio, ideal for images and other media.

<div class="frame-overview pc-frame" style="max-inline-size: 20rem">
    <div></div>
</div>

<style>
    .frame-overview: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);
    }

    .frame-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#

Card image placeholders#

Frames are well‐suited for images and image placeholders.

<div class="pc-flank" style="--flank-size: 8rem">
    <div class="pc-frame pc-border-radius-m">
        <img src="https://images.unsplash.com/photo-1523593288094-3ccfb6b2c192?q=20" alt="" />
    </div>
    <div class="pc-flank:end" style="--content-percentage: 70%">
        <div class="pc-stack pc-gap-s">
            <h3>The Lord of the Rings: The Fellowship of the Ring</h3>
            <span>J.R.R. Tolkien</span>
        </div>
        <pc-button size="small" variant="plain">
            <pc-icon
                library="default"
                icon-style="solid"
                name="ellipsis"
                label="Options"
            ></pc-icon>
        </pc-button>
    </div>
</div>

Code

Edit

Aspect ratio#

Frames have a square aspect ratio by default. You can append :square (1∶1), :landscape (16∶9) or :portrait (9∶16) to the pc-frame class in your markup to specify an aspect ratio for the frame. Alternatively you can define the aspect-ratio property to set a custom proportion.

<div class="frame-aspect-ratio pc-grid">
    <div class="pc-frame:landscape">
        <div></div>
    </div>
    <div class="pc-frame:portrait">
        <div></div>
    </div>
    <div class="pc-frame" style="aspect-ratio: 4 / 3">
        <div></div>
    </div>
</div>

<style>
    .frame-aspect-ratio > [class*="pc-frame"]: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);
    }

    .frame-aspect-ratio > [class*="pc-frame"] 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

Border radius#

Frames have a square border radius by default. You can add any of the following pc-border-radius-* classes to an element with pc-frame to specify the border radius:

pc-border-radius-s
pc-border-radius-m
pc-border-radius-l
pc-border-radius-xl
pc-border-radius-pill
pc-border-radius-circle
pc-border-radius-square

Alternatively, you can define the border-radius property to set custom rounding.

<div class="frame-border-radius pc-grid">
    <div class="pc-frame pc-border-radius-l">
        <div></div>
    </div>
    <div class="pc-frame pc-border-radius-circle">
        <div></div>
    </div>
    <div class="pc-frame" style="border-radius: 50% 0">
        <div></div>
    </div>
</div>

<style>
    .frame-border-radius > [class*="pc-frame"]:has(div:empty) {
        padding: var(--pc-spacing-s);
        border: var(--pc-border-width-s) dashed
            var(--pc-color-neutral-border-normal);
    }

    .frame-border-radius > [class*="pc-frame"] 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