Cartzilla component

# Product cards

Display essential information about individual products, such as images, names, prices, and brief descriptions.

#### Electronics product card

-21%
(123)

### VRB01 Virtual Reality Glasses

$340.99 $430.00

- Display: OLED 1440x1600
- Graphics: Adreno 540
- Sound: 2x3.5mm jack
- Input: 4 built-in cameras

    <!-- Electronics strore product card example -->
    <div class="product-card animate-underline hover-effect-opacity bg-body rounded">
      <div class="position-relative">
        <div class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 mt-3 me-3">
          <div class="d-flex flex-column gap-2">
            <button type="button" class="btn btn-icon btn-secondary animate-pulse d-none d-lg-inline-flex" aria-label="Add to Wishlist">
              <i class="ci-heart fs-base animate-target"></i>
            </button>
            <button type="button" class="btn btn-icon btn-secondary animate-rotate d-none d-lg-inline-flex" aria-label="Compare">
              <i class="ci-refresh-cw fs-base animate-target"></i>
            </button>
          </div>
        </div>
        <div class="dropdown d-lg-none position-absolute top-0 end-0 z-2 mt-2 me-2">
          <button type="button" class="btn btn-icon btn-sm btn-secondary bg-body" data-bs-toggle="dropdown" aria-expanded="false" aria-label="More actions">
            <i class="ci-more-vertical fs-lg"></i>
          </button>
          <ul class="dropdown-menu dropdown-menu-end fs-xs p-2" style="min-width: auto">
            <li>
              <a class="dropdown-item" href="#!">
                <i class="ci-heart fs-sm ms-n1 me-2"></i>
                Add to Wishlist
              </a>
            </li>
            <li>
              <a class="dropdown-item" href="#!">
                <i class="ci-refresh-cw fs-sm ms-n1 me-2"></i>
                Compare
              </a>
            </li>
          </ul>
        </div>
        <a class="d-block rounded-top overflow-hidden p-3 p-sm-4" href="#">
          <span class="badge bg-danger position-absolute top-0 start-0 mt-2 ms-2 mt-lg-3 ms-lg-3">-21%</span>
          <!-- Wrap the image with a "ratio" element to avoid content shifts on page load. Formula: imageHeight / imageWidth * 100% -->
          <div class="ratio" style="--cz-aspect-ratio: calc(240 / 258 * 100%)">
            <img src="assets/img/shop/electronics/01.png" alt="VR Glasses">
          </div>
        </a>
      </div>
      <div class="w-100 min-w-0 px-1 pb-2 px-sm-3 pb-sm-3">
        <div class="d-flex align-items-center gap-2 mb-2">
          <div class="d-flex gap-1 fs-xs">
            <i class="ci-star-filled text-warning"></i>
            <i class="ci-star-filled text-warning"></i>
            <i class="ci-star-filled text-warning"></i>
            <i class="ci-star-half text-warning"></i>
            <i class="ci-star text-body-tertiary opacity-75"></i>
          </div>
          <span class="text-body-tertiary fs-xs">(123)</span>
        </div>
        <h3 class="pb-1 mb-2">
          <a class="d-block fs-sm fw-medium text-truncate" href="#">
            <span class="animate-target">VRB01 Virtual Reality Glasses</span>
          </a>
        </h3>
        <div class="d-flex align-items-center justify-content-between">
          <div class="h5 lh-1 mb-0">$340.99 <del class="text-body-tertiary fs-sm fw-normal">$430.00</del></div>
          <button type="button" class="product-card-button btn btn-icon btn-secondary animate-slide-end ms-2" aria-label="Add to Cart">
            <i class="ci-shopping-cart fs-base animate-target"></i>
          </button>
        </div>
      </div>
      <div class="product-card-details position-absolute top-100 start-0 w-100 bg-body rounded-bottom shadow mt-n2 p-3 pt-1">
        <span class="position-absolute top-0 start-0 w-100 bg-body mt-n2 py-2"></span>
        <ul class="list-unstyled d-flex flex-column gap-2 m-0">
          <li class="d-flex align-items-center">
            <span class="fs-xs">Display:</span>
            <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
            <span class="text-dark-emphasis fs-xs fw-medium text-end">OLED 1440x1600</span>
          </li>
          <li class="d-flex align-items-center">
            <span class="fs-xs">Graphics:</span>
            <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
            <span class="text-dark-emphasis fs-xs fw-medium text-end">Adreno 540</span>
          </li>
          <li class="d-flex align-items-center">
            <span class="fs-xs">Sound:</span>
            <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
            <span class="text-dark-emphasis fs-xs fw-medium text-end">2x3.5mm jack</span>
          </li>
          <li class="d-flex align-items-center">
            <span class="fs-xs">Input:</span>
            <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
            <span class="text-dark-emphasis fs-xs fw-medium text-end">4 built-in cameras</span>
          </li>
        </ul>
      </div>
    </div>

