ComponentsAspect Ratio
Aspect Ratio
atomA box that holds a fixed ratio as it scales — media, embeds, thumbnails.
Aspect ratio
Ratio-locked media boxes — children cover, the shape holds across the grid.
A 16:9 cover and a 1:1 thumbnail. Pick a ratio modifier — the box owns none.
Recipe CSS
This is the exact CSS your kit ships for Aspect Ratio — token-driven, so it re-themes with every knob. Get it (and the rest) from the configurator's Use kit panel.
/* === Aspect ratio ========================================================
* A ratio-locked media box — children fill + cover, so images/maps/embeds keep
* their shape across the responsive grid. Rounded + sunken so an empty box still
* reads as a placeholder. Pick a ratio modifier (the box owns no intrinsic one). */
.aspect { position: relative; width: 100%; overflow: hidden; border-radius: var(--k-radius-md); background: var(--k-surface-sunken); }
.aspect--16x9 { aspect-ratio: 16 / 9; }
.aspect--1x1 { aspect-ratio: 1 / 1; }
.aspect > img, .aspect > video, .aspect > iframe, .aspect > .aspect__fill { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; border: 0; }