# Product card · MIAN

Products in a shop grid: image, name, variant, price and a badge, the whole card is one link.

- Id: `product-card` · Category: Sections · Needs mian.js: no · License: MIAN License (free to use)
- Docs: https://mian.ro/components/product-card
- Use for: product grid, shop listing, ecommerce products, catalogue, collection page, store items.
- On a page: catalogue · prominence medium · density medium. Usually after: hero.
- Alternatives: listing-card, story-card.
- Avoid: Fake scarcity badges and struck-through prices that were never real.

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">
```

## Classes

- `mn-products`: The grid (a <ul>).
- `mn-product`: One product: mn-media, mn-product-name (with the link), mn-product-meta, mn-product-price.
- `mn-product-price s`: 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

### Products

```html
<ul class="mn-products">
  <li class="mn-product"><div class="mn-media mn-media-portrait"><!-- illustration (SVG omitted; use your own image or <div class="mn-media mn-media-placeholder">) --></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>
  <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>
  <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>
</ul>
```

## Source

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