#### Fashion product card

Sale
S M L XL
$27.00 $35.00
+3 colors
Blue Dark blue White Black

    <!-- Fashion strore product card example -->
    <div class="animate-underline hover-effect-opacity">
      <div class="position-relative mb-3">
        <span class="badge text-bg-danger position-absolute top-0 start-0 z-2 mt-2 mt-sm-3 ms-2 ms-sm-3">Sale</span>
        <button type="button" class="btn btn-icon btn-secondary animate-pulse fs-base bg-transparent border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2" aria-label="Add to Wishlist">
          <i class="ci-heart animate-target"></i>
        </button>
        <a class="d-flex bg-body-tertiary rounded p-3" href="#">
          <!-- Wrap the image with a "ratio" element to avoid content shifts on page load. Formula: imageHeight / imageWidth * 100% -->
          <div class="ratio" style="--cz-aspect-ratio: calc(308 / 274 * 100%)">
            <img src="assets/img/shop/fashion/06.png" alt="Image">
          </div>
        </a>
        <div class="hover-effect-target position-absolute start-0 bottom-0 w-100 z-2 opacity-0 pb-2 pb-sm-3 px-2 px-sm-3">
          <div class="d-flex align-items-center justify-content-center gap-2 gap-xl-3 bg-body rounded-2 p-2">
            <span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">S</span>
            <span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">M</span>
            <span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">L</span>
            <span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">XL</span>
            <div class="nav">
              <a class="nav-link fs-xs text-body-tertiary py-1 px-2" href="#">+2</a>
            </div>
          </div>
        </div>
      </div>
      <div class="nav mb-2">
        <a class="nav-link animate-target min-w-0 text-dark-emphasis p-0" href="#">
          <span class="text-truncate">Classic cotton men's shirt</span>
        </a>
      </div>
      <div class="h6 mb-2">$27.00 <del class="fs-sm fw-normal text-body-tertiary">$35.00</del></div>
      <div class="position-relative">
        <div class="hover-effect-target fs-xs text-body-secondary opacity-100">+3 colors</div>
        <div class="hover-effect-target d-flex gap-2 position-absolute top-0 start-0 opacity-0">
          <input type="radio" class="btn-check" name="colors-6" id="color-6-1" checked>
          <label for="color-6-1" class="btn btn-color fs-base" style="color: #c1cde7">
            <span class="visually-hidden">Blue</span>
          </label>
          <input type="radio" class="btn-check" name="colors-6" id="color-6-2">
          <label for="color-6-2" class="btn btn-color fs-base" style="color: #526f99">
            <span class="visually-hidden">Dark blue</span>
          </label>
          <input type="radio" class="btn-check" name="colors-6" id="color-6-3">
          <label for="color-6-3" class="btn btn-color fs-base" style="color: #e0e5eb">
            <span class="visually-hidden">White</span>
          </label>
          <input type="radio" class="btn-check" name="colors-6" id="color-6-4">
          <label for="color-6-4" class="btn btn-color fs-base" style="color: #364254">
            <span class="visually-hidden">Black</span>
          </label>
        </div>
      </div>
    </div>

#### Furniture product card

-14%
Emerald Bluish gray Mustard

### Soft chair with cushion and wooden legs

