Cards - List
Component #1
Dedicated app development platform
From open source to premium services.
Mobile devs
App builder
Subscriptions Beta
Integrations
<!-- 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 -->
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 -->
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 -->
Component #4
Social accounts
<!-- Card -->
<div class="card">
<div class="card-header">
<h5 class="card-header-title">Social accounts</h5>
</div>
<!-- Body -->
<div class="card-body">
<form>
<div class="list-group list-group-lg list-group-flush list-group-no-gutters">
<!-- List Item -->
<div class="list-group-item">
<div class="media">
<i class="fab fa-twitter list-group-icon mt-1"></i>
<div class="media-body">
<div class="row align-items-center">
<div class="col-sm mb-1 mb-sm-0">
<h6 class="mb-0">Twitter</h6>
<a class="small" href="#">www.twitter.com/htmlstream</a>
</div>
<div class="col-sm-auto">
<a class="btn btn-xs btn-white" href="javascript:;">Disconnect</a>
</div>
</div>
</div>
</div>
</div>
<!-- End List Item -->
<!-- List Item -->
<div class="list-group-item">
<div class="media">
<i class="fab fa-facebook list-group-icon mt-1"></i>
<div class="media-body">
<div class="row align-items-center">
<div class="col-sm mb-1 mb-sm-0">
<h6 class="mb-0">Facebook</h6>
<a class="small" href="#">www.facebook.com/htmlstream</a>
</div>
<div class="col-sm-auto">
<a class="btn btn-xs btn-white" href="javascript:;">Disconnect</a>
</div>
</div>
</div>
</div>
</div>
<!-- End List Item -->
<!-- List Item -->
<div class="list-group-item">
<div class="media">
<i class="fab fa-dribbble list-group-icon mt-1"></i>
<div class="media-body">
<div class="row align-items-center">
<div class="col-sm mb-1 mb-sm-0">
<h6 class="mb-0">Dribbble</h6>
<small>Not connected</small>
</div>
<div class="col-sm-auto">
<a class="btn btn-xs btn-white" href="javascript:;">Connect</a>
</div>
</div>
</div>
</div>
</div>
<!-- End List Item -->
<!-- List Item -->
<div class="list-group-item">
<div class="media">
<i class="fab fa-linkedin list-group-icon mt-1"></i>
<div class="media-body">
<div class="row align-items-center">
<div class="col-sm mb-1 mb-sm-0">
<h6 class="mb-0">Linkedin</h6>
<a class="small" href="#">www.linkedin.com/htmlstream</a>
</div>
<div class="col-sm-auto">
<a class="btn btn-xs btn-white" href="javascript:;">Disconnect</a>
</div>
</div>
</div>
</div>
</div>
<!-- End List Item -->
<!-- List Item -->
<div class="list-group-item">
<div class="media">
<i class="fab fa-behance list-group-icon mt-1"></i>
<div class="media-body">
<div class="row align-items-center">
<div class="col-sm mb-1 mb-sm-0">
<h6 class="mb-0">Behance</h6>
<small>Not connected</small>
</div>
<div class="col-sm-auto">
<a class="btn btn-xs btn-white" href="javascript:;">Connect</a>
</div>
</div>
</div>
</div>
</div>
<!-- End List Item -->
</div>
</form>
</div>
<!-- End Body -->
</div>
<!-- End Card -->
Component #5
<!-- Card -->
<div class="card">
<div class="card-header">
<h5 class="card-header-title">Device history</h5>
</div>
<!-- Body -->
<div class="card-body">
<div class="list-group list-group-lg list-group-flush list-group-no-gutters">
<!-- List Item -->
<div class="list-group-item">
<div class="media">
<i class="fas fa-laptop list-group-icon mt-1"></i>
<div class="media-body">
<div class="row align-items-center">
<div class="col-sm mb-1 mb-sm-0">
<h6 class="mb-0">Dell XPS 15 <span class="badge badge-soft-success ml-1">Current</span></h6>
<small><strong>IP address:</strong> 213.230.93.79</small>
<small>|</small>
<small><strong>Last active:</strong> Now</small>
</div>
<div class="col-sm-auto">
<a class="btn btn-xs btn-white" href="javascript:;">Log out</a>
</div>
</div>
</div>
</div>
</div>
<!-- End List Item -->
<!-- List Item -->
<div class="list-group-item">
<div class="media">
<i class="fas fa-desktop list-group-icon mt-1"></i>
<div class="media-body">
<div class="row align-items-center">
<div class="col-sm mb-1 mb-sm-0">
<h6 class="mb-0">Microsoft Studio 2</h6>
<small><strong>IP address:</strong> 213.230.93.79</small>
<small>|</small>
<small><strong>Last active:</strong> 3 days ago</small>
</div>
<div class="col-sm-auto">
<a class="btn btn-xs btn-white" href="javascript:;">Log out</a>
</div>
</div>
</div>
</div>
</div>
<!-- End List Item -->
<!-- List Item -->
<div class="list-group-item">
<div class="media">
<i class="fas fa-mobile-alt list-group-icon mt-1"></i>
<div class="media-body">
<div class="row align-items-center">
<div class="col-sm mb-1 mb-sm-0">
<h6 class="mb-0">Google Pixel 3a</h6>
<small><strong>IP address:</strong> 213.230.93.79</small>
<small>|</small>
<small><strong>Last active:</strong> 22 minutes ago</small>
</div>
<div class="col-sm-auto">
<a class="btn btn-xs btn-white" href="javascript:;">Log out</a>
</div>
</div>
</div>
</div>
</div>
<!-- End List Item -->
</div>
</div>
<!-- End Body -->
</div>
<!-- End Card -->