A frame is a box that keeps a fixed shape no matter how big or small it gets. Wrap an image, video, map, or placeholder in cs-frame and it stays a square by default, or a landscape, portrait, or any custom aspect ratio you specify, even as the surrounding layout resizes. That means no more letterboxing, no more collapsed boxes waiting on a slow image to load, and no more cards that end up different heights.
Pair cs-frame with one of the cs-border-radius-* classes to round the corners without cropping the content inside.
Frames are well-suited for images and image placeholders.
The Lord of the Rings: The Fellowship of the Ring
J.R.R. Tolkien
Options
<divclass="cs-flank"style="--flank-size: 8rem;"><divclass="cs-frame cs-border-radius-m"><imgsrc="https://images.unsplash.com/photo-1523593288094-3ccfb6b2c192?q=20"alt=""/></div><divclass="cs-flank:end"style="--content-percentage: 70%"><divclass="cs-stack cs-gap-xs"><h3>The Lord of the Rings: The Fellowship of the Ring</h3><span>J.R.R. Tolkien</span></div><cs-buttonid="options-menu"appearance="plain"><cs-iconname="more_horiz"label="Options"></cs-icon></cs-button><cs-tooltipfor="options-menu">Options</cs-tooltip></div></div>
White-socks
Kitten • Male
Adopt this petFavorite
Photo coming soon
Bumpkin
Adult • Male
Adopt this petFavorite
Swish-tail
Kitten • Female
Adopt this petFavorite
Sharp-ears
Adult • Female
Adopt this petFavorite
<divclass="cs-grid"style="--min-column-size: 25ch;"><cs-card><divclass="cs-frame:landscape"slot="media"><imgsrc="https://images.unsplash.com/photo-1533743983669-94fa5c4338ec?q=20"alt="Grey and white tabby kitten"/></div><divclass="cs-stack cs-gap-xs"><h3class="cs-heading-m">White-socks</h3><spanclass="cs-body-s">Kitten • Male</span><divclass="cs-flank:end cs-gap-xs"><cs-buttonsize="s"appearance="filled"variant="brand">Adopt this pet</cs-button><cs-buttonid="fav-whitesocks"appearance="plain"size="s"><cs-iconname="favorite"label="Favorite"></cs-icon></cs-button><cs-tooltipfor="fav-whitesocks">Favorite</cs-tooltip></div></div></cs-card><cs-card><divclass="cs-frame:landscape"slot="header"><divclass="cs-stack cs-align-items-center cs-gap-xs cs-caption-s"><cs-iconname="pets"variant="fill"></cs-icon><span>Photo coming soon</span></div></div><divclass="cs-stack cs-gap-xs"><h3class="cs-heading-m">Bumpkin</h3><spanclass="cs-body-s">Adult • Male</span><divclass="cs-flank:end cs-gap-xs"><cs-buttonsize="s"appearance="filled"variant="brand">Adopt this pet</cs-button><cs-buttonid="fav-bumpkin"appearance="plain"size="s"><cs-iconname="favorite"label="Favorite"></cs-icon></cs-button><cs-tooltipfor="fav-bumpkin">Favorite</cs-tooltip></div></div></cs-card><cs-card><divclass="cs-frame:landscape"slot="media"><imgsrc="https://images.unsplash.com/photo-1445499348736-29b6cdfc03b9?q=20"alt="Diluted calico kitten"/></div><divclass="cs-stack cs-gap-xs"><h3class="cs-heading-m">Swish-tail</h3><spanclass="cs-body-s">Kitten • Female</span><divclass="cs-flank:end cs-gap-xs"><cs-buttonsize="s"appearance="filled"variant="brand">Adopt this pet</cs-button><cs-buttonid="fav-swishtail"appearance="plain"size="s"><cs-iconname="favorite"label="Favorite"></cs-icon></cs-button><cs-tooltipfor="fav-swishtail">Favorite</cs-tooltip></div></div></cs-card><cs-card><divclass="cs-frame:landscape"slot="media"><imgsrc="https://images.unsplash.com/photo-1517451330947-7809dead78d5?q=20"alt="Short-haired tabby cat"/></div><divclass="cs-stack cs-gap-xs"><h3class="cs-heading-m">Sharp-ears</h3><spanclass="cs-body-s">Adult • Female</span><divclass="cs-flank:end cs-gap-xs"><cs-buttonsize="s"appearance="filled"variant="brand">Adopt this pet</cs-button><cs-buttonid="fav-sharpears"appearance="plain"size="s"><cs-iconname="favorite"label="Favorite"></cs-icon></cs-button><cs-tooltipfor="fav-sharpears">Favorite</cs-tooltip></div></div></cs-card></div>
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 cs-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.
Frames have a square border radius by default. Add any cs-border-radius-* class to round the corners, or define the border-radius property to set custom rounding.