$245.00 $280.00

    <!-- Furniture strore product card example -->
    <div class="animate-underline">
      <!-- Wrap the image with a "ratio" element to avoid content shifts on page load -->
      <a class="hover-effect-opacity ratio ratio-1x1 d-block mb-3" href="#">
        <div class="position-absolute top-0 start-0 z-2 mt-2 mt-sm-3 ms-2 ms-sm-3">
          <span class="badge text-bg-danger">-14%</span>
        </div>
        <img src="assets/img/shop/furniture/01.png" class="hover-effect-target opacity-100" alt="Product">
        <img src="assets/img/shop/furniture/01-hover.jpg" class="position-absolute top-0 start-0 hover-effect-target opacity-0 rounded-4" alt="Room">
      </a>
      <div class="d-flex gap-2 mb-3">
        <input type="radio" class="btn-check" name="colors-1" id="color-1-1" checked>
        <label for="color-1-1" class="btn btn-color fs-base" style="color: #32808e">
          <span class="visually-hidden">Emerald</span>
        </label>
        <input type="radio" class="btn-check" name="colors-1" id="color-1-2">
        <label for="color-1-2" class="btn btn-color fs-base" style="color: #767e93">
          <span class="visually-hidden">Bluish gray</span>
        </label>
        <input type="radio" class="btn-check" name="colors-1" id="color-1-3">
        <label for="color-1-3" class="btn btn-color fs-base" style="color: #cd8d01">
          <span class="visually-hidden">Mustard</span>
        </label>
      </div>
      <h3 class="mb-2">
        <a class="d-block fs-sm fw-medium text-truncate" href="#">
          <span class="animate-target">Soft chair with cushion and wooden legs</span>
        </a>
      </h3>
      <div class="h6">$245.00 <del class="fs-sm fw-normal text-body-tertiary">$280.00</del></div>
      <div class="d-flex gap-2">
        <button type="button" class="btn btn-dark w-100 rounded-pill px-3">Add to cart</button>
        <button type="button" class="btn btn-icon btn-secondary rounded-circle animate-pulse" aria-label="Add to wishlist">
          <i class="ci-heart fs-base animate-target"></i>
        </button>
      </div>
    </div>

#### Grocery product card

-30%
$3.12 $4.05

### Fresh orange Klementina, Spain

1kg

    <!-- Grocery strore product card example -->
    <div class="card product-card h-100 bg-transparent border-0 shadow-none">
      <div class="position-relative z-2">
        <span class="badge text-bg-danger position-absolute top-0 start-0 z-2 mt-1 mt-sm-2 ms-1 ms-sm-2">-30%</span>
        <button type="button" class="btn btn-icon btn-sm btn-secondary animate-pulse fs-sm bg-body border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2" aria-label="Add to Wishlist">
          <i class="ci-heart animate-target"></i>
        </button>
        <a class="d-block p-2 p-lg-3" href="#">
          <!-- Wrap the image with a "ratio" element to avoid content shifts on page load. Formula: imageHeight / imageWidth * 100% -->
          <div class="ratio" style="--cz-aspect-ratio: calc(160 / 191 * 100%)">
            <img src="assets/img/shop/grocery/02.png" alt="Image">
          </div>
        </a>
        <div class="position-absolute w-100 start-0 bottom-0">
          <div class="d-flex justify-content-end px-2 px-lg-3 pb-2 pb-lg-3">
            <div class="count-input count-input-collapsible collapsed justify-content-between w-100 bg-transparent border-0 rounded-2">
              <button type="button" class="btn btn-icon btn-sm btn-primary" data-decrement aria-label="Decrement quantity">
                <i class="ci-minus fs-sm"></i>
              </button>
              <input type="number" class="form-control form-control-sm bg-primary text-white w-100" value="0" min="0" readonly>
              <button type="button" class="product-card-button btn btn-icon btn-sm btn-secondary ms-auto" data-increment aria-label="Increment quantity">
                <span data-count-input-value></span>
                <i class="ci-plus fs-sm"></i>
              </button>
            </div>
          </div>
        </div>
      </div>
      <div class="card-body pt-0 px-1 px-md-2 px-lg-3 pb-2">
        <div class="h6 mb-2">$3.12 <del class="fs-sm fw-normal text-body-tertiary ms-1">$4.05</del></div>
        <h3 class="fs-sm lh-base mb-0">
          <a class="hover-effect-underline fw-normal" href="#">Fresh orange Klementina, Spain</a>
        </h3>
      </div>
      <div class="fs-xs text-body-secondary px-1 px-md-2 px-lg-3 pb-2 pb-md-3">1kg</div>
    </div>

