Blocks - Misc

Copy any custom block snippet below and paste it on your page to build your website easily.

Filter Blocks:

Job Positions

We’re always searching for amazing people to join our team. Take a look at our current openings.

Senior Graphic Designer

San Francisco, US

UI/UX Designer

Anywhere

Multimedia Artist & Animator

Birmingham, UK

Front End Developer

Sydney, AU

Mobile Developer

San Francisco, US

.NET Developer

Manchester, UK

Can't find the right position?

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur.

Get in Touch

View example's code

<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 &amp; 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 -->

Job Positions

We’re always searching for amazing people to join our team. Take a look at our current openings.

Design

GD Senior Graphic Designer Full time San Francisco, US

UX UI/UX Designer Remote Anywhere

AN Multimedia Artist & Animator Full time Birmingham, UK

Development

FE Front End Developer Part time Sydney, AU

MD Mobile Developer Full-time San Francisco, US

NT .NET Developer Full time Manchester, UK

View example's code

<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 &amp; 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 -->

Think unique and be creative. Make a difference with Sandbox.

Everything you need to create your next unique and professional website, including impressive and ready-made blocks and pages.

Buy Sandbox