Copy any custom block snippet below and paste it on your page to build your website easily.
San Francisco, US
Anywhere
Birmingham, UK
Sydney, AU
Manchester, UK
<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 & 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 -->
<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 & 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.