#### Marketplace product card

### Multi device mockup PSD

$27
43 sales

    <!-- Marketplace digital product card example -->
    <div class="card animate-underline hover-effect-opacity hover-effect-scale rounded-4 overflow-hidden">
      <div class="card-img-top position-relative bg-body-tertiary overflow-hidden">
        <!-- Wrap the image with a "ratio" element to avoid content shifts on page load. Formula: imageHeight / imageWidth * 100% -->
        <a class="ratio d-block hover-effect-target" style="--cz-aspect-ratio: calc(220 / 304 * 100%)" href="#">
          <img src="assets/img/shop/marketplace/13.jpg" alt="Image">
        </a>
        <div class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 pt-1 pt-sm-0 pe-1 pe-sm-0 mt-2 mt-sm-3 me-2 me-sm-3">
          <button type="button" class="btn btn-sm btn-icon btn-light bg-light border-0 rounded-circle animate-pulse" aria-label="Add to wishlist">
            <i class="ci-heart animate-target fs-sm"></i>
          </button>
        </div>
      </div>
      <div class="card-body p-3">
        <div class="d-flex min-w-0 justify-content-between gap-2 gap-sm-3 mb-2">
          <h3 class="nav min-w-0 mb-0">
            <a class="nav-link text-truncate p-0" href="#">
              <span class="text-truncate animate-target">Multi device mockup PSD</span>
            </a>
          </h3>
          <div class="h6 mb-0">$27</div>
        </div>
        <div class="d-flex flex-wrap align-items-center justify-content-between gap-2">
          <div class="nav align-items-center gap-1 fs-xs">
            <a class="nav-link fs-xs text-body gap-1 p-0" href="#">
              <div class="flex-shrink-0 border rounded-circle" style="width: 22px">
                <div class="ratio ratio-1x1 rounded-circle overflow-hidden">
                  <img src="assets/img/shop/marketplace/avatars/01.png" alt="Avatar">
                </div>
              </div>
              Createx Studio
            </a>
            <div class="text-body-secondary">in</div>
            <a class="nav-link fs-xs text-body p-0" href="#">Mockups</a>
          </div>
          <div class="fs-xs text-body-secondary">43 sales</div>
        </div>
      </div>
    </div>

#### Cart items list

-10%

##### Tablet Apple iPad Pro M2

$989.00 $1,099.00

##### Leather sneakers with golden laces

$74.00

##### Pesto sauce Barilla with basil, Italy

$3.95

##### Isometric device mockups

