Section & Variations › Product List Page
Available Variations
Starter Kit Codes
<!-- include sections/product-list -->
<section class="product-list product-list-variation-1">
<div class="container">
<div class="product-list-wrapper">
<div class="section-header product-list-filters">
<div class="product-list-map">
<img src="assets/images/travel-product-list-map.png" />
<a href="product-list-map.html" class="btn btn-sm btn-icon btn-brand-primary">Open Maps <i class="ic ic-map-trifold white"></i></a>
</div>
<div class="accordion product-list-filters-accordion">
<div class="accordion-item product-list-filter-accordion-item">
<h2 class="accordion-header">
<button class="accordion-button " type="button" data-bs-toggle="collapse" data-bs-target="#product-filter-collapse-1" aria-expanded="true" aria-controls="product-filter-collapse-1"> Popular filter </button>
</h2>
<div id="product-filter-collapse-1" class="accordion-collapse ">
<div class="accordion-body">
<div class="filter-checkboxes">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="form-check-filter-1-1">
<label class="form-check-label" for="form-check-filter-1-1"> Holiday Sale 30% </label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="form-check-filter-1-2">
<label class="form-check-label" for="form-check-filter-1-2">
<strong><i class="ic ic-star active"></i> 5</strong>
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="form-check-filter-1-3">
<label class="form-check-label" for="form-check-filter-1-3">
<strong><i class="ic ic-star active"></i> 4 and up</strong>
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" checked value="" id="form-check-filter-1-4">
<label class="form-check-label" for="form-check-filter-1-4"> Hotels </label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="form-check-filter-1-5">
<label class="form-check-label" for="form-check-filter-1-5"> Villas </label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="form-check-filter-1-6">
<label class="form-check-label" for="form-check-filter-1-6"> Swimming Pool </label>
</div>
</div>
</div>
</div>
</div>
<div class="accordion-item product-list-filter-accordion-item">
<h2 class="accordion-header">
<button class="accordion-button " type="button" data-bs-toggle="collapse" data-bs-target="#product-filter-collapse-2" aria-expanded="true" aria-controls="product-filter-collapse-2"> Price Range </button>
</h2>
<div id="product-filter-collapse-2" class="accordion-collapse ">
<div class="accordion-body">
<div class="filter-range-slider" data-sliderMin="0" data-sliderMax="800" data-currentMin="250" data-currentMax="500">
<div class="range-slider">
<!-- Slider Track (background line) -->
<div class="slider-track"></div>
<!-- Colored Range Bar between the handles -->
<div class="slider-range"></div>
<!-- Handle for minimum value -->
<div class="slider-handle handle-min" data-type="min"></div>
<!-- Handle for maximum value -->
<div class="slider-handle handle-max" data-type="max"></div>
</div>
<!-- Input fields for manual entry -->
<div class="range-slider-inputs">
<div class="input-group">
<input type="number" class="min-input" value="0" min="0" max="1000">
</div>
<div class="input-group">
<!-- Note: The max input field's min attribute remains 0 -->
<input type="number" class="max-input" value="1000" min="0" max="1000">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="accordion-item product-list-filter-accordion-item">
<h2 class="accordion-header">
<button class="accordion-button " type="button" data-bs-toggle="collapse" data-bs-target="#product-filter-collapse-3" aria-expanded="true" aria-controls="product-filter-collapse-3"> Property types </button>
</h2>
<div id="product-filter-collapse-3" class="accordion-collapse ">
<div class="accordion-body">
<div class="filter-checkboxes">
<div class="form-check">
<input class="form-check-input" type="checkbox" checked value="" id="form-check-filter-3-1">
<label class="form-check-label" for="form-check-filter-3-1"> Resorts </label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" checked value="" id="form-check-filter-3-2">
<label class="form-check-label" for="form-check-filter-3-2"> Hotels </label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="form-check-filter-3-3">
<label class="form-check-label" for="form-check-filter-3-3"> Condos </label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="form-check-filter-3-4">
<label class="form-check-label" for="form-check-filter-3-4"> Campgrounds </label>
</div>
</div>
<div class="more-filters">
<div class="collapse" id="more-filters-3">
<div class="filter-checkboxes">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="form-check-filter-more-3-1">
<label class="form-check-label" for="form-check-filter-more-3-1"> RV Parks </label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="form-check-filter-more-3-2">
<label class="form-check-label" for="form-check-filter-more-3-2"> RV Resorts </label>
</div>
</div>
</div>
<a class="btn-toggle" data-bs-toggle="collapse" href="#more-filters-3" role="button" aria-expanded="false" aria-controls="more-filters-3">Show all</a>
</div>
</div>
</div>
</div>
<div class="accordion-item product-list-filter-accordion-item">
<h2 class="accordion-header">
<button class="accordion-button " type="button" data-bs-toggle="collapse" data-bs-target="#product-filter-collapse-4" aria-expanded="true" aria-controls="product-filter-collapse-4"> Amenities </button>
</h2>
<div id="product-filter-collapse-4" class="accordion-collapse ">
<div class="accordion-body">
<div class="filter-checkboxes">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="form-check-filter-4-1">
<label class="form-check-label" for="form-check-filter-4-1"> Free Wifi </label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="form-check-filter-4-2">
<label class="form-check-label" for="form-check-filter-4-2"> Breakfast included </label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="form-check-filter-4-3">
<label class="form-check-label" for="form-check-filter-4-3"> Free Parking </label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="form-check-filter-4-4">
<label class="form-check-label" for="form-check-filter-4-4"> Pool </label>
</div>
</div>
<div class="more-filters">
<div class="collapse" id="more-filters-4">
<div class="filter-checkboxes">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="form-check-filter-more-4-1">
<label class="form-check-label" for="form-check-filter-more-4-1"> Hair dryer </label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="form-check-filter-more-4-2">
<label class="form-check-label" for="form-check-filter-more-4-2"> TV channel </label>
</div>
</div>
</div>
<a class="btn-toggle" data-bs-toggle="collapse" href="#more-filters-4" role="button" aria-expanded="false" aria-controls="more-filters-4">Show all</a>
</div>
</div>
</div>
</div>
<div class="accordion-item product-list-filter-accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#product-filter-collapse-5" aria-expanded="false" aria-controls="product-filter-collapse-5"> Hotel Class </button>
</h2>
<div id="product-filter-collapse-5" class="accordion-collapse collapse">
<div class="accordion-body">
<div class="filter-checkboxes">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="form-check-filter-5-1">
<label class="form-check-label" for="form-check-filter-5-1">
<strong><i class="ic ic-star active"></i> 5</strong>
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="form-check-filter-5-2">
<label class="form-check-label" for="form-check-filter-5-2">
<strong><i class="ic ic-star active"></i> 4 and up</strong>
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="form-check-filter-5-3">
<label class="form-check-label" for="form-check-filter-5-3">
<strong><i class="ic ic-star active"></i> 3 and up</strong>
</label>
</div>
</div>
</div>
</div>
</div>
<div class="accordion-item product-list-filter-accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#product-filter-collapse-6" aria-expanded="false" aria-controls="product-filter-collapse-6"> Distance from </button>
</h2>
<div id="product-filter-collapse-6" class="accordion-collapse collapse">
<div class="accordion-body">
<div class="filter-checkboxes">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="form-check-filter-6-1">
<label class="form-check-label" for="form-check-filter-6-1">
< 1 km </label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="section-content">
<div class="product-list-header">
<h4 class="section-title">Popular hotels in Bali right now</h4>
<div class="product-list-featured-categories">
<a href="product-list.html" class="category-item">
<img src="assets/images/travel-featured-category-1.png">
<span>5 star rating</span>
</a>
<a href="product-list.html" class="category-item">
<img src="assets/images/travel-featured-category-2.png">
<span>Pol on site</span>
</a>
<a href="product-list.html" class="category-item">
<img src="assets/images/travel-featured-category-3.png">
<span>Good for <br />luxury stays</span>
</a>
<a href="product-list.html" class="category-item">
<img src="assets/images/travel-featured-category-4.png">
<span>Best Traveler Choice #2023</span>
</a>
</div>
</div>
<div class="product-list-filters">
<div class="left-side">
<div class="product-list-filter">
<strong class="product-counts">3,000 properties in Bali</strong>
</div>
</div>
<div class="right-side">
<div class="product-list-filter">
<label>Sort by:</label>
<div class="product-filter-dropdown dropdown">
<button class="btn btn-sm btn-outline-dark-4 dropdown-toggle btn-light" type="button" data-bs-toggle="dropdown" aria-expanded="false">
<span>Best value</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Best value</a></li>
<li><a class="dropdown-item" href="#">Newer</a></li>
<li><a class="dropdown-item" href="#">Price : Low - High</a></li>
<li><a class="dropdown-item" href="#">Price : High - Low</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="product-items">
<div class="product-item-col">
<div class="product-item-container">
<div class="product-item product-list-variation-1" data-id="">
<div class="product-item-image">
<img src="assets/images/travel-product-list-1.png" class="image" />
</div>
<div class="product-item-text">
<h4>Padma Resort Ubud</h4>
<div class="product-rating-location">
<div class="product-rating product-list-variation-1">
<div class="product-rating-inner">
<div class="rating">
<i class="ic ic-star active"></i>
<strong>4.8</strong>
</div>
<div class="rating-text">
<span class="rating-description">(890 reviews)</span>
</div>
</div>
</div>
<span class="product-location"><i class="ic ic-map-pin"></i>Gianyar, Bali</span>
</div>
<div class="product-item-description">
<p>Experience Bali by staying in our Enam, a 2 bedroom bamboo villa located within the Eco Six Bali resort, just a 20-minute scooter ride from the vibrant centre of ...</p>
</div>
<div class="product-price">
<ins>$310.00</ins>
<del>$390</del>
</div>
<div class="product-item-tags">
<label class="badge" style="color: #CC7320; background: #F9E8DE; border-color: #F9E8DE">Guest favourite</label>
<label class="badge" style="color: #4E4E4E; background: #F5F5F5; border-color: #E1E1E1">Refund Guarantee</label>
</div>
<a href="#" class="btn-love"><i class="ic ic-heart-straight dark-1"></i></a>
</div>
</div>
</div>
</div>
<div class="product-item-col">
<div class="product-item-container">
<div class="product-item product-list-variation-1" data-id="">
<div class="product-item-image">
<img src="assets/images/travel-product-list-2.png" class="image" />
</div>
<div class="product-item-text">
<h4>The Anvaya beach Resort Bali</h4>
<div class="product-rating-location">
<div class="product-rating product-list-variation-1">
<div class="product-rating-inner">
<div class="rating">
<i class="ic ic-star active"></i>
<strong>4.8</strong>
</div>
<div class="rating-text">
<span class="rating-description">(890 reviews)</span>
</div>
</div>
</div>
<span class="product-location"><i class="ic ic-map-pin"></i>Gianyar, Bali</span>
</div>
<div class="product-item-description">
<p>Experience Bali by staying in our Enam, a 2 bedroom bamboo villa located within the Eco Six Bali resort, just a 20-minute scooter ride from the vibrant centre of ...</p>
</div>
<div class="product-price">
<ins>$310.00</ins>
<del>$390</del>
</div>
<div class="product-item-tags">
<label class="badge" style="color: #CC7320; background: #F9E8DE; border-color: #F9E8DE">Guest favourite</label>
<label class="badge" style="color: #4E4E4E; background: #F5F5F5; border-color: #E1E1E1">Refund Guarantee</label>
</div>
<a href="#" class="btn-love"><i class="ic ic-heart-straight dark-1"></i></a>
</div>
</div>
</div>
</div>
<div class="product-item-col">
<div class="product-item-container">
<div class="product-item product-list-variation-1" data-id="">
<div class="product-item-image">
<img src="assets/images/travel-product-list-3.png" class="image" />
</div>
<div class="product-item-text">
<h4>The Trans Resort Bali</h4>
<div class="product-rating-location">
<div class="product-rating product-list-variation-1">
<div class="product-rating-inner">
<div class="rating">
<i class="ic ic-star active"></i>
<strong>4.8</strong>
</div>
<div class="rating-text">
<span class="rating-description">(890 reviews)</span>
</div>
</div>
</div>
<span class="product-location"><i class="ic ic-map-pin"></i>Gianyar, Bali</span>
</div>
<div class="product-item-description">
<p>Experience Bali by staying in our Enam, a 2 bedroom bamboo villa located within the Eco Six Bali resort, just a 20-minute scooter ride from the vibrant centre of ...</p>
</div>
<div class="product-price">
<ins>$310.00</ins>
<del>$390</del>
</div>
<div class="product-item-tags">
<label class="badge" style="color: #CC7320; background: #F9E8DE; border-color: #F9E8DE">Guest favourite</label>
<label class="badge" style="color: #4E4E4E; background: #F5F5F5; border-color: #E1E1E1">Refund Guarantee</label>
</div>
<a href="#" class="btn-love"><i class="ic ic-heart-straight dark-1"></i></a>
</div>
</div>
</div>
</div>
<div class="product-item-col">
<div class="product-item-container">
<div class="product-item product-list-variation-1" data-id="">
<div class="product-item-image">
<img src="assets/images/travel-product-list-4.png" class="image" />
</div>
<div class="product-item-text">
<h4>Lv8 Resort Hotel</h4>
<div class="product-rating-location">
<div class="product-rating product-list-variation-1">
<div class="product-rating-inner">
<div class="rating">
<i class="ic ic-star active"></i>
<strong>4.8</strong>
</div>
<div class="rating-text">
<span class="rating-description">(890 reviews)</span>
</div>
</div>
</div>
<span class="product-location"><i class="ic ic-map-pin"></i>Gianyar, Bali</span>
</div>
<div class="product-item-description">
<p>Experience Bali by staying in our Enam, a 2 bedroom bamboo villa located within the Eco Six Bali resort, just a 20-minute scooter ride from the vibrant centre of ...</p>
</div>
<div class="product-price">
<ins>$310.00</ins>
<del>$390</del>
</div>
<div class="product-item-tags">
<label class="badge" style="color: #CC7320; background: #F9E8DE; border-color: #F9E8DE">Guest favourite</label>
<label class="badge" style="color: #4E4E4E; background: #F5F5F5; border-color: #E1E1E1">Refund Guarantee</label>
</div>
<a href="#" class="btn-love"><i class="ic ic-heart-straight dark-1"></i></a>
</div>
</div>
</div>
</div>
<div class="product-item-col">
<div class="product-item-container">
<div class="product-item product-list-variation-1" data-id="">
<div class="product-item-image">
<img src="assets/images/travel-product-list-5.png" class="image" />
</div>
<div class="product-item-text">
<h4>Aston Kuta Hotel & Residence</h4>
<div class="product-rating-location">
<div class="product-rating product-list-variation-1">
<div class="product-rating-inner">
<div class="rating">
<i class="ic ic-star active"></i>
<strong>4.8</strong>
</div>
<div class="rating-text">
<span class="rating-description">(890 reviews)</span>
</div>
</div>
</div>
<span class="product-location"><i class="ic ic-map-pin"></i>Gianyar, Bali</span>
</div>
<div class="product-item-description">
<p>Experience Bali by staying in our Enam, a 2 bedroom bamboo villa located within the Eco Six Bali resort, just a 20-minute scooter ride from the vibrant centre of ...</p>
</div>
<div class="product-price">
<ins>$310.00</ins>
<del>$390</del>
</div>
<div class="product-item-tags">
<label class="badge" style="color: #CC7320; background: #F9E8DE; border-color: #F9E8DE">Guest favourite</label>
<label class="badge" style="color: #4E4E4E; background: #F5F5F5; border-color: #E1E1E1">Refund Guarantee</label>
</div>
<a href="#" class="btn-love"><i class="ic ic-heart-straight dark-1"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Starter Kit Codes
<!-- include sections/product-list -->
<section class="product-list product-list-variation-2">
<div class="container-fluid">
<div class="product-list-wrapper">
<div class="section-header product-list-filters">
<div class="left-side">
<div class="product-list-filter">
<div class="product-filter-dropdown dropdown">
<button class="btn btn-lg btn-outline-dark-3 dropdown-toggle btn-light" type="button" data-bs-toggle="dropdown" aria-expanded="false">
<span>Filter</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">All</a></li>
<li><a class="dropdown-item" href="#">Category</a></li>
</ul>
</div>
</div>
</div>
<div class="right-side">
<div class="product-list-filter">
<div class="product-filter-dropdown dropdown">
<button class="btn btn-lg btn-outline-dark-3 dropdown-toggle btn-light" type="button" data-bs-toggle="dropdown" aria-expanded="false">
<span>Featured</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Featured</a></li>
<li><a class="dropdown-item" href="#">New</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="section-content">
<div class="product-items">
<div class="product-item-col">
<div class="product-item-container">
<div class="product-item product-list-variation-2" data-id="">
<div class="product-item-image">
<img src="assets/images/fashion-product-list-snippet-1.png" class="image" />
<label class="badge">New</label>
</div>
<div class="product-item-text">
<h4>Dry Fit Sport T-shirt</h4>
<div class="product-price">
<span>$29.00</span>
</div>
<div class="product-rating product-list-variation-2">
<div class="product-rating-inner">
<ul class="rating">
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star half"></i>
</li>
</ul>
<div class="rating-text">
<span class="rating-description">(890 reviews)</span>
</div>
</div>
</div>
<div class="product-color-options product-list-variation-2">
<ul class="options">
<li>
<a href="#" style="background: #1877F2; border-color: #1877F2;"></a>
</li>
<li>
<a href="#" style="background: #000; border-color: #000;"></a>
</li>
<li>
<a href="#" style="background: #FFF; border-color: #E1E1E1;"></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="product-item-col">
<div class="product-item-container">
<div class="product-item product-list-variation-2" data-id="">
<div class="product-item-image">
<img src="assets/images/fashion-product-list-snippet-2.png" class="image" />
<label class="badge">New</label>
</div>
<div class="product-item-text">
<h4>Sport Phosphor Man Jacket</h4>
<div class="product-price">
<span>$29.00</span>
</div>
<div class="product-rating product-list-variation-2">
<div class="product-rating-inner">
<ul class="rating">
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star half"></i>
</li>
</ul>
<div class="rating-text">
<span class="rating-description">(890 reviews)</span>
</div>
</div>
</div>
<div class="product-color-options product-list-variation-2">
<ul class="options">
<li>
<a href="#" style="background: #B4DB5C; border-color: #B4DB5C;"></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="product-item-col">
<div class="product-item-container">
<div class="product-item product-list-variation-2" data-id="">
<div class="product-item-image">
<img src="assets/images/fashion-product-list-snippet-3.png" class="image" />
<label class="badge">New</label>
</div>
<div class="product-item-text">
<h4>Man in Green Zip Up Jacket</h4>
<div class="product-price">
<span>$29.00</span>
</div>
<div class="product-rating product-list-variation-2">
<div class="product-rating-inner">
<ul class="rating">
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star half"></i>
</li>
</ul>
<div class="rating-text">
<span class="rating-description">(890 reviews)</span>
</div>
</div>
</div>
<div class="product-color-options product-list-variation-2">
<ul class="options">
<li>
<a href="#" style="background: #466A84; border-color: #466A84;"></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="product-item-col">
<div class="product-item-container">
<div class="product-item product-list-variation-2" data-id="">
<div class="product-item-image">
<img src="assets/images/fashion-product-list-snippet-4.png" class="image" />
<label class="badge">New</label>
</div>
<div class="product-item-text">
<h4>Man in Green Zip Up Jacket</h4>
<div class="product-price">
<span>$29.00</span>
</div>
<div class="product-rating product-list-variation-2">
<div class="product-rating-inner">
<ul class="rating">
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star half"></i>
</li>
</ul>
<div class="rating-text">
<span class="rating-description">(890 reviews)</span>
</div>
</div>
</div>
<div class="product-color-options product-list-variation-2">
<ul class="options">
<li>
<a href="#" style="background: #80816A; border-color: #80816A;"></a>
</li>
<li>
<a href="#" style="background: #EEEBDD; border-color: #E1E1E1;"></a>
</li>
<li>
<a href="#" style="background: #2C2C2C; border-color: #2C2C2C;"></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="product-item-col">
<div class="product-item-container">
<div class="product-item product-list-variation-2" data-id="">
<div class="product-item-image">
<img src="assets/images/fashion-product-list-5.png" class="image" />
<label class="badge">New</label>
</div>
<div class="product-item-text">
<h4>Slim Fit Waffled polo shirt</h4>
<div class="product-price">
<span>$29.00</span>
</div>
<div class="product-rating product-list-variation-2">
<div class="product-rating-inner">
<ul class="rating">
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star half"></i>
</li>
</ul>
<div class="rating-text">
<span class="rating-description">(890 reviews)</span>
</div>
</div>
</div>
<div class="product-color-options product-list-variation-2">
<ul class="options">
<li>
<a href="#" style="background: #B49C90; border-color: #B49C90;"></a>
</li>
<li>
<a href="#" style="background: #EEEBDD; border-color: #E1E1E1;"></a>
</li>
<li>
<a href="#" style="background: #2C2C2C; border-color: #2C2C2C;"></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="product-item-col">
<div class="product-item-container">
<div class="product-item product-list-variation-2" data-id="">
<div class="product-item-image">
<img src="assets/images/fashion-product-list-6.png" class="image" />
<label class="badge">New</label>
</div>
<div class="product-item-text">
<h4>Plaid Winter Jacket</h4>
<div class="product-price">
<span>$29.00</span>
</div>
<div class="product-rating product-list-variation-2">
<div class="product-rating-inner">
<ul class="rating">
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star half"></i>
</li>
</ul>
<div class="rating-text">
<span class="rating-description">(890 reviews)</span>
</div>
</div>
</div>
<div class="product-color-options product-list-variation-2">
<ul class="options">
<li>
<a href="#" style="background: #31597A; border-color: #31597A;"></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="product-item-col">
<div class="product-item-container">
<div class="product-item product-list-variation-2" data-id="">
<div class="product-item-image">
<img src="assets/images/fashion-product-list-7.png" class="image" />
</div>
<div class="product-item-text">
<h4>Suits & Blazer for Men</h4>
<div class="product-price">
<span>$29.00</span>
</div>
<div class="product-rating product-list-variation-2">
<div class="product-rating-inner">
<ul class="rating">
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star half"></i>
</li>
</ul>
<div class="rating-text">
<span class="rating-description">(890 reviews)</span>
</div>
</div>
</div>
<div class="product-color-options product-list-variation-2">
<ul class="options">
<li>
<a href="#" style="background: #E7E6E1; border-color: #E7E6E1;"></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="product-item-col">
<div class="product-item-container">
<div class="product-item product-list-variation-2" data-id="">
<div class="product-item-image">
<img src="assets/images/fashion-product-list-8.png" class="image" />
<label class="badge">New</label>
</div>
<div class="product-item-text">
<h4>Culprit Apparel T-shirt</h4>
<div class="product-price">
<span>$29.00</span>
</div>
<div class="product-rating product-list-variation-2">
<div class="product-rating-inner">
<ul class="rating">
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star half"></i>
</li>
</ul>
<div class="rating-text">
<span class="rating-description">(890 reviews)</span>
</div>
</div>
</div>
<div class="product-color-options product-list-variation-2">
<ul class="options">
<li>
<a href="#" style="background: #FFFFFF; border-color: #E1E1E1;"></a>
</li>
<li>
<a href="#" style="background: #747975; border-color: #747975;"></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="product-item-col">
<div class="product-item-container">
<div class="product-item product-list-variation-2" data-id="">
<div class="product-item-image">
<img src="assets/images/fashion-product-list-9.png" class="image" />
</div>
<div class="product-item-text">
<h4>Modern Red Men’s Jacket</h4>
<div class="product-price">
<span>$29.00</span>
</div>
<div class="product-rating product-list-variation-2">
<div class="product-rating-inner">
<ul class="rating">
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star half"></i>
</li>
</ul>
<div class="rating-text">
<span class="rating-description">(890 reviews)</span>
</div>
</div>
</div>
<div class="product-color-options product-list-variation-2">
<ul class="options">
<li>
<a href="#" style="background: #B01422; border-color: #B01422;"></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="product-item-col">
<div class="product-item-container">
<div class="product-item product-list-variation-2" data-id="">
<div class="product-item-image">
<img src="assets/images/fashion-product-list-10.png" class="image" />
</div>
<div class="product-item-text">
<h4>Man in Green Zip Up Jacket</h4>
<div class="product-price">
<span>$29.00</span>
</div>
<div class="product-rating product-list-variation-2">
<div class="product-rating-inner">
<ul class="rating">
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star half"></i>
</li>
</ul>
<div class="rating-text">
<span class="rating-description">(890 reviews)</span>
</div>
</div>
</div>
<div class="product-color-options product-list-variation-2">
<ul class="options">
<li>
<a href="#" style="background: #70574B; border-color: #70574B;"></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="product-item-col">
<div class="product-item-container">
<div class="product-item product-list-variation-2" data-id="">
<div class="product-item-image">
<img src="assets/images/fashion-product-list-11.png" class="image" />
</div>
<div class="product-item-text">
<h4>Blank Oversize T-shirt</h4>
<div class="product-price">
<span>$29.00</span>
</div>
<div class="product-rating product-list-variation-2">
<div class="product-rating-inner">
<ul class="rating">
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star half"></i>
</li>
</ul>
<div class="rating-text">
<span class="rating-description">(890 reviews)</span>
</div>
</div>
</div>
<div class="product-color-options product-list-variation-2">
<ul class="options">
<li>
<a href="#" style="background: #B53236; border-color: #B53236;"></a>
</li>
<li>
<a href="#" style="background: #073973; border-color: #E1E1E1;"></a>
</li>
<li>
<a href="#" style="background: #C89C5F; border-color: #C89C5F;"></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="product-item-col">
<div class="product-item-container">
<div class="product-item product-list-variation-2" data-id="">
<div class="product-item-image">
<img src="assets/images/fashion-product-list-12.png" class="image" />
<label class="badge">New</label>
</div>
<div class="product-item-text">
<h4>Woman Dress Coat</h4>
<div class="product-price">
<span>$29.00</span>
</div>
<div class="product-rating product-list-variation-2">
<div class="product-rating-inner">
<ul class="rating">
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star half"></i>
</li>
</ul>
<div class="rating-text">
<span class="rating-description">(890 reviews)</span>
</div>
</div>
</div>
<div class="product-color-options product-list-variation-2">
<ul class="options">
<li>
<a href="#" style="background: #80816A; border-color: #80816A;"></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="product-item-col">
<div class="product-item-container">
<div class="product-item product-list-variation-2" data-id="">
<div class="product-item-image">
<img src="assets/images/fashion-product-list-13.png" class="image" />
</div>
<div class="product-item-text">
<h4>V Modern Two Color Jacket</h4>
<div class="product-price">
<span>$29.00</span>
</div>
<div class="product-rating product-list-variation-2">
<div class="product-rating-inner">
<ul class="rating">
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star half"></i>
</li>
</ul>
<div class="rating-text">
<span class="rating-description">(890 reviews)</span>
</div>
</div>
</div>
<div class="product-color-options product-list-variation-2">
<ul class="options">
<li>
<a href="#" style="background: #24335C; border-color: #24335C;"></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="product-item-col">
<div class="product-item-container">
<div class="product-item product-list-variation-2" data-id="">
<div class="product-item-image">
<img src="assets/images/fashion-product-list-14.png" class="image" />
</div>
<div class="product-item-text">
<h4>Simple White T-shirt</h4>
<div class="product-price">
<span>$29.00</span>
</div>
<div class="product-rating product-list-variation-2">
<div class="product-rating-inner">
<ul class="rating">
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star half"></i>
</li>
</ul>
<div class="rating-text">
<span class="rating-description">(890 reviews)</span>
</div>
</div>
</div>
<div class="product-color-options product-list-variation-2">
<ul class="options">
<li>
<a href="#" style="background: #FFF; border-color: #E1E1E1;"></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="product-item-col">
<div class="product-item-container">
<div class="product-item product-list-variation-2" data-id="">
<div class="product-item-image">
<img src="assets/images/fashion-product-list-15.png" class="image" />
</div>
<div class="product-item-text">
<h4>Yellow Stripe Morcycle Jacket</h4>
<div class="product-price">
<span>$29.00</span>
</div>
<div class="product-rating product-list-variation-2">
<div class="product-rating-inner">
<ul class="rating">
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star half"></i>
</li>
</ul>
<div class="rating-text">
<span class="rating-description">(890 reviews)</span>
</div>
</div>
</div>
<div class="product-color-options product-list-variation-2">
<ul class="options">
<li>
<a href="#" style="background: #252225; border-color: #252225;"></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="product-item-col">
<div class="product-item-container">
<div class="product-item product-list-variation-2" data-id="">
<div class="product-item-image">
<img src="assets/images/fashion-product-list-16.png" class="image" />
</div>
<div class="product-item-text">
<h4>Linen Pattern Dress Coat</h4>
<div class="product-price">
<span>$29.00</span>
</div>
<div class="product-rating product-list-variation-2">
<div class="product-rating-inner">
<ul class="rating">
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star half"></i>
</li>
</ul>
<div class="rating-text">
<span class="rating-description">(890 reviews)</span>
</div>
</div>
</div>
<div class="product-color-options product-list-variation-2">
<ul class="options">
<li>
<a href="#" style="background: #C89C5F; border-color: #C89C5F;"></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="product-item-col">
<div class="product-item-container">
<div class="product-item product-list-variation-2" data-id="">
<div class="product-item-image">
<img src="assets/images/fashion-product-list-17.png" class="image" />
</div>
<div class="product-item-text">
<h4>Simple Black Men’s T-shirt</h4>
<div class="product-price">
<span>$29.00</span>
</div>
<div class="product-rating product-list-variation-2">
<div class="product-rating-inner">
<ul class="rating">
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star half"></i>
</li>
</ul>
<div class="rating-text">
<span class="rating-description">(890 reviews)</span>
</div>
</div>
</div>
<div class="product-color-options product-list-variation-2">
<ul class="options">
<li>
<a href="#" style="background: #252225; border-color: #252225;"></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="product-item-col">
<div class="product-item-container">
<div class="product-item product-list-variation-2" data-id="">
<div class="product-item-image">
<img src="assets/images/fashion-product-list-18.png" class="image" />
</div>
<div class="product-item-text">
<h4>Your Voice Your Vote T-shirt</h4>
<div class="product-price">
<span>$29.00</span>
</div>
<div class="product-rating product-list-variation-2">
<div class="product-rating-inner">
<ul class="rating">
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star half"></i>
</li>
</ul>
<div class="rating-text">
<span class="rating-description">(890 reviews)</span>
</div>
</div>
</div>
<div class="product-color-options product-list-variation-2">
<ul class="options">
<li>
<a href="#" style="background: #FFFFFF; border-color: #E1E1E1;"></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="product-item-col">
<div class="product-item-container">
<div class="product-item product-list-variation-2" data-id="">
<div class="product-item-image">
<img src="assets/images/fashion-product-list-19.png" class="image" />
</div>
<div class="product-item-text">
<h4>Red Streetwear Jacket</h4>
<div class="product-price">
<span>$29.00</span>
</div>
<div class="product-rating product-list-variation-2">
<div class="product-rating-inner">
<ul class="rating">
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star half"></i>
</li>
</ul>
<div class="rating-text">
<span class="rating-description">(890 reviews)</span>
</div>
</div>
</div>
<div class="product-color-options product-list-variation-2">
<ul class="options">
<li>
<a href="#" style="background: #BC091F; border-color: #BC091F;"></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="product-item-col">
<div class="product-item-container">
<div class="product-item product-list-variation-2" data-id="">
<div class="product-item-image">
<img src="assets/images/fashion-product-list-20.png" class="image" />
<label class="badge">New</label>
</div>
<div class="product-item-text">
<h4>Couple Summer Vibes set</h4>
<div class="product-price">
<span>$29.00</span>
</div>
<div class="product-rating product-list-variation-2">
<div class="product-rating-inner">
<ul class="rating">
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star half"></i>
</li>
</ul>
<div class="rating-text">
<span class="rating-description">(890 reviews)</span>
</div>
</div>
</div>
<div class="product-color-options product-list-variation-2">
<ul class="options">
<li>
<a href="#" style="background: #978B82; border-color: #978B82;"></a>
</li>
<li>
<a href="#" style="background: #DCD8D5; border-color: #DCD8D5;"></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<nav class="product-list-pagination">
<ul class="pagination">
<li class="page-item active" aria-current="page"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link prev-next" href="#" aria-label="Next">
<i class="ic ic-caret-right"></i>
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</section>
Starter Kit Codes
<!-- include sections/product-list -->
<section class="product-list product-list-variation-3">
<div class="container">
<div class="product-list-wrapper">
<div class="section-header product-list-filters">
<div class="left-side">
<div class="product-list-filter">
<strong class="product-counts">410 products result</strong>
</div>
</div>
<div class="right-side">
<div class="product-list-filter">
<label>Sort by:</label>
<div class="product-filter-dropdown dropdown">
<button class="btn btn-sm btn-outline-dark-4 dropdown-toggle btn-light" type="button" data-bs-toggle="dropdown" aria-expanded="false">
<span>Best value</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Best value</a></li>
<li><a class="dropdown-item" href="#">Newer</a></li>
<li><a class="dropdown-item" href="#">Price : Low - High</a></li>
<li><a class="dropdown-item" href="#">Price : High - Low</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="section-content">
<div class="product-items">
<div class="product-item-col">
<div class="product-item-container">
<div class="product-item product-list-variation-3" data-id="">
<div class="product-item-image">
<img src="assets/images/cosmetics-product-list-snippet-1.png" class="image" />
<label class="badge">New</label>
</div>
<div class="product-item-text">
<h4>New & Fresh Skin Set</h4>
<div class="product-price">
<span>$39.00</span>
</div>
<div class="product-rating product-list-variation-3">
<div class="product-rating-inner">
<ul class="rating">
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star half"></i>
</li>
</ul>
<div class="rating-text">
<span class="rating-description">(290 reviews)</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="product-item-col">
<div class="product-item-container">
<div class="product-item product-list-variation-3" data-id="">
<div class="product-item-image">
<img src="assets/images/cosmetics-product-list-snippet-2.png" class="image" />
<label class="badge">New</label>
</div>
<div class="product-item-text">
<h4>Exfoliate & Glow Self-Heating</h4>
<div class="product-price">
<ins>$15.00</ins>
<del>$22.00</del>
</div>
<div class="product-rating product-list-variation-3">
<div class="product-rating-inner">
<ul class="rating">
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star in-active"></i>
</li>
</ul>
<div class="rating-text">
<span class="rating-description">(1.190 reviews)</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="product-item-col">
<div class="product-item-container">
<div class="product-item product-list-variation-3" data-id="">
<div class="product-item-image">
<img src="assets/images/cosmetics-product-list-snippet-3.png" class="image" />
<label class="badge">New</label>
</div>
<div class="product-item-text">
<h4>PerfectTan Self Tanning Drops</h4>
<div class="product-price">
<span>$13.00</span>
</div>
<div class="product-rating product-list-variation-3">
<div class="product-rating-inner">
<ul class="rating">
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star half"></i>
</li>
</ul>
<div class="rating-text">
<span class="rating-description">(370 reviews)</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="product-item-col">
<div class="product-item-container">
<div class="product-item product-list-variation-3" data-id="">
<div class="product-item-image">
<img src="assets/images/cosmetics-product-list-snippet-4.png" class="image" />
<label class="badge">New</label>
</div>
<div class="product-item-text">
<h4>Anti Acne Face Serum</h4>
<div class="product-price">
<ins>$18.00</ins>
<del>$29.00</del>
</div>
<div class="product-rating product-list-variation-3">
<div class="product-rating-inner">
<ul class="rating">
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star half"></i>
</li>
</ul>
<div class="rating-text">
<span class="rating-description">(890 reviews)</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="product-item-col">
<div class="product-item-container">
<div class="product-item product-list-variation-3" data-id="">
<div class="product-item-image">
<img src="assets/images/cosmetics-product-list-5.png" class="image" />
<label class="badge">New</label>
</div>
<div class="product-item-text">
<h4>Wrinkle Smoothing Eye Cream</h4>
<div class="product-price">
<span>$65.00</span>
</div>
<div class="product-rating product-list-variation-3">
<div class="product-rating-inner">
<ul class="rating">
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
</ul>
<div class="rating-text">
<span class="rating-description">(923 reviews)</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="product-item-col">
<div class="product-item-container">
<div class="product-item product-list-variation-3" data-id="">
<div class="product-item-image">
<img src="assets/images/cosmetics-product-list-6.png" class="image" />
<label class="badge">New</label>
</div>
<div class="product-item-text">
<h4>Exfoliate & Glow Self-Heating </h4>
<div class="product-price">
<ins>$22.00</ins>
<del>$25.00</del>
</div>
<div class="product-rating product-list-variation-3">
<div class="product-rating-inner">
<ul class="rating">
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star half"></i>
</li>
</ul>
<div class="rating-text">
<span class="rating-description">(890 reviews)</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="product-item-col">
<div class="product-item-container">
<div class="product-item product-list-variation-3" data-id="">
<div class="product-item-image">
<img src="assets/images/cosmetics-product-list-7.png" class="image" />
</div>
<div class="product-item-text">
<h4>Clarifying Cleansing Foam</h4>
<div class="product-price">
<span>$43.00</span>
</div>
<div class="product-rating product-list-variation-3">
<div class="product-rating-inner">
<ul class="rating">
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star in-active"></i>
</li>
</ul>
<div class="rating-text">
<span class="rating-description">(1.410 reviews)</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="product-item-col">
<div class="product-item-container">
<div class="product-item product-list-variation-3" data-id="">
<div class="product-item-image">
<img src="assets/images/cosmetics-product-list-8.png" class="image" />
</div>
<div class="product-item-text">
<h4>Energizing Moisturizer</h4>
<div class="product-price">
<ins>$18.00</ins>
<del>$29.00</del>
</div>
<div class="product-rating product-list-variation-3">
<div class="product-rating-inner">
<ul class="rating">
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star half"></i>
</li>
</ul>
<div class="rating-text">
<span class="rating-description">(1.410 reviews)</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="product-item-col">
<div class="product-item-container">
<div class="product-item product-list-variation-3" data-id="">
<div class="product-item-image">
<img src="assets/images/cosmetics-product-list-9.png" class="image" />
</div>
<div class="product-item-text">
<h4>Advanced Super Revitalizing Cream</h4>
<div class="product-price">
<span>$42.00</span>
</div>
<div class="product-rating product-list-variation-3">
<div class="product-rating-inner">
<ul class="rating">
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star half"></i>
</li>
</ul>
<div class="rating-text">
<span class="rating-description">(1.190 reviews)</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="product-item-col">
<div class="product-item-container">
<div class="product-item product-list-variation-3" data-id="">
<div class="product-item-image">
<img src="assets/images/cosmetics-product-list-10.png" class="image" />
</div>
<div class="product-item-text">
<h4>UV-Protector Cream SPF60</h4>
<div class="product-price">
<ins>$18.00</ins>
<del>$22.00</del>
</div>
<div class="product-rating product-list-variation-3">
<div class="product-rating-inner">
<ul class="rating">
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
</ul>
<div class="rating-text">
<span class="rating-description">(603 reviews)</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="product-item-col">
<div class="product-item-container">
<div class="product-item product-list-variation-3" data-id="">
<div class="product-item-image">
<img src="assets/images/cosmetics-product-list-11.png" class="image" />
</div>
<div class="product-item-text">
<h4>Treatment Softener Enriched</h4>
<div class="product-price">
<span>$23.00</span>
</div>
<div class="product-rating product-list-variation-3">
<div class="product-rating-inner">
<ul class="rating">
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star half"></i>
</li>
</ul>
<div class="rating-text">
<span class="rating-description">(890 reviews)</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="product-item-col">
<div class="product-item-container">
<div class="product-item product-list-variation-3" data-id="">
<div class="product-item-image">
<img src="assets/images/cosmetics-product-list-12.png" class="image" />
</div>
<div class="product-item-text">
<h4>Lash Color</h4>
<div class="product-price">
<ins>$18.00</ins>
<del>$29.00</del>
</div>
<div class="product-rating product-list-variation-3">
<div class="product-rating-inner">
<ul class="rating">
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
</ul>
<div class="rating-text">
<span class="rating-description">(603 reviews)</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="product-item-col">
<div class="product-item-container">
<div class="product-item product-list-variation-3" data-id="">
<div class="product-item-image">
<img src="assets/images/cosmetics-product-list-13.png" class="image" />
</div>
<div class="product-item-text">
<h4>Oriflame Milk & Honey Gold</h4>
<div class="product-price">
<span>$29.00</span>
</div>
<div class="product-rating product-list-variation-3">
<div class="product-rating-inner">
<ul class="rating">
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star half"></i>
</li>
</ul>
<div class="rating-text">
<span class="rating-description">(400 reviews)</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="product-item-col">
<div class="product-item-container">
<div class="product-item product-list-variation-3" data-id="">
<div class="product-item-image">
<img src="assets/images/cosmetics-product-list-14.png" class="image" />
</div>
<div class="product-item-text">
<h4>Aloe Attiva Bodylixir</h4>
<div class="product-price">
<ins>$19.00</ins>
<del>$22.00</del>
</div>
<div class="product-rating product-list-variation-3">
<div class="product-rating-inner">
<ul class="rating">
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star half"></i>
</li>
</ul>
<div class="rating-text">
<span class="rating-description">(1.190 reviews)</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="product-item-col">
<div class="product-item-container">
<div class="product-item product-list-variation-3" data-id="">
<div class="product-item-image">
<img src="assets/images/cosmetics-product-list-15.png" class="image" />
</div>
<div class="product-item-text">
<h4>Holy Grail Retinol Repair Skin Creme</h4>
<div class="product-price">
<span>$17.00</span>
</div>
<div class="product-rating product-list-variation-3">
<div class="product-rating-inner">
<ul class="rating">
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star in-active"></i>
</li>
</ul>
<div class="rating-text">
<span class="rating-description">(490 reviews)</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="product-item-col">
<div class="product-item-container">
<div class="product-item product-list-variation-3" data-id="">
<div class="product-item-image">
<img src="assets/images/cosmetics-product-list-16.png" class="image" />
</div>
<div class="product-item-text">
<h4>Love Narute Energising Cleanser</h4>
<div class="product-price">
<ins>$21.00</ins>
<del>$29.00</del>
</div>
<div class="product-rating product-list-variation-3">
<div class="product-rating-inner">
<ul class="rating">
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star half"></i>
</li>
</ul>
<div class="rating-text">
<span class="rating-description">(890 reviews)</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="product-item-col">
<div class="product-item-container">
<div class="product-item product-list-variation-3" data-id="">
<div class="product-item-image">
<img src="assets/images/cosmetics-product-list-17.png" class="image" />
</div>
<div class="product-item-text">
<h4>M Perfect Cover B.B Cream</h4>
<div class="product-price">
<span>$29.00</span>
</div>
<div class="product-rating product-list-variation-3">
<div class="product-rating-inner">
<ul class="rating">
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star in-active"></i>
</li>
</ul>
<div class="rating-text">
<span class="rating-description">(1.190 reviews)</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="product-item-col">
<div class="product-item-container">
<div class="product-item product-list-variation-3" data-id="">
<div class="product-item-image">
<img src="assets/images/cosmetics-product-list-18.png" class="image" />
</div>
<div class="product-item-text">
<h4>Greener Foundation</h4>
<div class="product-price">
<ins>$17.00</ins>
<del>$22.00</del>
</div>
<div class="product-rating product-list-variation-3">
<div class="product-rating-inner">
<ul class="rating">
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star half"></i>
</li>
</ul>
<div class="rating-text">
<span class="rating-description">(238 reviews)iews)</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="product-item-col">
<div class="product-item-container">
<div class="product-item product-list-variation-3" data-id="">
<div class="product-item-image">
<img src="assets/images/cosmetics-product-list-19.png" class="image" />
</div>
<div class="product-item-text">
<h4>Charlotte Tilbury Magic Foundation</h4>
<div class="product-price">
<span>$24.00</span>
</div>
<div class="product-rating product-list-variation-3">
<div class="product-rating-inner">
<ul class="rating">
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star half"></i>
</li>
</ul>
<div class="rating-text">
<span class="rating-description">(890 reviews)</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="product-item-col">
<div class="product-item-container">
<div class="product-item product-list-variation-3" data-id="">
<div class="product-item-image">
<img src="assets/images/cosmetics-product-list-20.png" class="image" />
</div>
<div class="product-item-text">
<h4>Mary & May CICA Soothing</h4>
<div class="product-price">
<ins>$18.00</ins>
<del>$29.00</del>
</div>
<div class="product-rating product-list-variation-3">
<div class="product-rating-inner">
<ul class="rating">
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star half"></i>
</li>
</ul>
<div class="rating-text">
<span class="rating-description">(1.410 reviews)</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<nav class="product-list-pagination">
<ul class="pagination">
<li class="page-item active" aria-current="page"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link prev-next" href="#" aria-label="Next">
<i class="ic ic-caret-right"></i>
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</section>