Components / Display & Media / Aspect Ratio
Aspect Ratio beta
A box that holds its shape — 16/9 for video, 4/3 for photos, 1/1 for avatars — whatever fills it.
<div style="display:grid;grid-template-columns:1.4fr 1fr 0.75fr;gap:10px;max-width:520px;width:100%;align-items:start"> <div class="k-ar" data-r="16/9"><div class="in"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="2"/><circle cx="9" cy="10" r="1.6"/><path d="m21 15-4.5-4.5L6 21"/></svg><span>16/9 — Video</span></div></div> <div class="k-ar" data-r="4/3"><div class="in"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="2"/><circle cx="9" cy="10" r="1.6"/><path d="m21 15-4.5-4.5L6 21"/></svg><span>4/3 — Photo</span></div></div> <div class="k-ar" data-r="1/1"><div class="in"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="2"/><circle cx="9" cy="10" r="1.6"/><path d="m21 15-4.5-4.5L6 21"/></svg><span>1/1 — Avatar</span></div></div> </div>
.k-ar{position:relative;border-radius:12px;overflow:hidden;background:var(--k-bg-soft);border:1px solid var(--k-line);font-family:var(--k-font);color:var(--k-ink-3)}
.k-ar[data-r="16/9"]{aspect-ratio:16/9}
.k-ar[data-r="4/3"]{aspect-ratio:4/3}
.k-ar[data-r="1/1"]{aspect-ratio:1/1}
.k-ar .in{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:6px;font-size:12px;font-weight:550}
Usage
For media slots whose content arrives late or varies: embeds, thumbnails, covers. The layout never jumps because the shape was reserved first.
Accessibility
Pure CSS — the aspect-ratio property does the work, so there is nothing to announce and nothing to break. Put the alt text on the media inside, as usual.
Related parts
Avatar beta
Initials first, photo when there is one. Three sizes, a status dot, and a stacking group.
Bar Chart beta
Columns for comparing a handful of values — the chart people read correctly at a glance.
Card beta
The universal container: a hairline box with a header, a body and a footer that agree with each other.
Carousel beta
A row of panels that scrolls like it means it — snap points, real buttons, no autoplay.