Product Detail

Thumbnail controls select the main product view. This is a display module, not a checkout.

Open demo ↗

FORM EVERYDAY ESSENTIALS

EXAMPLE PRODUCT

Everyday essentials.

$99

★★★★½

A focused product layout with a large image, alternate views, clear pricing and supporting details.

Specifications

Replace this panel with dimensions, materials and product details.

Ask about this product

HTML source & reuse instructions

Include the shared CSS and JavaScript files. Rename copied IDs and their matching references.


<div class="lab-grid two" data-cp-product="">
<div>
<div aria-label="Example product, front view" class="cp-product-image" data-product-view="0" role="img">
<div class="cp-product-box">
          FORM
          <span>
           EVERYDAY ESSENTIALS
          </span>
</div>
</div>
<div class="cp-product-thumbs">
<button aria-label="Show Front view" aria-pressed="true" data-product-index="0">
          Front
         </button>
<button aria-label="Show Side view" aria-pressed="false" data-product-index="1">
          Side
         </button>
<button aria-label="Show Detail view" aria-pressed="false" data-product-index="2">
          Detail
         </button>
</div>
</div>
<div>
<span class="eyebrow">
         EXAMPLE PRODUCT
        </span>
<h3 class="display-5">
         Everyday essentials.
        </h3>
<p class="h3">
         $99
        </p>
<p aria-label="4.5 out of 5 stars">
         ★★★★½
        </p>
<p>
         A focused product layout with a large image, alternate views, clear pricing and supporting details.
        </p>
<details class="cp-disclosure">
<summary>
          Specifications
         </summary>
<p>
          Replace this panel with dimensions, materials and product details.
         </p>
</details>
<a class="btn btn-primary mt-4" href="/templates/contact/">
         Ask about this product
        </a>
</div>
</div>