# Listing card · MIAN

A property, rental or venue in a results grid: photo, price, key facts, address and a save toggle, the title is the link.

- Id: `listing-card` · Category: Data display · Needs mian.js: yes · License: MIAN License (free to use)
- Docs: https://mian.ro/components/listing-card
- Use for: property listing, real estate card, rental listing, apartment card, marketplace listing, venue card.

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">
<script src="https://mian.ro/dist/mian.js" defer></script>
```

## Classes

- `mn-listings`: The results grid.
- `mn-listing`: One listing (an <article>). The title link covers the card.
- `mn-listing-media`: The photo area; badges sit on it.
- `mn-listing-price`: Price with its period or basis (“/month”, “asking”).
- `mn-listing-facts`: Size, rooms, baths: a list with units.
- `mn-listing-save`: 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

### Results grid

```html
<div class="mn-listings">
  <article class="mn-listing">
    <div class="mn-listing-media"><!-- illustration (SVG omitted; use your own image or <div class="mn-media mn-media-placeholder">) --><span class="mn-badge mn-badge-sm">Energy B</span></div>
    <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>
    <p class="mn-listing-price"><strong>€780</strong> <span>/month</span></p>
    <h3 class="mn-listing-title"><a href="#">2-room flat, Cotroceni</a></h3>
    <p class="mn-listing-address">Str. Dr. Lister 14, Bucharest</p>
    <ul class="mn-listing-facts"><li>58 m²</li><li>2 rooms</li><li>1 bath</li></ul>
  </article>
  <article class="mn-listing">
    <div class="mn-listing-media"><!-- illustration (SVG omitted; use your own image or <div class="mn-media mn-media-placeholder">) --><span class="mn-badge mn-badge-sm">Energy A</span></div>
    <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>
    <p class="mn-listing-price"><strong>€214,000</strong> <span>asking</span></p>
    <h3 class="mn-listing-title"><a href="#">Townhouse with garden</a></h3>
    <p class="mn-listing-address">Str. Bucegi 3, Brașov</p>
    <ul class="mn-listing-facts"><li>132 m²</li><li>4 rooms</li><li>2 baths</li></ul>
  </article>
  <article class="mn-listing">
    <div class="mn-listing-media"><!-- illustration (SVG omitted; use your own image or <div class="mn-media mn-media-placeholder">) --><span class="mn-badge mn-badge-sm">Energy C</span></div>
    <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>
    <p class="mn-listing-price"><strong>€520</strong> <span>/month</span></p>
    <h3 class="mn-listing-title"><a href="#">Studio by the park</a></h3>
    <p class="mn-listing-address">Bd. Eroilor 21, Cluj-Napoca</p>
    <ul class="mn-listing-facts"><li>34 m²</li><li>1 room</li><li>1 bath</li></ul>
  </article>
</div>
```

## Source

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