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

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-9 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 lift">
					<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 lift">
					<div class="card-body p-5 d-flex flex-row">
						<div>
							<span class="avatar bg-green text-white w-11 h-11 fs-20me-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 lift">
					<div class="card-body p-5 d-flex flex-row">
						<div>
							<span class="avatar bg-yellow text-white w-11 h-11 fs-20me-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 lift">
					<div class="card-body p-5 d-flex flex-row">
						<div>
							<span class="avatar bg-purple text-white w-11 h-11 fs-20me-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 lift">
					<div class="card-body p-5 d-flex flex-row">
						<div>
							<span class="avatar bg-orange text-white w-11 h-11 fs-20me-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 lift">
					<div class="card-body p-5 d-flex flex-row">
						<div>
							<span class="avatar bg-pink text-white w-11 h-11 fs-20me-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>
	<!-- /.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-9 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