Finder Docs | Listing cards

Real Estate listing card: Variant 1

Verified New

$2,750

929 Hart St, Brooklyn, NY 11237

108 sq.m

3

2

1

<!-- Real Estate listing card: Variant 1 -->
<article class="card hover-effect-opacity">

  <!-- Image container -->
  <div class="card-img-top position-relative bg-body-tertiary overflow-hidden">
    <div class="swiper z-2" data-swiper='{
      "pagination": {
        "el": ".swiper-pagination"
      },
      "navigation": {
        "prevEl": ".btn-prev",
        "nextEl": ".btn-next"
      },
      "breakpoints": {
        "991": {
          "allowTouchMove": false
        }
      }
    }'>
      <a class="swiper-wrapper" href="#">
        <div class="swiper-slide">
          <!-- Wrap the image with a "ratio" element to avoid content shifts on page load. Formula: imageHeight / imageWidth * 100% -->
          <div class="ratio d-block" style="--fn-aspect-ratio: calc(248 / 362 * 100%)">
            <img src="assets/img/listings/real-estate/06.jpg" alt="Image">
            <span class="position-absolute top-0 start-0 w-100 h-100 z-1" style="background: linear-gradient(180deg, rgba(0,0,0, 0) 0%, rgba(0,0,0, .11) 100%)"></span>
          </div>
        </div>
        <div class="swiper-slide">
          <!-- Wrap the image with a "ratio" element to avoid content shifts on page load. Formula: imageHeight / imageWidth * 100% -->
          <div class="ratio d-block" style="--fn-aspect-ratio: calc(248 / 362 * 100%)">
            <img src="assets/img/listings/real-estate/04.jpg" alt="Image">
            <span class="position-absolute top-0 start-0 w-100 h-100 z-1" style="background: linear-gradient(180deg, rgba(0,0,0, 0) 0%, rgba(0,0,0, .11) 100%)"></span>
          </div>
        </div>
        <div class="swiper-slide">
          <!-- Wrap the image with a "ratio" element to avoid content shifts on page load. Formula: imageHeight / imageWidth * 100% -->
          <div class="ratio d-block" style="--fn-aspect-ratio: calc(248 / 362 * 100%)">
            <img src="assets/img/listings/real-estate/07.jpg" alt="Image">
            <span class="position-absolute top-0 start-0 w-100 h-100 z-1" style="background: linear-gradient(180deg, rgba(0,0,0, 0) 0%, rgba(0,0,0, .11) 100%)"></span>
          </div>
        </div>
      </a>

      <!-- Badges -->
      <div class="d-flex flex-column gap-2 align-items-start position-absolute top-0 start-0 z-1 pt-1 pt-sm-0 ps-1 ps-sm-0 mt-2 mt-sm-3 ms-2 ms-sm-3">
        <span class="badge text-bg-info d-inline-flex align-items-center">
          Verified
          <i class="fi-shield ms-1"></i>
        </span>
        <span class="badge text-bg-primary">New</span>
      </div>

      <!-- Wishlist button -->
      <div class="position-absolute top-0 end-0 z-1 hover-effect-target opacity-0 pt-1 pt-sm-0 pe-1 pe-sm-0 mt-2 mt-sm-3 me-2 me-sm-3">
        <button type="button" class="btn btn-sm btn-icon btn-light bg-light border-0 rounded-circle animate-pulse" aria-label="Add to wishlist">
          <i class="fi-heart animate-target fs-sm"></i>
        </button>
      </div>

      <!-- Prev slide button -->
      <div class="position-absolute top-50 start-0 z-1 translate-middle-y d-none d-lg-block hover-effect-target opacity-0 ms-3">
        <button type="button" class="btn btn-sm btn-prev btn-icon btn-light bg-light rounded-circle animate-slide-start" aria-label="Prev">
          <i class="fi-chevron-left fs-lg animate-target"></i>
        </button>
      </div>

      <!-- Next slide button -->
      <div class="position-absolute top-50 end-0 z-1 translate-middle-y d-none d-lg-block hover-effect-target opacity-0 me-3">
        <button type="button" class="btn btn-sm btn-next btn-icon btn-light bg-light rounded-circle animate-slide-end" aria-label="Next">
          <i class="fi-chevron-right fs-lg animate-target"></i>
        </button>
      </div>

      <!-- Bullets -->
      <div class="swiper-pagination bottom-0 mb-2" data-bs-theme="light"></div>
    </div>
  </div>

  <!-- Card body -->
  <div class="card-body p-3">
    <div class="h5 mb-2">$2,750</div>
    <h3 class="fs-sm fw-normal text-body mb-2">
      <a class="stretched-link text-body" href="#">929 Hart St, Brooklyn, NY 11237</a>
    </h3>
    <div class="h6 fs-sm mb-0">108 sq.m</div>
  </div>

  <!-- Card footer -->
  <div class="card-footer d-flex gap-2 border-0 bg-transparent pt-0 pb-3 px-3 mt-n1">
    <div class="d-flex align-items-center fs-sm gap-1 me-1">
      3<i class="fi-bed-single fs-base text-secondary-emphasis"></i>
    </div>
    <div class="d-flex align-items-center fs-sm gap-1 me-1">
      2<i class="fi-shower fs-base text-secondary-emphasis"></i>
    </div>
    <div class="d-flex align-items-center fs-sm gap-1 me-1">
      1<i class="fi-car-garage fs-base text-secondary-emphasis"></i>
    </div>
  </div>
</article>

Real Estate listing card: Variant 2

Verified Featured

2-bed apartment|78 sq.m

40 S 9th St, Brooklyn, NY 11249

From $2,600

<!-- Real Estate listing card: Variant 2 -->
<article class="hover-effect-scale position-relative bg-body-tertiary rounded overflow-hidden">

  <!-- Badges -->
  <div class="d-flex gap-2 position-absolute top-0 start-0 z-1 pt-3 ps-3 mt-lg-2 mt-xl-3 ms-lg-2 ms-xl-3">
    <span class="badge text-bg-info d-inline-flex align-items-center">
      Verified
      <i class="fi-shield ms-1"></i>
    </span>
    <span class="badge text-bg-warning">Featured</span>
  </div>

  <!-- Background image -->
  <img src="assets/img/listings/real-estate/featured/02.jpg" class="hover-effect-target position-absolute top-0 start-0 w-100 h-100 object-fit-cover" alt="Image">

  <!-- Add a "ratio" element to avoid content shifts on page load. Formula: imageHeight / imageWidth * 100% -->
  <div class="ratio d-none d-sm-block" style="--fn-aspect-ratio: calc(307 / 636 * 100%)"></div>
  <div class="ratio d-sm-none" style="--fn-aspect-ratio: calc(410 / 636 * 100%)"></div>

  <!-- Text + Button -->
  <div class="position-absolute top-0 start-0 w-100 h-100 z-1 p-3">
    <div class="d-flex align-items-end h-100 p-lg-2 p-xl-3">
      <div class="d-flex flex-wrap align-items-center justify-content-between w-100 gap-3">
        <div class="mb-1 mb-sm-0">
          <h3 class="text-white d-flex flex-wrap align-items-center mb-1 mb-lg-2">2-bed apartment<span class="fs-6 fw-medium mx-2">|</span><span class="fs-6">78 sq.m</span></h3>
          <p class="fs-sm text-white mb-0">40 S 9th St, Brooklyn, NY 11249</p>
        </div>
        <a class="btn btn-primary stretched-link" href="#">From $2,600</a>
      </div>
    </div>
  </div>

  <!-- Gradient overlay -->
  <span class="position-absolute top-0 start-0 w-100 h-100 bg-dark d-sm-none" style="opacity: .4"></span>
  <span class="position-absolute top-0 start-0 w-100 h-100 d-none d-sm-block" style="background: linear-gradient(0deg, rgba(64,64,64, .74) 10.5%, rgba(0,0,0, 0) 54.86%)"></span>
