Cards - List

Component #1

Dedicated app development platform

From open source to premium services.

Mobile devs
App builder
Subscriptions Beta
Integrations

Included

Full integration guidance and resources.

Get Started 
<!-- Features Section -->
<div class="container">
  <div class="w-lg-85 mx-lg-auto">
    <!-- Card -->
    <div class="card p-5">
      <div class="row align-items-md-center">
        <div class="col-md-9 mb-5 mb-md-0">
          <h3>Dedicated app development platform</h3>
          <p>From open source to premium services.</p>

          <!-- List -->
          <div class="row">
            <div class="col-sm-6">
              <div class="media font-size-1 text-body mb-2">
                <i class="fas fa-check-circle text-success mt-1 mr-2"></i>
                <div class="media-body">
                  Mobile devs
                </div>
              </div>
              <div class="media font-size-1 text-body mb-2">
                <i class="fas fa-check-circle text-success mt-1 mr-2"></i>
                <div class="media-body">
                  App builder
                </div>
              </div>
            </div>

            <div class="col-sm-6">
              <div class="media font-size-1 text-body mb-2">
                <i class="fas fa-check-circle text-success mt-1 mr-2"></i>
                <div class="media-body">
                  Subscriptions <span class="badge badge-soft-secondary badge-pill ml-1">Beta</span>
                </div>
              </div>
              <div class="media font-size-1 text-body mb-2">
                <i class="fas fa-check-circle text-success mt-1 mr-2"></i>
                <div class="media-body">
                  Integrations
                </div>
              </div>
            </div>
          </div>
          <!-- End List -->
        </div>

        <div class="col-md-3 column-divider-md">
          <div class="pl-md-2">
            <h4>Included</h4>
            <p>Full integration guidance and resources.</p>
            <a class="font-size-1 font-weight-bold" href="#">Get Started <i class="fas fa-angle-right fa-sm ml-1"></i></a>
          </div>
        </div>
      </div>
    </div>
    <!-- End Card -->
  </div>
</div>
<!-- End Features Section -->
Copy

Component #2 

<!-- Hiring Section -->
<div class="container space-2">
  <!-- Title -->
  <div class="w-lg-65 text-center mx-auto mb-5 mb-sm-9">
    <h2 class="h1">We are hiring</h2>
  </div>
  <!-- End Title -->

  <div class="w-lg-75 mx-lg-auto mb-5 mb-md-7">
    <!-- Card -->
    <a class="card card-frame py-3 px-4 mb-3" href="#">
      <div class="row align-items-sm-center">
        <span class="col-sm-6 text-dark">
          Business Strategy Manager
        </span>
        <span class="col-6 col-sm-3 text-body">
          London
        </span>
        <span class="col-6 col-sm-3 text-right">
          Apply <i class="fas fa-angle-right fa-sm ml-1"></i>
        </span>
      </div>
    </a>
    <!-- End Card -->

    <!-- Card -->
    <a class="card card-frame py-3 px-4 mb-3" href="#">
      <div class="row align-items-sm-center">
        <span class="col-sm-6 text-dark">
          Business Strategy Senior Associate
        </span>
        <span class="col-6 col-sm-3 text-body">
          London
        </span>
        <span class="col-6 col-sm-3 text-right">
          Apply <i class="fas fa-angle-right fa-sm ml-1"></i>
        </span>
      </div>
    </a>
    <!-- End Card -->

    <!-- Card -->
    <a class="card card-frame py-3 px-4 mb-3" href="#">
      <div class="row align-items-sm-center">
        <span class="col-sm-6 text-dark">
          Product Designer
        </span>
        <span class="col-6 col-sm-3 text-body">
          San Francisco
        </span>
        <span class="col-6 col-sm-3 text-right">
          Apply <i class="fas fa-angle-right fa-sm ml-1"></i>
        </span>
      </div>
    </a>
    <!-- End Card -->

    <!-- Card -->
    <a class="card card-frame py-3 px-4 mb-3" href="#">
      <div class="row align-items-sm-center">
        <span class="col-sm-6 text-dark">
          Account Executive - Enterprise
        </span>
        <span class="col-6 col-sm-3 text-body">
          San Francisco
        </span>
        <span class="col-6 col-sm-3 text-right">
          Apply <i class="fas fa-angle-right fa-sm ml-1"></i>
        </span>
      </div>
    </a>
    <!-- End Card -->
  </div>

  <!-- Link -->
  <div class="text-center">
    <a href="#">
      View all
      <span class="btn btn-xs btn-icon btn-soft-primary rounded-circle mx-2">
        <i class="fas fa-angle-right"></i>
      </span>
      careers
    </a>
  </div>
  <!-- End Link -->
</div>
<!-- End Hiring Section -->
Copy

Component #3

Open positions

Current job openings

6 open positions

Technology

6 openings
Android Engineering Hong Kong Apply
Cloud System Engineer Sydney Apply
Database Administrator Sydney Apply
Engineering Lead Beijing Apply
IT Operations Engineer San Francisco Apply
Senior Analyst, Data Analytics London Apply

