{ "$schema": "https://mian.ro/schema/v2/registry.json", "schemaVersion": "2.0.0", "generatedAt": "2026-10-02T13:14:06.957Z", "id": "listing-card", "name": "Listing card", "category": "Data display", "description": "A property, rental or venue in a results grid: photo, price, key facts, address and a save toggle, the title is the link.", "tags": [ "listing card", "property card", "real estate", "rental", "apartment", "house", "venue", "search results", "marketplace", "airbnb style" ], "requiresJs": true, "license": "LicenseRef-MIAN-1.0", "composition": { "role": null, "intents": [ "property listing", "real estate card", "rental listing", "apartment card", "marketplace listing", "venue card" ], "prominence": null, "density": null, "worksAfter": [], "worksBefore": [], "alternatives": [], "avoid": null }, "url": "https://mian.ro/components/listing-card", "markdownUrl": "https://mian.ro/ai/components/listing-card.md", "classes": [ { "name": "mn-listings", "description": "The results grid." }, { "name": "mn-listing", "description": "One listing (an
). The title link covers the card." }, { "name": "mn-listing-media", "description": "The photo area; badges sit on it." }, { "name": "mn-listing-price", "description": "Price with its period or basis (“/month”, “asking”)." }, { "name": "mn-listing-facts", "description": "Size, rooms, baths: a list with units." }, { "name": "mn-listing-save", "description": "A toggle button (aria-pressed) above the link." } ], "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." ], "examples": [ { "title": "Results grid", "description": null, "html": "
\n
\n
\n\n\n\n\n\nEnergy B
\n \n

€780 /month

\n

2-room flat, Cotroceni

\n

Str. Dr. Lister 14, Bucharest

\n
  • 58 m²
  • 2 rooms
  • 1 bath
\n
\n
\n
\n\n\n\n\n\nEnergy A
\n \n

€214,000 asking

\n

Townhouse with garden

\n

Str. Bucegi 3, Brașov

\n
  • 132 m²
  • 4 rooms
  • 2 baths
\n
\n
\n
\n\n\n\n\n\nEnergy C
\n \n

€520 /month

\n

Studio by the park

\n

Bd. Eroilor 21, Cluj-Napoca

\n
  • 34 m²
  • 1 room
  • 1 bath
\n
\n
" } ], "css": ".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; }", "js": "/*