Reusable ecommerce components, ready to adapt.

From product discovery to purchase.

Product card HTML you can inspect.

This literal card example comes from the shipped Pro component catalog. Its images use the packaged WebP format. Copy the HTML, then keep the dependencies below with it.

<article class="product-card">
  <div class="card-image">
    <a href="product.html?id=canvas">
      <img src="assets/sneaker.webp" width="1254" height="1254"
           alt="The Everyday Canvas in Midnight / Ecru" loading="lazy">
    </a>
    <button type="button" data-add="canvas"
            aria-label="Choose options for The Everyday Canvas">+</button>
  </div>
  <div class="card-info">
    <div>
      <h3><a href="product.html?id=canvas">The Everyday Canvas</a></h3>
      <p>Midnight / Ecru</p>
    </div>
    <span>€68</span>
  </div>
</article>

Load base.css and home.css, followed by the identity and responsive styles. Quick-add needs catalog-data.js before store.js, the quick-view and bag dialogs, and the cart status element. Wishlist behavior adds wishlist.js and its stylesheet. The image path is relative to the storefront page.

Copy the pattern, preserve its behavior.

Native disclosures and basic presentation can work with HTML and CSS. Calculated totals, quick-add and saved items have controller and DOM dependencies. Do not load the entire catalog controller on a page containing one isolated specimen.

Keep labels, visible focus, error messages and empty states when adapting a component. Rename duplicated IDs and matching selectors if you compose repeated forms.

The complete library is included in Pro. Examples are not standalone payment, authentication or AI services.