Can't find a position that suits you? Contact us 

<!-- Jobs Section -->
<div class="container space-2">
  <!-- Title -->
  <div class="w-md-80 w-lg-50 text-center mx-md-auto mb-5 mb-md-9">
    <span class="d-block small font-weight-bold text-cap mb-2">Open positions</span>
    <h2>Current job openings</h2>
  </div>
  <!-- End Title -->

  <!-- Filters -->
  <div class="border-bottom pb-5 mb-9">
    <div class="row align-items-center">
      <div class="col-sm-auto mb-3 mb-sm-0">
        <!-- Select -->
        <select class="custom-select custom-select-sm">
          <option selected disabled>Location</option>
          <option value="locationAll">All</option>
          <option value="location1">London</option>
          <option value="location2">New York</option>
          <option value="location6">Singapore</option>
          <option value="location3">Beijing</option>
          <option value="location4">Hong Kong</option>
          <option value="location5">Berlin</option>
          <option value="location6">Sydney</option>
          <option value="location6">San Francisco</option>
        </select>
        <!-- End Select -->
      </div>

      <div class="col-sm text-sm-right">
        <span class="text-dark font-weight-bold">6</span>
        open positions
      </div>
    </div>
  </div>
  <!-- End Filters -->

  <!-- Title -->
  <div class="row justify-content-lg-between align-items-lg-center mt-7 mb-3">
    <div class="col-sm-auto">
      <h3 class="h4">Technology</h3>
    </div>
    <div class="col-sm text-sm-right">
      <small>6 openings</small>
    </div>
  </div>
  <!-- End Title -->

  <!-- Card -->
  <a class="card card-frame py-3 px-4 mb-2" href="#">
    <div class="row align-items-sm-center">
      <span class="col-sm-6 text-dark">
        Android Engineering
      </span>
      <span class="col-6 col-sm-3 text-body">
        Hong Kong
      </span>
      <span class="col-6 col-sm-3 text-right">
        Apply <i class="fas fa-angle-right fa-sm ml-1"></i>
      </span>
    </div>
  </a>
  <!-- End Card -->

  <!-- Card -->
  <a class="card card-frame py-3 px-4 mb-2" href="#">
    <div class="row align-items-sm-center">
      <span class="col-sm-6 text-dark">
        Cloud System Engineer
      </span>
      <span class="col-6 col-sm-3 text-body">
        Sydney
      </span>
      <span class="col-6 col-sm-3 text-right">
        Apply <i class="fas fa-angle-right fa-sm ml-1"></i>
      </span>
    </div>
  </a>
  <!-- End Card -->

  <!-- Card -->
  <a class="card card-frame py-3 px-4 mb-2" href="#">
    <div class="row align-items-sm-center">
      <span class="col-sm-6 text-dark">
        Database Administrator
      </span>
      <span class="col-6 col-sm-3 text-body">
        Sydney
      </span>
      <span class="col-6 col-sm-3 text-right">
        Apply <i class="fas fa-angle-right fa-sm ml-1"></i>
      </span>
    </div>
  </a>
  <!-- End Card -->

  <!-- Card -->
  <a class="card card-frame py-3 px-4 mb-2" href="#">
    <div class="row align-items-sm-center">
      <span class="col-sm-6 text-dark">
        Engineering Lead
      </span>
      <span class="col-6 col-sm-3 text-body">
        Beijing
      </span>
      <span class="col-6 col-sm-3 text-right">
        Apply <i class="fas fa-angle-right fa-sm ml-1"></i>
      </span>
    </div>
  </a>
  <!-- End Card -->

  <!-- Card -->
  <a class="card card-frame py-3 px-4 mb-2" href="#">
    <div class="row align-items-sm-center">
      <span class="col-sm-6 text-dark">
        IT Operations Engineer
      </span>
      <span class="col-6 col-sm-3 text-body">
        San Francisco
      </span>
      <span class="col-6 col-sm-3 text-right">
        Apply <i class="fas fa-angle-right fa-sm ml-1"></i>
      </span>
    </div>
  </a>
  <!-- End Card -->

  <!-- Card -->
  <a class="card card-frame py-3 px-4 mb-2" href="#">
    <div class="row align-items-sm-center">
      <span class="col-sm-6 text-dark">
        Senior Analyst, Data Analytics
      </span>
      <span class="col-6 col-sm-3 text-body">
        London
      </span>
      <span class="col-6 col-sm-3 text-right">
        Apply <i class="fas fa-angle-right fa-sm ml-1"></i>
      </span>
    </div>
  </a>
  <!-- End Card -->

  <div class="text-center mt-5">
    <p>Can't find a position that suits you? <a class="font-weight-bold text-nowrap" href="#">Contact us <i class="fas fa-angle-right fa-sm ml-1"></i></a></p>
  </div>
</div>
<!-- End Jobs Section -->
Copy