Productkaarten · 3 varianten New

Three product cards for a web shop: a portrait card with an add-to-cart button that confirms via aria-live, a landscape card with colour choice as real radio buttons (photo and name follow) and a compact card with old and new price, stock and a save button. For category pages, search results and "often bought together".

Mok Duin

Gebroken wit · Atelier Klei, Leiden

€ 24,95

Kussen linnen

€ 39,00 · roest

Voor 22:00 besteld, morgen in huis

Lamp Vos

~~Was € 89,00~~ nu € 69,00

Nog 3 op voorraad

How to use it

Paste the HTML where the components should appear.
Add the CSS to your stylesheet. All classes are prefixed, so nothing clashes with your own styles.
Add the JavaScript and call init() with the element that contains the HTML.

<!-- Productkaarten · 3 varianten · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="pkt">
<article class="pkt__v">
<img class="pkt__foto" src="https://neddev.com/lab-media/productkaart-set-1.webp" alt="Stoneware mok in gebroken wit" width="800" height="436">
<div class="pkt__vb"><h3 class="pkt__n">Mok Duin</h3><p class="pkt__m">Gebroken wit · Atelier Klei, Leiden</p>
<div class="pkt__koop"><p class="pkt__p">€ 24,95</p><button class="pkt__btn pkt__mand" type="button">In mand</button></div></div>
<p class="pkt__sr" aria-live="polite"></p>
</article>
<article class="pkt__h">
<img class="pkt__th pkt__kus" src="https://neddev.com/lab-media/productkaart-set-2.webp" alt="" width="800" height="436">
<div class="pkt__hb"><h3 class="pkt__n">Kussen linnen</h3><p class="pkt__p">€ 39,00 <span class="pkt__kl">· roest</span></p>
<div class="pkt__sw" role="radiogroup" aria-label="Kleur">
<label class="pkt__s pkt__s--roest"><input type="radio" name="pkt-kleur" value="roest" checked aria-label="Roest"></label>
<label class="pkt__s pkt__s--zand"><input type="radio" name="pkt-kleur" value="zand" aria-label="Zand"></label>
<label class="pkt__s pkt__s--zwart"><input type="radio" name="pkt-kleur" value="antraciet" aria-label="Antraciet"></label>
</div><p class="pkt__lev">Voor 22:00 besteld, morgen in huis</p></div>
</article>
<article class="pkt__h">
<img class="pkt__th" src="https://neddev.com/lab-media/productkaart-set-3.webp" alt="" width="800" height="436">
<div class="pkt__hb"><h3 class="pkt__n">Lamp Vos</h3><p class="pkt__p"><s><span class="pkt__sro">Was </span>€ 89,00</s> <strong><span class="pkt__sro">nu </span>€ 69,00</strong></p><p class="pkt__vr">Nog 3 op voorraad</p></div>
<button class="pkt__hart" type="button" aria-pressed="false"><span class="pkt__sro">Bewaar lamp Vos</span><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10z"/></svg></button>
</article>
</div>
</div>