</article>

Real Estate listing card: Admin

For rent

$2,500

40 S 9th St, Brooklyn, NY 11249

97 sq.m

Created: 05/10/2024

1246
23
8

<!-- Real Estate listing card: Admin -->
<article class="card">
  <div class="row g-0">

    <!-- Image -->
    <div class="col-sm-4 col-md-3 rounded overflow-hidden pb-2 pb-sm-0 pe-sm-2">
      <a class="position-relative d-flex h-100 bg-body-tertiary" href="#!" style="min-height: 174px">
        <img src="assets/img/listings/real-estate/01.jpg" class="position-absolute top-0 start-0 w-100 h-100 object-fit-cover" alt="Image">
        <div class="ratio d-none d-sm-block"  style="--fn-aspect-ratio: calc(180 / 240 * 100%)"></div>
        <div class="ratio ratio-16x9 d-sm-none"></div>
      </a>
    </div>

    <!-- Card body: Details + Stats + Action buttons -->
    <div class="col-sm-8 col-md-9 align-self-center">
      <div class="card-body d-flex justify-content-between p-3 py-sm-4 ps-sm-2 ps-md-3 pe-md-4 mt-n1 mt-sm-0">
        <div class="position-relative pe-3">
          <span class="badge text-body-emphasis bg-body-secondary mb-2">For rent</span>
          <div class="h5 mb-2">$2,500</div>
          <a class="stretched-link d-block fs-sm text-body text-decoration-none mb-2" href="#!">40 S 9th St, Brooklyn, NY 11249</a>
          <div class="h6 fs-sm mb-0">97 sq.m</div>
        </div>
        <div class="text-end">
          <div class="fs-xs text-body-secondary mb-3">Created: 05/10/2024</div>
          <div class="d-flex justify-content-end gap-2 mb-3">
            <button type="button" class="btn btn-outline-secondary">Statistics</button>

            <!-- Action dropdown -->
            <div class="dropdown">
              <button type="button" class="btn btn-icon btn-outline-secondary" data-bs-toggle="dropdown" aria-expanded="false" aria-label="Settings">
                <i class="fi-settings fs-base"></i>
              </button>
              <ul class="dropdown-menu dropdown-menu-end">
                <li>
                  <a class="dropdown-item" href="#!">
                    <i class="fi-edit opacity-75 me-2"></i>
                    Edit
                  </a>
                </li>
                <li>
                  <a class="dropdown-item" href="#!">
                    <i class="fi-zap fs-base opacity-75 me-2"></i>
                    Promote
                  </a>
                </li>
                <li>
                  <a class="dropdown-item" href="#!">
                    <i class="fi-archive opacity-75 me-2"></i>
                    Move to archive
                  </a>
                </li>
                <li>
                  <a class="dropdown-item text-danger" href="#!">
                    <i class="fi-trash opacity-75 me-2"></i>
                    Delete
                  </a>
                </li>
              </ul>
            </div>
          </div>

          <!-- Statistics -->
          <ul class="list-unstyled flex-row flex-wrap justify-content-end fs-sm mb-0">
            <li class="d-flex align-items-center me-2 me-md-3">
              <i class="fi-eye fs-base me-1"></i>
              1246
            </li>
            <li class="d-flex align-items-center me-2 me-md-3">
              <i class="fi-heart fs-base me-1"></i>
              23
            </li>
            <li class="d-flex align-items-center">
              <i class="fi-phone-incoming fs-base me-1"></i>
              8
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</article>

Car listing card: Vertical (Grid)

Verified Used

28/06/2024

Maserati Granturismo (2020)

$73,000

Chicago

69K mi

Gasoline

Automatic

<!-- Car listing card: Vertical (Grid) -->
<article class="card hover-effect-scale bg-body-tertiary border-0">

  <!-- Image + Badges -->
  <div class="card-img-top position-relative overflow-hidden">
    <div class="d-flex flex-column gap-2 align-items-start position-absolute top-0 start-0 z-1 pt-1 pt-sm-0 ps-1 ps-sm-0 mt-2 mt-sm-3 ms-2 ms-sm-3">
      <span class="badge text-bg-info d-inline-flex align-items-center">
        Verified
        <i class="fi-shield ms-1"></i>
      </span>
      <span class="badge text-bg-warning">Used</span>
    </div>

    <!-- Wrap the image with a "ratio" element to avoid content shifts on page load. Formula: imageHeight / imageWidth * 100% -->
    <div class="ratio hover-effect-target bg-body-secondary" style="--fn-aspect-ratio: calc(204 / 306 * 100%)">
      <img src="assets/img/listings/cars/grid/06.jpg" alt="Image">
    </div>
  </div>

  <!-- Card body -->
  <div class="card-body pb-3">

    <!-- Date + Action buttons -->
    <div class="d-flex align-items-center justify-content-between mb-2">
      <div class="fs-xs text-body-secondary me-3">28/06/2024</div>
      <div class="d-flex gap-2 position-relative z-2">
        <button type="button" class="btn btn-icon btn-sm btn-outline-secondary animate-pulse rounded-circle" data-bs-toggle="tooltip" data-bs-custom-class="tooltip-sm" title="Wishlist" aria-label="Add to wishlist">
          <i class="fi-heart animate-target fs-sm"></i>
        </button>
        <button type="button" class="btn btn-icon btn-sm btn-outline-secondary animate-shake rounded-circle" data-bs-toggle="tooltip" data-bs-custom-class="tooltip-sm" title="Notify" aria-label="Notify">
          <i class="fi-bell animate-target fs-sm"></i>
        </button>
        <button type="button" class="btn btn-icon btn-sm btn-outline-secondary animate-rotate rounded-circle" data-bs-toggle="tooltip" data-bs-custom-class="tooltip-sm" title="Compare" aria-label="Compare">
          <i class="fi-repeat animate-target fs-sm"></i>
        </button>
      </div>
    </div>

    <!-- Title + Price -->
    <h3 class="h6 mb-2">
      <a class="hover-effect-underline stretched-link me-1" href="#">Maserati Granturismo</a>
      <span class="fs-xs fw-normal text-body-secondary">(2020)</span>
    </h3>
    <div class="h6 mb-0">$73,000</div>
  </div>

  <!-- Card footer: Specs -->
  <div class="card-footer bg-transparent border-0 pt-0 pb-4">
    <div class="border-top pt-3">
      <div class="row row-cols-2 g-2 fs-sm">
        <div class="col d-flex align-items-center gap-2">
          <i class="fi-map-pin"></i>
          Chicago
        </div>
        <div class="col d-flex align-items-center gap-2">
          <i class="fi-tachometer"></i>
          69K mi
        </div>
        <div class="col d-flex align-items-center gap-2">
          <i class="fi-gas-pump"></i>
          Gasoline
        </div>
        <div class="col d-flex align-items-center gap-2">
          <i class="fi-gearbox"></i>
          Automatic
        </div>
      </div>
    </div>
  </div>