$12

    <!-- Examples of products added to the cart -->

    <!-- Electronics store cart item -->
    <div class="d-flex align-items-center">
      <a class="position-relative flex-shrink-0" href="#">
        <span class="badge text-bg-danger position-absolute top-0 start-0">-10%</span>
        <img src="assets/img/shop/electronics/thumbs/09.png" width="110" alt="iPad Pro">
      </a>
      <div class="w-100 min-w-0 ps-2 ps-sm-3">
        <h5 class="d-flex animate-underline mb-2">
          <a class="d-block fs-sm fw-medium text-truncate animate-target" href="#">Tablet Apple iPad Pro M2</a>
        </h5>
        <div class="h6 pb-1 mb-2">$989.00 <del class="text-body-tertiary fs-xs fw-normal">$1,099.00</del></div>
        <div class="d-flex align-items-center justify-content-between">
          <div class="count-input rounded-2">
            <button type="button" class="btn btn-icon btn-sm" data-decrement aria-label="Decrement quantity">
              <i class="ci-minus"></i>
            </button>
            <input type="number" class="form-control form-control-sm" value="1" readonly>
            <button type="button" class="btn btn-icon btn-sm" data-increment aria-label="Increment quantity">
              <i class="ci-plus"></i>
            </button>
          </div>
          <button type="button" class="btn-close fs-sm" data-bs-toggle="tooltip" data-bs-custom-class="tooltip-sm" data-bs-title="Remove" aria-label="Remove from cart"></button>
        </div>
      </div>
    </div>

    <!-- Fashion store cart item -->
    <div class="d-flex align-items-center">
      <a class="flex-shrink-0" href="#">
        <img src="assets/img/shop/fashion/thumbs/07.png" class="bg-body-tertiary rounded" width="110" alt="Thumbnail">
      </a>
      <div class="w-100 min-w-0 ps-3">
        <h5 class="d-flex animate-underline mb-2">
          <a class="d-block fs-sm fw-medium text-truncate animate-target" href="#">Leather sneakers with golden laces</a>
        </h5>
        <div class="h6 pb-1 mb-2">$74.00</div>
        <div class="d-flex align-items-center justify-content-between">
          <div class="count-input rounded-2">
            <button type="button" class="btn btn-icon btn-sm" data-decrement aria-label="Decrement quantity">
              <i class="ci-minus"></i>
            </button>
            <input type="number" class="form-control form-control-sm" value="1" readonly>
            <button type="button" class="btn btn-icon btn-sm" data-increment aria-label="Increment quantity">
              <i class="ci-plus"></i>
            </button>
          </div>
          <button type="button" class="btn-close fs-sm" data-bs-toggle="tooltip" data-bs-custom-class="tooltip-sm" data-bs-title="Remove" aria-label="Remove from cart"></button>
        </div>
      </div>
    </div>

    <!-- Grocery store cart item -->
    <div class="d-flex align-items-center">
      <a class="flex-shrink-0" href="#">
        <img src="assets/img/shop/grocery/thumbs/02.png" width="110" alt="Thumbnail">
      </a>
      <div class="w-100 ps-3">
        <h5 class="fs-sm fw-medium lh-base mb-2">
          <a class="hover-effect-underline" href="#">Pesto sauce Barilla with basil, Italy</a>
        </h5>
        <div class="h6 pb-1 mb-2">$3.95</div>
        <div class="d-flex align-items-center justify-content-between">
          <div class="count-input rounded-pill">
            <button type="button" class="btn btn-icon btn-sm" data-decrement aria-label="Decrement quantity">
              <i class="ci-minus"></i>
            </button>
            <input type="number" class="form-control form-control-sm" value="1" readonly>
            <button type="button" class="btn btn-icon btn-sm" data-increment aria-label="Increment quantity">
              <i class="ci-plus"></i>
            </button>
          </div>
          <button type="button" class="btn-close fs-sm" data-bs-toggle="tooltip" data-bs-custom-class="tooltip-sm" data-bs-title="Remove" aria-label="Remove from cart"></button>
        </div>
      </div>
    </div>

    <!-- Marketplace cart item -->
    <div class="d-flex align-items-center mt-2">
      <a class="flex-sm-shrink-0" href="#" style="width: 142px">
        <!-- Wrap the image with a "ratio" element to avoid content shifts on page load. Formula: imageHeight / imageWidth * 100% -->
        <div class="ratio bg-body-tertiary rounded overflow-hidden" style="--cz-aspect-ratio: calc(110 / 142 * 100%)">
          <img src="assets/img/home/marketplace/cart/02.jpg" alt="Thumbnail">
        </div>
      </a>
      <div class="w-100 min-w-0 ps-3">
        <h5 class="d-flex animate-underline mb-2">
          <a class="d-block fs-sm fw-medium text-truncate animate-target" href="#">Isometric device mockups</a>
        </h5>
        <div class="h6 pb-1 mb-2">$12</div>
        <div class="d-flex align-items-center justify-content-between gap-2">
          <div class="w-100" style="max-width: 185px">
            <select class="form-select form-select-sm rounded-pill" data-select='{
              "classNames": {
                "containerInner": ["form-select", "form-select-sm", "rounded-pill"]
              },
              "removeItemButton": false
            }' aria-label="Small pill select">
              <option value="standard">Standard license</option>
              <option value="extended">Extended license</option>
            </select>
          </div>
          <button type="button" class="btn btn-icon btn-sm flex-shrink-0 fs-sm" data-bs-toggle="tooltip" data-bs-custom-class="tooltip-sm" data-bs-title="Remove" aria-label="Remove from cart">
            <i class="ci-trash fs-base"></i>
          </button>
        </div>
      </div>
    </div>

Top