Directory - List
Component #1
- 1
- 1
- 1
- 1,428 sqft
This superb one bedroom flat rests a stones throw from Kennington tube station and Elephant and Castle train station as well as the leafy Paisley Park. The large hatch in the kitchen opens out to a light and open plan living space, perfect for...
Listed on Jan 4, 2019 by
Monica Fox
<!-- Property Item -->
<div class="border-bottom pb-5 mb-5">
<div class="row">
<div id="fancyboxGallery1" class="js-fancybox col-md-4 d-md-flex align-items-md-start flex-md-column mb-5 mb-md-0"
data-hs-fancybox-options='{
"selector": "#fancyboxGallery1 .js-fancybox-item"
}'>
<!-- Gallery -->
<a class="js-fancybox-item media-viewer mb-3" href="javascript:;"
data-src="../assets/img/1920x1080/img12.jpg"
data-caption="Front in frames - image #01">
<img class="img-fluid w-100 rounded-lg" src="../assets/img/480x320/img19.jpg" alt="Image Description">
<div class="position-absolute top-0 left-0 p-4">
<span class="badge badge-success">New</span>
</div>
<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>
</a>
<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 -->
</div>
<div class="col-md-8">
<div class="row">
<div class="col-md-7">
<h3 class="mb-1">
<a class="text-dark" href="#">Borrett Close, London</a>
</h3>
</div>
<div class="col-md-5 text-md-right">
<h3 class="mb-1">
<a href="#">£689,000</a>
</h3>
</div>
</div>
<!-- End Row -->
<!-- Location -->
<div class="mb-3">
<a class="font-size-1 text-body" href="#">
<i class="fas fa-map-marker-alt mr-1"></i>
Borrett Close, London SE17
</a>
</div>
<!-- End Location -->
<!-- Icon Blocks -->
<ul class="list-inline list-separator font-size-1 mb-3">
<li class="list-inline-item">
<i class="fas fa-bed text-muted mr-1"></i> 1
</li>
<li class="list-inline-item">
<i class="fas fa-bath text-muted mr-1"></i> 1
</li>
<li class="list-inline-item">
<i class="fas fa-couch text-muted mr-1"></i> 1
</li>
<li class="list-inline-item">
<i class="fas fa-ruler-combined text-muted mr-1"></i> 1,428 sqft
</li>
</ul>
<!-- End Icon Blocks -->
<p class="font-size-1">This superb one bedroom flat rests a stones throw from Kennington tube station and Elephant and Castle train station as well as the leafy Paisley Park. The large hatch in the kitchen opens out to a light and open plan living space, perfect for...</p>
<div class="row align-items-center">
<div class="col-lg mb-2 mb-lg-0">
<!-- Media -->
<div class="media align-items-center mt-auto">
<div class="avatar avatar-xs avatar-circle mr-2">
<img class="avatar-img" src="../assets/img/100x100/img1.jpg" alt="Image Description" title="Monica Fox">
</div>
<div class="media-body">
<small class="d-block text-muted">Listed on Jan 4, 2019 by</small>
<a class="text-dark" href="#">Monica Fox</a>
</div>
</div>
<!-- End Media -->
</div>
<div class="col-lg-auto">
<!-- Contacts -->
<div class="font-size-1">
<a class="d-inline-block text-body mb-2 mr-4" href="javascript:;">
<i class="fas fa-phone mr-1"></i> (0161) 347 8854
</a>
<a class="d-inline-block text-body mb-2 mr-4" href="javascript:;">
<i class="fas fa-envelope mr-1"></i> Contact
</a>
<a class="d-inline-block text-body mb-2 mr-4" href="javascript:;">
<i class="fas fa-star mr-1"></i> Save
</a>
</div>
<!-- End Contacts -->
</div>
</div>
<!-- End Row -->
</div>
</div>
</div>
<!-- End Property Item -->
<!-- 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
<!-- Card -->
<div class="card card-bordered card-hover-shadow mb-5">
<div class="card-body">
<!-- Media -->
<div class="d-sm-flex">
<div class="media align-items-center align-items-sm-start mb-3">
<img class="avatar avatar-sm mr-3" src="../assets/svg/brands/mailchimp.svg" alt="Image Description">
<div class="media-body d-sm-none">
<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 class="media-body">
<div class="row">
<div class="col col-md-8">
<h3 class="mb-0">
<a class="text-dark" href="job-overview.html">Senior B2B sales consultant</a>
</h3>
<div class="d-none d-sm-inline-block">
<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 class="col-auto order-md-3">
<!-- 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 class="col-12 col-md mt-3 mt-md-0">
<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>
<!-- End Row -->
</div>
</div>
<!-- End Media -->
</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 -->
Component #3
<div class="row mx-n2">
<div class="col-12 col-sm-6 col-lg-3 px-2 mb-3">
<!-- Card -->
<a class="card card-bordered card-hover-shadow h-100" href="#">
<div class="card-body">
<div class="media align-items-center">
<img class="avatar avatar-sm avatar-circle mr-3" src="../assets/img/480x320/img28.jpg" alt="SVG">
<div class="media-body">
<h5 class="text-hover-primary mb-0">London, UK</h5>
</div>
<div class="align-self-center 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-12 col-sm-6 col-lg-3 px-2 mb-3">
<!-- Card -->
<a class="card card-bordered card-hover-shadow h-100" href="#">
<div class="card-body">
<div class="media align-items-center">
<img class="avatar avatar-sm avatar-circle mr-3" src="../assets/img/480x320/img8.jpg" alt="SVG">
<div class="media-body">
<h5 class="text-hover-primary mb-0">Bristol, UK</h5>
</div>
<div class="align-self-center 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-12 col-sm-6 col-lg-3 px-2 mb-3">
<!-- Card -->
<a class="card card-bordered card-hover-shadow h-100" href="#">
<div class="card-body">
<div class="media align-items-center">
<img class="avatar avatar-sm avatar-circle mr-3" src="../assets/img/480x320/img29.jpg" alt="SVG">
<div class="media-body">
<h5 class="text-hover-primary mb-0">Oxford, UK</h5>
</div>
<div class="align-self-center 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-12 col-sm-6 col-lg-3 px-2 mb-3">
<!-- Card -->
<a class="card card-bordered card-hover-shadow h-100" href="#">
<div class="card-body">
<div class="media align-items-center">
<img class="avatar avatar-sm avatar-circle mr-3" src="../assets/img/480x320/img11.jpg" alt="SVG">
<div class="media-body">
<h5 class="text-hover-primary mb-0">Edinburgh, UK</h5>
</div>
<div class="align-self-center 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-12 col-sm-6 col-lg-3 px-2 mb-3">
<!-- Card -->
<a class="card card-bordered card-hover-shadow h-100" href="#">
<div class="card-body">
<div class="media align-items-center">
<img class="avatar avatar-sm avatar-circle mr-3" src="../assets/img/480x320/img10.jpg" alt="SVG">
<div class="media-body">
<h5 class="text-hover-primary mb-0">Newcastle, UK</h5>
</div>
<div class="align-self-center text-muted text-hover-primary pl-2 ml-auto">
<i class="fas fa-angle-right"></i>
</div>
</div>
</div>
</a>
<!-- End Card -->
</div>
<div id="pageHeaderTabEndPoint" class="col-12 col-sm-6 col-lg-3 px-2 mb-3">
<!-- Card -->
<a class="card card-bordered card-hover-shadow h-100" href="#">
<div class="card-body">
<div class="media align-items-center">
<img class="avatar avatar-sm avatar-circle mr-3" src="../assets/img/480x320/img9.jpg" alt="SVG">
<div class="media-body">
<h5 class="text-hover-primary mb-0">Liverpool, UK</h5>
</div>
<div class="align-self-center text-muted text-hover-primary pl-2 ml-auto">
<i class="fas fa-angle-right"></i>
</div>
</div>
</div>
</a>
<!-- End Card -->
</div>
</div>
<!-- End Row -->