</article>

Car listing card: Horizontal (List)

Verified Used

15/07/2024

Mercedes-Benz Coupe (2021)

$115,400

A sleek, luxurious vehicle featuring powerful performance, advanced technology, and elegant design for a premium driving experience.

New York

15K mi

Diesel

Manual

<!-- Car listing card: Horizontal (List) -->
<article class="card hover-effect-scale bg-body-tertiary border-0 overflow-hidden">
  <div class="row g-0">

    <!-- Image + Badges -->
    <div class="col-sm-5 position-relative bg-body-secondary overflow-hidden" style="min-height: 220px">
      <div class="d-flex flex-column gap-2 align-items-start position-absolute top-0 start-0 z-1 pt-1 pt-sm-0 ps-1 ps-sm-0 mt-2 mt-sm-3 ms-2 ms-sm-3">
        <span class="badge text-bg-info d-inline-flex align-items-center">
          Verified
          <i class="fi-shield ms-1"></i>
        </span>
        <span class="badge text-bg-warning">Used</span>
      </div>
      <img src="assets/img/listings/cars/list/05.jpg" class="hover-effect-target position-absolute top-0 start-0 w-100 h-100 object-fit-cover" alt="Image">
    </div>

    <!-- Card body and footer -->
    <div class="col-sm-7 py-md-2">

      <!-- Card body -->
      <div class="card-body pb-3 pb-md-4">
        <div class="d-flex align-items-center justify-content-between mb-2">
          <div class="fs-xs text-body-secondary me-3">15/07/2024</div>
          <div class="d-flex gap-2 position-relative z-2">
            <button type="button" class="btn btn-icon btn-sm btn-outline-secondary animate-pulse rounded-circle" data-bs-toggle="tooltip" data-bs-custom-class="tooltip-sm" title="Wishlist" aria-label="Add to wishlist">
              <i class="fi-heart animate-target fs-sm"></i>
            </button>
            <button type="button" class="btn btn-icon btn-sm btn-outline-secondary animate-shake rounded-circle" data-bs-toggle="tooltip" data-bs-custom-class="tooltip-sm" title="Notify" aria-label="Notify">
              <i class="fi-bell animate-target fs-sm"></i>
            </button>
            <button type="button" class="btn btn-icon btn-sm btn-outline-secondary animate-rotate rounded-circle" data-bs-toggle="tooltip" data-bs-custom-class="tooltip-sm" title="Compare" aria-label="Compare">
              <i class="fi-repeat animate-target fs-sm"></i>
            </button>
          </div>
        </div>

        <!-- Title + Price + Description -->
        <h3 class="h5 mb-2">
          <a class="hover-effect-underline stretched-link me-1" href="#">Mercedes-Benz Coupe</a>
          <span class="fs-sm fw-normal text-body-secondary">(2021)</span>
        </h3>
        <div class="h6 mb-0">$115,400</div>
        <p class="fs-sm pt-2 mt-1 mb-0">A sleek, luxurious vehicle featuring powerful performance, advanced technology, and elegant design for a premium driving experience.</p>
      </div>

      <!-- Card footer: Specs -->
      <div class="card-footer bg-transparent border-0 pt-0 pb-4">
        <div class="d-flex flex-wrap justify-content-between gap-3 border-top fs-sm text-nowrap pt-3 pt-md-4">
          <div class="d-flex align-items-center gap-2">
            <i class="fi-map-pin"></i>
            New York
          </div>
          <div class="d-flex align-items-center gap-2">
            <i class="fi-tachometer"></i>
            15K mi
          </div>
          <div class="d-flex align-items-center gap-2">
            <i class="fi-gas-pump"></i>
            Diesel
          </div>
          <div class="d-flex align-items-center gap-2">
            <i class="fi-gearbox"></i>
            Manual
          </div>
        </div>
      </div>
    </div>
  </div>
</article>

City Guide listing card: Variant 1

Entertainment

Art & Design Museum

Europe's most extensive collection of modern and contemporary art.

4.9 (2078)

1.4 km from center

$15

<!-- City Guide listing card: Variant 1 -->
<article class="card hover-effect-scale hover-effect-opacity bg-transparent">

  <!-- Image + Wishlist button -->
  <div class="card-img-top position-relative bg-body-tertiary overflow-hidden">
    <!-- Wrap the image with a "ratio" element to avoid content shifts on page load. Formula: imageHeight / imageWidth * 100% -->
    <div class="ratio hover-effect-target" style="--fn-aspect-ratio: calc(198 / 304 * 100%)">
      <img src="assets/img/listings/city-guide/v1/07.jpg" alt="Image">
    </div>
    <div class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 pt-1 pt-sm-0 pe-1 pe-sm-0 mt-2 mt-sm-3 me-2 me-sm-3">
      <button type="button" class="btn btn-sm btn-icon btn-light bg-light border-0 rounded-circle animate-pulse" aria-label="Add to wishlist">
        <i class="fi-heart animate-target fs-sm"></i>
      </button>
    </div>
  </div>

  <!-- Card body: Category badge + Title + Description -->
  <div class="card-body pt-3 pb-2 px-3">
    <span class="badge text-body-emphasis bg-secondary-subtle text-decoration-none mb-2">Entertainment</span>
    <h3 class="h5 pt-1 mb-2">
      <a class="hover-effect-underline stretched-link" href="#">Art &amp; Design Museum</a>
    </h3>
    <p class="fs-sm mb-0">Europe's most extensive collection of modern and contemporary art.</p>
  </div>

  <!-- Card footer: Rating + Distance + Price -->
  <div class="card-footer bg-transparent border-0 pt-0 pb-3 px-3">
    <div class="d-flex align-items-center gap-3">
      <div class="d-flex align-items-center gap-1">
        <i class="fi-star-filled text-warning"></i>
        <span class="fs-sm text-secondary-emphasis">4.9</span>
        <span class="fs-xs text-body-secondary align-self-end">(2078)</span>
      </div>
      <div class="d-flex align-items-center gap-1 min-w-0 fs-sm">
        <i class="fi-map-pin"></i>
        <span class="text-truncate">1.4 km from center</span>
      </div>
    </div>
    <div class="h6 pt-3 mb-0">$15</div>
  </div>
</article>

City Guide listing card: Variant 2

Crystal Studio Apartment

4.7 (26)

$$

1.3 km from center

