Directory - Grid

<div class="row">
  <div class="col-sm-6 col-lg-4 mb-5">
    <!-- Property Item -->
    <a id="fancyboxGallery1" class="js-fancybox card card-no-gutters h-100" href="#"
       data-hs-fancybox-options='{
         "selector": "#fancyboxGallery1 .js-fancybox-item"
       }'>
      <!-- Gallery -->
      <div class="js-fancybox-item media-viewer"
         data-src="../assets/img/1920x1080/img19.jpg"
         data-caption="Front in frames - image #01">
        <img class="img-fluid rounded-lg" src="../assets/img/480x320/img23.jpg" alt="Image Description">

        <div class="position-absolute bottom-0 right-0 pb-2 pr-2">
          <span class="btn btn-xs btn-icon btn-light">
            <i class="fas fa-images"></i>
          </span>
        </div>
      </div>

      <img class="js-fancybox-item d-none" alt="Image Description"
           data-src="../assets/img/1920x1080/img20.jpg"
           data-caption="Front in frames - image #02">
      <img class="js-fancybox-item d-none" alt="Image Description"
           data-src="../assets/img/1920x1080/img17.jpg"
           data-caption="Front in frames - image #03">
      <img class="js-fancybox-item d-none" alt="Image Description"
           data-src="../assets/img/1920x1080/img16.jpg"
           data-caption="Front in frames - image #04">
      <!-- End Gallery -->

      <!-- Body -->
      <div class="card-body">
        <span class="d-block font-size-1 text-body">For sale</span>

        <div class="row align-items-center">
          <div class="col">
            <h4 class="text-hover-primary">Borrett Close, London</h4>
          </div>
          <div class="col-auto">
            <h3 class="text-primary">£689,000</h3>
          </div>
        </div>

        <ul class="list-inline list-separator font-size-1 text-body">
          <li class="list-inline-item">
            <i class="fas fa-bed text-muted mr-1"></i> 3 bed
          </li>
          <li class="list-inline-item">
            <i class="fas fa-bath text-muted mr-1"></i> 2 bath
          </li>
          <li class="list-inline-item">
            <i class="fas fa-ruler-combined text-muted mr-1"></i> 1,428 sqft
          </li>
        </ul>
      </div>
      <!-- End Body -->
    </a>
    <!-- End Property Item -->
  </div>

  <div class="col-sm-6 col-lg-4 mb-5">
    <!-- Property Item -->
    <a id="fancyboxGallery2" class="js-fancybox card card-no-gutters h-100" href="#"
       data-hs-fancybox-options='{
         "selector": "#fancyboxGallery2 .js-fancybox-item"
       }'>
      <!-- Gallery -->
      <div class="js-fancybox-item media-viewer"
         data-src="../assets/img/1920x1080/img12.jpg"
         data-caption="Front in frames - image #01">
        <img class="img-fluid rounded-lg" src="../assets/img/480x320/img19.jpg" alt="Image Description">

        <div class="position-absolute bottom-0 right-0 pb-2 pr-2">
          <span class="btn btn-xs btn-icon btn-light">
            <i class="fas fa-images"></i>
          </span>
        </div>
      </div>

      <img class="js-fancybox-item d-none" alt="Image Description"
           data-src="../assets/img/1920x1080/img11.jpg"
           data-caption="Front in frames - image #02">
      <img class="js-fancybox-item d-none" alt="Image Description"
           data-src="../assets/img/1920x1080/img14.jpg"
           data-caption="Front in frames - image #03">
      <!-- End Gallery -->

      <!-- Body -->
      <div class="card-body">
        <span class="d-block font-size-1 text-body">For sale</span>

        <div class="row align-items-center">
          <div class="col">
            <h4 class="text-hover-primary">The Drive, Ilford</h4>
          </div>
          <div class="col-auto">
            <h3 class="text-primary">£999,000</h3>
          </div>
        </div>

        <ul class="list-inline list-separator font-size-1 text-body">
          <li class="list-inline-item">
            <i class="fas fa-bed text-muted mr-1"></i> 2 bed
          </li>
          <li class="list-inline-item">
            <i class="fas fa-bath text-muted mr-1"></i> 1 bath
          </li>
          <li class="list-inline-item">
            <i class="fas fa-ruler-combined text-muted mr-1"></i> 2,123 sqft
          </li>
        </ul>
      </div>
      <!-- End Body -->
    </a>
    <!-- End Property Item -->
  </div>

  <div class="col-sm-6 col-lg-4 mb-5">
    <!-- Property Item -->
    <a id="fancyboxGallery3" class="js-fancybox card card-no-gutters h-100" href="#"
       data-hs-fancybox-options='{
         "selector": "#fancyboxGallery3 .js-fancybox-item"
       }'>
      <!-- Gallery -->
      <div class="js-fancybox-item media-viewer"
         data-src="../assets/img/1920x1080/img26.jpg"
         data-caption="Front in frames - image #01">
        <img class="img-fluid rounded-lg" src="../assets/img/480x320/img20.jpg" alt="Image Description">

        <div class="position-absolute bottom-0 right-0 pb-2 pr-2">
          <span class="btn btn-xs btn-icon btn-light">
            <i class="fas fa-images"></i>
          </span>
        </div>
      </div>

      <img class="js-fancybox-item d-none" alt="Image Description"
           data-src="../assets/img/1920x1080/img18.jpg"
           data-caption="Front in frames - image #02">
      <img class="js-fancybox-item d-none" alt="Image Description"
           data-src="../assets/img/1920x1080/img15.jpg"
           data-caption="Front in frames - image #03">
      <!-- End Gallery -->

      <!-- Body -->
      <div class="card-body">
        <span class="d-block font-size-1 text-body">For sale</span>

        <div class="row align-items-center">
          <div class="col">
            <h4 class="text-hover-primary">Alderney House, Enfield</h4>
          </div>
          <div class="col-auto">
            <h3 class="text-primary">£725,000</h3>
          </div>
        </div>

        <ul class="list-inline list-separator font-size-1 text-body">
          <li class="list-inline-item">
            <i class="fas fa-bed text-muted mr-1"></i> 1 bed
          </li>
          <li class="list-inline-item">
            <i class="fas fa-bath text-muted mr-1"></i> 1 bath
          </li>
          <li class="list-inline-item">
            <i class="fas fa-ruler-combined text-muted mr-1"></i> 1,791 sqft
          </li>
        </ul>
      </div>
      <!-- End Body -->
    </a>
    <!-- End Property Item -->
  </div>
