Copy any custom block snippet below and paste it on your page to build your website easily.
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur.
Get in Touch
<section class="wrapper bg-light">
<div class="container py-14 py-md-16">
<div class="row text-center">
<div class="col-xl-10 mx-auto">
<h2 class="fs-15 text-uppercase text-primary mb-3">Job Positions</h2>
<h3 class="display-4 mb-10 px-xxl-15">We’re always searching for amazing people to join our team. Take a look at our current openings.</h3>
</div>
<!-- /column -->
</div>
<!-- /.row -->
<div class="row gy-6">
<div class="col-md-6 col-lg-4">
<a href="#" class="card shadow-lg lift h-100">
<div class="card-body p-5 d-flex flex-row">
<div>
<span class="avatar bg-red text-white w-11 h-11 fs-20 me-4">SD</span>
</div>
<div>
<span class="badge bg-pale-blue text-blue rounded py-1 mb-2">Full Time</span>
<h4 class="mb-1">Senior Graphic Designer</h4>
<p class="mb-0 text-body">San Francisco, US</p>
</div>
</div>
</a>
</div>
<!--/column -->
<div class="col-md-6 col-lg-4">
<a href="#" class="card shadow-lg lift h-100">
<div class="card-body p-5 d-flex flex-row">
<div>
<span class="avatar bg-green text-white w-11 h-11 fs-20 me-4">UX</span>
</div>
<div>
<span class="badge bg-pale-aqua text-aqua rounded py-1 mb-2">Remote</span>
<h4 class="mb-1">UI/UX Designer</h4>
<p class="mb-0 text-body">Anywhere</p>
</div>
</div>
</a>
</div>
<!--/column -->
<div class="col-md-6 col-lg-4">
<a href="#" class="card shadow-lg lift h-100">
<div class="card-body p-5 d-flex flex-row">
<div>
<span class="avatar bg-yellow text-white w-11 h-11 fs-20 me-4">AN</span>
</div>
<div>
<span class="badge bg-pale-blue text-blue rounded py-1 mb-2">Full Time</span>
<h4 class="mb-1">Multimedia Artist & Animator</h4>
<p class="mb-0 text-body">Birmingham, UK</p>
</div>
</div>
</a>
</div>
<!--/column -->
<div class="col-md-6 col-lg-4">
<a href="#" class="card shadow-lg lift h-100">
<div class="card-body p-5 d-flex flex-row">
<div>
<span class="avatar bg-purple text-white w-11 h-11 fs-20 me-4">FD</span>
</div>
<div>
<span class="badge bg-pale-violet text-violet rounded py-1 mb-2">Part Time</span>
<h4 class="mb-1">Front End Developer</h4>
<p class="mb-0 text-body">Sydney, AU</p>
</div>
</div>
</a>
</div>
<!--/column -->
<div class="col-md-6 col-lg-4">
<a href="#" class="card shadow-lg lift h-100">
<div class="card-body p-5 d-flex flex-row">
<div>
<span class="avatar bg-orange text-white w-11 h-11 fs-20 me-4">MD</span>
</div>
<div>
<span class="badge bg-pale-blue text-blue rounded py-1 mb-2">Full Time</span>
<h4 class="mb-1">Mobile Developer</h4>
<p class="mb-0 text-body">San Francisco, US</p>
</div>
</div>
</a>
</div>
<!--/column -->
<div class="col-md-6 col-lg-4">
<a href="#" class="card shadow-lg lift h-100">
<div class="card-body p-5 d-flex flex-row">
<div>
<span class="avatar bg-pink text-white w-11 h-11 fs-20 me-4">ND</span>
</div>
<div>
<span class="badge bg-pale-blue text-blue rounded py-1 mb-2">Full Time</span>
<h4 class="mb-1">.NET Developer</h4>
<p class="mb-0 text-body">Manchester, UK</p>
</div>
</div>
</a>
</div>
<!--/column -->
</div>
<!--/.row -->
<div class="row mt-11">
<div class="col-lg-6 col-xl-5 mx-auto text-center">
<h2 class="display-6 mb-3">Can't find the right position?</h2>
<p class="lead mb-5 px-md-16 px-lg-3">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur.</p>
<a href="#" class="btn btn-primary rounded-pill">Get in Touch</a>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</section>
<!-- /section -->
<section class="wrapper bg-light">
<div class="container py-14 py-md-16">
<div class="row text-center">
<div class="col-xl-10 mx-auto">
<h2 class="fs-15 text-uppercase text-muted mb-3">Job Positions</h2>
<h3 class="display-4 mb-10 px-xxl-15">We’re always searching for amazing people to join our team. Take a look at our current openings.</h3>
</div>
<!-- /column -->
</div>
<!-- /.row -->
<div class="row">
<div class="col-xl-10 mx-auto">
<form class="filter-form mb-10">
<div class="row">
<div class="col-md-4 mb-3">
<div class="form-select-wrapper">
<select class="form-select" aria-label="">
<option selected>Position</option>
<option value="position1">Business</option>
<option value="position2">Design</option>
<option value="position3">Development</option>
<option value="position4">Engineering</option>
<option value="position5">Finance</option>
<option value="position6">Marketing</option>
</select>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="form-select-wrapper">
<select class="form-select" aria-label="">
<option selected>Type</option>
<option value="type1">Full-time</option>
<option value="type3">Part-time</option>
<option value="type4">Remote</option>
</select>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="form-select-wrapper">
<select class="form-select" aria-label="">
<option selected>Location</option>
<option value="location1">Chicago, US</option>
<option value="location3">Michigan, US</option>
<option value="location2">New York, US</option>
<option value="location4">Los Angles, US</option>
<option value="location5">Moscow, Russia</option>
<option value="location6">Sydney, Australia</option>
<option value="location7">Birmingham, UK</option>
<option value="location8">Manchester, UK</option>
<option value="location9">Beijing, China</option>
</select>
</div>
</div>
</div>
</form>
<div class="job-list mb-10">
<h3 class="mb-4">Design</h3>
<a href="#" class="card mb-4 lift">
<div class="card-body p-5">
<span class="row justify-content-between align-items-center">
<span class="col-md-5 mb-2 mb-md-0 d-flex align-items-center text-body">
<span class="avatar bg-red text-white w-9 h-9 fs-17 me-3">GD</span> Senior Graphic Designer </span>
<span class="col-5 col-md-3 text-body d-flex align-items-center">
<i class="uil uil-clock me-1"></i> Full time </span>
<span class="col-7 col-md-4 col-lg-3 text-body d-flex align-items-center">
<i class="uil uil-location-arrow me-1"></i> San Francisco, US </span>
<span class="d-none d-lg-block col-1 text-center text-body">
<i class="uil uil-angle-right-b"></i>
</span>
</span>
</div>
<!-- /.card-body -->
</a>
<!-- /.card -->
<a href="#" class="card mb-4 lift">
<div class="card-body p-5">
<span class="row justify-content-between align-items-center">
<span class="col-md-5 mb-2 mb-md-0 d-flex align-items-center text-body">
<span class="avatar bg-green text-white w-9 h-9 fs-17 me-3">UX</span> UI/UX Designer </span>
<span class="col-5 col-md-3 text-body d-flex align-items-center">
<i class="uil uil-clock me-1"></i> Remote </span>
<span class="col-7 col-md-4 col-lg-3 text-body d-flex align-items-center">
<i class="uil uil-location-arrow me-1"></i> Anywhere </span>
<span class="d-none d-lg-block col-1 text-center text-body">
<i class="uil uil-angle-right-b"></i>
</span>
</span>
</div>
<!-- /.card-body -->
</a>
<!-- /.card -->
<a href="#" class="card mb-4 lift">
<div class="card-body p-5">
<span class="row justify-content-between align-items-center">
<span class="col-md-5 mb-2 mb-md-0 d-flex align-items-center text-body">
<span class="avatar bg-yellow text-white w-9 h-9 fs-17 me-3">AN</span> Multimedia Artist & Animator </span>
<span class="col-5 col-md-3 text-body d-flex align-items-center">
<i class="uil uil-clock me-1"></i> Full time </span>
<span class="col-7 col-md-4 col-lg-3 text-body d-flex align-items-center">
<i class="uil uil-location-arrow me-1"></i> Birmingham, UK </span>
<span class="d-none d-lg-block col-1 text-center text-body">
<i class="uil uil-angle-right-b"></i>
</span>
</span>
</div>
<!-- /.card-body -->
</a>
<!-- /.card -->
</div>
<div class="job-list">
<h3 class="mb-4">Development</h3>
<a href="#" class="card mb-4 lift">
<div class="card-body p-5">
<span class="row justify-content-between align-items-center">
<span class="col-md-5 mb-2 mb-md-0 d-flex align-items-center text-body">
<span class="avatar bg-purple text-white w-9 h-9 fs-17 me-3">FE</span> Front End Developer </span>
<span class="col-5 col-md-3 text-body d-flex align-items-center">
<i class="uil uil-clock me-1"></i> Part time </span>
<span class="col-7 col-md-4 col-lg-3 text-body d-flex align-items-center">
<i class="uil uil-location-arrow me-1"></i> Sydney, AU </span>
<span class="d-none d-lg-block col-1 text-center text-body">
<i class="uil uil-angle-right-b"></i>
</span>
</span>
</div>
<!-- /.card-body -->
</a>
<!-- /.card -->
<a href="#" class="card mb-4 lift">
<div class="card-body p-5">
<span class="row justify-content-between align-items-center">
<span class="col-md-5 mb-2 mb-md-0 d-flex align-items-center text-body">
<span class="avatar bg-orange text-white w-9 h-9 fs-17 me-3">MD</span> Mobile Developer </span>
<span class="col-5 col-md-3 text-body d-flex align-items-center">
<i class="uil uil-clock me-1"></i> Full-time </span>
<span class="col-7 col-md-4 col-lg-3 text-body d-flex align-items-center">
<i class="uil uil-location-arrow me-1"></i> San Francisco, US </span>
<span class="d-none d-lg-block col-1 text-center text-body">
<i class="uil uil-angle-right-b"></i>
</span>
</span>
</div>
<!-- /.card-body -->
</a>
<!-- /.card -->
<a href="#" class="card mb-4 lift">
<div class="card-body p-5">
<span class="row justify-content-between align-items-center">
<span class="col-md-5 mb-2 mb-md-0 d-flex align-items-center text-body">
<span class="avatar bg-pink text-white w-9 h-9 fs-17 me-3">NT</span> .NET Developer </span>
<span class="col-5 col-md-3 text-body d-flex align-items-center">
<i class="uil uil-clock me-1"></i> Full time </span>
<span class="col-7 col-md-4 col-lg-3 text-body d-flex align-items-center">
<i class="uil uil-location-arrow me-1"></i> Manchester, UK </span>
<span class="d-none d-lg-block col-1 text-center text-body">
<i class="uil uil-angle-right-b"></i>
</span>
</span>
</div>
<!-- /.card-body -->
</a>
<!-- /.card -->
</div>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</section>
<!-- /section -->
Everything you need to create your next unique and professional website, including impressive and ready-made blocks and pages.
Buy Sandbox