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="../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>
Component #2
<!-- 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 -->
<!-- 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 -->