</div>
<!-- End Row -->

<!-- CSS Implementing Plugins -->
<link rel="stylesheet" href="../assets/vendor/@fancyapps/fancybox/dist/jquery.fancybox.min.css">

<!-- JS Implementing Plugins -->
<script src="./assets/vendor/@fancyapps/fancybox/dist/jquery.fancybox.min.js"></script>

<!-- JSFront -->

<!-- JS Plugins Init. -->
<script>
  $(document).on('ready', function () {
    // INITIALIZATION OF FANCYBOX
    // =======================================================
    $('.js-fancybox').each(function () {
      var fancybox = $.HSCore.components.HSFancyBox.init($(this));
    });
  });
</script>

<!-- Listing -->
<div class="row">
  <div class="col-sm-6 col-lg-4 mb-5">
    <!-- Card -->
    <div class="card card-bordered card-hover-shadow h-100">
      <div class="card-body">
        <div class="row mb-3">
          <div class="col">
            <div class="media align-items-center">
              <img class="avatar avatar-sm mr-3" src="../assets/svg/brands/mailchimp.svg" alt="Image Description">
              <div class="media-body">
                <h6 class="mb-0">
                  <a class="text-dark" href="employer.html">Mailchimp</a>
                  <img class="avatar avatar-xss ml-1" src="../assets/svg/illustrations/top-vendor.svg" alt="Review rating" data-toggle="tooltip" data-placement="top" title="Claimed profile">
                </h6>
              </div>
            </div>
          </div>

          <div class="col-auto">
            <!-- Checkbbox Bookmark -->
            <div class="custom-control custom-checkbox-bookmark">
              <input type="checkbox" id="checkboxBookmark1" class="custom-control-input custom-checkbox-bookmark-input">
              <label class="custom-checkbox-bookmark-label" for="checkboxBookmark1">
                <span class="custom-checkbox-bookmark-default" data-toggle="tooltip" data-placement="top" title="Save this job">
                  <i class="far fa-star"></i>
                </span>
                <span class="custom-checkbox-bookmark-active" data-toggle="tooltip" data-placement="top" title="Saved">
                  <i class="fas fa-star"></i>
                </span>
              </label>
            </div>
            <!-- End Checkbbox Bookmark -->
          </div>
        </div>
        <!-- End Row -->

        <h3 class="mb-3">
          <a class="text-dark" href="employer.html">Senior B2B sales consultant</a>
        </h3>

        <span class="d-block font-size-1 text-body mb-1">$125k-$135k yearly</span>

        <span class="badge badge-soft-info mr-2">
          <span class="legend-indicator bg-info"></span>Remote
        </span>
      </div>

      <div class="card-footer">
        <ul class="list-inline list-separator small text-body">
          <li class="list-inline-item">Posted 7 hours ago</li>
          <li class="list-inline-item">Oxford</li>
          <li class="list-inline-item">Full time</li>
        </ul>
      </div>
    </div>
    <!-- End Card -->
  </div>

  <div class="col-sm-6 col-lg-4 mb-5">
    <!-- Card -->
    <div class="card card-bordered card-hover-shadow h-100">
      <div class="card-body">
        <div class="row mb-3">
          <div class="col">
            <div class="media align-items-center">
              <img class="avatar avatar-sm mr-3" src="../assets/svg/brands/capsule.svg" alt="Image Description">
              <div class="media-body">
                <h6 class="mb-0">
                  <a class="text-dark" href="employer.html">Capsule</a>
                </h6>
              </div>
            </div>
          </div>

          <div class="col-auto">
            <!-- Checkbbox Bookmark -->
            <div class="custom-control custom-checkbox-bookmark">
              <input type="checkbox" id="checkboxBookmark2" class="custom-control-input custom-checkbox-bookmark-input">
              <label class="custom-checkbox-bookmark-label" for="checkboxBookmark2">
                <span class="custom-checkbox-bookmark-default" data-toggle="tooltip" data-placement="top" title="Save this job">
                  <i class="far fa-star"></i>
                </span>
                <span class="custom-checkbox-bookmark-active" data-toggle="tooltip" data-placement="top" title="Saved">
                  <i class="fas fa-star"></i>
                </span>
              </label>
            </div>
            <!-- End Checkbbox Bookmark -->
          </div>
        </div>
        <!-- End Row -->

        <h3 class="mb-3">
          <a class="text-dark" href="employer.html">Office assistant/Social media assistant</a>
        </h3>

        <span class="d-block font-size-1 text-body mb-1">$50-$135 hourly</span>
      </div>

      <div class="card-footer">
        <ul class="list-inline list-separator small text-body">
          <li class="list-inline-item">Posted 21 hours ago</li>
          <li class="list-inline-item">Newcastle</li>
          <li class="list-inline-item">Part time</li>
        </ul>
      </div>
    </div>
    <!-- End Card -->
  </div>

  <div class="col-sm-6 col-lg-4 mb-5">
    <!-- Card -->
    <div class="card card-bordered card-hover-shadow h-100">
      <div class="card-body">
        <div class="row mb-3">
          <div class="col">
            <div class="media align-items-center">
              <img class="avatar avatar-sm mr-3" src="../assets/svg/brands/spec.svg" alt="Image Description">
              <div class="media-body">
                <h6 class="mb-0">
                  <a class="text-dark" href="employer.html">Spec</a>
                </h6>
              </div>
            </div>
          </div>

          <div class="col-auto">
            <!-- Checkbbox Bookmark -->
            <div class="custom-control custom-checkbox-bookmark">
              <input type="checkbox" id="checkboxBookmark3" class="custom-control-input custom-checkbox-bookmark-input">
              <label class="custom-checkbox-bookmark-label" for="checkboxBookmark3">
                <span class="custom-checkbox-bookmark-default" data-toggle="tooltip" data-placement="top" title="Save this job">
                  <i class="far fa-star"></i>
                </span>
                <span class="custom-checkbox-bookmark-active" data-toggle="tooltip" data-placement="top" title="Saved">
                  <i class="fas fa-star"></i>
                </span>
              </label>
            </div>
            <!-- End Checkbbox Bookmark -->
          </div>
        </div>
        <!-- End Row -->

        <h3 class="mb-3">
          <a class="text-dark" href="employer.html">Marketing and Communications Manager</a>
        </h3>

        <span class="d-block font-size-1 text-body mb-1">$5k monthly</span>
      </div>

      <div class="card-footer">
        <ul class="list-inline list-separator small text-body">
          <li class="list-inline-item">Posted 1 day ago</li>
          <li class="list-inline-item">London</li>
          <li class="list-inline-item">Full time</li>
        </ul>
      </div>
    </div>
    <!-- End Card -->
  </div>