<!-- City Guide listing card: Variant 2 -->
<article class="card hover-effect-scale hover-effect-opacity bg-transparent border-0">

  <!-- Image thumb -->
  <div class="bg-body-tertiary rounded overflow-hidden">
    <!-- Wrap the image with a "ratio" element to avoid content shifts on page load. Formula: imageHeight / imageWidth * 100% -->
    <div class="ratio hover-effect-target" style="--fn-aspect-ratio: calc(280 / 416 * 100%)">
      <img src="assets/img/listings/city-guide/v2/12.jpg" alt="Image">
    </div>
  </div>

  <!-- Wishlist button -->
  <div class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 pt-1 pt-sm-0 pe-1 pe-sm-0 mt-2 mt-sm-3 me-2 me-sm-3">
    <button type="button" class="btn btn-sm btn-icon btn-light bg-light border-0 rounded-circle animate-pulse" aria-label="Add to wishlist">
      <i class="fi-heart animate-target fs-sm"></i>
    </button>
  </div>

  <!-- Card body: Title -->
  <div class="card-body pt-3 pb-2 px-0">
    <h3 class="h5 mb-0">
      <a class="hover-effect-underline stretched-link" href="#">Crystal Studio Apartment</a>
    </h3>
  </div>

  <!-- Card footer: Rating + Cost + Distance -->
  <div class="card-footer d-flex align-items-center gap-3 bg-transparent border-0 p-0">
    <div class="d-flex align-items-center gap-1">
      <i class="fi-star-filled text-warning"></i>
      <span class="fs-sm text-secondary-emphasis">4.7</span>
      <span class="fs-xs text-body-secondary align-self-end">(26)</span>
    </div>
    <div class="d-flex align-items-center gap-1 fs-sm">
      <i class="fi-credit-card"></i>
      $$
    </div>
    <div class="d-flex align-items-center gap-1 min-w-0 fs-sm">
      <i class="fi-map-pin"></i>
      <span class="text-truncate">1.3 km from center</span>
    </div>
  </div>
</article>

Contractor listing card

Verified

Samantha Donovan

Water softener installation Water heater repair

I'm Samantha, your licensed, insured plumber in NYC. Specializing in servicing residential buildings, high rises, offices, and eateries.

4.7 (26)
Listing of the month
Eco-friendly

<!-- Contractor listing card -->
<article class="card hover-effect-opacity overflow-hidden">
  <div class="row g-0">
    <div class="col-sm-4 position-relative bg-body-tertiary" style="min-height: 220px">

      <!-- Badges -->
      <div class="d-flex flex-column gap-2 align-items-start position-absolute top-0 start-0 z-3 pt-1 pt-sm-0 ps-1 ps-sm-0 mt-2 mt-sm-3 ms-2 ms-sm-3">
        <span class="badge text-bg-info d-inline-flex align-items-center">
          Verified
          <i class="fi-shield ms-1"></i>
        </span>
      </div>

      <!-- Image slider -->
      <div class="swiper h-100 z-2" data-swiper='{
        "pagination": {
          "el": ".swiper-pagination"
        },
        "navigation": {
          "prevEl": ".btn-prev",
          "nextEl": ".btn-next"
        },
        "breakpoints": {
          "991": {
            "allowTouchMove": false
          }
        }
      }'>
        <a class="swiper-wrapper h-100" href="#">
          <div class="swiper-slide">
            <img src="assets/img/listings/contractors/01.jpg" class="position-absolute top-0 start-0 w-100 h-100 object-fit-cover" alt="Image">
            <span class="position-absolute top-0 start-0 w-100 h-100" style="background: linear-gradient(180deg, rgba(0,0,0, 0) 0%, rgba(0,0,0, .16) 100%)"></span>
          </div>
          <div class="swiper-slide">
            <img src="assets/img/listings/contractors/01.jpg" class="position-absolute top-0 start-0 w-100 h-100 object-fit-cover" alt="Image">
            <span class="position-absolute top-0 start-0 w-100 h-100" style="background: linear-gradient(180deg, rgba(0,0,0, 0) 0%, rgba(0,0,0, .16) 100%)"></span>
          </div>
          <div class="swiper-slide">
            <img src="assets/img/listings/contractors/01.jpg" class="position-absolute top-0 start-0 w-100 h-100 object-fit-cover" alt="Image">
            <span class="position-absolute top-0 start-0 w-100 h-100" style="background: linear-gradient(180deg, rgba(0,0,0, 0) 0%, rgba(0,0,0, .16) 100%)"></span>
          </div>
        </a>

        <!-- Prev slide button -->
        <div class="position-absolute top-50 start-0 z-1 translate-middle-y d-none d-lg-block hover-effect-target opacity-0 ms-3">
          <button type="button" class="btn btn-sm btn-prev btn-icon btn-light bg-light rounded-circle animate-slide-start" aria-label="Prev">
            <i class="fi-chevron-left fs-lg animate-target"></i>
          </button>
        </div>

        <!-- Next slide button -->
        <div class="position-absolute top-50 end-0 z-1 translate-middle-y d-none d-lg-block hover-effect-target opacity-0 me-3">
          <button type="button" class="btn btn-sm btn-next btn-icon btn-light bg-light rounded-circle animate-slide-end" aria-label="Next">
            <i class="fi-chevron-right fs-lg animate-target"></i>
          </button>
        </div>

        <!-- Bullets -->
        <div class="swiper-pagination bottom-0 z-1 mb-2" data-bs-theme="light"></div>
      </div>
    </div>

    <!-- Content -->
    <div class="col-sm-8 d-flex p-3 p-sm-4" style="min-height: 255px">
      <div class="row flex-lg-nowrap g-0 position-relative pt-1 pt-sm-0">

        <!-- Bookmark button -->
        <button type="button" class="btn btn-icon btn-outline-secondary rounded-circle position-absolute top-0 end-0 z-2" data-bs-toggle="tooltip" data-bs-custom-class="tooltip-sm" title="Bookmark" aria-label="Bookmark">
          <i class="fi-bookmark fs-base"></i>
        </button>

        <div class="col-lg-8 pe-lg-4">

          <!-- Contractor avatar and name -->
          <div class="d-flex align-items-center pe-5 pe-lg-0 pb-2 mb-1">
            <div class="ratio ratio-1x1 me-3" style="width: 48px">
              <img src="assets/img/listings/contractors/ava01.jpg" class="bg-body-tertiary rounded-circle" alt="Avatar">
            </div>
            <h3 class="h6 mb-0">
              <a class="hover-effect-underline stretched-link" href="#">Samantha Donovan</a>
            </h3>
          </div>

          <!-- Services -->
          <div class="fs-sm mb-2 mb-lg-3">
            <span class="fw-medium text-dark-emphasis">Water softener installation</span>
            <i class="fi-bullet fs-base align-middle"></i>
            <span class="fw-medium text-dark-emphasis">Water heater repair</span>
          </div>
          <p class="fs-sm mb-0">I'm Samantha, your licensed, insured plumber in NYC. Specializing in servicing residential buildings, high rises, offices, and eateries.</p>
        </div>

        <!-- Divider -->
        <hr class="vr flex-shrink-0 d-none d-lg-block m-0">

        <div class="col-lg-4 d-flex flex-column pt-3 pt-lg-5 ps-lg-4">

          <!-- Feature list -->
          <ul class="list-unstyled pb-2 pb-lg-4 mb-3">
            <li class="d-flex align-items-center gap-1">
              <i class="fi-star-filled text-warning"></i>
              <span class="fs-sm text-secondary-emphasis">4.7</span>
              <span class="fs-xs text-body-secondary align-self-end">(26)</span>
            </li>
            <li class="d-flex align-items-center gap-1 fs-sm">
              <i class="fi-thumbs-up"></i>
              Listing of the month
            </li>
            <li class="d-flex align-items-center gap-1 fs-sm">
              <i class="fi-leaf"></i>
              Eco-friendly
            </li>
          </ul>

          <!-- Connect button -->
          <button type="button" class="btn btn-outline-dark position-relative z-2 mt-auto">
            <i class="fi-mail me-2"></i>
            Connect
          </button>
        </div>
      </div>
    </div>
  </div>
