Section & Variations › Product List Snippet
Available Variations
Starter Kit Codes
<!-- include sections/product-list-snipped -->
<section class="product-list product-list-snippet product-list-variation-1 no-action">
<div class="container">
<div class="section-header">
<div class="section-header-text">
<h3 class="section-title">Explore our top destinations 🏝️</h3>
</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-item-snippet product-list-variation-1" data-id="">
<div class="product-item-image">
<img src="assets/images/travel-product-list-snippet-1.png" class="image" />
</div>
<div class="product-item-text">
<h4>Bali, Indonesia</h4>
<strong>726 accommodations</strong>
<div class="product-item-description">
<p>Lush rice terraces, stunning beaches, vibrant nightlife.</p>
</div>
</div>
</div>
</div>
</div>
<div class="product-item-col">
<div class="product-item-container">
<div class="product-item product-item-snippet product-list-variation-1" data-id="">
<div class="product-item-image">
<img src="assets/images/travel-product-list-snippet-2.png" class="image" />
</div>
<div class="product-item-text">
<h4>Santorini, Greece</h4>
<strong>870 accommodations</strong>
<div class="product-item-description">
<p>Breathtaking sunsets, white-washed buildings, crystal-clear waters.</p>
</div>
</div>
</div>
</div>
</div>
<div class="product-item-col">
<div class="product-item-container">
<div class="product-item product-item-snippet product-list-variation-1" data-id="">
<div class="product-item-image">
<img src="assets/images/travel-product-list-snippet-3.png" class="image" />
</div>
<div class="product-item-text">
<h4>Kyoto, Japan</h4>
<strong>1,069 accommodations</strong>
<div class="product-item-description">
<p>Historic temples, traditional tea houses, cherry blossom season.</p>
</div>
</div>
</div>
</div>
</div>
<div class="product-item-col">
<div class="product-item-container">
<div class="product-item product-item-snippet product-list-variation-1" data-id="">
<div class="product-item-image">
<img src="assets/images/travel-product-list-snippet-4.png" class="image" />
</div>
<div class="product-item-text">
<h4>Paris, France</h4>
<strong>980 accommodations</strong>
<div class="product-item-description">
<p>Iconic landmarks, world-class museums, romantic cafes.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Starter Kit Codes
<!-- include sections/product-list-snipped -->
<section class="product-list product-list-snippet product-list-variation-2 ">
<div class="container-fluid">
<div class="section-header">
<div class="section-header-text">
<h3 class="section-title">New product</h3>
</div>
<div class="section-header-actions">
<a href="#more" class="btn btn-lg btn-icon-only btn-outline-dark-3"><i class="ic ic-arrow-left dark-1"></i></a><a href="#more" class="btn btn-lg btn-icon-only btn-outline-dark-3"><i class="ic ic-arrow-right dark-1"></i></a>
</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-item-snippet 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-item-snippet 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-item-snippet 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-item-snippet 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-item-snippet 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-item-snippet 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-item-snippet 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-item-snippet 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-item-snippet 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-item-snippet 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-item-snippet 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-item-snippet 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>
</div>
</div>
</section>
Starter Kit Codes
<!-- include sections/product-list-snipped -->
<section class="product-list product-list-snippet product-list-variation-3 ">
<div class="container">
<div class="section-header">
<div class="section-header-text">
<h3 class="section-title">Bestselling essentials</h3>
</div>
<div class="section-header-actions">
<a href="#more" class="btn btn-lg btn-outline-dark-3">See more</a>
</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-item-snippet 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-item-snippet 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-item-snippet 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-item-snippet 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-item-snippet 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-item-snippet 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-item-snippet 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-item-snippet 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>
</div>
</div>
</section>