</div>
<!-- End Listing -->

<!-- Slick Carousel -->
<div class="js-slick-carousel slick slick-gutters-3 slick-equal-height"
     data-hs-slick-carousel-options='{
       "prevArrow": "<span class=\"fas fa-arrow-left slick-arrow slick-arrow-left slick-arrow-centered-y shadow-soft rounded-circle ml-sm-2 ml-md-n2\"></span>",
       "nextArrow": "<span class=\"fas fa-arrow-right slick-arrow slick-arrow-right slick-arrow-centered-y shadow-soft rounded-circle mr-sm-2 mr-md-n2\"></span>",
       "slidesToShow": 3,
       "responsive": [{
         "breakpoint": 992,
           "settings": {
             "slidesToShow": 2
           }
         }, {
         "breakpoint": 768,
         "settings": {
           "slidesToShow": 1
         }
       }]
     }'>
  <div class="js-slide mb-4">
    <!-- Card -->
    <div class="card card-bordered card-hover-shadow w-100">
      <div class="card-body">
        <h3 class="mb-3">
          <a class="text-dark" href="job-overview.html">Senior B2B sales consultant</a>
        </h3>

        <span class="d-block font-size-1 text-body mb-1">$125k-$135k yearly</span>

        <span class="badge badge-soft-info mr-2">
          <span class="legend-indicator bg-info"></span>Remote
        </span>
      </div>

      <div class="card-footer">
        <ul class="list-inline list-separator small text-body">
          <li class="list-inline-item">Posted 7 hours ago</li>
          <li class="list-inline-item">Oxford</li>
          <li class="list-inline-item">Full time</li>
        </ul>
      </div>
    </div>
    <!-- End Card -->
  </div>

  <div class="js-slide mb-4">
    <!-- Card -->
    <div class="card card-bordered card-hover-shadow w-100">
      <div class="card-body">
        <h3 class="mb-3">
          <a class="text-dark" href="job-overview.html">Office assistant/Social media assistant</a>
        </h3>

        <span class="d-block font-size-1 text-body mb-1">$50-$135 hourly</span>
      </div>

      <div class="card-footer">
        <ul class="list-inline list-separator small text-body">
          <li class="list-inline-item">Posted 21 hours ago</li>
          <li class="list-inline-item">Newcastle</li>
          <li class="list-inline-item">Part time</li>
        </ul>
      </div>
    </div>
    <!-- End Card -->
  </div>

  <div class="js-slide mb-4">
    <!-- Card -->
    <div class="card card-bordered card-hover-shadow w-100">
      <div class="card-body">
        <h3 class="mb-3">
          <a class="text-dark" href="job-overview.html">Marketing and Communications Manager</a>
        </h3>

        <span class="d-block font-size-1 text-body mb-1">$5k monthly</span>
      </div>

      <div class="card-footer">
        <ul class="list-inline list-separator small text-body">
          <li class="list-inline-item">Posted 1 day ago</li>
          <li class="list-inline-item">London</li>
          <li class="list-inline-item">Full time</li>
        </ul>
      </div>
    </div>
    <!-- End Card -->
  </div>

  <div class="js-slide mb-4">
    <!-- Card -->
    <div class="card card-bordered card-hover-shadow w-100">
      <div class="card-body">
        <h3 class="mb-3">
          <a class="text-dark" href="job-overview.html">Senior backend developer</a>
        </h3>

        <span class="d-block font-size-1 text-body mb-1">$75k-$85k yearly</span>

        <span class="badge badge-soft-info mr-2">
          <span class="legend-indicator bg-info"></span>Remote
        </span>
      </div>

      <div class="card-footer">
        <ul class="list-inline list-separator small text-body">
          <li class="list-inline-item">Posted 1 day ago</li>
          <li class="list-inline-item">Liverpool</li>
          <li class="list-inline-item">Full time</li>
        </ul>
      </div>
    </div>
    <!-- End Card -->
  </div>

  <div class="js-slide mb-4">
    <!-- Card -->
    <div class="card card-bordered card-hover-shadow w-100">
      <div class="card-body">
        <h3 class="mb-3">
          <a class="text-dark" href="job-overview.html">Senior product manager</a>
        </h3>

        <span class="d-block font-size-1 text-body mb-1">$76k-$98k yearly</span>
      </div>

      <div class="card-footer">
        <ul class="list-inline list-separator small text-body">
          <li class="list-inline-item">Posted 2 days ago</li>
          <li class="list-inline-item">London</li>
          <li class="list-inline-item">Full time</li>
        </ul>
      </div>
    </div>
    <!-- End Card -->
  </div>

  <div class="js-slide mb-4">
    <!-- Card -->
    <div class="card card-bordered card-hover-shadow w-100">
      <div class="card-body">
        <h3 class="mb-3">
          <a class="text-dark" href="job-overview.html">iOS Engineer</a>
        </h3>

        <span class="d-block font-size-1 text-body mb-1">$500-$1000 weekly</span>

        <span class="badge badge-soft-info mr-2">
          <span class="legend-indicator bg-info"></span>Remote
        </span>
      </div>

      <div class="card-footer">
        <ul class="list-inline list-separator small text-body">
          <li class="list-inline-item">Posted 3 days ago</li>
          <li class="list-inline-item">Manchester</li>
          <li class="list-inline-item">Part time</li>
        </ul>
      </div>
    </div>
    <!-- End Card -->
  </div>
