{
  "$schema": "https://mian.ro/schema/v2/registry.json",
  "schemaVersion": "2.0.0",
  "generatedAt": "2026-10-02T13:14:06.957Z",
  "id": "media",
  "name": "Media",
  "category": "Sections",
  "description": "Images, video and illustrations in a fixed aspect ratio, with captions and a labelled placeholder for photos still to come.",
  "tags": [
    "media",
    "image",
    "photo",
    "picture",
    "figure",
    "caption",
    "aspect ratio",
    "placeholder",
    "video",
    "illustration"
  ],
  "requiresJs": false,
  "license": "LicenseRef-MIAN-1.0",
  "composition": {
    "role": "showcase",
    "intents": [
      "large image",
      "video",
      "photo with caption",
      "image placeholder",
      "screenshot",
      "illustration"
    ],
    "prominence": "high",
    "density": "low",
    "worksAfter": [],
    "worksBefore": [],
    "alternatives": [
      "mockup",
      "product-gallery"
    ],
    "avoid": "Stock photos of people at laptops. Use the product, real photography or a described placeholder."
  },
  "url": "https://mian.ro/components/media",
  "markdownUrl": "https://mian.ro/ai/components/media.md",
  "classes": [
    {
      "name": "mn-media",
      "description": "A frame with an aspect ratio (--ratio, default 16/10) that crops its <img>, <video> or <svg> to fill."
    },
    {
      "name": "mn-media-square · mn-media-portrait · mn-media-wide · mn-media-auto",
      "description": "1/1, 4/5, 21/9 or the content’s own ratio."
    },
    {
      "name": "mn-media-flat",
      "description": "No radius (for full-bleed images)."
    },
    {
      "name": "mn-media-placeholder",
      "description": "A hatched stand-in whose text describes the photo to shoot or choose. Give it role=\"img\" and the same text as aria-label."
    },
    {
      "name": "mn-caption",
      "description": "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": [
    {
      "title": "Media, caption and placeholder",
      "description": null,
      "html": "<div class=\"mn-grid\" style=\"--mn-min:14rem;max-width:44rem\">\n  <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\">\n<rect width=\"400\" height=\"320\" fill=\"var(--mn-surface-2)\"/>\n<rect y=\"262\" width=\"400\" height=\"58\" fill=\"color-mix(in srgb, var(--mn-fg) 7%, var(--mn-surface-2))\"/>\n<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)\"/>\n<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\"/>\n<path d=\"M170 150h56\" stroke=\"var(--mn-fg)\" stroke-width=\"2.5\" opacity=\".35\"/>\n<path d=\"M270 262c-6-30 0-64 22-84h52c22 20 28 54 22 84Z\" fill=\"var(--mn-accent)\"/>\n<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>\n  <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>\n</div>"
    }
  ],
  "css": ".mn-media { position: relative; display: block; margin: 0; aspect-ratio: var(--ratio, 16 / 10); overflow: hidden; border-radius: var(--mn-radius-box); background-color: var(--mn-surface-2); color: var(--mn-muted); isolation: isolate; }\n.mn-media > img, .mn-media > video, .mn-media > svg, .mn-media > picture, .mn-media > picture > img { display: block; width: 100%; height: 100%; object-fit: cover; }\n.mn-media-auto { aspect-ratio: auto; }\n.mn-media-square { --ratio: 1; } .mn-media-portrait { --ratio: 4 / 5; } .mn-media-wide { --ratio: 21 / 9; }\n.mn-media-flat { border-radius: 0; }\n.mn-media-placeholder {\n  display: grid; place-items: center; padding: 1.5rem; text-align: center;\n  font: 500 .75rem/1.5 var(--mn-font-mono); letter-spacing: .01em; text-wrap: balance;\n  background-image: repeating-linear-gradient(135deg, color-mix(in oklab, var(--mn-fg) 6%, transparent) 0 1px, transparent 1px 10px);\n}\n.mn-caption { margin: .75rem 0 0; font-size: .8125rem; line-height: 1.5; color: var(--mn-muted); }\n.mn-media > .mn-media-tag { position: absolute; left: .75rem; bottom: .75rem; z-index: 1; }",
  "js": null,
  "install": {
    "css": "https://mian.ro/dist/mian.css",
    "js": null,
    "registryItem": "https://mian.ro/r/media.json"
  }
}