Media
Images, video and illustrations in a fixed aspect ratio, with captions and a labelled placeholder for photos still to come.
Media, caption and placeholder
Photo: the potter trimming a bowl on the wheel, hands in focus
<div class="mn-grid" style="--mn-min:14rem;max-width:44rem">
<figure style="margin:0"><div class="mn-media" style="--ratio:4/3"><svg viewBox="0 0 400 320" preserveAspectRatio="xMidYMid slice" role="img" aria-label="Illustration: three ceramic vases" xmlns="http://www.w3.org/2000/svg">
<rect width="400" height="320" fill="var(--mn-surface-2)"/>
<rect y="262" width="400" height="58" fill="color-mix(in srgb, var(--mn-fg) 7%, var(--mn-surface-2))"/>
<path d="M88 262c-30-24-34-70-10-96 8-9 10-20 6-34h40c-4 14-2 25 6 34 24 26 20 72-10 96Z" fill="var(--mn-primary)"/>
<path d="M186 262c-22-4-36-24-34-58 2-40 22-70 26-110h40c4 40 24 70 26 110 2 34-12 54-34 58Z" fill="var(--mn-surface)" stroke="var(--mn-fg)" stroke-width="2.5"/>
<path d="M170 150h56" stroke="var(--mn-fg)" stroke-width="2.5" opacity=".35"/>
<path d="M270 262c-6-30 0-64 22-84h52c22 20 28 54 22 84Z" fill="var(--mn-accent)"/>
<ellipse cx="318" cy="178" rx="26" ry="6" fill="color-mix(in srgb, #000 22%, var(--mn-accent))"/></svg></div><figcaption class="mn-caption">Illustrations are drawn with noodle tokens, so they re-colour with it.</figcaption></figure>
<figure style="margin:0"><div class="mn-media mn-media-placeholder" style="--ratio:4/3" role="img" aria-label="Photo: the potter trimming a bowl on the wheel, hands in focus">Photo: the potter trimming a bowl on the wheel, hands in focus</div><figcaption class="mn-caption">A placeholder says exactly which photo belongs here.</figcaption></figure>
</div>Installation
Everything ships in one stylesheet. There is nothing to import per component.
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">Prefer to own the files? /r/media.json is a registry item with this component's CSS and example markup, ready to copy into your project with any tool that reads the open registry-item format.
Class reference
| Class / attribute | Description |
|---|---|
| mn-media | A frame with an aspect ratio (--ratio, default 16/10) that crops its <img>, <video> or <svg> to fill. |
| mn-media-square · mn-media-portrait · mn-media-wide · mn-media-auto | 1/1, 4/5, 21/9 or the content’s own ratio. |
| mn-media-flat | No radius (for full-bleed images). |
| mn-media-placeholder | A hatched stand-in whose text describes the photo to shoot or choose. Give it role="img" and the same text as aria-label. |
| mn-caption | A caption under the media, inside a <figure>. |
Accessibility
- Every meaningful image needs alt text that says what it shows; decorative images use alt="".
- Use <figure> and <figcaption class="mn-caption"> when a caption belongs to the image.
- Replace placeholders before launch: they describe the image you need, which also makes good alt text.