Section & Variations › Product Categories
Available Variations
Starter Kit Codes
<!-- include sections/product-categories -->
<section class="product-categories product-categories-variation-1">
<div class="container">
<div class="section-header">
<h3 class="section-title">Exclusive deals 🏷️</h3>
</div>
<div class="section-content">
<div class="product-category-items">
<div class="product-category-item-col">
<div class="product-category-card">
<img src="assets/images/travel-category-bg-1.png" class="product-category-bg" />
<div class="product-category-text">
<div class="product-category-icon">
<i class="ic ic-sun-horizon primary"></i>
</div>
<h4>Summer Escapes</h4>
<p>Save up to 30% on selected summer vacations. Book your dream getaway now and soak up the sun in your favorite destinations.</p>
</div>
</div>
</div>
<div class="product-category-item-col">
<div class="product-category-card">
<img src="assets/images/travel-category-bg-2.png" class="product-category-bg" />
<div class="product-category-text">
<div class="product-category-icon">
<i class="ic ic-hourglass-simple-low primary"></i>
</div>
<h4>Last Minute Offers</h4>
<p>SaLooking for a spontaneous getaway? Take advantage of our last-minute deals for great prices on flights and accommodations.</p>
</div>
</div>
</div>
<div class="product-category-item-col">
<div class="product-category-card">
<img src="assets/images/travel-category-bg-3.png" class="product-category-bg" />
<div class="product-category-text">
<div class="product-category-icon">
<i class="ic ic-tag primary"></i>
</div>
<h4>Group Discounts</h4>
<p>Traveling with family or friends? Enjoy special rates for group bookings on select tours and packages.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Starter Kit Codes
<!-- include sections/product-categories -->
<section class="product-categories product-categories-variation-2">
<div class="container-fluid">
<div class="section-content">
<div class="product-category-items">
<div class="product-category-item-col">
<div class="product-category-card">
<img src="assets/images/fashion-category-bg-1.png" class="product-category-bg" />
<div class="product-category-text">
<h4>Men</h4>
</div>
</div>
</div>
<div class="product-category-item-col">
<div class="product-category-card">
<img src="assets/images/fashion-category-bg-2.png" class="product-category-bg" />
<div class="product-category-text">
<h4>Woman</h4>
</div>
</div>
</div>
<div class="product-category-item-col">
<div class="product-category-card">
<img src="assets/images/fashion-category-bg-3.png" class="product-category-bg" />
<div class="product-category-text">
<h4>Kids</h4>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Starter Kit Codes
<!-- include sections/product-categories -->
<section class="product-categories product-categories-variation-3">
<div class="container">
<div class="section-content">
<div class="product-category-items">
<div class="product-category-item-col">
<div class="product-category-card">
<img src="assets/images/cosmetics-category-bg-1.png" class="product-category-bg" />
<div class="product-category-text">
<h4>Skincare</h4>
</div>
</div>
</div>
<div class="product-category-item-col">
<div class="product-category-card">
<img src="assets/images/cosmetics-category-bg-2.png" class="product-category-bg" />
<div class="product-category-text">
<h4>Makeup</h4>
</div>
</div>
</div>
<div class="product-category-item-col">
<div class="product-category-card">
<img src="assets/images/cosmetics-category-bg-3.png" class="product-category-bg" />
<div class="product-category-text">
<h4>Suncare</h4>
</div>
</div>
</div>
</div>
</div>
</div>
</section>