# Media · MIAN

Images, video and illustrations in a fixed aspect ratio, with captions and a labelled placeholder for photos still to come.

- Id: `media` · Category: Sections · Needs mian.js: no · License: MIAN License (free to use)
- Docs: https://mian.ro/components/media
- Use for: large image, video, photo with caption, image placeholder, screenshot, illustration.
- On a page: showcase · prominence high · density low.
- Alternatives: mockup, product-gallery.
- Avoid: Stock photos of people at laptops. Use the product, real photography or a described placeholder.

Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate.

## Install

```html
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
```

## Classes

- `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.

## Examples

### Media, caption and placeholder

```html
<div class="mn-grid" style="--mn-min:14rem;max-width:44rem">
  <figure style="margin:0"><div class="mn-media" style="--ratio:4/3"><!-- illustration (SVG omitted; use your own image or <div class="mn-media mn-media-placeholder">) --></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>
```

## Source

Already inside mian.css; you do not need it to use the component. To vendor or customise: https://mian.ro/api/v1/components/media/source