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

<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>
    </div>

    <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>
      
      <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>
      
      <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>
      
      <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>
      
      <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>
      
      <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>
      
    </div>

    <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>
    </div>
  </div>
</section>

View frontmatter

# Jobs Section 1
jobs1:
  enable: true
  subtitle: "Job Positions"
  title: "We're always searching for amazing people to join our team. Take a look at our current openings."
  positions:
    - title: "Senior Graphic Designer"
      type: "Full Time"
      location: "San Francisco, US"
      url: "#"
      initials: "SD"
      avatar_bg: "bg-red"
      badge_bg: "bg-pale-blue"
      badge_text: "text-blue"
    - title: "UI/UX Designer"
      type: "Remote"
      location: "Anywhere"
      url: "#"
      initials: "UX"
      avatar_bg: "bg-green"
      badge_bg: "bg-pale-aqua"
      badge_text: "text-aqua"
    - title: "Multimedia Artist & Animator"
      type: "Full Time"
      location: "Birmingham, UK"
      url: "#"
      initials: "AN"
      avatar_bg: "bg-yellow"
      badge_bg: "bg-pale-blue"
      badge_text: "text-blue"
    - title: "Front End Developer"
      type: "Part Time"
      location: "Sydney, AU"
      url: "#"
      initials: "FD"
      avatar_bg: "bg-purple"
      badge_bg: "bg-pale-violet"
      badge_text: "text-violet"
    - title: "Mobile Developer"
      type: "Full Time"
      location: "San Francisco, US"
      url: "#"
      initials: "MD"
      avatar_bg: "bg-orange"
      badge_bg: "bg-pale-blue"
      badge_text: "text-blue"
    - title: ".NET Developer"
      type: "Full Time"
      location: "Manchester, UK"
      url: "#"
      initials: "ND"
      avatar_bg: "bg-pink"
      badge_bg: "bg-pale-blue"
      badge_text: "text-blue"
  cta:
    title: "Can't find the right position?"
    description: "Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur."
    button:
      url: "#"
      text: "Get in Touch"

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

<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>
    </div>

    <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="location2">New York, US</option>
                  
                  <option value="location3">Michigan, 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>
          </a>
          
          <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>
          </a>
          
          <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>
          </a>
          
        </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>
          </a>
          
          <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>
          </a>
          
          <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>
          </a>
          
        </div>
        
      </div>
    </div>
  </div>
</section>

View frontmatter

# Jobs Section 2
jobs2:
  enable: true
  subtitle: "Job Positions"
  title: "We're always searching for amazing people to join our team. Take a look at our current openings."
  filters:
    - label: "Position"
      options:
        - value: "position1"
          text: "Business"
        - value: "position2"
          text: "Design"
        - value: "position3"
          text: "Development"
        - value: "position4"
          text: "Engineering"
        - value: "position5"
          text: "Finance"
        - value: "position6"
          text: "Marketing"
    - label: "Type"
      options:
        - value: "type1"
          text: "Full-time"
        - value: "type3"
          text: "Part-time"
        - value: "type4"
          text: "Remote"
    - label: "Location"
      options:
        - value: "location1"
          text: "Chicago, US"
        - value: "location2"
          text: "New York, US"
        - value: "location3"
          text: "Michigan, US"
        - value: "location4"
          text: "Los Angles, US"
        - value: "location5"
          text: "Moscow, Russia"
        - value: "location6"
          text: "Sydney, Australia"
        - value: "location7"
          text: "Birmingham, UK"
        - value: "location8"
          text: "Manchester, UK"
        - value: "location9"
          text: "Beijing, China"
  categories:
    - name: "Design"
      positions:
        - title: "Senior Graphic Designer"
          type: "Full time"
          location: "San Francisco, US"
          url: "#"
          initials: "GD"
          avatar_bg: "bg-red"
        - title: "UI/UX Designer"
          type: "Remote"
          location: "Anywhere"
          url: "#"
          initials: "UX"
          avatar_bg: "bg-green"
        - title: "Multimedia Artist & Animator"
          type: "Full time"
          location: "Birmingham, UK"
          url: "#"
          initials: "AN"
          avatar_bg: "bg-yellow"
    - name: "Development"
      positions:
        - title: "Front End Developer"
          type: "Part time"
          location: "Sydney, AU"
          url: "#"
          initials: "FE"
          avatar_bg: "bg-purple"
        - title: "Mobile Developer"
          type: "Full-time"
          location: "San Francisco, US"
          url: "#"
          initials: "MD"
          avatar_bg: "bg-orange"
        - title: ".NET Developer"
          type: "Full time"
          location: "Manchester, UK"
          url: "#"
          initials: "NT"
          avatar_bg: "bg-pink"