Gearing up something amazing for you…
Still waiting? Magic takes a moment! ✨
<a class="rbt-cat-box rbt-cat-box-1 text-center" href="#!">
<div class="inner">
<div class="rbt-image-portion">
<img src="image-url..." alt="...">
</div>
<div class="content">
<h6 class="title">Your Category...</h6>
</div>
</div>
</a>
...
<div class="rbt-cat-box rbt-cat-box-3 text-center">
<div class="inner">
<div class="rbt-image-portion">
<a href="#">
<img src="image-url..." alt="...">
</a>
</div>
<div class="content">
<a class="rbt-btn rbt-btn-gray icon-hover rbt-btn-md" href="#!">
<span class="btn-text">...</span>
<span class="btn-icon"><i class="fa-sharp fa-solid fa-arrow-up-right-from-square"></i></span>
</a>
</div>
</div>
</div>
...
<a class="rbt-cat-box rbt-cat-box-2 text-center" href="#">
<div class="inner">
<div class="rbt-image-portion">
<img src="image-url..." alt="...">
</div>
<div class="content">
<h6 class="title">...</h6>
</div>
</div>
</a>
...
<div class="rbt-cat-box rbt-cat-box-4 text-left">
<div class="inner">
<div class="content">
<h6 class="title"><a href="#!">...</a></h6>
<ul class="quick-link-list rbt-link-hover">
<li><a href="#!" class="quick-link">...</a></li>
<li><a href="#!" class="quick-link">...</a></li>
<li><a href="#!" class="quick-link">...</a></li>
</ul>
</div>
<div class="rbt-image-portion">
<a href="#">
<img src="image-url..." alt="...">
</a>
</div>
</div>
</div>
...
NEW ARRIVALS
<!-- normal card -->
<div class="rbt-cat-box rbt-cat-box-5 text-center">
<div class="inner">
<div class="rbt-image-portion">
<a href="#">
<img src="image-url..." alt="...">
</a>
</div>
<a href="#" class="rbt-btn rbt-btn-white rbt-btn-md">...</a>
</div>
<div class="rbt-right-corner-portion">
<div class="rbt-corner-portion-wrapper">
<a href="#" class="rbt-card-link-btn"><i class="fa-solid fa-arrow-up-right"></i></a>
</div>
</div>
</div>
<!-- wider card -->
<div class="rbt-cat-box rbt-cat-box-5 wider-coloumn">
<div class="inner">
<div class="rbt-image-portion">
<a href="#!">
<img src="image-url..." alt="...">
</a>
</div>
<div class="content">
<div class="top-content">
<span class="rbt-badge rbt-badge-green rbt-badge-small">EXCLUSIVE</span>
<p class="subtitle">NEW ARRIVALS</p>
<h5 class="title"><span class="rbt-text-bold">...</span>...</h5>
</div>
<div class="bottom-content">
<a href="#!" class="rbt-btn rbt-btn-white rbt-btn-md">...</a>
</div>
</div>
</div>
<div class="rbt-right-corner-portion">
<div class="rbt-corner-portion-wrapper">
<a href="#!" class="rbt-card-link-btn"><i class="fa-solid fa-arrow-up-right"></i></a>
</div>
</div>
</div>
<div class="rbt-cat-box rbt-cat-box-5 variation-one">
<div class="inner">
<div class="rbt-image-portion position-relative overflow-hidden">
<a href="#!">
<img src="iamge-url..." alt="...">
</a>
<div class="rbt-right-corner-portion bottom--position">
<div class="rbt-corner-portion-wrapper">
<a href="#!" class="rbt-card-link-btn"><i class="fa-solid fa-arrow-up-right"></i></a>
</div>
</div>
</div>
<div class="content">
<h6 class="title">
<a href="#!">...</a>
</h6>
</div>
</div>
</div>
...
<div class="rbt-cat-box rbt-cat-box-6 text-center">
<div class="inner">
<div class="content">
<h5 class="title"><a href="#">...</a></h5>
<div class="rbt-image-portion">
<a href="#">
<img src="image-url..." alt="...">
</a>
</div>
<ul class="quick-button-list">
<li>
<a class="rbt-btn rbt-btn-white icon-hover rbt-btn-md" href="#">
<span class="btn-text">...</span>
<span class="btn-icon"><i class="fa-sharp fa-solid fa-arrow-up-right-from-square"></i></span>
</a>
</li>
<li>
<a class="rbt-btn rbt-btn-white icon-hover rbt-btn-md" href="#">
<span class="btn-text">...</span>
<span class="btn-icon"><i class="fa-sharp fa-solid fa-arrow-up-right-from-square"></i></span>
</a>
</li>
<li>
<a class="rbt-btn rbt-btn-white icon-hover rbt-btn-md" href="#">
<span class="btn-text">...</span>
<span class="btn-icon"><i class="fa-sharp fa-solid fa-arrow-up-right-from-square"></i></span>
</a>
</li>
</ul>
</div>
</div>
</div>
...
<div class="rbt-cat-box rbt-cat-box-7">
<div class="inner">
<div class="content">
<h5 class="title"><a href="#!">...</a></h5>
<ul class="quick-link-list rbt-link-hover">
<li><a href="#!" class="quick-link">...</a></li>
<li><a href="#!" class="quick-link">...</a></li>
<li><a href="#!" class="quick-link">...</a></li>
</ul>
</div>
<div class="rbt-image-portion">
<a href="#!">
<img class="rbt-scroll-trigger" src="image-url..." alt="...">
</a>
<a href="#!"
class="rbt-icon-overlay-link-btn">
<div class="rbt-btn-overlay">
<i class="rbt-icon fa-solid fa-arrow-up-right"></i>
<i class="rbt-icon-bottom fa-solid fa-arrow-up-right"></i>
</div>
</a>
</div>
</div>
</div>
...
<!-- simple category card -->
<div class="rbt-cat-box rbt-cat-box-8">
<div class="inner">
<div class="content">
<span class="rbt-badge rbt-badge-green rbt-badge-small">...</span>
<p class="subtitle">...</p>
<h5 class="title"><a href="#!"><span class="rbt-bold--text">...</span> ...</a></h5>
<a href="#!" class="rbt-btn rbt-btn-white rbt-btn-md">...</a>
</div>
<div class="rbt-image-portion">
<a href="#!">
<img src="image-url..." alt="...">
</a>
</div>
<div class="rbt-sectioin-overlay"></div>
</div>
</div>
<!-- shape category card -->
<div class="rbt-cat-box rbt-cat-box-8 rbt-curved-style-box">
<div class="inner">
<div class="content">
<span class="rbt-badge rbt-badge-red rbt-badge-small">...</span>
<p class="subtitle">...</p>
<h5 class="title"><a href="#"><span class="rbt-text-bold">...</span> ...</a></h5>
<a href="#" class="rbt-btn rbt-btn-white rbt-btn-md">...</a>
</div>
<div class="rbt-image-portion">
<a href="#">
<img src="image-ulr..." alt="...">
</a>
</div>
<div class="rbt-sectioin-overlay"></div>
</div>
</div>