</article>

Project listing card: Vertical

Handyperson for small projects

4.7 (63)

From $250

<!-- Project listing card: Vertical -->
<article class="card hover-effect-scale hover-effect-opacity">

  <!-- Image + Wishlist button + Title -->
  <div class="card-img-top position-relative bg-body-tertiary overflow-hidden">
    <div class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 pt-1 pt-sm-0 pe-1 pe-sm-0 mt-2 mt-sm-3 me-2 me-sm-3">
      <button type="button" class="btn btn-sm btn-icon btn-light bg-light border-0 rounded-circle animate-pulse" aria-label="Add to wishlist">
        <i class="fi-heart animate-target fs-sm"></i>
      </button>
    </div>
    <!-- Wrap the image with a "ratio" element to avoid content shifts on page load. Formula: imageHeight / imageWidth * 100% -->
    <div class="ratio hover-effect-target" style="--fn-aspect-ratio: calc(280 / 416 * 100%)">
      <img src="assets/img/home/contractors/projects/02.jpg" alt="Image">
    </div>
    <h3 class="h5 position-absolute bottom-0 start-0 d-flex align-items-end w-100 h-100 text-white z-1 p-3 mb-0">Handyperson for small projects</h3>
    <span class="position-absolute top-0 start-0 w-100 h-100" style="background: linear-gradient(1deg, rgba(33,42,54, .75) 0.33%, rgba(33,42,54, 0) 45.72%)"></span>
  </div>

  <!-- Card body: Rating + Price + Booking button -->
  <div class="card-body p-3">
    <div class="d-flex align-items-center gap-3">
      <div class="d-flex align-items-center gap-1">
        <i class="fi-star-filled text-warning"></i>
        <span class="fs-sm text-secondary-emphasis">4.7</span>
        <span class="fs-xs text-body-secondary align-self-end">(63)</span>
      </div>
      <a class="stretched-link fs-sm text-dark-emphasis text-decoration-none" href="#">From $250</a>
      <button type="button" class="btn btn-outline-dark position-relative z-2 ms-auto">Book now</button>
    </div>
  </div>
</article>

Project listing card: Horizontal

Cleaning up after repairs

4.7 (63)

From $150

Appliance repair

4.8 (113)

From $120

<!-- Horizontal project listing card: Variant 1 -->
<article class="card hover-effect-scale bg-transparent overflow-hidden">
  <div class="row h-100 g-0">

    <!-- Image -->
    <div class="col-sm-4 position-relative bg-body-tertiary overflow-hidden" style="min-height: 178px">
      <img src="assets/img/home/contractors/projects/04.jpg" class="hover-effect-target position-absolute top-0 start-0 w-100 h-100 object-fit-cover" alt="Image">
    </div>

    <!-- Card body: Title + Rating + Price + Book button -->
    <div class="col-sm-8 card-body d-flex flex-column align-items-start p-3 p-sm-4">
      <h3 class="h6 mt-1 mt-sm-0 mb-2">
        <a class="stretched-link hover-effect-underline" href="#">Cleaning up after repairs</a>
      </h3>
      <div class="d-flex align-items-center gap-3 mb-4">
        <div class="d-flex align-items-center gap-1">
          <i class="fi-star-filled text-warning"></i>
          <span class="fs-sm text-secondary-emphasis">4.7</span>
          <span class="fs-xs text-body-secondary align-self-end">(63)</span>
        </div>
        <div class="fs-sm text-dark-emphasis">From $150</div>
      </div>
      <button type="button" class="btn btn-outline-dark position-relative z-2 mt-auto">Book now</button>
    </div>
  </div>
</article>


<!-- Horizontal project listing card: Variant 2 -->
<article class="hover-effect-scale position-relative d-inline-flex align-items-start">

  <!-- Image thumb -->
  <div class="flex-shrink-0 bg-body-tertiary rounded overflow-hidden" style="width: 112px">
    <!-- Wrap the image with a "ratio" element to avoid content shifts on page load. Formula: imageHeight / imageWidth * 100% -->
    <div class="ratio hover-effect-target" style="--fn-aspect-ratio: calc(80 / 112 * 100%)">
      <img src="assets/img/home/contractors/projects/th03.jpg" alt="Image">
    </div>
  </div>

  <!-- Title + Rating + Price -->
  <div class="pt-1 ps-3">
    <h3 class="h6 mb-1">
      <a class="hover-effect-underline stretched-link" href="#">Appliance repair</a>
    </h3>
    <div class="d-flex align-items-center gap-1 mb-1">
      <i class="fi-star-filled text-warning"></i>
      <span class="fs-sm text-secondary-emphasis">4.8</span>
      <span class="fs-xs text-body-secondary align-self-end">(113)</span>
    </div>
    <div class="fs-sm text-dark-emphasis">From $120</div>
  </div>
</article>

Doctor listing card: Variant 1

