Directory Grid
Component #1
<!-- Card Grid -->
<div class="container content-space-2 content-space-lg-3">
<div class="row mb-5">
<div class="col-lg-6 mb-3 mb-lg-5">
<!-- Card -->
<a class="card card-bordered card-transition h-100" href="../demo-help-desk/listing.html">
<div class="card-body">
<!-- Media -->
<div class="d-block d-sm-flex">
<div class="flex-shrink-0">
<span class="svg-icon text-primary mb-2 mb-sm-0">
@@include("../assets/vendor/duotone-icons/gen/gen002.svg")
</span>
</div>
<div class="flex-grow-1 ms-sm-4">
<h3 class="card-title">Getting started</h3>
<p class="card-text text-body">Welcome to Front! We're so glad you're here. Let's get started!</p>
<div class="d-flex">
<div class="flex-shrink-0">
<!-- Avatar Group -->
<div class="avatar-group avatar-group-xs">
<div class="avatar avatar-xs avatar-circle">
<img class="avatar-img" src="../assets/img/160x160/img1.jpg" alt="Image Description">
</div>
<div class="avatar avatar-xs avatar-circle">
<img class="avatar-img" src="../assets/img/160x160/img8.jpg" alt="Image Description">
</div>
</div>
<!-- End Avatar Group -->
</div>
<div class="flex-grow-1 ms-2">
<p class="card-text text-dark small mb-0">1 article in this collection</p>
<p class="card-text text-dark small">
<span class="text-muted">Written by</span>
Luisa Woodfine
<span class="text-muted">and</span>
Neil Galavan
</p>
</div>
</div>
</div>
</div>
<!-- End Media -->
</div>
</a>
<!-- End Card -->
</div>
<!-- End Col -->
<div class="col-lg-6 mb-3 mb-lg-5">
<!-- Card -->
<a class="card card-bordered card-transition h-100" href="../demo-help-desk/listing.html">
<div class="card-body">
<!-- Media -->
<div class="d-block d-sm-flex">
<div class="flex-shrink-0">
<span class="svg-icon text-primary mb-2 mb-sm-0">
</span>
</div>
<div class="flex-grow-1 ms-sm-4">
<h3 class="card-title">Account</h3>
<p class="card-text text-body">Adjust your profile and preferences to make Front work just for you!</p>
<div class="d-flex">
<div class="flex-shrink-0">
<!-- Avatar Group -->
<div class="avatar-group avatar-group-xs">
<div class="avatar avatar-xs avatar-circle">
<img class="avatar-img" src="../assets/img/160x160/img9.jpg" alt="Image Description">
</div>
<div class="avatar avatar-xs avatar-circle">
<img class="avatar-img" src="../assets/img/160x160/img3.jpg" alt="Image Description">
</div>
</div>
<!-- End Avatar Group -->
</div>
<div class="flex-grow-1 ms-2">
<p class="card-text text-dark small mb-0">2 article in this collection</p>
<p class="card-text text-dark small">
<span class="text-muted">Written by</span>
Fiona Burke, Luisa Woodfine
<span class="text-muted">and</span>
Neil Galavan
</p>
</div>
</div>
</div>
</div>
<!-- End Media -->
</div>
</a>
<!-- End Card -->
</div>
<!-- End Col -->
<div class="col-lg-6 mb-3 mb-lg-5">
<!-- Card -->
<a class="card card-bordered card-transition h-100" href="../demo-help-desk/listing.html">
<div class="card-body">
<!-- Media -->
<div class="d-block d-sm-flex">
<div class="flex-shrink-0">
<span class="svg-icon text-primary mb-2 mb-sm-0">
</span>
</div>
<div class="flex-grow-1 ms-sm-4">
<h3 class="card-title">Data security</h3>
<p class="card-text text-body">Detailed information on how our customer data is securely stored.</p>
<div class="d-flex">
<div class="flex-shrink-0">
<!-- Avatar Group -->
<div class="avatar-group avatar-group-xs">
<div class="avatar avatar-xs avatar-circle">
<img class="avatar-img" src="../assets/img/160x160/img9.jpg" alt="Image Description">
</div>
<div class="avatar avatar-xs avatar-circle">
<img class="avatar-img" src="../assets/img/160x160/img4.jpg" alt="Image Description">
</div>
</div>
<!-- End Avatar Group -->
</div>
<div class="flex-grow-1 ms-2">
<p class="card-text text-dark small mb-0">5 article in this collection</p>
<p class="card-text text-dark small">
<span class="text-muted">Written by</span>
Fiona Burke, Luisa Woodfine, Neil Galavan
<span class="text-muted">and</span>
Monica Garcia
</p>
</div>
</div>
</div>
</div>
<!-- End Media -->
</div>
</a>
<!-- End Card -->
</div>
<!-- End Col -->
<div class="col-lg-6 mb-3 mb-lg-5">
<!-- Card -->
<a class="card card-bordered card-transition h-100" href="../demo-help-desk/listing.html">
<div class="card-body">
<!-- Media -->
<div class="d-block d-sm-flex">
<div class="flex-shrink-0">
<span class="svg-icon text-primary mb-2 mb-sm-0">
</span>
</div>
<div class="flex-grow-1 ms-sm-4">
<h3 class="card-title">Market</h3>
<p class="card-text text-body">Some further explanation on when Front can and cannot be used.</p>
<div class="d-flex">
<div class="flex-shrink-0">
<!-- Avatar Group -->
<div class="avatar-group avatar-group-xs">
<div class="avatar avatar-xs avatar-circle">
<img class="avatar-img" src="../assets/img/160x160/img7.jpg" alt="Image Description">
</div>
</div>
<!-- End Avatar Group -->
</div>
<div class="flex-grow-1 ms-2">
<p class="card-text text-dark small mb-0">3 article in this collection</p>
<p class="card-text text-dark small">
<span class="text-muted">Written by</span>
Luisa Woodfine
</p>
</div>
</div>
</div>
</div>
<!-- End Media -->
</div>
</a>
<!-- End Card -->
</div>
<!-- End Col -->
<div class="col-lg-6 mb-3 mb-lg-5">
<!-- Card -->
<a class="card card-bordered card-transition h-100" href="../demo-help-desk/listing.html">
<div class="card-body">
<!-- Media -->
<div class="d-block d-sm-flex">
<div class="flex-shrink-0">
<span class="svg-icon text-primary mb-2 mb-sm-0">
</span>
</div>
<div class="flex-grow-1 ms-sm-4">
<h3 class="card-title">Subscription</h3>
<p class="card-text text-body">Assistance on how and when you might use the subscription product.</p>
<div class="d-flex">
<div class="flex-shrink-0">
<!-- Avatar Group -->
<div class="avatar-group avatar-group-xs">
<div class="avatar avatar-xs avatar-circle">
<img class="avatar-img" src="../assets/img/160x160/img9.jpg" alt="Image Description">
</div>
<div class="avatar avatar-xs avatar-circle">
<img class="avatar-img" src="../assets/img/160x160/img3.jpg" alt="Image Description">
</div>
</div>
<!-- End Avatar Group -->
</div>
<div class="flex-grow-1 ms-2">
<p class="card-text text-dark small mb-0">2 article in this collection</p>
<p class="card-text text-dark small">
<span class="text-muted">Written by</span>
Fiona Burke, Luisa Woodfine
<span class="text-muted">and</span>
Neil Galavan
</p>
</div>
</div>
</div>
</div>
<!-- End Media -->
</div>
</a>
<!-- End Card -->
</div>
<!-- End Col -->
<div class="col-lg-6 mb-3 mb-lg-5">
<!-- Card -->
<a class="card card-bordered card-transition h-100" href="../demo-help-desk/listing.html">
<div class="card-body">
<!-- Media -->
<div class="d-block d-sm-flex">
<div class="flex-shrink-0">
<span class="svg-icon text-primary mb-2 mb-sm-0">
</span>
</div>
<div class="flex-grow-1 ms-sm-4">
<h3 class="card-title">Tips, tricks & more</h3>
<p class="card-text text-body">Tips and tools for beginners and experts alike.</p>
<div class="d-flex">
<div class="flex-shrink-0">
<!-- Avatar Group -->
<div class="avatar-group avatar-group-xs">
<div class="avatar avatar-xs avatar-circle">
<img class="avatar-img" src="../assets/img/160x160/img7.jpg" alt="Image Description">
</div>
</div>
<!-- End Avatar Group -->
</div>
<div class="flex-grow-1 ms-2">
<p class="card-text text-dark small mb-0">2 article in this collection</p>
<p class="card-text text-dark small">
<span class="text-muted">Written by</span>
Luisa Woodfine
</p>
</div>
</div>
</div>
</div>
<!-- End Media -->
</div>
</a>
<!-- End Card -->
</div>
<!-- End Col -->
</div>
<!-- End Row -->
<div class="text-center">
<a class="btn btn-outline-primary btn-transition" href="../demo-help-desk/listing.html">See all topics</a>
</div>
</div>
<!-- End Card Grid -->
Component #2
<div class="row gx-3">
<div class="col-sm-6 col-md-4 mb-3 mb-md-0">
<!-- Card -->
<a class="card card-bordered card-transition h-100" href="../demo-app-marketplace/app-overview.html">
<img class="card-img-top" src="../assets/img/400x200/img5.jpg" alt="Image Description">
<div class="card-body">
<div class="d-flex align-items-center mb-2">
<h4 class="card-title mb-0">Dropbox</h4>
<img class="avatar avatar-xss ms-1" src="../assets/svg/illustrations/top-vendor.svg" alt="Image Description" title="Top Vendor">
</div>
<p class="card-text text-body">A workspace to reduce busywork-so you can focus on the things that matter</p>
</div>
</a>
<!-- End Card -->
</div>
<!-- End Col -->
<div class="col-sm-6 col-md-4 mb-3 mb-md-0">
<!-- Card -->
<a class="card card-bordered card-transition h-100" href="../demo-app-marketplace/app-overview.html">
<img class="card-img-top" src="../assets/img/400x200/img2.jpg" alt="Image Description">
<div class="card-body">
<div class="d-flex align-items-center mb-2">
<h4 class="card-title mb-0">Asana</h4>
<img class="avatar avatar-xss ms-1" src="../assets/svg/illustrations/top-vendor.svg" alt="Image Description" title="Top Vendor">
</div>
<p class="card-text text-body">Track tasks and projects, use agile boards, measure progress</p>
</div>
</a>
<!-- End Card -->
</div>
<!-- End Col -->
<div class="col-sm-6 col-md-4">
<!-- Card -->
<a class="card card-bordered card-transition h-100" href="../demo-app-marketplace/app-overview.html">
<img class="card-img-top" src="../assets/img/400x200/img3.jpg" alt="Image Description">
<div class="card-body">
<div class="d-flex align-items-center mb-2">
<h4 class="card-title mb-0">Slack</h4>
<img class="avatar avatar-xss ms-1" src="../assets/svg/illustrations/top-vendor.svg" alt="Image Description" title="Top Vendor">
</div>
<p class="card-text text-body">Email collaboration and email service desk made easy</p>
</div>
</a>
<!-- End Card -->
</div>
<!-- End Col -->
</div>
<!-- End Row -->
Component #3
<!-- Card Grid -->
<div class="container content-space-1">
<div class="row row-cols-1 row-cols-sm-2 row-cols-lg-3">
<div class="col mb-3">
<!-- Card -->
<div class="card card-flush shadow-none h-100">
<a class="card-pinned" href="../assets/img/1920x1080/img19.jpg" data-fslightbox="propertyGridGallery1">
<img class="card-img" src="../assets/img/480x320/img23.jpg" alt="Image Description">
<div class="card-pinned-top-start">
<span class="badge bg-success">New</span>
</div>
<div class="card-pinned-bottom-end">
<span class="btn btn-light btn-xs btn-icon">
<i class="bi-images"></i>
</span>
</div>
</a>
<a class="d-none" href="../assets/img/1920x1080/img20.jpg" data-fslightbox="propertyGridGallery1"></a>
<a class="d-none" href="../assets/img/1920x1080/img17.jpg" data-fslightbox="propertyGridGallery1"></a>
<a class="d-none" href="../assets/img/1920x1080/img16.jpg" data-fslightbox="propertyGridGallery1"></a>
<!-- Body -->
<a class="card-body" href="../demo-real-estate/property-overview.html">
<span class="card-subtitle text-body">For sale</span>
<div class="row align-items-center mb-3">
<div class="col">
<h4 class="card-title text-inherit">Borrett Close, London</h4>
</div>
<!-- End Col -->
<div class="col-auto">
<h3 class="card-title text-primary">£689,000</h3>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
<ul class="list-inline list-separator text-body small">
<li class="list-inline-item">
<span class="svg-icon svg-icon-xs svg-inline text-muted me-1">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24"><path d="M22,19.5a.5.5,0,0,1-.5.5h-1a.5.5,0,0,1-.5-.5V16H4v3.5a.5.5,0,0,1-.5.5h-1a.5.5,0,0,1-.5-.5V4.5A.5.5,0,0,1,2.5,4h1a.5.5,0,0,1,.5.5V13H21a1,1,0,0,1,1,1ZM20,8H12a2,2,0,0,0-2,2v1.5a.5.5,0,0,0,.5.5h11a.5.5,0,0,0,.5-.5V10A2,2,0,0,0,20,8ZM5.5,12h3a.5.5,0,0,0,.5-.5V11a2,2,0,0,0-4,0v.5A.5.5,0,0,0,5.5,12Z"/></svg>
</span>
3 bed
</li>
<li class="list-inline-item">
<span class="svg-icon svg-icon-xs svg-inline text-muted me-1">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 512 512"><path d="M304,320a16,16,0,1,0,16,16A16,16,0,0,0,304,320Zm32-96a16,16,0,1,0,16,16A16,16,0,0,0,336,224Zm32,64a16,16,0,1,0-16-16A16,16,0,0,0,368,288Zm-32,32a16,16,0,1,0-16-16A16,16,0,0,0,336,320Zm-32-64a16,16,0,1,0,16,16A16,16,0,0,0,304,256Zm128-32a16,16,0,1,0-16-16A16,16,0,0,0,432,224Zm-48,16a16,16,0,1,0,16-16A16,16,0,0,0,384,240Zm-16-48a16,16,0,1,0,16,16A16,16,0,0,0,368,192Zm96,32a16,16,0,1,0,16,16A16,16,0,0,0,464,224Zm32-32a16,16,0,1,0,16,16A16,16,0,0,0,496,192Zm-64,64a16,16,0,1,0,16,16A16,16,0,0,0,432,256Zm-32,32a16,16,0,1,0,16,16A16,16,0,0,0,400,288Zm-64,64a16,16,0,1,0,16,16A16,16,0,0,0,336,352Zm-32,32a16,16,0,1,0,16,16A16,16,0,0,0,304,384Zm64-64a16,16,0,1,0,16,16A16,16,0,0,0,368,320Zm21.65-218.35-11.3-11.31a16,16,0,0,0-22.63,0L350.05,96A111.19,111.19,0,0,0,272,64c-19.24,0-37.08,5.3-52.9,13.85l-10-10A121.72,121.72,0,0,0,123.44,32C55.49,31.5,0,92.91,0,160.85V464a16,16,0,0,0,16,16H48a16,16,0,0,0,16-16V158.4c0-30.15,21-58.2,51-61.93a58.38,58.38,0,0,1,48.93,16.67l10,10C165.3,138.92,160,156.76,160,176a111.23,111.23,0,0,0,32,78.05l-5.66,5.67a16,16,0,0,0,0,22.62l11.3,11.31a16,16,0,0,0,22.63,0L389.65,124.28A16,16,0,0,0,389.65,101.65Z"/></svg>
</span>
2 bath
</li>
<li class="list-inline-item">
<i class="bi-rulers text-muted me-1"></i> 1,428 sqft
</li>
</ul>
</a>
<!-- End Body -->
</div>
<!-- End Card -->
</div>
<!-- End Col -->
<div class="col mb-3">
<!-- Card -->
<div class="card card-flush shadow-none h-100">
<a class="card-pinned" href="../assets/img/1920x1080/img12.jpg" data-fslightbox="propertyGridGallery2">
<img class="card-img" src="../assets/img/480x320/img19.jpg" alt="Image Description">
<div class="card-pinned-bottom-end">
<span class="btn btn-light btn-xs btn-icon">
<i class="bi-images"></i>
</span>
</div>
</a>
<a class="d-none" href="../assets/img/1920x1080/img11.jpg" data-fslightbox="propertyGridGallery2"></a>
<a class="d-none" href="../assets/img/1920x1080/img14.jpg" data-fslightbox="propertyGridGallery2"></a>
<!-- Body -->
<a class="card-body" href="../demo-real-estate/property-overview.html">
<span class="card-subtitle text-body">For sale</span>
<div class="row align-items-center mb-3">
<div class="col">
<h4 class="card-title text-inherit">The Drive, Ilford</h4>
</div>
<!-- End Col -->
<div class="col-auto">
<h3 class="card-title text-primary">£999,000</h3>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
<ul class="list-inline list-separator text-body small">
<li class="list-inline-item">
<span class="svg-icon svg-icon-xs svg-inline text-muted me-1">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24"><path d="M22,19.5a.5.5,0,0,1-.5.5h-1a.5.5,0,0,1-.5-.5V16H4v3.5a.5.5,0,0,1-.5.5h-1a.5.5,0,0,1-.5-.5V4.5A.5.5,0,0,1,2.5,4h1a.5.5,0,0,1,.5.5V13H21a1,1,0,0,1,1,1ZM20,8H12a2,2,0,0,0-2,2v1.5a.5.5,0,0,0,.5.5h11a.5.5,0,0,0,.5-.5V10A2,2,0,0,0,20,8ZM5.5,12h3a.5.5,0,0,0,.5-.5V11a2,2,0,0,0-4,0v.5A.5.5,0,0,0,5.5,12Z"/></svg>
</span>
2 bed
</li>
<li class="list-inline-item">
<span class="svg-icon svg-icon-xs svg-inline text-muted me-1">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 512 512"><path d="M304,320a16,16,0,1,0,16,16A16,16,0,0,0,304,320Zm32-96a16,16,0,1,0,16,16A16,16,0,0,0,336,224Zm32,64a16,16,0,1,0-16-16A16,16,0,0,0,368,288Zm-32,32a16,16,0,1,0-16-16A16,16,0,0,0,336,320Zm-32-64a16,16,0,1,0,16,16A16,16,0,0,0,304,256Zm128-32a16,16,0,1,0-16-16A16,16,0,0,0,432,224Zm-48,16a16,16,0,1,0,16-16A16,16,0,0,0,384,240Zm-16-48a16,16,0,1,0,16,16A16,16,0,0,0,368,192Zm96,32a16,16,0,1,0,16,16A16,16,0,0,0,464,224Zm32-32a16,16,0,1,0,16,16A16,16,0,0,0,496,192Zm-64,64a16,16,0,1,0,16,16A16,16,0,0,0,432,256Zm-32,32a16,16,0,1,0,16,16A16,16,0,0,0,400,288Zm-64,64a16,16,0,1,0,16,16A16,16,0,0,0,336,352Zm-32,32a16,16,0,1,0,16,16A16,16,0,0,0,304,384Zm64-64a16,16,0,1,0,16,16A16,16,0,0,0,368,320Zm21.65-218.35-11.3-11.31a16,16,0,0,0-22.63,0L350.05,96A111.19,111.19,0,0,0,272,64c-19.24,0-37.08,5.3-52.9,13.85l-10-10A121.72,121.72,0,0,0,123.44,32C55.49,31.5,0,92.91,0,160.85V464a16,16,0,0,0,16,16H48a16,16,0,0,0,16-16V158.4c0-30.15,21-58.2,51-61.93a58.38,58.38,0,0,1,48.93,16.67l10,10C165.3,138.92,160,156.76,160,176a111.23,111.23,0,0,0,32,78.05l-5.66,5.67a16,16,0,0,0,0,22.62l11.3,11.31a16,16,0,0,0,22.63,0L389.65,124.28A16,16,0,0,0,389.65,101.65Z"/></svg>
</span>
1 bath
</li>
<li class="list-inline-item">
<i class="bi-rulers text-muted me-1"></i> 2,123 sqft
</li>
</ul>
</a>
<!-- End Body -->
</div>
<!-- End Card -->
</div>
<div class="col mb-3">
<!-- Card -->
<div class="card card-flush shadow-none h-100">
<a class="card-pinned" href="../assets/img/1920x1080/img26.jpg" data-fslightbox="propertyGridGallery3">
<img class="card-img" src="../assets/img/480x320/img20.jpg" alt="Image Description">
<div class="card-pinned-bottom-end">
<span class="btn btn-light btn-xs btn-icon">
<i class="bi-images"></i>
</span>
</div>
</a>
<a class="d-none" href="../assets/img/1920x1080/img18.jpg" data-fslightbox="propertyGridGallery3"></a>
<a class="d-none" href="../assets/img/1920x1080/img15.jpg" data-fslightbox="propertyGridGallery3"></a>
<!-- Body -->
<a class="card-body" href="../demo-real-estate/property-overview.html">
<span class="card-subtitle text-body">For sale</span>
<div class="row align-items-center mb-3">
<div class="col">
<h4 class="card-title text-inherit">Alderney House, Enfield</h4>
</div>
<!-- End Col -->
<div class="col-auto">
<h3 class="card-title text-primary">£725,000</h3>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
<ul class="list-inline list-separator text-body small">
<li class="list-inline-item">
<span class="svg-icon svg-icon-xs svg-inline text-muted me-1">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24"><path d="M22,19.5a.5.5,0,0,1-.5.5h-1a.5.5,0,0,1-.5-.5V16H4v3.5a.5.5,0,0,1-.5.5h-1a.5.5,0,0,1-.5-.5V4.5A.5.5,0,0,1,2.5,4h1a.5.5,0,0,1,.5.5V13H21a1,1,0,0,1,1,1ZM20,8H12a2,2,0,0,0-2,2v1.5a.5.5,0,0,0,.5.5h11a.5.5,0,0,0,.5-.5V10A2,2,0,0,0,20,8ZM5.5,12h3a.5.5,0,0,0,.5-.5V11a2,2,0,0,0-4,0v.5A.5.5,0,0,0,5.5,12Z"/></svg>
</span>
1 bed
</li>
<li class="list-inline-item">
<span class="svg-icon svg-icon-xs svg-inline text-muted me-1">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 512 512"><path d="M304,320a16,16,0,1,0,16,16A16,16,0,0,0,304,320Zm32-96a16,16,0,1,0,16,16A16,16,0,0,0,336,224Zm32,64a16,16,0,1,0-16-16A16,16,0,0,0,368,288Zm-32,32a16,16,0,1,0-16-16A16,16,0,0,0,336,320Zm-32-64a16,16,0,1,0,16,16A16,16,0,0,0,304,256Zm128-32a16,16,0,1,0-16-16A16,16,0,0,0,432,224Zm-48,16a16,16,0,1,0,16-16A16,16,0,0,0,384,240Zm-16-48a16,16,0,1,0,16,16A16,16,0,0,0,368,192Zm96,32a16,16,0,1,0,16,16A16,16,0,0,0,464,224Zm32-32a16,16,0,1,0,16,16A16,16,0,0,0,496,192Zm-64,64a16,16,0,1,0,16,16A16,16,0,0,0,432,256Zm-32,32a16,16,0,1,0,16,16A16,16,0,0,0,400,288Zm-64,64a16,16,0,1,0,16,16A16,16,0,0,0,336,352Zm-32,32a16,16,0,1,0,16,16A16,16,0,0,0,304,384Zm64-64a16,16,0,1,0,16,16A16,16,0,0,0,368,320Zm21.65-218.35-11.3-11.31a16,16,0,0,0-22.63,0L350.05,96A111.19,111.19,0,0,0,272,64c-19.24,0-37.08,5.3-52.9,13.85l-10-10A121.72,121.72,0,0,0,123.44,32C55.49,31.5,0,92.91,0,160.85V464a16,16,0,0,0,16,16H48a16,16,0,0,0,16-16V158.4c0-30.15,21-58.2,51-61.93a58.38,58.38,0,0,1,48.93,16.67l10,10C165.3,138.92,160,156.76,160,176a111.23,111.23,0,0,0,32,78.05l-5.66,5.67a16,16,0,0,0,0,22.62l11.3,11.31a16,16,0,0,0,22.63,0L389.65,124.28A16,16,0,0,0,389.65,101.65Z"/></svg>
</span>
1 bath
</li>
<li class="list-inline-item">
<i class="bi-rulers text-muted me-1"></i> 1,791 sqft
</li>
</ul>
</a>
<!-- End Body -->
</div>
<!-- End Card -->
</div>
</div>
<!-- End Row -->
</div>
<!-- End Card Grid -->
<script src="../node_modules/fslightbox/index.js"></script>
Component #4
Browse properties by city in the UK
Take a deep dive and browse original neighborhood photos, drone footage, resident reviews and local insights to see if the homes for sale are right for you.
<!-- Card Grid -->
<div class="container content-space-2 content-space-lg-3">
<!-- Title -->
<div class="w-md-75 w-lg-50 text-center mx-md-auto mb-5 mb-md-9">
<h2>Browse properties by city in the UK</h2>
<p>Take a deep dive and browse original neighborhood photos, drone footage, resident reviews and local insights to see if the homes for sale are right for you.</p>
</div>
<!-- End Title -->
<div class="text-center">
<!-- Nav -->
<ul class="nav nav-segment mb-7" id="featuresTab" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link active" href="#forSale" id="forSale-tab" data-bs-toggle="tab" data-bs-target="#forSale" role="tab" aria-controls="forSale" aria-selected="true">For sale</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" href="#forRent" id="forRent-tab" data-bs-toggle="tab" data-bs-target="#forRent" role="tab" aria-controls="forRent" aria-selected="false">For rent</a>
</li>
</ul>
<!-- End Nav -->
</div>
<!-- Tab Content -->
<div class="tab-content" id="houseHeroTabContent">
<div class="tab-pane fade show active" id="forSale" role="tabpanel" aria-labelledby="forSale-tab">
<div class="row gx-3">
<div class="col-sm-6 col-lg-4 mb-3">
<!-- Card -->
<a class="card card-stretched-vertical card-transition shadow-none bg-img-start gradient-y-overlay-lg-dark" href="../demo-real-estate/property-grid.html" style="background-image: url(../assets/img/480x320/img28.jpg); min-height: 15rem;">
<div class="card-body">
<div class="mb-1">
<span class="badge bg-light text-dark">3521 offers</span>
</div>
<div class="card-footer">
<h3 class="text-white mb-0">London</h3>
<span class="d-block text-white">Prices from £5,490,000</span>
</div>
</div>
</a>
<!-- End Card -->
</div>
<!-- End Col -->
<div class="col-sm-6 col-lg-4 mb-3">
<!-- Card -->
<a class="card card-stretched-vertical card-transition shadow-none bg-img-start gradient-y-overlay-lg-dark" href="../demo-real-estate/property-grid.html" style="background-image: url(../assets/img/480x320/img29.jpg); min-height: 15rem;">
<div class="card-body">
<div class="mb-1">
<span class="badge bg-light text-dark">4659 offers</span>
</div>
<div class="card-footer">
<h3 class="text-white mb-0">Oxford</h3>
<span class="d-block text-white">Prices from £3,820,000</span>
</div>
</div>
</a>
<!-- End Card -->
</div>
<!-- End Col -->
<div class="col-sm-6 col-lg-4 mb-3">
<!-- Card -->
<a class="card card-stretched-vertical card-transition shadow-none bg-img-start gradient-y-overlay-lg-dark" href="../demo-real-estate/property-grid.html" style="background-image: url(../assets/img/480x320/img11.jpg); min-height: 15rem;">
<div class="card-body">
<div class="mb-1">
<span class="badge bg-light text-dark">2471 offers</span>
</div>
<div class="card-footer">
<h3 class="text-white mb-0">Edinburgh</h3>
<span class="d-block text-white">Prices from £3,371,000</span>
</div>
</div>
</a>
<!-- End Card -->
</div>
<!-- End Col -->
<div class="col-sm-6 col-lg-4 mb-3">
<!-- Card -->
<a class="card card-stretched-vertical card-transition shadow-none bg-img-start gradient-y-overlay-lg-dark" href="../demo-real-estate/property-grid.html" style="background-image: url(../assets/img/480x320/img10.jpg); min-height: 15rem;">
<div class="card-body">
<div class="mb-1">
<span class="badge bg-light text-dark">5523 offers</span>
</div>
<div class="card-footer">
<h3 class="text-white mb-0">Newcastle</h3>
<span class="d-block text-white">Prices from £2,588,000</span>
</div>
</div>
</a>
<!-- End Card -->
</div>
<!-- End Col -->
<div class="col-sm-6 col-lg-4 mb-3">
<!-- Card -->
<a class="card card-stretched-vertical card-transition shadow-none bg-img-start gradient-y-overlay-lg-dark" href="../demo-real-estate/property-grid.html" style="background-image: url(../assets/img/480x320/img9.jpg); min-height: 15rem;">
<div class="card-body">
<div class="mb-1">
<span class="badge bg-light text-dark">939 offers</span>
</div>
<div class="card-footer">
<h3 class="text-white mb-0">Liverpool</h3>
<span class="d-block text-white">Prices from £1,318,000</span>
</div>
</div>
</a>
<!-- End Card -->
</div>
<!-- End Col -->
<div class="col-sm-6 col-lg-4 mb-3">
<!-- Card -->
<a class="card card-stretched-vertical card-transition shadow-none bg-img-start gradient-y-overlay-lg-dark" href="../demo-real-estate/property-grid.html" style="background-image: url(../assets/img/480x320/img8.jpg); min-height: 15rem;">
<div class="card-body">
<div class="mb-1">
<span class="badge bg-light text-dark">364 offers</span>
</div>
<div class="card-footer">
<h3 class="text-white mb-0">Bristol</h3>
<span class="d-block text-white">Prices from £1,457,000</span>
</div>
</div>
</a>
<!-- End Card -->
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
<div class="tab-pane fade" id="forRent" role="tabpanel" aria-labelledby="forRent-tab">
<div class="row gx-3">
<div class="col-sm-6 col-lg-4 mb-3">
<!-- Card -->
<a class="card card-stretched-vertical card-transition shadow-none bg-img-start gradient-y-overlay-lg-dark" href="../demo-real-estate/property-grid.html" style="background-image: url(../assets/img/480x320/img11.jpg); min-height: 15rem;">
<div class="card-body">
<div class="mb-1">
<span class="badge bg-light text-dark">2471 offers</span>
</div>
<div class="card-footer">
<h3 class="text-white mb-0">Edinburgh</h3>
<span class="d-block text-white">Prices from £1,000</span>
</div>
</div>
</a>
<!-- End Card -->
</div>
<!-- End Col -->
<div class="col-sm-6 col-lg-4 mb-3">
<!-- Card -->
<a class="card card-stretched-vertical card-transition shadow-none bg-img-start gradient-y-overlay-lg-dark" href="../demo-real-estate/property-grid.html" style="background-image: url(../assets/img/480x320/img28.jpg); min-height: 15rem;">
<div class="card-body">
<div class="mb-1">
<span class="badge bg-light text-dark">3521 offers</span>
</div>
<div class="card-footer">
<h3 class="text-white mb-0">London</h3>
<span class="d-block text-white">Prices from £5,000</span>
</div>
</div>
</a>
<!-- End Card -->
</div>
<!-- End Col -->
<div class="col-sm-6 col-lg-4 mb-3">
<!-- Card -->
<a class="card card-stretched-vertical card-transition shadow-none bg-img-start gradient-y-overlay-lg-dark" href="../demo-real-estate/property-grid.html" style="background-image: url(../assets/img/480x320/img29.jpg); min-height: 15rem;">
<div class="card-body">
<div class="mb-1">
<span class="badge bg-light text-dark">4659 offers</span>
</div>
<div class="card-footer">
<h3 class="text-white mb-0">Oxford</h3>
<span class="d-block text-white">Prices from £7,000</span>
</div>
</div>
</a>
<!-- End Card -->
</div>
<!-- End Col -->
<div class="col-sm-6 col-lg-4 mb-3">
<!-- Card -->
<a class="card card-stretched-vertical card-transition shadow-none bg-img-start gradient-y-overlay-lg-dark" href="../demo-real-estate/property-grid.html" style="background-image: url(../assets/img/480x320/img9.jpg); min-height: 15rem;">
<div class="card-body">
<div class="mb-1">
<span class="badge bg-light text-dark">939 offers</span>
</div>
<div class="card-footer">
<h3 class="text-white mb-0">Liverpool</h3>
<span class="d-block text-white">Prices from £8,000</span>
</div>
</div>
</a>
<!-- End Card -->
</div>
<!-- End Col -->
<div class="col-sm-6 col-lg-4 mb-3">
<!-- Card -->
<a class="card card-stretched-vertical card-transition shadow-none bg-img-start gradient-y-overlay-lg-dark" href="../demo-real-estate/property-grid.html" style="background-image: url(../assets/img/480x320/img8.jpg); min-height: 15rem;">
<div class="card-body">
<div class="mb-1">
<span class="badge bg-light text-dark">364 offers</span>
</div>
<div class="card-footer">
<h3 class="text-white mb-0">Bristol</h3>
<span class="d-block text-white">Prices from £7,000</span>
</div>
</div>
</a>
<!-- End Card -->
</div>
<!-- End Col -->
<div class="col-sm-6 col-lg-4 mb-3">
<!-- Card -->
<a class="card card-stretched-vertical card-transition shadow-none bg-img-start gradient-y-overlay-lg-dark" href="../demo-real-estate/property-grid.html" style="background-image: url(../assets/img/480x320/img10.jpg); min-height: 15rem;">
<div class="card-body">
<div class="mb-1">
<span class="badge bg-light text-dark">5523 offers</span>
</div>
<div class="card-footer">
<h3 class="text-white mb-0">Newcastle</h3>
<span class="d-block text-white">Prices from £5,000</span>
</div>
</div>
</a>
<!-- End Card -->
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
</div>
<!-- End Tab Content -->
</div>
<!-- End Card Grid -->
Component #5
Explore Startups
Find a job you love. Set your career interests.
<!-- Card Grid -->
<div class="container content-space-2 content-space-lg-3">
<!-- Heading -->
<div class="w-md-75 w-lg-50 text-center mx-md-auto mb-7">
<h2>Explore Startups</h2>
<p>Find a job you love. <a class="link" href="#">Set your career interests.</a></p>
</div>
<!-- End Heading -->
<div class="row row-cols-1 row-cols-sm-2 1 row-cols-md-3 row-cols-lg-4 mb-5">
<div class="col mb-3 mb-sm-4">
<!-- Card -->
<a class="card card-sm card-bordered card-transition h-100" href="../demo-jobs/job-overview.html">
<div class="card-body">
<div class="row align-items-center">
<div class="col">
<h5 class="card-title text-inherit">Management</h5>
<p class="card-text text-body small">4 job positions</p>
</div>
<!-- End Col -->
<div class="col-auto">
<span class="text-muted">
<i class="bi-chevron-right small"></i>
</span>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
</a>
<!-- End Card -->
</div>
<!-- End Col -->
<div class="col mb-3 mb-sm-4">
<!-- Card -->
<a class="card card-sm card-bordered card-transition h-100" href="../demo-jobs/job-overview.html">
<div class="card-body">
<div class="row align-items-center">
<div class="col">
<h5 class="card-title text-inherit">App Development</h5>
<p class="card-text text-body small">26 job positions</p>
</div>
<!-- End Col -->
<div class="col-auto">
<span class="text-muted">
<i class="bi-chevron-right small"></i>
</span>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
</a>
<!-- End Card -->
</div>
<!-- End Col -->
<div class="col mb-3 mb-sm-4">
<!-- Card -->
<a class="card card-sm card-bordered card-transition h-100" href="../demo-jobs/job-overview.html">
<div class="card-body">
<div class="row align-items-center">
<div class="col">
<h5 class="card-title text-inherit">Arts & Entertainment</h5>
<p class="card-text text-body small">9 job positions</p>
</div>
<!-- End Col -->
<div class="col-auto">
<span class="text-muted">
<i class="bi-chevron-right small"></i>
</span>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
</a>
<!-- End Card -->
</div>
<!-- End Col -->
<div class="col mb-3 mb-sm-4">
<!-- Card -->
<a class="card card-sm card-bordered card-transition h-100" href="../demo-jobs/job-overview.html">
<div class="card-body">
<div class="row align-items-center">
<div class="col">
<h5 class="card-title text-inherit">Accounting</h5>
<p class="card-text text-body small">11 job positions</p>
</div>
<!-- End Col -->
<div class="col-auto">
<span class="text-muted">
<i class="bi-chevron-right small"></i>
</span>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
</a>
<!-- End Card -->
</div>
<!-- End Col -->
<div class="col mb-3 mb-sm-4">
<!-- Card -->
<a class="card card-sm card-bordered card-transition h-100" href="../demo-jobs/job-overview.html">
<div class="card-body">
<div class="row align-items-center">
<div class="col">
<h5 class="card-title text-inherit">UI Designer</h5>
<p class="card-text text-body small">37 job positions</p>
</div>
<!-- End Col -->
<div class="col-auto">
<span class="text-muted">
<i class="bi-chevron-right small"></i>
</span>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
</a>
<!-- End Card -->
</div>
<!-- End Col -->
<div class="col mb-3 mb-sm-4">
<!-- Card -->
<a class="card card-sm card-bordered card-transition h-100" href="../demo-jobs/job-overview.html">
<div class="card-body">
<div class="row align-items-center">
<div class="col">
<h5 class="card-title text-inherit">Apps</h5>
<p class="card-text text-body small">2 job positions</p>
</div>
<!-- End Col -->
<div class="col-auto">
<span class="text-muted">
<i class="bi-chevron-right small"></i>
</span>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
</a>
<!-- End Card -->
</div>
<!-- End Col -->
<div class="col mb-3 mb-sm-4">
<!-- Card -->
<a class="card card-sm card-bordered card-transition h-100" href="../demo-jobs/job-overview.html">
<div class="card-body">
<div class="row align-items-center">
<div class="col">
<h5 class="card-title text-inherit">Content Writer</h5>
<p class="card-text text-body small">10 job positions</p>
</div>
<!-- End Col -->
<div class="col-auto">
<span class="text-muted">
<i class="bi-chevron-right small"></i>
</span>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
</a>
<!-- End Card -->
</div>
<!-- End Col -->
<div class="col mb-3 mb-sm-4">
<!-- Card -->
<a class="card card-sm card-bordered card-transition h-100" href="../demo-jobs/job-overview.html">
<div class="card-body">
<div class="row align-items-center">
<div class="col">
<h5 class="card-title text-inherit">Analytics</h5>
<p class="card-text text-body small">14 job positions</p>
</div>
<!-- End Col -->
<div class="col-auto">
<span class="text-muted">
<i class="bi-chevron-right small"></i>
</span>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
</a>
<!-- End Card -->
</div>
<!-- End Col -->
</div>
<!-- End Row -->
<div class="text-center">
<a class="btn btn-outline-primary" href="../demo-jobs/job-list.html">View all startups <i class="bi-chevron-right small ms-1"></i></a>
</div>
</div>
<!-- End Card Grid -->
Component #6
- Posted 7 hours ago
- Oxford
- Full time
- Posted 21 hours ago
- Newcastle
- Part time
- Posted 1 day ago
- London
- Full time
- Posted 1 day ago
- Liverpool
- Full time
<div class="row row-cols-1 row-cols-sm-2">
<div class="col mb-5">
<!-- Card -->
<div class="card card-bordered h-100">
<!-- Card Body -->
<div class="card-body">
<div class="row mb-3">
<div class="col">
<!-- Media -->
<div class="d-flex align-items-center">
<div class="flex-shrink-0">
<img class="avatar avatar-sm avatar-4x3" src="../assets/svg/brands/mailchimp-icon.svg" alt="Image Description">
</div>
<div class="flex-grow-1 ms-3">
<h6 class="card-title">
<a class="text-dark" href="../demo-jobs/employer.html">Mailchimp</a>
<img class="avatar avatar-xss ms-1" src="../assets/svg/illustrations/top-vendor.svg" alt="Review rating" data-toggle="tooltip" data-placement="top" title="Claimed profile">
</h6>
</div>
</div>
<!-- End Media -->
</div>
<!-- End Col -->
<div class="col-auto">
<!-- Checkbbox Bookmark -->
<div class="form-check form-check-bookmark">
<input class="form-check-input" type="checkbox" value="" id="jobsCardBookmarkCheck1">
<label class="form-check-label" for="jobsCardBookmarkCheck1">
<span class="form-check-bookmark-default" data-bs-toggle="tooltip" data-bs-placement="top" title="Save this job">
<i class="bi-star"></i>
</span>
<span class="form-check-bookmark-active" data-bs-toggle="tooltip" data-bs-placement="top" title="Saved">
<i class="bi-star-fill"></i>
</span>
</label>
</div>
<!-- End Checkbbox Bookmark -->
</div>
<!-- End Col -->
</div>
<!-- End Row -->
<h3 class="card-title">
<a class="text-dark" href="../demo-jobs/employer.html">Senior B2B sales consultant</a>
</h3>
<span class="d-block small text-body mb-1">$125k-$135k yearly</span>
<span class="badge bg-soft-info text-info me-2">
<span class="legend-indicator bg-info"></span>Remote
</span>
</div>
<!-- End Card Body -->
<!-- Card Footer -->
<div class="card-footer pt-0">
<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>
<!-- End Card Footer -->
</div>
<!-- End Card -->
</div>
<!-- End Col -->
<div class="col mb-5">
<!-- Card -->
<div class="card card-bordered h-100">
<!-- Card Body -->
<div class="card-body">
<div class="row mb-3">
<div class="col">
<!-- Media -->
<div class="d-flex align-items-center">
<div class="flex-shrink-0">
<img class="avatar avatar-sm avatar-4x3" src="../assets/svg/brands/capsule-icon.svg" alt="Image Description">
</div>
<div class="flex-grow-1 ms-3">
<h6 class="card-title">
<a class="text-dark" href="../demo-jobs/employer.html">Capsule</a>
</h6>
</div>
</div>
<!-- End Media -->
</div>
<!-- End Col -->
<div class="col-auto">
<!-- Checkbbox Bookmark -->
<div class="form-check form-check-bookmark">
<input class="form-check-input" type="checkbox" value="" id="jobsCardBookmarkCheck2">
<label class="form-check-label" for="jobsCardBookmarkCheck2">
<span class="form-check-bookmark-default" data-bs-toggle="tooltip" data-bs-placement="top" title="Save this job">
<i class="bi-star"></i>
</span>
<span class="form-check-bookmark-active" data-bs-toggle="tooltip" data-bs-placement="top" title="Saved">
<i class="bi-star-fill"></i>
</span>
</label>
</div>
<!-- End Checkbbox Bookmark -->
</div>
<!-- End Col -->
</div>
<!-- End Row -->
<h3 class="card-title">
<a class="text-dark" href="../demo-jobs/employer.html">Office assistant/Social media assistant</a>
</h3>
<span class="d-block small text-body mb-1">$50-$135 hourly</span>
</div>
<!-- End Card Body -->
<!-- Card Footer -->
<div class="card-footer pt-0">
<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>
<!-- End Card Footer -->
</div>
<!-- End Card -->
</div>
<!-- End Col -->
<div class="col mb-5">
<!-- Card -->
<div class="card card-bordered h-100">
<!-- Card Body -->
<div class="card-body">
<div class="row mb-3">
<div class="col">
<!-- Media -->
<div class="d-flex align-items-center">
<div class="flex-shrink-0">
<img class="avatar avatar-sm avatar-4x3" src="../assets/svg/brands/dropbox-icon.svg" alt="Image Description">
</div>
<div class="flex-grow-1 ms-3">
<h6 class="card-title">
<a class="text-dark" href="../demo-jobs/employer.html">Dropbox</a>
</h6>
</div>
</div>
<!-- End Media -->
</div>
<!-- End Col -->
<div class="col-auto">
<!-- Checkbbox Bookmark -->
<div class="form-check form-check-bookmark">
<input class="form-check-input" type="checkbox" value="" id="jobsCardBookmarkCheck3">
<label class="form-check-label" for="jobsCardBookmarkCheck3">
<span class="form-check-bookmark-default" data-bs-toggle="tooltip" data-bs-placement="top" title="Save this job">
<i class="bi-star"></i>
</span>
<span class="form-check-bookmark-active" data-bs-toggle="tooltip" data-bs-placement="top" title="Saved">
<i class="bi-star-fill"></i>
</span>
</label>
</div>
<!-- End Checkbbox Bookmark -->
</div>
<!-- End Col -->
</div>
<!-- End Row -->
<h3 class="card-title">
<a class="text-dark" href="../demo-jobs/employer.html">Marketing and Communications Manager</a>
</h3>
<span class="d-block small text-body mb-1">$5k monthly</span>
</div>
<!-- End Card Body -->
<!-- Card Footer -->
<div class="card-footer pt-0">
<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>
<!-- End Card Footer -->
</div>
<!-- End Card -->
</div>
<!-- End Col -->
<div class="col mb-5">
<!-- Card -->
<div class="card card-bordered h-100">
<!-- Card Body -->
<div class="card-body">
<div class="row mb-3">
<div class="col">
<!-- Media -->
<div class="d-flex align-items-center">
<div class="flex-shrink-0">
<img class="avatar avatar-sm avatar-4x3" src="../assets/svg/brands/prosperops-icon.svg" alt="Image Description">
</div>
<div class="flex-grow-1 ms-3">
<h6 class="card-title">
<a class="text-dark" href="../demo-jobs/employer.html">Prosperops</a>
</h6>
</div>
</div>
<!-- End Media -->
</div>
<!-- End Col -->
<div class="col-auto">
<!-- Checkbbox Bookmark -->
<div class="form-check form-check-bookmark">
<input class="form-check-input" type="checkbox" value="" id="jobsCardBookmarkCheck4">
<label class="form-check-label" for="jobsCardBookmarkCheck4">
<span class="form-check-bookmark-default" data-bs-toggle="tooltip" data-bs-placement="top" title="Save this job">
<i class="bi-star"></i>
</span>
<span class="form-check-bookmark-active" data-bs-toggle="tooltip" data-bs-placement="top" title="Saved">
<i class="bi-star-fill"></i>
</span>
</label>
</div>
<!-- End Checkbbox Bookmark -->
</div>
<!-- End Col -->
</div>
<!-- End Row -->
<h3 class="card-title">
<a class="text-dark" href="../demo-jobs/employer.html">Senior backend developer</a>
</h3>
<span class="d-block small text-body mb-1">$75k-$85k yearly</span>
<span class="badge bg-soft-info text-info me-2">
<span class="legend-indicator bg-info"></span>Remote
</span>
</div>
<!-- End Card Body -->
<!-- Card Footer -->
<div class="card-footer pt-0">
<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>
<!-- End Card Footer -->
</div>
<!-- End Card -->
</div>
<!-- End Col -->
</div>
<!-- End Row -->
Component #7
Jobs
We were not able to detect your location. You can browse through all 105 jobs Capsule has to offer.
- Posted 7 hours ago
- Oxford
- Full time
Office assistant/Social media assistant
$50-$135 hourly- Posted 21 hours ago
- Newcastle
- Part time
Marketing and Communications Manager
$5k monthly- Posted 1 day ago
- London
- Full time
- Posted 1 day ago
- Liverpool
- Full time
Senior product manager
$76k-$98k yearly- Posted 2 days ago
- London
- Full time
- Posted 3 days ago
- Manchester
- Part time
<!-- Card Grid -->
<div id="jobs-section" class="container">
<div class="mb-4">
<h3>Jobs</h3>
<p>We were not able to detect your location. You can browse through all 105 jobs Capsule has to offer.</p>
</div>
<!-- Swiper Slider -->
<div class="js-swiper-employer-jobs swiper swiper-equal-height">
<div class="swiper-wrapper">
<!-- Slide -->
<div class="swiper-slide">
<!-- Card -->
<div class="card card-bordered shadow-none w-100">
<!-- Card Body -->
<div class="card-body">
<h3 class="card-title">
<a class="text-dark" href="../demo-jobs/employer.html">Senior B2B sales consultant</a>
</h3>
<span class="d-block small text-body mb-1">$125k-$135k yearly</span>
<span class="badge bg-soft-info text-info me-2">
<span class="legend-indicator bg-info"></span>Remote
</span>
</div>
<!-- End Card Body -->
<!-- Card Footer -->
<div class="card-footer pt-0">
<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>
<!-- End Card Footer -->
</div>
<!-- End Card -->
</div>
<!-- End Slide -->
<!-- Slide -->
<div class="swiper-slide">
<!-- Card -->
<div class="card card-bordered shadow-none w-100">
<!-- Card Body -->
<div class="card-body">
<h3 class="card-title">
<a class="text-dark" href="../demo-jobs/employer.html">Office assistant/Social media assistant</a>
</h3>
<span class="d-block small text-body mb-1">$50-$135 hourly</span>
</div>
<!-- End Card Body -->
<!-- Card Footer -->
<div class="card-footer pt-0">
<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>
<!-- End Card Footer -->
</div>
<!-- End Card -->
</div>
<!-- End Slide -->
<!-- Slide -->
<div class="swiper-slide">
<!-- Card -->
<div class="card card-bordered shadow-none w-100">
<!-- Card Body -->
<div class="card-body">
<h3 class="card-title">
<a class="text-dark" href="../demo-jobs/employer.html">Marketing and Communications Manager</a>
</h3>
<span class="d-block small text-body mb-1">$5k monthly</span>
</div>
<!-- End Card Body -->
<!-- Card Footer -->
<div class="card-footer pt-0">
<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>
<!-- End Card Footer -->
</div>
<!-- End Card -->
</div>
<!-- End Slide -->
<!-- Slide -->
<div class="swiper-slide">
<!-- Card -->
<div class="card card-bordered shadow-none w-100">
<!-- Card Body -->
<div class="card-body">
<h3 class="card-title">
<a class="text-dark" href="../demo-jobs/employer.html">Senior backend developer</a>
</h3>
<span class="d-block small text-body mb-1">$75k-$85k yearly</span>
<span class="badge bg-soft-info text-info me-2">
<span class="legend-indicator bg-info"></span>Remote
</span>
</div>
<!-- End Card Body -->
<!-- Card Footer -->
<div class="card-footer pt-0">
<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>
<!-- End Card Footer -->
</div>
<!-- End Card -->
</div>
<!-- End Slide -->
<!-- Slide -->
<div class="swiper-slide">
<!-- Card -->
<div class="card card-bordered shadow-none w-100">
<!-- Card Body -->
<div class="card-body">
<h3 class="card-title">
<a class="text-dark" href="../demo-jobs/employer.html">Senior product manager</a>
</h3>
<span class="d-block small text-body mb-1">$76k-$98k yearly</span>
</div>
<!-- End Card Body -->
<!-- Card Footer -->
<div class="card-footer pt-0">
<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>
<!-- End Card Footer -->
</div>
<!-- End Card -->
</div>
<!-- End Slide -->
<!-- Slide -->
<div class="swiper-slide">
<!-- Card -->
<div class="card card-bordered shadow-none w-100">
<!-- Card Body -->
<div class="card-body">
<h3 class="card-title">
<a class="text-dark" href="../demo-jobs/employer.html">iOS Engineer</a>
</h3>
<span class="d-block small text-body mb-1">$500-$1000 weekly</span>
<span class="badge bg-soft-info text-info me-2">
<span class="legend-indicator bg-info"></span>Remote
</span>
</div>
<!-- End Card Body -->
<!-- Card Footer -->
<div class="card-footer pt-0">
<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>
<!-- End Card Footer -->
</div>
<!-- End Card -->
</div>
<!-- End Slide -->
</div>
<!-- Arrows -->
<div class="js-swiper-employer-jobs-button-next swiper-button-next"></div>
<div class="js-swiper-employer-jobs-button-prev swiper-button-prev"></div>
</div>
<!-- End Swiper Slider -->
</div>
<!-- Card Grid -->
<link rel="stylesheet" href="../node_modules/swiper/swiper-bundle.min.css">
<!-- JS Implementing Plugins -->
<script src="../node_modules/swiper/swiper-bundle.min.js"></script>
<!-- JS Plugins Init. -->
<script>
(function() {
// INITIALIZATION OF SWIPER
// =======================================================
var swiper = new Swiper('.js-swiper-employer-jobs',{
slidesPerView: 1,
navigation: {
nextEl: '.js-swiper-employer-jobs-button-next',
prevEl: '.js-swiper-employer-jobs-button-prev',
},
breakpoints: {
480: {
slidesPerView: 2,
spaceBetween: 15,
},
768: {
slidesPerView: 3,
spaceBetween: 15,
},
}
});
})()
</script>
Component #8
Interview insights
Insights from 209 Front Job users who have interviewed with Capsule within the last 5 years.
Interview experience:
Favorable
Interview difficulty:
Medium
Interview process length:
About a day or two
Interview process length
About a day or two
43%
About a week
28%
About two weeks
17%
More than one month
6%
About a month
5%
<!-- Card Grid -->
<div id="interview-section" class="container">
<div class="mb-4">
<h3>Interview insights</h3>
<p>Insights from 209 Front Job users who have interviewed with Capsule within the last 5 years.</p>
</div>
<div class="row mb-5">
<div class="col-md mb-3">
<!-- Card -->
<div class="card card-bordered shadow-none h-100">
<div class="card-body">
<p class="card-text">Interview experience:</p>
<h4 class="card-title">Favorable</h4>
</div>
</div>
<!-- End Card -->
</div>
<!-- End Col -->
<div class="col-md mb-3">
<!-- Card -->
<div class="card card-bordered shadow-none h-100">
<div class="card-body">
<p class="card-text">Interview difficulty:</p>
<h4 class="card-title">Medium</h4>
</div>
</div>
<!-- End Card -->
</div>
<!-- End Col -->
<div class="col-md mb-3">
<!-- Card -->
<div class="card card-bordered shadow-none h-100">
<div class="card-body">
<p class="card-text">Interview process length:</p>
<h4 class="card-title">About a day or two</h4>
</div>
</div>
<!-- End Card -->
</div>
<!-- End Col -->
</div>
<!-- End Row -->
<div class="mb-4">
<h4>Interview process length</h4>
</div>
<div class="row row-cols-2 row-cols-sm-3 row-cols-lg-5 gx-3 mb-7">
<div class="col mb-3">
<!-- Card -->
<div class="card card-sm card-bordered shadow-none h-100">
<div class="card-body">
<h6 class="card-title">About a day or two</h6>
</div>
<div class="card-footer pt-0">
<span class="card-subtitle">43%</span>
<div class="progress" style="height: 8px;">
<div class="progress-bar bg-success" role="progressbar" style="width: 43%" aria-valuenow="43" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
<!-- End Card -->
</div>
<!-- End Col -->
<div class="col mb-3">
<!-- Card -->
<div class="card card-sm card-bordered shadow-none h-100">
<div class="card-body">
<h6 class="card-title">About a week</h6>
</div>
<div class="card-footer pt-0">
<span class="card-subtitle">28%</span>
<div class="progress" style="height: 8px;">
<div class="progress-bar bg-success" role="progressbar" style="width: 28%" aria-valuenow="28" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
<!-- End Card -->
</div>
<!-- End Col -->
<div class="col mb-3">
<!-- Card -->
<div class="card card-sm card-bordered shadow-none h-100">
<div class="card-body">
<h6 class="card-title">About two weeks</h6>
</div>
<div class="card-footer pt-0">
<span class="card-subtitle">17%</span>
<div class="progress" style="height: 8px;">
<div class="progress-bar bg-success" role="progressbar" style="width: 17%" aria-valuenow="17" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
<!-- End Card -->
</div>
<!-- End Col -->
<div class="col mb-3">
<!-- Card -->
<div class="card card-sm card-bordered shadow-none h-100">
<div class="card-body">
<h6 class="card-title">More than one month</h6>
</div>
<div class="card-footer pt-0">
<span class="card-subtitle">6%</span>
<div class="progress" style="height: 8px;">
<div class="progress-bar bg-success" role="progressbar" style="width: 6%" aria-valuenow="6" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
<!-- End Card -->
</div>
<!-- End Col -->
<div class="col mb-3">
<!-- Card -->
<div class="card card-sm card-bordered shadow-none h-100">
<div class="card-body">
<h6 class="card-title">About a month</h6>
</div>
<div class="card-footer pt-0">
<span class="card-subtitle">5%</span>
<div class="progress" style="height: 8px;">
<div class="progress-bar bg-success" role="progressbar" style="width: 5%" aria-valuenow="5" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
<!-- End Card -->
</div>
<!-- End Col -->
</div>
<!-- End Row -->
<a class="btn btn-outline-primary" href="#">View all interviews <i class="bi-chevron-right small ms-1"></i></a>
</div>
<!-- Card Grid -->
Component #9
Capsule locations
<!-- Card Grid -->
<div id="locations-section" class="container">
<div class="mb-4">
<h3>Capsule locations</h3>
</div>
<div class="row row-cols-1 row-cols-sm-2 1 row-cols-md-3 row-cols-lg-4">
<div class="col mb-4">
<!-- Card -->
<a class="card card-sm card-bordered card-transition h-100" href="#">
<div class="card-body">
<div class="row align-items-center">
<div class="col">
<div class="d-flex align-items-center">
<div class="flex-shrink-0">
<img class="avatar avatar-sm avatar-circle" src="../assets/img/480x320/img28.jpg" alt="SVG">
</div>
<div class="flex-grow-1 ms-3">
<h5 class="card-title text-inherit">London, UK</h5>
</div>
</div>
</div>
<!-- End Col -->
<div class="col-auto">
<span class="text-muted">
<i class="bi-chevron-right small"></i>
</span>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
</a>
<!-- End Card -->
</div>
<!-- End Col -->
<div class="col mb-4">
<!-- Card -->
<a class="card card-sm card-bordered card-transition h-100" href="#">
<div class="card-body">
<div class="row align-items-center">
<div class="col">
<div class="d-flex align-items-center">
<div class="flex-shrink-0">
<img class="avatar avatar-sm avatar-circle" src="../assets/img/480x320/img8.jpg" alt="SVG">
</div>
<div class="flex-grow-1 ms-3">
<h5 class="card-title text-inherit">Bristol, UK</h5>
</div>
</div>
</div>
<!-- End Col -->
<div class="col-auto">
<span class="text-muted">
<i class="bi-chevron-right small"></i>
</span>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
</a>
<!-- End Card -->
</div>
<!-- End Col -->
<div class="col mb-4">
<!-- Card -->
<a class="card card-sm card-bordered card-transition h-100" href="#">
<div class="card-body">
<div class="row align-items-center">
<div class="col">
<div class="d-flex align-items-center">
<div class="flex-shrink-0">
<img class="avatar avatar-sm avatar-circle" src="../assets/img/480x320/img29.jpg" alt="SVG">
</div>
<div class="flex-grow-1 ms-3">
<h5 class="card-title text-inherit">Oxford, UK</h5>
</div>
</div>
</div>
<!-- End Col -->
<div class="col-auto">
<span class="text-muted">
<i class="bi-chevron-right small"></i>
</span>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
</a>
<!-- End Card -->
</div>
<!-- End Col -->
<div class="col mb-4">
<!-- Card -->
<a class="card card-sm card-bordered card-transition h-100" href="#">
<div class="card-body">
<div class="row align-items-center">
<div class="col">
<div class="d-flex align-items-center">
<div class="flex-shrink-0">
<img class="avatar avatar-sm avatar-circle" src="../assets/img/480x320/img11.jpg" alt="SVG">
</div>
<div class="flex-grow-1 ms-3">
<h5 class="card-title text-inherit">Edinburgh, UK</h5>
</div>
</div>
</div>
<!-- End Col -->
<div class="col-auto">
<span class="text-muted">
<i class="bi-chevron-right small"></i>
</span>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
</a>
<!-- End Card -->
</div>
<!-- End Col -->
<div class="col mb-4">
<!-- Card -->
<a class="card card-sm card-bordered card-transition h-100" href="#">
<div class="card-body">
<div class="row align-items-center">
<div class="col">
<div class="d-flex align-items-center">
<div class="flex-shrink-0">
<img class="avatar avatar-sm avatar-circle" src="../assets/img/480x320/img10.jpg" alt="SVG">
</div>
<div class="flex-grow-1 ms-3">
<h5 class="card-title text-inherit">Newcastle, UK</h5>
</div>
</div>
</div>
<!-- End Col -->
<div class="col-auto">
<span class="text-muted">
<i class="bi-chevron-right small"></i>
</span>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
</a>
<!-- End Card -->
</div>
<!-- End Col -->
<div id="pageHeaderTabEndPoint" class="col mb-3">
<!-- Card -->
<a class="card card-sm card-bordered card-transition h-100" href="#">
<div class="card-body">
<div class="row align-items-center">
<div class="col">
<div class="d-flex align-items-center">
<div class="flex-shrink-0">
<img class="avatar avatar-sm avatar-circle" src="../assets/img/480x320/img9.jpg" alt="SVG">
</div>
<div class="flex-grow-1 ms-3">
<h5 class="card-title text-inherit">Liverpool, UK</h5>
</div>
</div>
</div>
<!-- End Col -->
<div class="col-auto">
<span class="text-muted">
<i class="bi-chevron-right small"></i>
</span>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
</a>
<!-- End Card -->
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
<!-- Card Grid -->
Component #10
<div class="row row-cols-sm-2 row-cols-md-3">
<div class="col mb-4">
<!-- Card -->
<div class="card card-bordered shadow-none text-center h-100">
<div class="card-pinned">
<img class="card-img-top" src="../assets/img/300x180/img3.jpg" alt="Image Description">
<div class="card-pinned-top-start">
<span class="badge bg-success rounded-pill">New arrival</span>
</div>
<div class="card-pinned-top-end">
<button type="button" class="btn btn-outline-secondary btn-xs btn-icon rounded-circle" data-bs-toggle="tooltip" data-bs-placement="top" title="Save for later">
<i class="bi-heart"></i>
</button>
</div>
</div>
<div class="card-body">
<div class="mb-2">
<a class="link-sm link-secondary" href="#">Accessories</a>
</div>
<h4 class="card-title">
<a class="text-dark" href="../demo-shop/product-overview.html">Herschel backpack in dark blue</a>
</h4>
<p class="card-text text-dark">$56.99</p>
</div>
<div class="card-footer pt-0">
<!-- Rating -->
<a class="d-inline-flex align-items-center mb-3" href="#">
<div class="d-flex gap-1 me-2">
<img src="../assets/svg/illustrations/star-muted.svg" alt="Review rating" width="16">
<img src="../assets/svg/illustrations/star-muted.svg" alt="Review rating" width="16">
<img src="../assets/svg/illustrations/star-muted.svg" alt="Review rating" width="16">
<img src="../assets/svg/illustrations/star-muted.svg" alt="Review rating" width="16">
<img src="../assets/svg/illustrations/star-muted.svg" alt="Review rating" width="16">
</div>
<span class="small">0</span>
</a>
<!-- End Rating -->
<button type="button" class="btn btn-outline-primary btn-sm rounded-pill">Add to cart</button>
</div>
</div>
<!-- End Card -->
</div>
<!-- End Col -->
<div class="col mb-4">
<!-- Card -->
<div class="card card-bordered shadow-none text-center h-100">
<div class="card-pinned">
<img class="card-img-top" src="../assets/img/300x180/img1.jpg" alt="Image Description">
<div class="card-pinned-top-end">
<button type="button" class="btn btn-outline-secondary btn-xs btn-icon rounded-circle" data-bs-toggle="tooltip" data-bs-placement="top" title="Save for later">
<i class="bi-heart"></i>
</button>
</div>
</div>
<div class="card-body">
<div class="mb-2">
<a class="link-sm link-secondary" href="#">Clothing</a>
</div>
<h4 class="card-title">
<a class="text-dark" href="../demo-shop/product-overview.html">Front hoodie</a>
</h4>
<p class="card-text text-dark">$91.88</p>
</div>
<div class="card-footer pt-0">
<!-- Rating -->
<a class="d-inline-flex align-items-center mb-3" href="#">
<div class="d-flex gap-1 me-2">
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
<img src="../assets/svg/illustrations/star-muted.svg" alt="Review rating" width="16">
</div>
<span class="small">40</span>
</a>
<!-- End Rating -->
<button type="button" class="btn btn-outline-primary btn-sm rounded-pill">Add to cart</button>
</div>
</div>
<!-- End Card -->
</div>
<!-- End Col -->
<div class="col mb-4">
<!-- Card -->
<div class="card card-bordered shadow-none text-center h-100">
<div class="card-pinned">
<img class="card-img-top" src="../assets/img/300x180/img4.jpg" alt="Image Description">
<div class="card-pinned-top-start">
<span class="badge bg-danger rounded-pill">Out of stock</span>
</div>
<div class="card-pinned-top-end">
<button type="button" class="btn btn-outline-secondary btn-xs btn-icon rounded-circle" data-bs-toggle="tooltip" data-bs-placement="top" title="Save for later">
<i class="bi-heart"></i>
</button>
</div>
</div>
<div class="card-body">
<div class="mb-2">
<a class="link-sm link-secondary" href="#">Accessories</a>
</div>
<h4 class="card-title">
<a class="text-dark" href="../demo-shop/product-overview.html">Herschel backpack in gray</a>
</h4>
<p class="card-text text-dark">$29.99 <span class="text-body ms-1"><del>$33.99</del></span></p>
</div>
<div class="card-footer pt-0">
<!-- Rating -->
<a class="d-inline-flex align-items-center mb-3" href="#">
<div class="d-flex gap-1 me-2">
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
<img src="../assets/svg/illustrations/star-muted.svg" alt="Review rating" width="16">
<img src="../assets/svg/illustrations/star-muted.svg" alt="Review rating" width="16">
</div>
<span class="small">125</span>
</a>
<!-- End Rating -->
<button type="button" class="btn btn-outline-primary btn-sm rounded-pill">Add to cart</button>
</div>
</div>
<!-- End Card -->
</div>
<!-- End Col -->
</div>
<!-- End Row -->