Media

Base responsive behaviour for images and video, plus the ln-media block for framed media with aspect ratios and captions. Media elements have intrinsic dimensions governed by their source files, so they will generally break vertical rhythm.

Base element defaults

The base layer makes all <img> and <video> elements responsive by default. They scale down to fit their container while preserving their intrinsic aspect ratio.

<!-- Images and video are responsive by default — no classes needed -->
<img src="/placeholder.svg" alt="Responsive image">
<video src="/sample.mp4" controls>…</video>

/* Base layer — applied automatically */
img, video {
  max-inline-size: 100%;
  block-size: auto;
}

Media block with caption

A container for images, video, and embeds with aspect-ratio control and captions. The __frame element holds the media and applies ratios and overflow clipping.

<div class="ln-media ln-media--bordered">
  <div class="ln-media__frame">
    <img class="ln-media__img" src="/placeholder.svg" alt="Placeholder image">
  </div>
  <p class="ln-media__caption">A bordered media block with a descriptive caption below.</p>
</div>

A bordered media block with a descriptive caption below.

Aspect ratios

<div class="ln-media ln-media--ratio-1x1 ln-media--bordered">
  <div class="ln-media__frame">
    <img class="ln-media__img" src="/placeholder.svg" alt="1:1 ratio">
  </div>
</div>

<div class="ln-media ln-media--ratio-4x3 ln-media--bordered">
  <div class="ln-media__frame">
    <img class="ln-media__img" src="/placeholder.svg" alt="4:3 ratio">
  </div>
</div>

<div class="ln-media ln-media--ratio-3x2 ln-media--bordered">
  <div class="ln-media__frame">
    <img class="ln-media__img" src="/placeholder.svg" alt="3:2 ratio">
  </div>
</div>

<div class="ln-media ln-media--ratio-16x9 ln-media--bordered">
  <div class="ln-media__frame">
    <img class="ln-media__img" src="/placeholder.svg" alt="16:9 ratio">
  </div>
</div>

<div class="ln-media ln-media--ratio-21x9 ln-media--bordered">
  <div class="ln-media__frame">
    <img class="ln-media__img" src="/placeholder.svg" alt="21:9 ratio">
  </div>
</div>

Reference

Class	Description	Responsive
`.ln-media`	Media block container	No
`.ln-media__frame`	Frame wrapper for media content	No
`.ln-media__img`	Image inside frame	No
`.ln-media__caption`	Caption text below frame	No
`.ln-media--bordered`	Adds border to frame	No
`.ln-media--ratio-1x1`	1:1 aspect ratio	No
`.ln-media--ratio-4x3`	4:3 aspect ratio	No
`.ln-media--ratio-3x2`	3:2 aspect ratio	No
`.ln-media--ratio-16x9`	16:9 aspect ratio	No
`.ln-media--ratio-21x9`	21:9 aspect ratio	No