Cartzilla component

# Shop categories

Provide a navigational structure with links to different product categories for easy access and exploration.

#### Category card: Variant 1

## Wearable Electronics

    <!-- 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

## For men

    <!-- 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

124 products

## Only fresh fish to your table

    <!-- 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

### Living room

    <!-- 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

3D illustrations

    <!-- 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>

#### Categories list

    <!-- Categories list -->
    <div class="nav flex-column align-items-start gap-3 gap-sm-4">
      <div class="position-relative d-flex min-w-0 align-items-center">
        <div class="d-flex flex-shrink-0 align-items-center justify-content-center bg-body-tertiary rounded-circle" style="width: 56px; height: 56px">
          <img src="assets/img/shop/grocery/categories/01.png" width="40" alt="Image">
        </div>
        <div class="min-w-0 ps-3">
          <a class="nav-link animate-underline stretched-link fs-base fw-semibold p-0 mb-1" href="#">
            <span class="animate-target text-truncate">Bakery & bread</span>
          </a>
          <div class="fs-xs fw-normal text-body-secondary">230 products</div>
        </div>
      </div>
      <div class="position-relative d-flex min-w-0 align-items-center">
        <div class="d-flex flex-shrink-0 align-items-center justify-content-center bg-body-tertiary rounded-circle" style="width: 56px; height: 56px">
          <img src="assets/img/shop/grocery/categories/02.png" width="40" alt="Image">
        </div>
        <div class="min-w-0 ps-3">
          <a class="nav-link animate-underline stretched-link fs-base fw-semibold p-0 mb-1" href="#">
            <span class="animate-target text-truncate">Vegetables</span>
          </a>
          <div class="fs-xs fw-normal text-body-secondary">180 products</div>
        </div>
      </div>
      <div class="position-relative d-flex min-w-0 align-items-center">
        <div class="d-flex flex-shrink-0 align-items-center justify-content-center bg-body-tertiary rounded-circle" style="width: 56px; height: 56px">
          <img src="assets/img/shop/grocery/categories/03.png" width="40" alt="Image">
        </div>
        <div class="min-w-0 ps-3">
          <a class="nav-link animate-underline stretched-link fs-base fw-semibold p-0 mb-1" href="#">
            <span class="animate-target text-truncate">Fresh fruits</span>
          </a>
          <div class="fs-xs fw-normal text-body-secondary">205 products</div>
        </div>
      </div>
    </div>

Top