NedDev®
NL Get in touch
Home Work
Services
SaaS developmentAI developmentAPI developmentMobile app developmentGoogle Ads managementHeadless ShopifyLaravel developmentNext.js developmentReact developmentTypeScript engineeringUI/UX designSEO & AEOEcommerce development
Solutions
AI solutionsB2B platformsE-commerceHospitalityLead generationLogisticsEducationProcess automationSaaS platformsStartup MVPReal estateHealthcare
Industries
LegalHealthcareReal estateFinanceHospitality
Regions
The HagueRotterdamAmsterdamUtrechtEindhovenAlmereBredaArnhemNijmegenTilburgEnschedeGroningenLeidenDelftZoetermeerDen Bosch
Studio
AboutProcessLabBlogContact

Productpagina met galerij, stalen en specs New

Complete product page top: gallery with 1/6 counter, arrows and arrow keys, colour swatches (radio, one sold out and disabled), specs with tooltips (Esc closes), shipping and returns accordions via details name with smooth height (::details-content + interpolate-size behind @supports, otherwise instant) and a sticky buy bar on mobile. Layout via container queries.

Plaid Visgraat in oker over een eikenhouten stoel 1 / 6

Plaids · Merinowol

Plaid Visgraat

Merinowol · 130 x 180 cm · geweven in Tilburg

9,2 uit 148 reviews

€ 129,00 incl. btw · gratis verzending

Kleur: Oker

Op voorraad, morgen in huis

Roest is uitverkocht, weer binnen rond vr 13 nov. Mail mij

  • Materiaal100% merinowolGesponnen in Biella, geweven en gewassen in onze weverij aan de Piushaven.
  • Gewicht890 gZwaar genoeg voor de winter, licht genoeg om mee te nemen naar de bank.
  • Afmeting130 x 180 cmInclusief franjes van 8 cm aan beide korte zijden.
  • Wassen30 °C wolWolprogramma, niet centrifugeren boven 600 toeren, plat laten drogen.
Verzending

Gratis vanaf € 75,00. Op werkdagen vóór 22.00 uur besteld, de volgende dag in huis met PostNL. Afhalen in onze winkel aan de Piushaven in Tilburg kan ook, meestal na 2 uur.

Retour en ruilen

30 dagen bedenktijd. Meld je retour aan via je account en lever het pakket gratis in bij een PostNL-punt. Je geld staat binnen 5 werkdagen terug.

Onderhoud

Wol reinigt zichzelf grotendeels: hang de plaid een nacht buiten. Pluisjes in de eerste weken zijn normaal en verdwijnen vanzelf.

€ 129,00Oker

How to use it

  1. Paste the HTML where the page sections should appear.
  2. Add the CSS to your stylesheet. All classes are prefixed, so nothing clashes with your own styles.
  3. Add the JavaScript and call init() with the element that contains the HTML.
