{
  "$schema": "https://mian.ro/schema/v2/registry.json",
  "schemaVersion": "2.0.0",
  "generatedAt": "2026-10-02T13:14:06.957Z",
  "id": "product-card",
  "name": "Product card",
  "category": "Sections",
  "description": "Products in a shop grid: image, name, variant, price and a badge, the whole card is one link.",
  "tags": [
    "product",
    "product card",
    "shop",
    "store",
    "ecommerce",
    "catalog",
    "merchandise",
    "grid",
    "price"
  ],
  "requiresJs": false,
  "license": "LicenseRef-MIAN-1.0",
  "composition": {
    "role": "catalogue",
    "intents": [
      "product grid",
      "shop listing",
      "ecommerce products",
      "catalogue",
      "collection page",
      "store items"
    ],
    "prominence": "medium",
    "density": "medium",
    "worksAfter": [
      "hero"
    ],
    "worksBefore": [],
    "alternatives": [
      "listing-card",
      "story-card"
    ],
    "avoid": "Fake scarcity badges and struck-through prices that were never real."
  },
  "url": "https://mian.ro/components/product-card",
  "markdownUrl": "https://mian.ro/ai/components/product-card.md",
  "classes": [
    {
      "name": "mn-products",
      "description": "The grid (a <ul>)."
    },
    {
      "name": "mn-product",
      "description": "One product: mn-media, mn-product-name (with the link), mn-product-meta, mn-product-price."
    },
    {
      "name": "mn-product-price s",
      "description": "A crossed-out old price."
    }
  ],
  "accessibility": [
    "Only the name is a link, stretched over the card, so each product is announced once.",
    "Say “Sale” and the old price in text, not only with a strike-through."
  ],
  "examples": [
    {
      "title": "Products",
      "description": null,
      "html": "<ul class=\"mn-products\">\n  <li class=\"mn-product\"><div class=\"mn-media mn-media-portrait\"><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><h3 class=\"mn-product-name\"><a href=\"#\">Tall vase, ash glaze</a></h3><p class=\"mn-product-meta\">Stoneware · 32 cm</p><p class=\"mn-product-price\">€120</p></li>\n  <li class=\"mn-product\"><div class=\"mn-media mn-media-portrait\"><svg viewBox=\"0 0 600 450\" preserveAspectRatio=\"xMidYMid slice\" aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"600\" height=\"450\" fill=\"var(--mn-surface-2)\"/><circle cx=\"220\" cy=\"225\" r=\"120\" fill=\"var(--mn-primary)\"/><rect x=\"300\" y=\"105\" width=\"190\" height=\"240\" fill=\"none\" stroke=\"var(--mn-fg)\" stroke-width=\"2\"/><path d=\"M60 390h480\" stroke=\"var(--mn-fg)\" stroke-width=\"2\"/></svg><span class=\"mn-badge mn-accent\">Sale</span></div><h3 class=\"mn-product-name\"><a href=\"#\">Moon jar, small</a></h3><p class=\"mn-product-meta\">Porcelain · 18 cm</p><p class=\"mn-product-price\">€84 <s><span class=\"mn-sr-only\">was </span>€105</s></p></li>\n  <li class=\"mn-product\"><div class=\"mn-media mn-media-placeholder\" style=\"--ratio:4/5\" role=\"img\" aria-label=\"Photo: a set of four bowls stacked, top-down\">Photo: a set of four bowls stacked, top-down</div><h3 class=\"mn-product-name\"><a href=\"#\">Everyday bowls, set of 4</a></h3><p class=\"mn-product-meta\">Speckled white</p><p class=\"mn-product-price\">€64</p></li>\n</ul>"
    }
  ],
  "css": ".mn-products { display: grid; gap: 2.25rem 1.25rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); margin: 0; padding: 0; list-style: none; }\n.mn-product { position: relative; display: grid; gap: .3rem; align-content: start; color: var(--mn-fg); }\n.mn-product > * { margin: 0; }\n.mn-product > .mn-media { margin-bottom: .7rem; }\n.mn-product > .mn-media > * { transition: scale 600ms var(--mn-ease); }\n.mn-product:hover > .mn-media > * { scale: 1.035; }\n.mn-product-name { font: 550 .9688rem/1.35 var(--mn-font); }\n.mn-product-name a { color: inherit; text-decoration: none; }\n.mn-product-name a::after { content: \"\"; position: absolute; inset: 0; z-index: 1; }\n.mn-product-name a:focus-visible { outline: none; }\n.mn-product:has(.mn-product-name a:focus-visible) { box-shadow: var(--mn-focus); border-radius: var(--mn-radius-box); }\n.mn-product-meta { color: var(--mn-muted); font-size: .875rem; }\n.mn-product-price { font-variant-numeric: tabular-nums; font-size: .9375rem; }\n.mn-product-price s { color: var(--mn-muted); margin-inline-start: .4rem; }\n.mn-product .mn-media > .mn-badge { position: absolute; top: .75rem; left: .75rem; z-index: 1; }",
  "js": null,
  "install": {
    "css": "https://mian.ro/dist/mian.css",
    "js": null,
    "registryItem": "https://mian.ro/r/product-card.json"
  }
}