Shop categories

<!-- Category card: Variant 1 -->
<div class="hover-effect-scale">
  <a class="d-block bg-body-tertiary rounded p-4 mb-4" href="#">
    <!-- Wrap the image with a "ratio" element to avoid content shifts on page load. Formula: imageHeight / imageWidth * 100% -->
    <div class="ratio" style="--cz-aspect-ratio: calc(184 / 258 * 100%)">
      <img src="assets/img/shop/electronics/categories/04.png" class="hover-effect-target" alt="Wearable Electronics">
    </div>
  </a>
  <h2 class="h6 d-flex w-100 pb-2 mb-1">
    <a class="animate-underline animate-target d-inline text-truncate" href="#">Wearable Electronics</a>
  </h2>
  <ul class="nav flex-column gap-2 mt-n1">
    <li class="d-flex w-100 pt-1">
      <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="#">Smart Watches</a>
    </li>
    <li class="d-flex w-100 pt-1">
      <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="#">Fitness Trackers</a>
    </li>
    <li class="d-flex w-100 pt-1">
      <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="#">Smart Glasses</a>
    </li>
    <li class="d-flex w-100 pt-1">
      <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="#">Clips, Arm & Wristbands</a>
    </li>
    <li class="d-flex w-100 pt-1">
      <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="#">Voice Recorders</a>
    </li>
  </ul>
</div>

<!-- Category card: Variant 2 -->
<div class="hover-effect-opacity position-relative">
  <div class="d-flex justify-content-between position-relative z-2 ps-2 ps-xl-3">
    <div class="d-flex flex-column min-w-0 p-3">
      <h2 class="h5 text-nowrap pt-2 pt-xl-3">For men</h2>
      <ul class="nav flex-column gap-2 mt-n1">
        <li class="d-flex w-100 pt-1">
          <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="#">Sports suits</a>
        </li>
        <li class="d-flex w-100 pt-1">
          <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="#">Trousers</a>
        </li>
        <li class="d-flex w-100 pt-1">
          <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="#">Jackets and coats</a>
        </li>
        <li class="d-flex w-100 pt-1">
          <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="#">Shirts</a>
        </li>
      </ul>
      <div class="nav hover-effect-target opacity-0 pb-2 pb-xl-3 mt-auto">
        <a class="nav-link animate-underline text-body-emphasis text-nowrap p-0" href="#">
          <span class="animate-target">Shop now</span>
          <i class="ci-arrow-up-right fs-base ms-1"></i>
        </a>
      </div>
    </div>
    <!-- Wrap the image with a "ratio" element to avoid content shifts on page load. Formula: imageHeight / imageWidth * 100% -->
    <div class="ratio w-100 align-self-end" style="max-width: 220px; --cz-aspect-ratio: calc(305 / 220 * 100%)">
      <img src="assets/img/home/fashion/v2/categories/01.png" alt="Image">
    </div>
  </div>
  <span class="position-absolute top-0 start-0 w-100 h-100 rounded-5 d-none-dark" style="background: linear-gradient(124deg, #e2daec -29.7%, #e4eefd 65.5%)"></span>
  <span class="position-absolute top-0 start-0 w-100 h-100 rounded-5 d-none d-block-dark" style="background: linear-gradient(124deg, #37343b -29.7%, #222a36 65.5%)"></span>
</div>

<!-- Category card: Variant 3 -->
<div class="position-relative d-flex justify-content-between align-items-center bg-primary-subtle rounded-5 overflow-hidden ps-2 ps-xl-3">
  <div class="d-flex flex-column pt-4 px-3 pb-3">
    <p class="fs-xs pb-2 mb-1">124 products</p>
    <h2 class="h5 mb-2 mb-xxl-3">Only fresh fish to your table</h2>
    <div class="nav">
      <a class="nav-link animate-underline stretched-link text-body-emphasis text-nowrap px-0" href="#">
        <span class="animate-target">Shop now</span>
        <i class="ci-chevron-right fs-base ms-1"></i>
      </a>
    </div>
  </div>
  <!-- Wrap the image with a "ratio" element to avoid content shifts on page load. Formula: imageHeight / imageWidth * 100% -->
  <div class="ratio w-100 align-self-end rtl-flip" style="max-width: 216px; --cz-aspect-ratio: calc(240 / 216 * 100%)">
    <img src="assets/img/home/grocery/featured/01.png" alt="Image">
  </div>
</div>

<!-- Category card: Variant 4 -->
<div class="category-card w-100 text-center px-1 px-lg-2 px-xxl-3" style="min-width: 165px">
  <div class="category-card-body">
    <a class="d-block text-decoration-none" href="#">
      <div class="bg-body-tertiary rounded-pill mb-3 mx-auto" style="max-width: 164px">
        <!-- Wrap the image with a "ratio" element to avoid content shifts on page load -->
        <div class="ratio ratio-1x1">
          <img src="assets/img/home/furniture/categories/02.png" class="rounded-pill" alt="Image">
        </div>
      </div>
      <h3 class="category-card-title h6 text-truncate">Living room</h3>
    </a>
    <ul class="category-card-list nav w-100 flex-column gap-1 pt-3">
      <li class="w-100">
        <a class="nav-link justify-content-center min-w-0 w-100 fw-normal hover-effect-underline p-0" href="#">
          <span class="text-truncate">Bookcases and storage</span>
        </a>
      </li>
      <li class="w-100">
        <a class="nav-link justify-content-center min-w-0 w-100 fw-normal hover-effect-underline p-0" href="#">
          <span class="text-truncate">Coffee tables</span>
        </a>
      </li>
      <li class="w-100">
        <a class="nav-link justify-content-center min-w-0 w-100 fw-normal hover-effect-underline p-0" href="#">
          <span class="text-truncate">Cabinets</span>
        </a>
      </li>
    </ul>
  </div>
</div>

<!-- Category card: Variant 5 -->
<a class="vstack position-relative animate-underline hover-effect-scale rounded-4 overflow-hidden text-dark-emphasis fw-medium text-decoration-none shadow" href="#">
  <!-- Wrap the image with a "ratio" element to avoid content shifts on page load. Formula: imageHeight / imageWidth * 100% -->
  <div class="ratio z-2 overflow-hidden" style="--cz-aspect-ratio: calc(130 / 196 * 100%)">
    <img src="assets/img/home/marketplace/categories/03.jpg" class="hover-effect-target" alt="Image">
  </div>
  <div class="position-relative z-2 text-center py-3">
    <div class="animate-target d-inline">3D illustrations</div>
  </div>
  <span class="position-absolute top-0 start-0 w-100 h-100 bg-white d-none-dark"></span>
  <span class="position-absolute top-0 start-0 w-100 h-100 bg-white d-none d-block-dark" style="opacity: .07"></span>
</a>