Skip to content
GitHub Docs Get started
Documentation

Content

Media

A frame for an image or video with a fixed aspect ratio or a circle; corners follow the radius mode.

CSS only components/media.css

Ratios

Lake at dawn below wooded hills
Ratios
<div class="dsgn-grid" data-cols="auto" style="--min: 10rem">
  <div class="dsgn-media"><img src="photo.jpg" alt="Lake at dawn below wooded hills"></div>
  <div class="dsgn-media" data-ratio="4:3"><img src="photo.jpg" alt=""></div>
  <div class="dsgn-media" data-ratio="1:1"><img src="photo.jpg" alt=""></div>
  <div class="dsgn-media" data-ratio="3:2" aria-hidden="true"></div>
</div>

Circle

data-ratio="circle": 1:1 and fully round, for portraits and logos; give it a width.

Jana Kolářová
Circle
<div class="dsgn-cluster"><div class="dsgn-media" data-ratio="circle" style="inline-size: 6rem"><img src="portrait.jpg" alt="Jana Kolářová"></div><div class="dsgn-media" data-ratio="circle" style="inline-size: 4rem"><img src="photo.jpg" alt=""></div></div>

Figure with caption

Lake at dawn below wooded hills
Lipno, the morning before the retreat.
Figure with caption
<figure class="dsgn-figure" style="max-inline-size: 28rem">
  <div class="dsgn-media" data-ratio="3:2"><img src="photo.jpg" alt="Lake at dawn below wooded hills"></div>
  <figcaption>Lipno, the morning before the retreat.</figcaption>
</figure>

Usage

A frame for an image or video: fixed aspect ratio, the picture fills it (object-fit: cover), corners follow radius-l (Sharp 0 · Default 8 · Rounded 16 · Pill 24) like cards and panels.

Empty frames show a neutral placeholder; a thin inner line keeps light images off the surface. Decorative images take alt="", meaningful ones a real description.

Attributes

AttributeValues and notes
data-ratio16:9 (default) | 4:3 | 3:2 | 1:1 | 21:9 | auto (the image keeps its own shape) | circle (1:1, fully round — portraits, logos; set a width, e.g. style="inline-size: 8rem").

Details

Classes
.dsgn-media .dsgn-figure
Tokens used
--dsgn-border --dsgn-font-sans --dsgn-font-size-caption --dsgn-line-container --dsgn-line-height-caption --dsgn-neutral-subtle --dsgn-radius-full --dsgn-radius-l --dsgn-space-8 --dsgn-text-muted
In Figma
Media
Import alone
dsgn.systems/components/media.css