</div>
<!-- End Slick Carousel -->

<!-- CSS Implementing Plugins -->
<link rel="stylesheet" href="../assets/vendor/slick-carousel/slick/slick.css">

<!-- JS Implementing Plugins -->
<script src="./assets/vendor/slick-carousel/slick/slick.js"></script>

<!-- JS Front -->

<!-- JS Plugins Init. -->
<script>
  $(document).on('ready', function () {
    // INITIALIZATION OF SLICK CAROUSEL
    // =======================================================
    $('.js-slick-carousel').each(function() {
      var slickCarousel = $.HSCore.components.HSSlickCarousel.init($(this));
    });
  });
</script>

<div class="row">
  <div class="col-sm-6 col-lg-4 col-xl-3 mb-3 mb-sm-5">
    <!-- Card -->
    <a class="card card-bordered card-hover-shadow h-100" href="job-overview.html">
      <div class="card-body">
        <div class="media align-items-center">
          <div class="media-body">
            <h5 class="text-hover-primary mb-0">Management</h5>
            <small class="text-body">4 job positions</small>
          </div>

          <div class="text-muted text-hover-primary pl-2 ml-auto">
            <i class="fas fa-angle-right"></i>
          </div>
        </div>
      </div>
    </a>
    <!-- End Card -->
  </div>

  <div class="col-sm-6 col-lg-4 col-xl-3 mb-3 mb-sm-5">
    <!-- Card -->
    <a class="card card-bordered card-hover-shadow h-100" href="job-overview.html">
      <div class="card-body">
        <div class="media">
          <div class="media-body">
            <h5 class="text-hover-primary mb-0">Software Development</h5>
            <small class="text-body">26 job positions</small>
          </div>

          <div class="align-self-center pl-2 ml-auto">
            <span class="text-muted text-hover-primary">
              <i class="fas fa-angle-right"></i>
            </span>
          </div>
        </div>
      </div>
    </a>
    <!-- End Card -->
  </div>

  <div class="col-sm-6 col-lg-4 col-xl-3 mb-3 mb-sm-5">
    <!-- Card -->
    <a class="card card-bordered card-hover-shadow h-100" href="job-overview.html">
      <div class="card-body">
        <div class="media">
          <div class="media-body">
            <h5 class="text-hover-primary mb-0">Arts & Entertainment</h5>
            <small class="text-body">9 job positions</small>
          </div>

          <div class="align-self-center pl-2 ml-auto">
            <span class="text-muted text-hover-primary">
              <i class="fas fa-angle-right"></i>
            </span>
          </div>
        </div>
      </div>
    </a>
    <!-- End Card -->
  </div>

  <div class="col-sm-6 col-lg-4 col-xl-3 mb-3 mb-sm-5">
    <!-- Card -->
    <a class="card card-bordered card-hover-shadow h-100" href="job-overview.html">
      <div class="card-body">
        <div class="media">
          <div class="media-body">
            <h5 class="text-hover-primary mb-0">Accounting</h5>
            <small class="text-body">11 job positions</small>
          </div>

          <div class="align-self-center pl-2 ml-auto">
            <span class="text-muted text-hover-primary">
              <i class="fas fa-angle-right"></i>
            </span>
          </div>
        </div>
      </div>
    </a>
    <!-- End Card -->
  </div>
</div>
<!-- End Row -->