<!-- Doctor listing card: Variant 1 -->
<article class="position-relative">
  <div class="row flex-lg-nowrap g-0">
    <div class="col-lg-8 p-4">
      <div class="d-flex align-items-start p-xl-2">

        <!-- Image + Reviews (visible on screens > 500px wide) -->
        <a class="d-block text-decoration-none flex-shrink-0" href="#">
          <div class="d-md-none" style="width: 48px"></div>
          <div class="d-none d-sm-block d-md-none" style="width: 100px"></div>
          <div class="d-none d-md-block" style="width: 164px"></div>
          <!-- Wrap the image with a "ratio" element to avoid content shifts on page load. Formula: imageHeight / imageWidth * 100% -->
          <div class="ratio" style="--fn-aspect-ratio: calc(204 / 164 * 100%)">
            <img src="assets/img/listings/doctors/01.jpg" class="rounded" alt="Image">
          </div>
          <div class="d-none d-sm-flex align-items-center justify-content-center gap-1 pt-3">
            <i class="fi-star-filled text-warning"></i>
            <span class="fs-sm text-secondary-emphasis">4.5</span>
            <span class="fs-xs text-body-secondary align-self-end">(176)</span>
          </div>
        </a>

        <!-- Doctor details -->
        <div class="ps-sm-4 ps-xl-5 pe-xl-3 ms-md-2 ms-xl-0">
          <div class="position-relative">
            <h3 class="h5 ms-3 ms-sm-0 mb-2">
              <a class="hover-effect-underline stretched-link" href="#">Dr. Michael Johnston</a>
            </h3>
            <div class="d-flex align-items-center gap-3 pb-1 ms-3 ms-sm-0 mb-2">
              <div class="h6 fs-sm mb-0">Cardiologist</div>
              <div class="d-flex d-sm-none align-items-center gap-1">
                <i class="fi-star-filled text-warning"></i>
                <span class="fs-sm text-secondary-emphasis">4.5</span>
                <span class="fs-xs text-body-secondary align-self-end">(176)</span>
              </div>
            </div>
            <ul class="list-unstyled flex-row flex-wrap align-items-center text-nowrap pt-2 pt-sm-0 ms-n5 ms-sm-0 mb-3">
              <li class="d-flex align-items-center gap-2 me-2">
                <span class="badge text-bg-primary">21</span>
                <span class="fs-sm text-dark-emphasis">years experience</span>
              </li>
              <li class="d-flex align-items-center gap-1 fs-sm text-dark-emphasis me-2">
                <i class="fi-user fs-base"></i>
                Adults
              </li>
              <li class="d-flex align-items-center gap-1 fs-sm text-dark-emphasis me-2">
                <i class="fi-baby fs-base"></i>
                Children
              </li>
            </ul>
          </div>
          <p class="fs-sm ms-n5 ms-sm-0">Dr. Michael Johnston, a cardiologist with over two decades of experience, offers advanced cardiovascular care, utilizing cutting-edge techniques and thorough diagnostic analysis. Trust his expertise for all your heart health needs.</p>
          <dl class="ms-n5 ms-sm-0 mb-0">
            <dt class="fs-sm mb-2">Citywide Heart Clinic</dt>
            <dd class="d-flex flex-wrap gap-2 fs-sm mb-3">
              <div class="d-flex align-items-center gap-1 me-2">
                <i class="fi-map-pin fs-base"></i>
                1.4 mi
              </div>
              <div class="me-2">201 E Randolph St, Chicago, IL 60602</div>
              <div class="nav mt-n1">
                <a class="nav-link position-relative gap-2 fs-xs py-1 px-0" href="#">
                  <i class="fi-map fs-sm"></i>
                  <span class="hover-effect-underline stretched-link">Show on map</span>
                </a>
              </div>
            </dd>
            <dt class="fs-sm mb-2">Skyline Medical Center</dt>
            <dd class="d-flex flex-wrap gap-2 fs-sm mb-0">
              <div class="d-flex align-items-center gap-1 me-2">
                <i class="fi-map-pin fs-base"></i>
                3.2 mi
              </div>
              <div class="me-2">233 S Wacker Dr, Chicago, IL 60606</div>
              <div class="nav mt-n1">
                <a class="nav-link position-relative gap-2 fs-xs py-1 px-0" href="#">
                  <i class="fi-map fs-sm"></i>
                  <span class="hover-effect-underline stretched-link">Show on map</span>
                </a>
              </div>
            </dd>
          </dl>
          <div class="d-flex d-sm-block d-lg-none flex-column mt-4 ms-n5 ms-sm-0">
            <button type="button" class="btn btn-outline-primary" data-bs-toggle="offcanvas" data-bs-target="#bookAppointment" aria-controls="bookAppointment">
              Book an appointment
            </button>
          </div>
        </div>
      </div>
    </div>
    <hr class="vr d-none d-lg-block m-0">

    <!-- Booking form that turns into offcanvas on screens < 992px wide -->
    <div class="col-lg-4 p-lg-4">
      <div class="offcanvas-lg offcanvas-end" tabindex="-1" id="bookAppointment">
        <div class="offcanvas-header pt-3">
          <h5 class="offcanvas-title">Book an appointment</h5>
          <button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#bookAppointment" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body d-block pt-0 p-xl-2">
          <ul class="list-unstyled gap-1 fs-sm text-body-secondary mb-4">
            <li>
              <span class="fs-6 fw-semibold text-primary me-1">$75.00</span>
              Online consultation
            </li>
            <li>
              <span class="fs-6 fw-semibold text-dark-emphasis me-1">$90.00</span>
              Visiting the clinic
            </li>
          </ul>
          <div class="d-flex gap-4 pb-2 mb-1">
            <div class="form-check form-switch">
              <label class="form-check-label">
                <input type="radio" class="form-check-input" name="visit-method" checked>
                Online
              </label>
            </div>
            <div class="form-check form-switch">
              <label class="form-check-label">
                <input type="radio" class="form-check-input" name="visit-method">
                Visit clinic
              </label>
            </div>
          </div>
          <div class="btn-group w-100" role="group" aria-label="Date/time selection">
            <input type="radio" class="btn-check" name="visit-day" id="visit-day-1" checked>
            <label class="btn btn-outline-info w-100 px-2" for="visit-day-1">Mon, 11</label>
            <input type="radio" class="btn-check" name="visit-day" id="visit-day-2">
            <label class="btn btn-outline-info w-100 px-2" for="visit-day-2">Tue, 12</label>
            <input type="radio" class="btn-check" name="visit-day" id="visit-day-3">
            <label class="btn btn-outline-info w-100 px-2" for="visit-day-3">Wed, 13</label>
            <button type="button" class="btn btn-icon btn-outline-info flex-grow-0 px-2" aria-label="Next">
              <i class="fi-chevron-right fs-lg"></i>
            </button>
          </div>
          <div class="row row-cols-4 g-2 pt-4">
            <div class="col">
              <input type="radio" class="btn-check" name="visit-time" id="visit-time-1">
              <label class="btn btn-outline-secondary w-100 rounded-pill px-2" for="visit-time-1">10:00</label>
            </div>
            <div class="col">
              <input type="radio" class="btn-check" name="visit-time" id="visit-time-2">
              <label class="btn btn-outline-secondary w-100 rounded-pill px-2" for="visit-time-2">10:30</label>
            </div>
            <div class="col">
              <input type="radio" class="btn-check" name="visit-time" id="visit-time-3">
              <label class="btn btn-outline-secondary w-100 rounded-pill px-2" for="visit-time-3">11:00</label>
            </div>
            <div class="col">
              <input type="radio" class="btn-check" name="visit-time" id="visit-time-4">
              <label class="btn btn-outline-secondary w-100 rounded-pill px-2" for="visit-time-4">11:30</label>
            </div>
            <div class="col">
              <input type="radio" class="btn-check" name="visit-time" id="visit-time-5">
              <label class="btn btn-outline-secondary w-100 rounded-pill px-2" for="visit-time-5">12:00</label>
            </div>
            <div class="col">
              <input type="radio" class="btn-check" name="visit-time" id="visit-time-6">
              <label class="btn btn-outline-secondary w-100 rounded-pill px-2" for="visit-time-6">12:30</label>
            </div>
            <div class="col">
              <input type="radio" class="btn-check" name="visit-time" id="visit-time-7">
              <label class="btn btn-outline-secondary w-100 rounded-pill px-2" for="visit-time-7">13:00</label>
            </div>
            <div class="col">
              <input type="radio" class="btn-check" name="visit-time" id="visit-time-8">
              <label class="btn btn-outline-secondary w-100 rounded-pill px-2" for="visit-time-8">13:30</label>
            </div>
            <div class="col">
              <input type="radio" class="btn-check" name="visit-time" id="visit-time-9">
              <label class="btn btn-outline-secondary w-100 rounded-pill px-2" for="visit-time-9">14:00</label>
            </div>
            <div class="col">
              <input type="radio" class="btn-check" name="visit-time" id="visit-time-10">
              <label class="btn btn-outline-secondary w-100 rounded-pill px-2" for="visit-time-10">14:30</label>
            </div>
            <div class="col">
              <input type="radio" class="btn-check" name="visit-time" id="visit-time-11">
              <label class="btn btn-outline-secondary w-100 rounded-pill px-2" for="visit-time-11">15:00</label>
            </div>
            <div class="col">
              <input type="radio" class="btn-check" name="visit-time" id="visit-time-12">
              <label class="btn btn-outline-secondary w-100 rounded-pill px-2" for="visit-time-12">15:30</label>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Background color overlays for light and dark mode -->
  <span class="position-absolute top-0 start-0 w-100 h-100 bg-white rounded shadow z-n1 d-none-dark"></span>
  <span class="position-absolute top-0 start-0 w-100 h-100 bg-body-tertiary rounded z-n1 d-none d-block-dark"></span>
