{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "listing-card",
  "type": "registry:ui",
  "title": "Listing card (MIAN)",
  "description": "A property, rental or venue in a results grid: photo, price, key facts, address and a save toggle, the title is the link.",
  "categories": [
    "data display",
    "listing card",
    "property card",
    "real estate",
    "rental"
  ],
  "registryDependencies": [
    "https://mian.ro/r/mian-base.json"
  ],
  "files": [
    {
      "path": "mian/components/listing-card.css",
      "type": "registry:file",
      "target": "mian/components/listing-card.css",
      "content": ".mn-listings { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr)); gap: 1.5rem 1.25rem; }\n.mn-listing { position: relative; display: grid; gap: .2rem; align-content: start; min-width: 0; }\n.mn-listing-media { position: relative; aspect-ratio: 4 / 3; margin-bottom: .6rem; overflow: hidden; border-radius: var(--mn-radius-box); background: var(--mn-surface-2); }\n.mn-listing-media > svg, .mn-listing-media > img { display: block; width: 100%; height: 100%; object-fit: cover; }\n.mn-listing-media > .mn-badge { position: absolute; left: .6rem; top: .6rem; }\n.mn-listing-save { position: absolute; z-index: 2; right: .6rem; top: .6rem; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; padding: 0; border: 0; border-radius: 999px; background: color-mix(in oklab, var(--mn-surface) 88%, transparent); color: var(--mn-fg); cursor: pointer; }\n.mn-listing-save svg { width: 1.1rem; height: 1.1rem; }\n.mn-listing-save[aria-pressed=\"true\"] { color: var(--mn-danger-text, var(--mn-danger)); }\n.mn-listing-save[aria-pressed=\"true\"] svg { fill: currentColor; }\n.mn-listing-price { margin: 0; font-variant-numeric: tabular-nums; }\n.mn-listing-price strong { font: var(--mn-heading-weight) 1.125rem/1.3 var(--mn-font-heading); color: inherit; }\n.mn-listing-price span { color: var(--mn-muted); font-size: var(--mn-text-sm); }\n.mn-listing-title { margin: 0; font: 500 1rem/1.35 var(--mn-font); }\n.mn-listing-title a { color: var(--mn-fg); text-decoration: none; }\n.mn-listing-title a::after { content: \"\"; position: absolute; inset: 0; z-index: 1; border-radius: var(--mn-radius-box); }\n.mn-listing-title a:hover { text-decoration: underline; text-underline-offset: 3px; }\n.mn-listing-address { margin: 0; color: var(--mn-muted); font-size: var(--mn-text-sm); }\n.mn-listing-facts { display: flex; flex-wrap: wrap; gap: .15rem .9rem; margin: .35rem 0 0; padding: 0; list-style: none; color: var(--mn-fg); font-size: var(--mn-text-sm); font-variant-numeric: tabular-nums; }"
    },
    {
      "path": "mian/examples/listing-card.html",
      "type": "registry:file",
      "target": "mian/examples/listing-card.html",
      "content": "<!-- Results grid -->\n<div class=\"mn-listings\">\n  <article class=\"mn-listing\">\n    <div class=\"mn-listing-media\"><svg viewBox=\"0 0 600 400\" preserveAspectRatio=\"xMidYMid slice\" aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"600\" height=\"400\" fill=\"var(--mn-surface-2)\"/>\n<circle cx=\"120\" cy=\"80\" r=\"26\" fill=\"var(--mn-accent)\" opacity=\".55\"/>\n<rect x=\"187\" y=\"150\" width=\"226\" height=\"250\" fill=\"color-mix(in srgb, var(--mn-primary) 22%, var(--mn-surface))\" stroke=\"var(--mn-fg)\" stroke-width=\"3\"/>\n<path d=\"M175 150h250\" stroke=\"var(--mn-fg)\" stroke-width=\"6\"/><rect x=\"213\" y=\"168\" width=\"36\" height=\"44\" rx=\"2\" fill=\"var(--mn-accent)\" stroke=\"var(--mn-fg)\" stroke-width=\"2.5\"/><rect x=\"275\" y=\"168\" width=\"36\" height=\"44\" rx=\"2\" fill=\"var(--mn-bg)\" stroke=\"var(--mn-fg)\" stroke-width=\"2.5\"/><rect x=\"337\" y=\"168\" width=\"36\" height=\"44\" rx=\"2\" fill=\"var(--mn-bg)\" stroke=\"var(--mn-fg)\" stroke-width=\"2.5\"/><rect x=\"213\" y=\"238\" width=\"36\" height=\"44\" rx=\"2\" fill=\"var(--mn-bg)\" stroke=\"var(--mn-fg)\" stroke-width=\"2.5\"/><rect x=\"275\" y=\"238\" width=\"36\" height=\"44\" rx=\"2\" fill=\"var(--mn-bg)\" stroke=\"var(--mn-fg)\" stroke-width=\"2.5\"/><rect x=\"337\" y=\"238\" width=\"36\" height=\"44\" rx=\"2\" fill=\"var(--mn-accent)\" stroke=\"var(--mn-fg)\" stroke-width=\"2.5\"/><rect x=\"213\" y=\"308\" width=\"36\" height=\"44\" rx=\"2\" fill=\"var(--mn-bg)\" stroke=\"var(--mn-fg)\" stroke-width=\"2.5\"/><rect x=\"275\" y=\"308\" width=\"36\" height=\"44\" rx=\"2\" fill=\"var(--mn-bg)\" stroke=\"var(--mn-fg)\" stroke-width=\"2.5\"/><rect x=\"337\" y=\"308\" width=\"36\" height=\"44\" rx=\"2\" fill=\"var(--mn-bg)\" stroke=\"var(--mn-fg)\" stroke-width=\"2.5\"/>\n<rect x=\"280\" y=\"340\" width=\"40\" height=\"60\" fill=\"var(--mn-fg)\" opacity=\".85\"/>\n<rect y=\"392\" width=\"600\" height=\"8\" fill=\"var(--mn-fg)\"/>\n<circle cx=\"147\" cy=\"330\" r=\"34\" fill=\"color-mix(in srgb, var(--mn-success) 45%, var(--mn-surface))\"/><path d=\"M147 362v30\" stroke=\"var(--mn-fg)\" stroke-width=\"4\"/></svg><span class=\"mn-badge mn-badge-sm\">Energy B</span></div>\n    <button class=\"mn-listing-save\" type=\"button\" aria-pressed=\"true\" aria-label=\"Save 2-room flat, Cotroceni\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 20s-7-4.4-9-9a5 5 0 0 1 9-3 5 5 0 0 1 9 3c-2 4.6-9 9-9 9Z\"/></svg></button>\n    <p class=\"mn-listing-price\"><strong>€780</strong> <span>/month</span></p>\n    <h3 class=\"mn-listing-title\"><a href=\"#\">2-room flat, Cotroceni</a></h3>\n    <p class=\"mn-listing-address\">Str. Dr. Lister 14, Bucharest</p>\n    <ul class=\"mn-listing-facts\"><li>58 m²</li><li>2 rooms</li><li>1 bath</li></ul>\n  </article>\n  <article class=\"mn-listing\">\n    <div class=\"mn-listing-media\"><svg viewBox=\"0 0 600 400\" preserveAspectRatio=\"xMidYMid slice\" aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"600\" height=\"400\" fill=\"var(--mn-surface-2)\"/>\n<circle cx=\"230\" cy=\"80\" r=\"26\" fill=\"var(--mn-accent)\" opacity=\".55\"/>\n<rect x=\"187\" y=\"80\" width=\"226\" height=\"320\" fill=\"color-mix(in srgb, var(--mn-accent) 20%, var(--mn-surface))\" stroke=\"var(--mn-fg)\" stroke-width=\"3\"/>\n<path d=\"M175 80h250\" stroke=\"var(--mn-fg)\" stroke-width=\"6\"/><rect x=\"213\" y=\"98\" width=\"36\" height=\"44\" rx=\"2\" fill=\"var(--mn-bg)\" stroke=\"var(--mn-fg)\" stroke-width=\"2.5\"/><rect x=\"275\" y=\"98\" width=\"36\" height=\"44\" rx=\"2\" fill=\"var(--mn-bg)\" stroke=\"var(--mn-fg)\" stroke-width=\"2.5\"/><rect x=\"337\" y=\"98\" width=\"36\" height=\"44\" rx=\"2\" fill=\"var(--mn-accent)\" stroke=\"var(--mn-fg)\" stroke-width=\"2.5\"/><rect x=\"213\" y=\"168\" width=\"36\" height=\"44\" rx=\"2\" fill=\"var(--mn-bg)\" stroke=\"var(--mn-fg)\" stroke-width=\"2.5\"/><rect x=\"275\" y=\"168\" width=\"36\" height=\"44\" rx=\"2\" fill=\"var(--mn-bg)\" stroke=\"var(--mn-fg)\" stroke-width=\"2.5\"/><rect x=\"337\" y=\"168\" width=\"36\" height=\"44\" rx=\"2\" fill=\"var(--mn-bg)\" stroke=\"var(--mn-fg)\" stroke-width=\"2.5\"/><rect x=\"213\" y=\"238\" width=\"36\" height=\"44\" rx=\"2\" fill=\"var(--mn-bg)\" stroke=\"var(--mn-fg)\" stroke-width=\"2.5\"/><rect x=\"275\" y=\"238\" width=\"36\" height=\"44\" rx=\"2\" fill=\"var(--mn-accent)\" stroke=\"var(--mn-fg)\" stroke-width=\"2.5\"/><rect x=\"337\" y=\"238\" width=\"36\" height=\"44\" rx=\"2\" fill=\"var(--mn-bg)\" stroke=\"var(--mn-fg)\" stroke-width=\"2.5\"/><rect x=\"213\" y=\"308\" width=\"36\" height=\"44\" rx=\"2\" fill=\"var(--mn-bg)\" stroke=\"var(--mn-fg)\" stroke-width=\"2.5\"/><rect x=\"275\" y=\"308\" width=\"36\" height=\"44\" rx=\"2\" fill=\"var(--mn-bg)\" stroke=\"var(--mn-fg)\" stroke-width=\"2.5\"/><rect x=\"337\" y=\"308\" width=\"36\" height=\"44\" rx=\"2\" fill=\"var(--mn-bg)\" stroke=\"var(--mn-fg)\" stroke-width=\"2.5\"/>\n<rect x=\"280\" y=\"340\" width=\"40\" height=\"60\" fill=\"var(--mn-fg)\" opacity=\".85\"/>\n<rect y=\"392\" width=\"600\" height=\"8\" fill=\"var(--mn-fg)\"/>\n<circle cx=\"147\" cy=\"330\" r=\"34\" fill=\"color-mix(in srgb, var(--mn-success) 45%, var(--mn-surface))\"/><path d=\"M147 362v30\" stroke=\"var(--mn-fg)\" stroke-width=\"4\"/></svg><span class=\"mn-badge mn-badge-sm\">Energy A</span></div>\n    <button class=\"mn-listing-save\" type=\"button\" aria-pressed=\"false\" aria-label=\"Save Townhouse with garden\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 20s-7-4.4-9-9a5 5 0 0 1 9-3 5 5 0 0 1 9 3c-2 4.6-9 9-9 9Z\"/></svg></button>\n    <p class=\"mn-listing-price\"><strong>€214,000</strong> <span>asking</span></p>\n    <h3 class=\"mn-listing-title\"><a href=\"#\">Townhouse with garden</a></h3>\n    <p class=\"mn-listing-address\">Str. Bucegi 3, Brașov</p>\n    <ul class=\"mn-listing-facts\"><li>132 m²</li><li>4 rooms</li><li>2 baths</li></ul>\n  </article>\n  <article class=\"mn-listing\">\n    <div class=\"mn-listing-media\"><svg viewBox=\"0 0 600 400\" preserveAspectRatio=\"xMidYMid slice\" aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"600\" height=\"400\" fill=\"var(--mn-surface-2)\"/>\n<circle cx=\"340\" cy=\"80\" r=\"26\" fill=\"var(--mn-accent)\" opacity=\".55\"/>\n<rect x=\"156\" y=\"10\" width=\"288\" height=\"390\" fill=\"color-mix(in srgb, var(--mn-fg) 10%, var(--mn-surface))\" stroke=\"var(--mn-fg)\" stroke-width=\"3\"/>\n<path d=\"M144 10h312\" stroke=\"var(--mn-fg)\" stroke-width=\"6\"/><rect x=\"182\" y=\"28\" width=\"36\" height=\"44\" rx=\"2\" fill=\"var(--mn-bg)\" stroke=\"var(--mn-fg)\" stroke-width=\"2.5\"/><rect x=\"244\" y=\"28\" width=\"36\" height=\"44\" rx=\"2\" fill=\"var(--mn-bg)\" stroke=\"var(--mn-fg)\" stroke-width=\"2.5\"/><rect x=\"306\" y=\"28\" width=\"36\" height=\"44\" rx=\"2\" fill=\"var(--mn-bg)\" stroke=\"var(--mn-fg)\" stroke-width=\"2.5\"/><rect x=\"368\" y=\"28\" width=\"36\" height=\"44\" rx=\"2\" fill=\"var(--mn-bg)\" stroke=\"var(--mn-fg)\" stroke-width=\"2.5\"/><rect x=\"182\" y=\"98\" width=\"36\" height=\"44\" rx=\"2\" fill=\"var(--mn-accent)\" stroke=\"var(--mn-fg)\" stroke-width=\"2.5\"/><rect x=\"244\" y=\"98\" width=\"36\" height=\"44\" rx=\"2\" fill=\"var(--mn-bg)\" stroke=\"var(--mn-fg)\" stroke-width=\"2.5\"/><rect x=\"306\" y=\"98\" width=\"36\" height=\"44\" rx=\"2\" fill=\"var(--mn-bg)\" stroke=\"var(--mn-fg)\" stroke-width=\"2.5\"/><rect x=\"368\" y=\"98\" width=\"36\" height=\"44\" rx=\"2\" fill=\"var(--mn-bg)\" stroke=\"var(--mn-fg)\" stroke-width=\"2.5\"/><rect x=\"182\" y=\"168\" width=\"36\" height=\"44\" rx=\"2\" fill=\"var(--mn-bg)\" stroke=\"var(--mn-fg)\" stroke-width=\"2.5\"/><rect x=\"244\" y=\"168\" width=\"36\" height=\"44\" rx=\"2\" fill=\"var(--mn-accent)\" stroke=\"var(--mn-fg)\" stroke-width=\"2.5\"/><rect x=\"306\" y=\"168\" width=\"36\" height=\"44\" rx=\"2\" fill=\"var(--mn-bg)\" stroke=\"var(--mn-fg)\" stroke-width=\"2.5\"/><rect x=\"368\" y=\"168\" width=\"36\" height=\"44\" rx=\"2\" fill=\"var(--mn-bg)\" stroke=\"var(--mn-fg)\" stroke-width=\"2.5\"/><rect x=\"182\" y=\"238\" width=\"36\" height=\"44\" rx=\"2\" fill=\"var(--mn-bg)\" stroke=\"var(--mn-fg)\" stroke-width=\"2.5\"/><rect x=\"244\" y=\"238\" width=\"36\" height=\"44\" rx=\"2\" fill=\"var(--mn-bg)\" stroke=\"var(--mn-fg)\" stroke-width=\"2.5\"/><rect x=\"306\" y=\"238\" width=\"36\" height=\"44\" rx=\"2\" fill=\"var(--mn-accent)\" stroke=\"var(--mn-fg)\" stroke-width=\"2.5\"/><rect x=\"368\" y=\"238\" width=\"36\" height=\"44\" rx=\"2\" fill=\"var(--mn-bg)\" stroke=\"var(--mn-fg)\" stroke-width=\"2.5\"/><rect x=\"182\" y=\"308\" width=\"36\" height=\"44\" rx=\"2\" fill=\"var(--mn-bg)\" stroke=\"var(--mn-fg)\" stroke-width=\"2.5\"/><rect x=\"244\" y=\"308\" width=\"36\" height=\"44\" rx=\"2\" fill=\"var(--mn-bg)\" stroke=\"var(--mn-fg)\" stroke-width=\"2.5\"/><rect x=\"306\" y=\"308\" width=\"36\" height=\"44\" rx=\"2\" fill=\"var(--mn-bg)\" stroke=\"var(--mn-fg)\" stroke-width=\"2.5\"/><rect x=\"368\" y=\"308\" width=\"36\" height=\"44\" rx=\"2\" fill=\"var(--mn-accent)\" stroke=\"var(--mn-fg)\" stroke-width=\"2.5\"/>\n<rect x=\"280\" y=\"340\" width=\"40\" height=\"60\" fill=\"var(--mn-fg)\" opacity=\".85\"/>\n<rect y=\"392\" width=\"600\" height=\"8\" fill=\"var(--mn-fg)\"/>\n<circle cx=\"116\" cy=\"330\" r=\"34\" fill=\"color-mix(in srgb, var(--mn-success) 45%, var(--mn-surface))\"/><path d=\"M116 362v30\" stroke=\"var(--mn-fg)\" stroke-width=\"4\"/></svg><span class=\"mn-badge mn-badge-sm\">Energy C</span></div>\n    <button class=\"mn-listing-save\" type=\"button\" aria-pressed=\"false\" aria-label=\"Save Studio by the park\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 20s-7-4.4-9-9a5 5 0 0 1 9-3 5 5 0 0 1 9 3c-2 4.6-9 9-9 9Z\"/></svg></button>\n    <p class=\"mn-listing-price\"><strong>€520</strong> <span>/month</span></p>\n    <h3 class=\"mn-listing-title\"><a href=\"#\">Studio by the park</a></h3>\n    <p class=\"mn-listing-address\">Bd. Eroilor 21, Cluj-Napoca</p>\n    <ul class=\"mn-listing-facts\"><li>34 m²</li><li>1 room</li><li>1 bath</li></ul>\n  </article>\n</div>"
    }
  ],
  "docs": "MIAN components are HTML + CSS classes, not React components. The styles are already included in mian-base; this item adds the component's CSS section and example markup for reference. Docs: https://mian.ro/components/listing-card",
  "meta": {
    "mian": {
      "license": "LicenseRef-MIAN-1.0",
      "requiresJs": true,
      "classes": [
        "mn-listings",
        "mn-listing",
        "mn-listing-media",
        "mn-listing-price",
        "mn-listing-facts",
        "mn-listing-save"
      ],
      "accessibility": [
        "The title is the only link; the save button sits above it with its own name (“Save 2-room flat in Cotroceni”).",
        "Facts are a list with units spelled out for screen readers (m² is read as “square metres”).",
        "Price includes its basis (“per month”, “asking price”) in text, not colour."
      ],
      "intents": [
        "property listing",
        "real estate card",
        "rental listing",
        "apartment card",
        "marketplace listing",
        "venue card"
      ]
    }
  }
}