/* Productkaarten · 3 varianten · NedDev · eigen werk. */
.pkt{position:absolute;inset:0;display:grid;grid-template-columns:40% 1fr;grid-template-rows:1fr 1fr;gap:8px;padding:9px;font-family:'Switzer',system-ui,sans-serif;color:#0a0a0a;background:#f4f3f1;text-align:left;container-type:size}
.pkt *{box-sizing:border-box}
.pkt__sro,.pkt__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pkt__v{position:relative;grid-row:1/3;display:flex;flex-direction:column;min-height:0;background:#fff;border:1px solid rgba(10,10,10,.12);border-radius:8px;overflow:hidden}
.pkt__foto{flex:1;min-height:0;width:100%;object-fit:cover;display:block;background:#e6e3de}
.pkt__vb{padding:8px 9px 9px}
.pkt__n{margin:0;font-size:13px;line-height:1.2;font-weight:700}
.pkt__m{margin:1px 0 0;font-size:12px;line-height:1.3;color:#4a4a4a}
.pkt__lev{margin:4px 0 0;font-size:12px;color:#4a4a4a}
.pkt__koop{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:6px}
.pkt__p{margin:1px 0 0;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.pkt__p s{color:#6a6a6a;font-weight:400}
.pkt__p strong{color:#c43a0b}
.pkt__kl{font-weight:400;color:#4a4a4a}
.pkt__btn{min-height:28px;padding:0 10px;border:1px solid #0a0a0a;border-radius:4px;background:#0a0a0a;color:#fff;font:600 12px/1 'Switzer',system-ui,sans-serif;cursor:pointer;white-space:nowrap;transition:background-color .15s,color .15s}
.pkt__btn:hover{background:#F5480F;border-color:#F5480F;color:#0a0a0a}
.pkt__btn.is-ok{background:#fff;color:#0a0a0a}
.pkt__btn:focus-visible,.pkt__hart:focus-visible{outline:2px solid #F5480F;outline-offset:2px}
.pkt__h{position:relative;display:grid;grid-template-columns:64px 1fr;gap:9px;align-items:start;align-content:center;min-height:0;padding:8px;background:#fff;border:1px solid rgba(10,10,10,.12);border-radius:8px;overflow:hidden}
.pkt__th{width:64px;height:64px;border-radius:4px;object-fit:cover;display:block;background:#e6e3de;transition:filter .25s}
.pkt__hb{min-width:0;padding-right:4px}
.pkt__h:last-child .pkt__hb{padding-right:28px}
.pkt__sw{display:flex;gap:4px;margin-top:4px}
.pkt__s{position:relative;width:26px;height:26px;display:grid;place-items:center;cursor:pointer;border-radius:50%}
.pkt__s::before{content:'';width:18px;height:18px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(10,10,10,.2)}
.pkt__s--roest::before{background:#b4532a}.pkt__s--zand::before{background:#d9c9a8}.pkt__s--zwart::before{background:#3a3a3a}
.pkt__s input{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer}
.pkt__s:has(input:checked){box-shadow:0 0 0 2px #0a0a0a}
.pkt__s:has(input:focus-visible){outline:2px solid #F5480F;outline-offset:2px}
.pkt__kus.is-zand{filter:saturate(.25) brightness(1.18) sepia(.35)}
.pkt__kus.is-antraciet{filter:grayscale(1) brightness(.62) contrast(1.1)}
.pkt__vr{margin:3px 0 0;font-size:12px;color:#8a2c08}
.pkt__hart{position:absolute;top:6px;right:6px;width:28px;height:28px;display:grid;place-items:center;padding:0;border:0;border-radius:4px;background:transparent;cursor:pointer}
.pkt__hart svg{width:18px;height:18px;fill:none;stroke:#0a0a0a;stroke-width:1.8;transition:fill .15s}
.pkt__hart[aria-pressed="true"] svg{fill:#F5480F;stroke:#F5480F}
.pkt__hart:hover{background:#f4f3f1}
@container (max-height:230px){.pkt__lev{display:none}.pkt__m{display:none}.pkt__h{grid-template-columns:48px 1fr;gap:8px}.pkt__th{width:48px;height:48px}}
@media (prefers-reduced-motion:reduce){.pkt__th,.pkt__btn,.pkt__hart svg{transition:none}}

// Productkaarten · 3 varianten · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w = root.querySelector('.pkt'), mand = w.querySelector('.pkt__mand'), sr = w.querySelector('.pkt__sr'), n = 0, t = 0;
    mand.addEventListener('click', function () {
      n++; mand.textContent = 'In mand (' + n + ')'; mand.classList.add('is-ok');
      sr.textContent = 'Mok Duin toegevoegd aan je winkelmand. Totaal ' + n + ' stuks.';
      clearTimeout(t); t = setTimeout(function () { mand.classList.remove('is-ok'); }, 1400);
    });
    var kus = w.querySelector('.pkt__kus'), kl = w.querySelector('.pkt__kl');
    [].forEach.call(w.querySelectorAll('input[name="pkt-kleur"]'), function (r) {
      r.addEventListener('change', function () { kus.className = 'pkt__th pkt__kus is-' + r.value; kl.textContent = '· ' + r.value; });
    });
    var h = w.querySelector('.pkt__hart');
    h.addEventListener('click', function () { var on = h.getAttribute('aria-pressed') !== 'true'; h.setAttribute('aria-pressed', String(on)); h.querySelector('.pkt__sro').textContent = on ? 'Lamp Vos bewaard, klik om te verwijderen' : 'Bewaar lamp Vos'; });
}
init(document.querySelector('.jouw-container'));

More components

Seen something you like?

Add it to your selection and send it over. We build your site around it, in your brand.

Get in touch →