</article>

Doctor listing card: Variant 2

Dr. Sophia Davis

4.8 (63)

Pediatrician

Verified
5 years experience
Children

Dr. Davis is highly respected in her field, known for her innovative treatment plans and her ability to connect with young patients and their families.

Kids Health Clinic 3.1 mi
Pediatric Medical Center 5.2 mi

From $35.00

Online / Offline / Home visit

<!-- Doctor listing card: Variant 2 -->
<article class="card border-0 z-1">
  <div class="card-body position-relative d-flex">

    <!-- Image -->
    <div class="flex-shrink-0">
      <div class="d-md-none" style="width: 48px"></div>
      <div class="d-none d-sm-block d-xl-none" style="width: 100px"></div>
      <div class="d-none d-xl-block" style="width: 150px"></div>
      <!-- Wrap the image with a "ratio" element to avoid content shifts on page load. Formula: imageHeight / imageWidth * 100% -->
      <div class="ratio" style="--fn-aspect-ratio: calc(164 / 150 * 100%)">
        <img src="assets/img/listings/doctors/08.jpg" class="bg-body-secondary rounded" alt="Image">
      </div>
    </div>

    <!-- Doctor details -->
    <div class="w-100 ps-sm-4">
      <div class="d-flex flex-wrap align-items-center justify-content-between ms-3 ms-sm-0 mb-2">
        <h3 class="h5 me-2 mb-0">
          <a class="hover-effect-underline stretched-link" href="#!">Dr. Sophia Davis</a>
        </h3>
        <div class="d-flex align-items-center gap-1">
          <i class="fi-star-filled text-warning"></i>
          <span class="fs-sm text-secondary-emphasis">4.8</span>
          <span class="fs-xs text-body-secondary align-self-end">(63)</span>
        </div>
      </div>
      <div class="h6 fs-sm ms-3 ms-sm-0 mb-0">Pediatrician</div>
      <ul class="list-unstyled flex-row flex-wrap align-items-center gap-3 pt-3 ms-n5 ms-sm-0 mb-3">
        <li class="badge text-bg-info d-inline-flex align-items-center me-n1">
          Verified
          <i class="fi-shield ms-1"></i>
        </li>
        <li class="d-flex align-items-center fs-sm">
          <i class="fi-award fs-base me-1"></i>
          5 years experience
        </li>
        <li class="d-flex align-items-center fs-sm">
          <i class="fi-baby fs-base me-1"></i>
          Children
        </li>
      </ul>
      <p class="fs-sm ms-n5 ms-sm-0">Dr. Davis is highly respected in her field, known for her innovative treatment plans and her ability to connect with young patients and their families.</p>
      <ul class="list-unstyled fs-sm ms-n5 ms-sm-0 mb-0">
        <li>
          <span class="fw-semibold text-dark-emphasis me-1">Kids Health Clinic</span>
          3.1 mi
        </li>
        <li>
          <span class="fw-semibold text-dark-emphasis me-1">Pediatric Medical Center</span>
          5.2 mi
        </li>
      </ul>
    </div>
  </div>

  <!-- Card footer: Price + Bookin button -->
  <div class="card-footer bg-transparent border-0 pt-0 p-4">
    <hr class="m-0 mb-4">
    <div class="d-flex flex-column flex-sm-row align-items-sm-center justify-content-between gap-3">
      <div class="d-flex flex-wrap align-items-center gap-2">
        <div class="h5 me-1 mb-0">From $35.00</div>
        <div class="fs-sm">Online / Offline / Home visit</div>
      </div>
      <button type="button" class="btn btn-outline-primary">
        Book an appointment
      </button>
    </div>
  </div>

  <!-- Background color overlays for light and dark mode -->
  <span class="position-absolute top-0 start-0 w-100 h-100 bg-white rounded shadow z-n1 d-none-dark"></span>
  <span class="position-absolute top-0 start-0 w-100 h-100 bg-body-tertiary rounded z-n1 d-none d-block-dark"></span>
</article>

Doctor listing card: Variant 3

5.0 (43)

Dr. Peter Grokovski

Dermatologist

1.4 mi
Adults
Children

$60.00

<!-- Doctor listing card: Variant 3 -->
<article class="card hover-effect-scale z-1 border-0">

  <!-- Image -->
  <div class="card-img-top bg-body-tertiary overflow-hidden">
    <!-- Wrap the image with a "ratio" element to avoid content shifts on page load. Formula: imageHeight / imageWidth * 100% -->
    <div class="ratio hover-effect-target" style="--fn-aspect-ratio: calc(200 / 306 * 100%)">
      <img src="assets/img/listings/doctors/20.jpg" alt="Image">
    </div>
  </div>

  <!-- Card body: Rating + Name + Position -->
  <div class="card-body">
    <div class="d-flex align-items-center gap-1 mb-2">
      <i class="fi-star-filled text-warning"></i>
      <span class="fs-sm text-secondary-emphasis">5.0</span>
      <span class="fs-xs text-body-secondary align-self-end">(43)</span>
    </div>
    <h3 class="h5 mb-2">
      <a class="hover-effect-underline stretched-link" href="#">Dr. Peter Grokovski</a>
    </h3>
    <p class="fs-sm fw-semibold text-dark-emphasis mb-2">Dermatologist</p>
    <ul class="list-unstyled flex-wrap flex-row gap-2 fs-sm mb-0">
      <li class="d-flex align-items-center me-2">
        <i class="fi-map-pin me-1"></i>
        1.4 mi
      </li>
      <li class="d-flex align-items-center me-2">
        <i class="fi-user me-1"></i>
        Adults
      </li>
      <li class="d-flex align-items-center">
        <i class="fi-baby me-1"></i>
        Children
      </li>
    </ul>
  </div>

  <!-- Card footer: Price -->
  <div class="card-footer bg-transparent border-0 h6 text-dark-emphasis pt-0 pb-4 mb-0">
    $60.00
  </div>

  <!-- Background color overlays for light and dark mode -->
  <span class="position-absolute top-0 start-0 w-100 h-100 z-n1 bg-white rounded shadow d-none-dark"></span>
  <span class="position-absolute top-0 start-0 w-100 h-100 z-n1 bg-body-tertiary rounded d-none d-block-dark"></span>
</article>

Event listing card: Variant 1

Aug 13
20:00
Concert

Nostalgic Jazzphonic Quartet

Chicago

$68.00

