Directory - Grid

Component #1

                    
                      <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="../node_modules/@fancyapps/fancybox/dist/jquery.fancybox.min.css">

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

                      <!-- JSFront -->
                      <script src="./assets/js/hs.fancybox.js"></script>

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

Component #2

Senior B2B sales consultant

$125k-$135k yearly Remote
                    
                      <!-- 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 -->
                    
                  

Component #3

                    
                      <!-- 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 -->
                      <script src="./assets/js/hs.slick-carousel.js"></script>

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

Component #4

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