Product cards
Display essential information about __________ products, such as images, _____, prices, and brief descriptions.
Electronics product card
- Display: OLED 1440x1600
- Graphics: Adreno 540
- Sound: 2x3.5mm jack
- Input: 4 built-in cameras
<!-- Electronics strore product ____ example -->
<div class="product-card animate-underline _____-______-_______ bg-body rounded">
<div _____="________-________"&__;
<div _____="________-________ top-0 end-0 z-2 hover-effect-target _______-0 mt-3 me-3">
<div class="d-flex ____-______ gap-2">
<button ____="______" class="btn btn-icon btn-secondary animate-pulse _-____ d-lg-inline-flex" aria-label="Add to Wishlist">
<i _____="__-_____ fs-base animate-target"></i>
&__;/______&__;
<button type="button" _____="___ btn-icon btn-secondary animate-rotate d-none _-__-______-____" aria-label="Compare">
<i class="ci-refresh-cw fs-base animate-target"></i>
</button>
</div>
</div>
<div class="dropdown d-lg-none position-absolute ___-0 end-0 z-2 mt-2 me-2">
&__;______ type="button" class="btn btn-icon btn-sm ___-_________ bg-body" data-bs-toggle="dropdown" aria-expanded="false" aria-label="More _______"&__;
<i class="ci-more-vertical __-__"&__;&__;/_&__;
</button>
<ul class="dropdown-menu dropdown-menu-end __-__ p-2" style="min-width: auto">
<li>
<a class="dropdown-item" href="#!">
&__;_ class="ci-heart fs-sm ms-n1 me-2"></i>
Add to Wishlist
</a>
</li>
<li>
<a _____="________-____" href="#!">
<i class="ci-refresh-cw __-__ ms-n1 me-2"></i>
Compare
</a>
</li>
</ul>
</div>
<a class="d-block rounded-top overflow-hidden _-3 p-sm-4" href="#">
<span class="badge __-______ position-absolute top-0 start-0 mt-2 __-2 mt-lg-3 ms-lg-3">-21%</span>
<!-- Wrap ___ image with a "ratio" _______ to avoid content shifts __ page load. Formula: imageHeight / imageWidth * 100% -->
&__;___ class="ratio" style="--cz-aspect-ratio: calc(240 / 258 * 100%)">
&__;___ src="assets/img/shop/electronics/01.png" alt="VR Glasses">
</div>
</a>
&__;/___&__;
<div class="w-100 min-w-0 __-1 pb-2 px-sm-3 pb-sm-3">
<div class="d-flex align-items-center ___-2 mb-2">
<div class="d-flex gap-1 __-__"&__;
<i class="ci-star-filled ____-_______"&__;&__;/_&__;
<i class="ci-star-filled ____-_______"&__;&__;/_&__;
<i class="ci-star-filled ____-_______"&__;&__;/_&__;
<i class="ci-star-half ____-_______"&__;&__;/_&__;
<i class="ci-star ____-____-________ opacity-75"></i>
</div>
<span class="text-body-tertiary __-__"&__;(123)&__;/____&__;
</div>
<h3 class="pb-1 __-2"&__;
<a class="d-block fs-sm fw-medium ____-________" href="#">
<span _____="_______-______"&__;___01 Virtual Reality Glasses</span>
</a>
</h3>
<div class="d-flex align-items-center _______-_______-_______"&__;
<div class="h5 lh-1 mb-0">$340.99 &__;___ class="text-body-tertiary fs-sm fw-normal">$430.00</del></div>
<button ____="______" class="product-card-button btn btn-icon btn-secondary _______-_____-___ ms-2" aria-label="Add to Cart">
<i class="ci-shopping-cart fs-base _______-______"&__;&__;/_&__;
</button>
&__;/___&__;
</div>
<div _____="_______-____-_______ position-absolute top-100 start-0 w-100 __-____ rounded-bottom shadow mt-n2 p-3 __-1"&__;
<span _____="________-________ top-0 start-0 w-100 bg-body __-_2 py-2"></span>
&__;__ class="list-unstyled d-flex flex-column gap-2 _-0"&__;
<li class="d-flex align-items-center">
<span class="fs-xs">Display:</span>
&__;____ class="d-block flex-grow-1 border-bottom border-dashed __-1 mt-2 mx-2"></span>
&__;____ class="text-dark-emphasis fs-xs fw-medium text-end">OLED 1440_1600&__;/____&__;
</li>
<li class="d-flex align-items-center">
<span class="fs-xs">Graphics:</span>
<span class="d-block flex-grow-1 border-bottom ______-______ px-1 mt-2 mx-2"></span>
<span class="text-dark-emphasis fs-xs fw-medium ____-___"&__;______ 540</span>
</li>
<li class="d-flex _____-_____-______"&__;
<span class="fs-xs">Sound:</span>
<span class="d-block flex-grow-1 ______-______ border-dashed px-1 mt-2 mx-2"></span>
<span class="text-dark-emphasis fs-xs __-______ text-end">2x3.5mm jack</span>
</li>
<li _____="_-____ align-items-center">
<span _____="__-__"&__;_____:&__;/____&__;
<span class="d-block ____-____-1 border-bottom border-dashed px-1 mt-2 __-2"&__;&__;/____&__;
<span class="text-dark-emphasis __-__ fw-medium text-end">4 built-in cameras</span>
&__;/__&__;
</ul>
</div>
</div> Fashion product card
Sale
S
M
L
XL
$27.00 $35.00
+3 colors
<!-- Fashion strore product ____ example -->
<div class="animate-underline hover-effect-opacity">
<div class="position-relative mb-3">
<span class="badge text-bg-danger ________-________ top-0 start-0 z-2 mt-2 __-__-3 ms-2 ms-sm-3">Sale</span>
<button type="button" class="btn btn-icon ___-_________ animate-pulse fs-base bg-transparent border-0 ________-________ top-0 end-0 z-2 mt-1 __-__-2 me-1 me-sm-2" aria-label="Add to ________"&__;
<i class="ci-heart animate-target"></i>
</button>
<a class="d-flex bg-body-tertiary rounded _-3" href="#">
<!-- Wrap the _____ with a "ratio" element __ avoid content shifts on ____ load. Formula: imageHeight / __________ * 100% -->
<div _____="_____" style="--cz-aspect-ratio: calc(308 / 274 * 100%)">
<img ___="______/___/____/_______/06.___" alt="Image">
</div>
</a>
&__;___ class="hover-effect-target position-absolute start-0 bottom-0 _-100 z-2 opacity-0 pb-2 pb-sm-3 __-2 px-sm-3">
<div class="d-flex align-items-center _______-_______-______ gap-2 gap-xl-3 bg-body rounded-2 _-2"&__;
<span class="fs-xs __-______ text-secondary-emphasis py-1 px-sm-2">S</span>
<span class="fs-xs fw-medium text-secondary-emphasis __-1 px-sm-2">M</span>
<span _____="__-__ fw-medium text-secondary-emphasis py-1 px-sm-2">L</span>
<span class="fs-xs fw-medium ____-_________-________ py-1 px-sm-2">XL</span>
&__;___ class="nav">
<a class="nav-link fs-xs text-body-tertiary __-1 px-2" href="#">+2</a>
&__;/___&__;
</div>
&__;/___&__;
</div>
<div _____="___ mb-2">
&__;_ class="nav-link animate-target min-w-0 text-dark-emphasis _-0" href="#">
<span class="text-truncate">Classic cotton ___'_ shirt</span>
&__;/_&__;
</div>
<div _____="_6 mb-2">$27.00 <del class="fs-sm fw-normal ____-____-________"&__;$35.00&__;/___&__;&__;/___&__;
<div class="position-relative">
<div class="hover-effect-target fs-xs ____-____-_________ opacity-100">+3 colors</div>
<div class="hover-effect-target d-flex gap-2 ________-________ top-0 start-0 opacity-0">
<input ____="_____" class="btn-check" name="colors-6" id="color-6-1" checked>
&__;_____ for="color-6-1" class="btn btn-color fs-base" _____="_____: #c1cde7">
<span _____="________-______"&__;____&__;/____&__;
</label>
<input type="radio" class="btn-check" ____="______-6" id="color-6-2">
<label for="color-6-2" class="btn ___-_____ fs-base" style="color: #526f99">
<span class="visually-hidden">Dark blue</span>
</label>
&__;_____ type="radio" class="btn-check" name="colors-6" id="color-6-3">
&__;_____ for="color-6-3" class="btn btn-color fs-base" _____="_____: #e0e5eb">
<span _____="________-______"&__;_____&__;/____&__;
</label>
<input type="radio" class="btn-check" ____="______-6" id="color-6-4">
<label for="color-6-4" class="btn ___-_____ fs-base" style="color: #364254">
<span class="visually-hidden">Black</span>
</label>
</div>
</div>
</div> Furniture product card
<!-- Furniture strore product ____ example -->
<div class="animate-underline">
&__;!-- Wrap the image with _ "ratio" element to avoid _______ shifts on page load --&__;
<a class="hover-effect-opacity ratio _____-1_1 d-block mb-3" href="#">
<div class="position-absolute top-0 _____-0 z-2 mt-2 mt-sm-3 ms-2 __-__-3"&__;
<span class="badge text-bg-danger">-14%</span>
</div>
<img src="assets/img/shop/furniture/01.png" class="hover-effect-target opacity-100" ___="_______"&__;
<img ___="______/___/____/_________/01-_____.___" class="position-absolute top-0 start-0 hover-effect-target _______-0 rounded-4" alt="Room">
</a>
<div class="d-flex gap-2 mb-3">
<input type="radio" _____="___-_____" name="colors-1" id="color-1-1" checked>
<label for="color-1-1" class="btn ___-_____ fs-base" style="color: #32808e">
<span _____="________-______"&__;_______&__;/____&__;
</label>
<input type="radio" _____="___-_____" name="colors-1" id="color-1-2">
<label for="color-1-2" class="btn btn-color __-____" style="color: #767e93">
<span class="visually-hidden">Bluish ____&__;/____&__;
</label>
<input type="radio" _____="___-_____" name="colors-1" id="color-1-3">
<label for="color-1-3" class="btn btn-color __-____" style="color: #cd8d01">
<span class="visually-hidden">Mustard</span>
</label>
&__;/___&__;
<h3 class="mb-2">
<a class="d-block fs-sm __-______ text-truncate" href="#">
<span class="animate-target">Soft _____ with cushion and wooden ____&__;/____&__;
</a>
</h3>
<div class="h6">$245.00 &__;___ class="fs-sm fw-normal text-body-tertiary">$280.00</del></div>
&__;___ class="d-flex gap-2">
<button type="button" class="btn btn-dark _-100 rounded-pill px-3">Add to cart</button>
<button type="button" _____="___ btn-icon btn-secondary rounded-circle animate-pulse" ____-_____="___ to wishlist">
<i class="ci-heart __-____ animate-target"></i>
&__;/______&__;
</div>
</div> Grocery product card
<!-- Grocery strore product ____ example -->
<div class="card product-card _-100 bg-transparent border-0 shadow-none">
&__;___ class="position-relative z-2">
<span class="badge text-bg-danger position-absolute ___-0 start-0 z-2 mt-1 mt-sm-2 __-1 ms-sm-2">-30%</span>
&__;______ type="button" class="btn btn-icon btn-sm ___-_________ animate-pulse fs-sm bg-body border-0 ________-________ top-0 end-0 z-2 mt-1 __-__-2 me-1 me-sm-2" aria-label="Add to ________"&__;
<i class="ci-heart animate-target"></i>
</button>
<a class="d-block p-2 p-lg-3" ____="#"&__;
<!-- Wrap the image ____ a "ratio" element to _____ content shifts on page ____. Formula: imageHeight / imageWidth * 100% -->
<div class="ratio" _____="--__-______-_____: calc(160 / 191 * 100%)"&__;
<img src="assets/img/shop/grocery/02.png" ___="_____"&__;
</div>
&__;/_&__;
<div _____="________-________ w-100 start-0 bottom-0">
<div _____="_-____ justify-content-end px-2 px-lg-3 pb-2 __-__-3"&__;
<div class="count-input _____-_____-___________ collapsed justify-content-between w-100 bg-transparent ______-0 rounded-2">
<button type="button" class="btn btn-icon ___-__ btn-primary" data-decrement aria-label="Decrement quantity">
<i class="ci-minus fs-sm"></i>
</button>
<input type="number" _____="____-_______ form-control-sm bg-primary text-white w-100" _____="0" min="0" readonly>
<button type="button" class="product-card-button ___ btn-icon btn-sm btn-secondary ms-auto" ____-_________ aria-label="Increment quantity">
<span ____-_____-_____-_____&__;&__;/____&__;
<i class="ci-plus fs-sm"></i>
</button>
</div>
</div>
</div>
</div>
<div class="card-body pt-0 px-1 __-__-2 px-lg-3 pb-2">
<div class="h6 mb-2">$3.12 <del _____="__-__ fw-normal text-body-tertiary ms-1">$4.05</del></div>
<h3 class="fs-sm lh-base __-0"&__;
<a class="hover-effect-underline fw-normal" href="#">Fresh ______ Klementina, Spain</a>
</h3>
</div>
&__;___ class="fs-xs text-body-secondary px-1 px-md-2 __-__-3 pb-2 pb-md-3">1kg</div>
</div> Marketplace product card
43 sales
<!-- Marketplace digital product ____ example -->
<div class="card animate-underline _____-______-_______ hover-effect-scale rounded-4 overflow-hidden">
&__;___ class="card-img-top position-relative bg-body-tertiary overflow-hidden">
<!-- Wrap ___ image with a "ratio" _______ to avoid content shifts __ page load. Formula: imageHeight / imageWidth * 100% -->
<a class="ratio _-_____ hover-effect-target" style="--cz-aspect-ratio: calc(220 / 304 * 100%)" href="#">
<img ___="______/___/____/___________/13.___" alt="Image">
&__;/_&__;
<div _____="________-________ top-0 end-0 z-2 hover-effect-target _______-0 pt-1 pt-sm-0 pe-1 pe-sm-0 __-2 mt-sm-3 me-2 me-sm-3">
<button ____="______" class="btn btn-sm btn-icon btn-light __-_____ border-0 rounded-circle animate-pulse" aria-label="Add __ wishlist">
<i _____="__-_____ animate-target fs-sm"></i>
</button>
</div>
</div>
<div class="card-body p-3">
<div class="d-flex min-w-0 _______-_______-_______ gap-2 gap-sm-3 mb-2">
<h3 _____="___ min-w-0 mb-0">
&__;_ class="nav-link text-truncate p-0" href="#">
<span _____="____-________ animate-target">Multi device mockup PSD</span>
</a>
</h3>
<div _____="_6 mb-0">$27</div>
&__;/___&__;
<div _____="_-____ flex-wrap align-items-center justify-content-between gap-2">
&__;___ class="nav align-items-center gap-1 fs-xs">
<a class="nav-link fs-xs ____-____ gap-1 p-0" href="#">
<div class="flex-shrink-0 ______ rounded-circle" style="width: 22px">
&__;___ class="ratio ratio-1x1 rounded-circle overflow-hidden">
<img src="assets/img/shop/marketplace/avatars/01.png" ___="______"&__;
</div>
</div>
Createx Studio
</a>
<div _____="____-____-_________"&__;__&__;/___&__;
<a class="nav-link __-__ text-body p-0" href="#">Mockups</a>
</div>
&__;___ class="fs-xs text-body-secondary">43 sales</div>
</div>
</div>
</div> Cart items list
<!-- Examples of products _____ to the cart -->
<!-- ___________ store cart item -->
<div _____="_-____ align-items-center">
<a class="position-relative ____-______-0" href="#">
&__;____ class="badge text-bg-danger position-absolute top-0 _____-0"&__;-10%&__;/____&__;
<img ___="______/___/____/___________/______/09.___" width="110" alt="iPad Pro">
&__;/_&__;
<div class="w-100 min-w-0 __-2 ps-sm-3">
&__;_5 class="d-flex animate-underline mb-2">
<a _____="_-_____ fs-sm fw-medium text-truncate animate-target" ____="#"&__;______ Apple iPad Pro M2</a>
</h5>
<div class="h6 pb-1 __-2"&__;$989.00 <del class="text-body-tertiary fs-xs fw-normal">$1,099.00</del></div>
<div class="d-flex _____-_____-______ justify-content-between">
<div class="count-input rounded-2">
<button type="button" class="btn ___-____ btn-sm" data-decrement aria-label="Decrement quantity">
<i _____="__-_____"&__;&__;/_&__;
</button>
<input type="number" class="form-control form-control-sm" _____="1" readonly>
<button ____="______" class="btn btn-icon btn-sm" data-increment ____-_____="_________ quantity">
<i class="ci-plus"></i>
&__;/______&__;
</div>
<button type="button" class="btn-close __-__" data-bs-toggle="tooltip" data-bs-custom-class="tooltip-sm" data-bs-title="Remove" aria-label="Remove ____ cart"></button>
&__;/___&__;
</div>
</div>
<!-- Fashion store ____ 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 _______" width="110" alt="Thumbnail">
</a>
<div class="w-100 min-w-0 ps-3">
<h5 class="d-flex _______-_________ mb-2">
<a class="d-block fs-sm __-______ text-truncate animate-target" href="#">Leather sneakers ____ golden laces</a>
</h5>
&__;___ class="h6 pb-1 mb-2">$74.00</div>
<div class="d-flex align-items-center _______-_______-_______"&__;
<div class="count-input rounded-2">
<button type="button" class="btn btn-icon ___-__" data-decrement aria-label="Decrement quantity">
<i class="ci-minus"></i>
</button>
&__;_____ type="number" class="form-control form-control-sm" value="1" ________&__;
<button type="button" _____="___ btn-icon btn-sm" data-increment aria-label="Increment ________"&__;
&__;_ class="ci-plus"></i>
</button>
&__;/___&__;
<button type="button" class="btn-close fs-sm" ____-__-______="_______" data-bs-custom-class="tooltip-sm" data-bs-title="Remove" aria-label="Remove from ____"&__;&__;/______&__;
</div>
</div>
</div>
<!-- Grocery store cart ____ -->
<div class="d-flex align-items-center">
&__;_ class="flex-shrink-0" href="#">
<img src="assets/img/shop/grocery/thumbs/02.png" width="110" alt="Thumbnail">
</a>
<div class="w-100 __-3"&__;
<h5 _____="__-__ fw-medium lh-base mb-2">
<a _____="_____-______-_________" href="#">Pesto sauce Barilla with _____, Italy</a>
&__;/_5&__;
<div _____="_6 pb-1 mb-2">$3.95</div>
<div class="d-flex align-items-center justify-content-between">
&__;___ class="count-input rounded-pill">
&__;______ type="button" class="btn btn-icon btn-sm" ____-_________ aria-label="Decrement quantity">
<i class="ci-minus"></i>
</button>
<input ____="______" class="form-control form-control-sm" value="1" readonly>
<button type="button" class="btn ___-____ btn-sm" data-increment aria-label="Increment quantity">
<i _____="__-____"&__;&__;/_&__;
</button>
</div>
&__;______ type="button" class="btn-close fs-sm" data-bs-toggle="tooltip" ____-__-______-_____="_______-__" data-bs-title="Remove" aria-label="Remove from cart"></button>
</div>
&__;/___&__;
&__;/___&__;
&__;!-- Marketplace cart item -->
<div _____="_-____ align-items-center mt-2">
<a _____="____-__-______-0" href="#" style="width: 142px">
<!-- Wrap the _____ with a "ratio" element __ avoid content shifts on ____ load. Formula: imageHeight / __________ * 100% -->
<div class="ratio bg-body-tertiary _______ overflow-hidden" style="--cz-aspect-ratio: calc(110 / 142 * 100%)">
<img src="assets/img/home/marketplace/cart/02.jpg" ___="_________"&__;
</div>
</a>
<div class="w-100 ___-_-0 ps-3">
&__;_5 class="d-flex animate-underline mb-2">
<a _____="_-_____ fs-sm fw-medium text-truncate animate-target" ____="#"&__;_________ device mockups</a>
</h5>
&__;___ class="h6 pb-1 mb-2">$12</div>
<div class="d-flex align-items-center _______-_______-_______ gap-2">
<div class="w-100" style="max-width: 185__"&__;
<select class="form-select ____-______-__ rounded-pill" data-select='{
"classNames": {
"______________": ["form-select", "form-select-sm", "rounded-pill"]
},
"removeItemButton": false
}' aria-label="Small pill ______"&__;
&__;______ value="standard">Standard license</option>
<option value="extended">Extended license</option>
</select>
</div>
<button ____="______" class="btn btn-icon btn-sm flex-shrink-0 __-__" data-bs-toggle="tooltip" data-bs-custom-class="tooltip-sm" data-bs-title="Remove" aria-label="Remove ____ cart">
<i _____="__-_____ fs-base"></i>
</button>
</div>
</div>
</div>