<!-- Event listing card: Variant 1 -->
<article class="card hover-effect-scale hover-effect-opacity bg-body-tertiary border-0">

  <!-- Wishlist button -->
  <div class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 pt-1 pt-sm-0 pe-1 pe-sm-0 mt-2 mt-sm-3 me-2 me-sm-3">
    <button type="button" class="btn btn-sm btn-icon btn-light bg-light border-0 rounded-circle animate-pulse" aria-label="Add to wishlist">
      <i class="fi-heart animate-target fs-sm"></i>
    </button>
  </div>

  <!-- Image -->
  <div class="bg-body-secondary rounded overflow-hidden">
    <!-- Wrap the image with a "ratio" element to avoid content shifts on page load. Formula: imageHeight / imageWidth * 100% -->
    <div class="ratio hover-effect-target" style="--fn-aspect-ratio: calc(250 / 416 * 100%)">
      <img src="assets/img/listings/events/04.jpg" alt="Image">
    </div>
  </div>

  <!-- Card body: Title + Metadata -->
  <div class="card-body">
    <ul class="list-unstyled flex-row flex-wrap align-items-center gap-2 fs-sm mb-2">
      <li class="d-flex align-items-center">
        <i class="fi-calendar me-1"></i>
        Aug 13
      </li>
      <li>20:00</li>
      <li class="d-flex mx-n1">
        <i class="fi-bullet fs-base"></i>
      </li>
      <li>Concert</li>
    </ul>
    <h3 class="h5 pt-1 mb-2">
      <a class="hover-effect-underline stretched-link" href="#">Nostalgic Jazzphonic Quartet</a>
    </h3>
    <div class="d-flex align-items-center fs-sm">
      <i class="fi-map-pin me-1"></i>
      Chicago
    </div>
  </div>

  <!-- Card footer: Price + Booking button -->
  <div class="card-footer d-flex align-items-center justify-content-between gap-3 bg-transparent border-0 pt-0 pb-4">
    <div class="h5 text-info mb-0">$68.00</div>
    <button type="button" class="btn btn-outline-dark position-relative z-2">Book now</button>
  </div>
</article>

Event listing card: Variant 2

Oct 15
18:00
Theater & Cinema

Parallax Show Ballet

Chicago

$56.00

<!-- Event listing card: Variant 2 -->
<article class="card hover-effect-scale hover-effect-opacity bg-body-tertiary border-0">

  <!-- Wishlist button -->
  <div class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 pt-1 pt-sm-0 pe-1 pe-sm-0 mt-2 mt-sm-3 me-2 me-sm-3">
    <button type="button" class="btn btn-sm btn-icon btn-light bg-light border-0 rounded-circle animate-pulse" aria-label="Add to wishlist">
      <i class="fi-heart animate-target fs-sm"></i>
    </button>
  </div>
  <div class="row">
    <div class="col-sm-5 col-md-6 order-sm-2">

      <!-- Image -->
      <div class="position-relative h-100 bg-body-secondary rounded overflow-hidden">
        <div class="ratio d-none d-lg-block" style="--fn-aspect-ratio: calc(250 / 306 * 100%)"></div>
        <div class="ratio ratio-16x9 d-lg-none"></div>
        <img src="assets/img/listings/events/17.jpg" class="hover-effect-target position-absolute top-0 start-0 w-100 h-100 object-fit-cover" style="object-position: center top" alt="Image">
      </div>
    </div>
    <div class="col-sm-7 col-md-6 d-flex flex-column order-md-1">

      <!-- Card body: Title + Metadata -->
      <div class="card-body pe-sm-0">
        <ul class="list-unstyled flex-row flex-wrap align-items-center gap-2 fs-sm mb-2">
          <li class="d-flex align-items-center">
            <i class="fi-calendar me-1"></i>
            Oct 15
          </li>
          <li>18:00</li>
          <li class="d-flex mx-n1">
            <i class="fi-bullet fs-base"></i>
          </li>
          <li>Theater & Cinema</li>
        </ul>
        <h3 class="h5 pt-1 mb-2">
          <a class="hover-effect-underline stretched-link" href="#">Parallax Show Ballet</a>
        </h3>
        <div class="d-flex align-items-center fs-sm">
          <i class="fi-map-pin me-1"></i>
          Chicago
        </div>
      </div>

      <!-- Card footer: Price + Booking button -->
      <div class="card-footer d-flex align-items-center justify-content-between gap-3 bg-transparent border-0 pt-0 pt-sm-4 p-4 pe-sm-0">
        <div class="h5 text-info mb-0">$56.00</div>
        <button type="button" class="btn btn-outline-dark position-relative z-2">Book now</button>
      </div>
    </div>
  </div>
</article>

Event listing card: Variant 3

May 17 12:00
Chicago

Regional Motocross Championship

<!-- Event listing card: Variant 3 -->
<article class="card hover-effect-scale hover-effect-opacity bg-transparent border-0">

  <!-- Wishlist button -->
  <div class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 pt-1 pt-sm-0 pe-1 pe-sm-0 mt-2 mt-sm-3 me-2 me-sm-3">
    <button type="button" class="btn btn-sm btn-icon btn-light bg-light border-0 rounded-circle animate-pulse" aria-label="Add to wishlist">
      <i class="fi-heart animate-target fs-sm"></i>
    </button>
  </div>

  <!-- Image -->
  <div class="bg-body-tertiary rounded overflow-hidden">
    <!-- Wrap the image with a "ratio" element to avoid content shifts on page load. Formula: imageHeight / imageWidth * 100% -->
    <div class="ratio hover-effect-target" style="--fn-aspect-ratio: calc(320 / 306 * 100%)">
      <img src="assets/img/listings/events/20.jpg" alt="Image">
    </div>
  </div>

  <!-- Card body: Metadata + Title -->
  <div class="card-body pt-3 pt-sm-4 p-0">
    <ul class="list-unstyled flex-row flex-wrap align-items-center gap-2 fs-sm pt-1 pt-sm-0 mb-2">
      <li class="d-flex align-items-center me-2">
        <i class="fi-calendar me-1"></i>
        May 17
        <span class="ms-1">12:00</span>
      </li>
      <li class="d-flex align-items-center me-2">
        <i class="fi-map-pin me-1"></i>
        Chicago
      </li>
    </ul>
    <h3 class="h5 mb-0">
      <a class="hover-effect-underline stretched-link" href="#">Regional Motocross Championship</a>
    </h3>
  </div>
</article>

Customize theme

Colors

Primary

Success

Warning

Danger

Info

Direction

RTL

Border width, px

Rounding, rem

Listing cards

Real Estate listing card: Variant 1

Real Estate listing card: Variant 2

2-bed apartment|78 sq.m

Real Estate listing card: Admin

Car listing card: Vertical (Grid)

Maserati Granturismo (2020)

Car listing card: Horizontal (List)

Mercedes-Benz Coupe (2021)

City Guide listing card: Variant 1

City Guide listing card: Variant 2

Contractor listing card

Project listing card: Vertical

Handyperson for small projects

Project listing card: Horizontal

Doctor listing card: Variant 1

Book an appointment

Doctor listing card: Variant 2

Doctor listing card: Variant 3

Event listing card: Variant 1

Event listing card: Variant 2

Event listing card: Variant 3