<!-- Productpagina met galerij, stalen en specs · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="ppb">
  <div class="ppb__in">
    <div class="ppb__gal">
      <div class="ppb__main" tabindex="0" role="region" aria-roledescription="carrousel" aria-label="Productfoto's, gebruik pijltjestoetsen">
        <img class="ppb__img" src="https://neddev.com/lab-media/productpagina-blokken-1.webp" alt="Plaid Visgraat in oker over een eikenhouten stoel" width="900" height="900">
        <span class="ppb__cnt" aria-live="polite">1 / 6</span>
        <button type="button" class="ppb__nav ppb__nav--prev" aria-label="Vorige foto"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M10 3L5 8l5 5"/></svg></button>
        <button type="button" class="ppb__nav ppb__nav--next" aria-label="Volgende foto"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M6 3l5 5-5 5"/></svg></button>
      </div>
      <div class="ppb__thumbs" role="group" aria-label="Kies een foto"></div>
    </div>
    <div class="ppb__info">
      <p class="ppb__crumb">Plaids · Merinowol</p>
      <h2 class="ppb__h">Plaid Visgraat</h2>
      <p class="ppb__sub">Merinowol · 130 x 180 cm · geweven in Tilburg</p>
      <p class="ppb__rev"><b>9,2</b> uit 148 reviews</p>
      <p class="ppb__price"><b>€ 129,00</b> <span>incl. btw · gratis verzending</span></p>
      <fieldset class="ppb__sw"><legend>Kleur: <b class="ppb__swname">Oker</b></legend>
        <label class="ppb__s" style="--c:#c39a2e"><input type="radio" name="ppb-kleur" value="0" data-n="Oker" data-st="Op voorraad, morgen in huis" checked><span class="ppb__vh">Oker</span></label>
        <label class="ppb__s" style="--c:#2f6b62"><input type="radio" name="ppb-kleur" value="1" data-n="Zeegroen" data-st="Op voorraad, morgen in huis"><span class="ppb__vh">Zeegroen</span></label>
        <label class="ppb__s" style="--c:#3a3d3f"><input type="radio" name="ppb-kleur" value="2" data-n="Antraciet" data-st="Nog 3 op voorraad"><span class="ppb__vh">Antraciet</span></label>
        <label class="ppb__s ppb__s--off" style="--c:#9b4a2c"><input type="radio" name="ppb-kleur" value="-1" data-n="Roest" disabled><span class="ppb__vh">Roest, uitverkocht</span></label>
        <p class="ppb__stock"><i></i><span>Op voorraad, morgen in huis</span></p>
        <p class="ppb__soon">Roest is uitverkocht, weer binnen rond vr 13 nov. <a href="#">Mail mij</a></p>
      </fieldset>
      <div class="ppb__buy">
        <button type="button" class="ppb__add"><span class="ppb__spin" aria-hidden="true"></span><span class="ppb__add-l">In winkelmand</span></button>
        <button type="button" class="ppb__heart" aria-pressed="false" aria-label="Bewaar op verlanglijst"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 20s-7.5-4.6-7.5-10.2A4.3 4.3 0 0 1 12 7.2a4.3 4.3 0 0 1 7.5 2.6C19.5 15.4 12 20 12 20z"/></svg></button>
      </div>
      <p class="ppb__msg" aria-live="polite"></p>
      <ul class="ppb__specs">
        <li><span class="ppb__sl">Materiaal</span><b>100% merinowol</b><button type="button" class="ppb__tip" aria-describedby="ppb-t1" aria-label="Meer over materiaal">i</button><span class="ppb__tt" role="tooltip" id="ppb-t1">Gesponnen in Biella, geweven en gewassen in onze weverij aan de Piushaven.</span></li>
        <li><span class="ppb__sl">Gewicht</span><b>890 g</b><button type="button" class="ppb__tip" aria-describedby="ppb-t2" aria-label="Meer over gewicht">i</button><span class="ppb__tt" role="tooltip" id="ppb-t2">Zwaar genoeg voor de winter, licht genoeg om mee te nemen naar de bank.</span></li>
        <li><span class="ppb__sl">Afmeting</span><b>130 x 180 cm</b><button type="button" class="ppb__tip" aria-describedby="ppb-t3" aria-label="Meer over afmeting">i</button><span class="ppb__tt" role="tooltip" id="ppb-t3">Inclusief franjes van 8 cm aan beide korte zijden.</span></li>
        <li><span class="ppb__sl">Wassen</span><b>30 °C wol</b><button type="button" class="ppb__tip" aria-describedby="ppb-t4" aria-label="Meer over wassen">i</button><span class="ppb__tt" role="tooltip" id="ppb-t4">Wolprogramma, niet centrifugeren boven 600 toeren, plat laten drogen.</span></li>
      </ul>
      <div class="ppb__acc">
        <details name="ppb-acc" class="ppb__d"><summary>Verzending</summary><div class="ppb__dc"><p>Gratis vanaf € 75,00. Op werkdagen vóór 22.00 uur besteld, de volgende dag in huis met PostNL. Afhalen in onze winkel aan de Piushaven in Tilburg kan ook, meestal na 2 uur.</p></div></details>
        <details name="ppb-acc" class="ppb__d"><summary>Retour en ruilen</summary><div class="ppb__dc"><p>30 dagen bedenktijd. Meld je retour aan via je account en lever het pakket gratis in bij een PostNL-punt. Je geld staat binnen 5 werkdagen terug.</p></div></details>
        <details name="ppb-acc" class="ppb__d"><summary>Onderhoud</summary><div class="ppb__dc"><p>Wol reinigt zichzelf grotendeels: hang de plaid een nacht buiten. Pluisjes in de eerste weken zijn normaal en verdwijnen vanzelf.</p></div></details>
      </div>
    </div>
  </div>
  <div class="ppb__sticky"><span><b>€ 129,00</b><small class="ppb__stname">Oker</small></span><button type="button" class="ppb__add ppb__add--s"><span class="ppb__spin" aria-hidden="true"></span><span class="ppb__add-l">In winkelmand</span></button></div>
</div>
</div>

More page sections

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 →