Product card
Products in a shop grid: image, name, variant, price and a badge, the whole card is one link.
Products
Tall vase, ash glaze
€120
- Sale
Moon jar, small
€84
was €105 - Photo: a set of four bowls stacked, top-down
Everyday bowls, set of 4
€64
<ul class="mn-products">
<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">
<rect width="400" height="320" fill="var(--mn-surface-2)"/>
<rect y="262" width="400" height="58" fill="color-mix(in srgb, var(--mn-fg) 7%, var(--mn-surface-2))"/>
<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)"/>
<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"/>
<path d="M170 150h56" stroke="var(--mn-fg)" stroke-width="2.5" opacity=".35"/>
<path d="M270 262c-6-30 0-64 22-84h52c22 20 28 54 22 84Z" fill="var(--mn-accent)"/>
<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>
<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>Installation
Everything ships in one stylesheet. There is nothing to import per component.
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">Prefer to own the files? /r/product-card.json is a registry item with this component's CSS and example markup, ready to copy into your project with any tool that reads the open registry-item format.
Class reference
| Class / attribute | Description |
|---|---|
| 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.