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>
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://placer-toolkit.vercel.app/placeholder/128x128.svg" alt="" style="border-radius: var(--pc-border-radius-l)" /> </div> <div class="pc-flank:end" style="--content-percentage: 70%"> <div class="pc-stack pc-gap-s"> <h3>Document title</h3> <span>Last updated 2 days ago</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>
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>
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-spc-border-radius-mpc-border-radius-lpc-border-radius-xlpc-border-radius-pillpc-border-radius-circlepc-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>