Card List
Component #1
Dedicated app development platform
From open source to premium services.
- Mobile devs
- App builder
- Subscriptions Beta
- Integrations
<!-- Card -->
<div class="container">
<div class="w-lg-85 mx-lg-auto">
<!-- Card -->
<div class="card">
<div class="card-body">
<div class="row col-md-divider align-items-md-center">
<div class="col-md-9">
<h3>Dedicated app development platform</h3>
<p>From open source to premium services.</p>
<div class="row">
<div class="col-sm-6">
<!-- List Checked -->
<ul class="list-checked list-checked-bg-success list-checked-sm mb-0">
<li class="list-checked-item">Mobile devs</li>
<li class="list-checked-item">App builder</li>
</ul>
<!-- End List Checked -->
</div>
<!-- End Col -->
<div class="col-sm-6">
<!-- List Checked -->
<ul class="list-checked list-checked-bg-success list-checked-sm mb-0">
<li class="list-checked-item">Subscriptions <span class="badge bg-soft-secondary text-dark rounded-pill ms-1">Beta</span></li>
<li class="list-checked-item">Integrations</li>
</ul>
<!-- End List Checked -->
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
<!-- End Col -->
<div class="col-md-3">
<div class="ps-md-2">
<h4>Included</h4>
<p>Full integration guidance and resources.</p>
<a class="link" href="#">Get Started <i class="bi-chevron-right small ms-1"></i></a>
</div>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
</div>
<!-- End Card -->
</div>
</div>
<!-- End Card -->
Component #2
<!-- Portfolio -->
<div id="caseStudies" class="container content-space-2 content-space-lg-3">
<div class="d-grid gap-7 gap-md-10">
<!-- Card -->
<div data-aos="fade-up">
<a class="card card-transition bg-soft-success shadow-none" href="#">
<div class="card-body">
<div class="row">
<div class="col-lg-4 order-lg-2 mb-5 mb-lg-0">
<div class="d-flex flex-column h-100">
<div class="mb-7">
<h2 class="card-title h1">Hubble</h2>
<p class="card-text text-body">The more affordable daily contact lens. Modify or cancel anytime.</p>
</div>
<!-- Testimonials -->
<div class="card shadow-none mt-auto">
<div class="card-body">
<!-- Blockquote -->
<figure>
<div class="mb-4">
<img class="avatar avatar-lg avatar-4x3" src="../assets/svg/brands/fitbit-dark.svg" alt="Logo">
</div>
<blockquote class="blockquote">“ The template is really nice and offers quite a large set of options. It's beautiful and the coding is done quickly and seamlessly. Thank you! ”</blockquote>
<figcaption class="blockquote-footer">
<div class="d-flex align-items-center">
<div class="flex-shrink-0">
<img class="avatar avatar-circle" src="../assets/img/160x160/img3.jpg" alt="Image Description">
</div>
<div class="flex-grow-1 ms-3">
Max
<span class="blockquote-footer-source">Fitbit Agency Partner</span>
</div>
</div>
</figcaption>
</figure>
<!-- End Blockquote -->
</div>
</div>
<!-- End Testimonials -->
</div>
</div>
<!-- End Col -->
<div class="col-lg-8">
<div class="mb-5">
<img class="img-fluid rounded-2" src="../assets/img/900x450/img16.jpg" alt="Image Description">
</div>
<div class="row">
<div class="col-sm-6 mb-3 mb-sm-0">
<h4 class="card-title">Support and win</h4>
<p class="card-text text-body">When we empower others to succeed, we all win. (And we're not talking about participation trophies.)</p>
</div>
<!-- End Col -->
<div class="col-sm-6">
<h4 class="card-title">Open communication</h4>
<p class="card-text text-body">We're big fans of transparency for many reasons, but the abridged version is: it makes easier.</p>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
</a>
</div>
<!-- End Card -->
<!-- Card -->
<div data-aos="fade-up">
<a class="card card-transition bg-soft-danger shadow-none" href="#">
<div class="card-body">
<div class="row">
<div class="col-lg-4 mb-5 mb-lg-0">
<div class="d-flex flex-column h-100">
<div class="mb-7">
<h2 class="card-title h1">Curology</h2>
<p class="card-text text-body">For healthy and beautiful skin, get skincare customized just for you from experts at Curology.</p>
</div>
<!-- Testimonials -->
<div class="card shadow-none mt-auto">
<div class="card-body">
<!-- Blockquote -->
<figure>
<div class="mb-4">
<img class="avatar avatar-lg avatar-4x3" src="../assets/svg/brands/airbnb-dark.svg" alt="Logo">
</div>
<blockquote class="blockquote">“ I am absolutely floored by the level of care and attention to detail the team at Htmlstream have put into this theme and for one can guarantee that I will be a return customer. ”</blockquote>
<figcaption class="blockquote-footer">
<div class="d-flex align-items-center">
<div class="flex-shrink-0">
<img class="avatar avatar-circle" src="../assets/img/160x160/img10.jpg" alt="Image Description">
</div>
<div class="flex-grow-1 ms-3">
Luisa
<span class="blockquote-footer-source">Executive Creative Director</span>
</div>
</div>
</figcaption>
</figure>
<!-- End Blockquote -->
</div>
</div>
<!-- End Testimonials -->
</div>
</div>
<!-- End Col -->
<div class="col-lg-8">
<div class="mb-5">
<img class="img-fluid rounded-2" src="../assets/img/900x450/img15.jpg" alt="Image Description">
</div>
<div class="row">
<div class="col-sm-6 mb-3 mb-sm-0">
<h4 class="card-title">Hit heavy, stay small</h4>
<p class="card-text text-body">Tight-knit, dynamic teams work with more agility, communication, and freedom than large-scale companies.</p>
</div>
<!-- End Col -->
<div class="col-sm-6">
<h4 class="card-title">Ambition by the boatload</h4>
<p class="card-text text-body">We love people who aim for greatness. They inspire and excite their teammates, raising the bar for all of us.</p>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
</a>
</div>
<!-- End Card -->
<!-- Card -->
<div data-aos="fade-up">
<a class="card card-transition bg-soft-warning shadow-none" href="#">
<div class="card-body">
<div class="row">
<div class="col-lg-4 order-lg-2 mb-5 mb-lg-0">
<div class="d-flex flex-column h-100">
<div class="mb-7">
<h2 class="card-title h1">Larq</h2>
<p class="card-text text-body">LARQ Bottle Benefit Edition. 0. Lives will be saved with access. to clean water.</p>
</div>
<!-- Testimonials -->
<div class="card shadow-none mt-auto">
<div class="card-body">
<!-- Blockquote -->
<figure>
<div class="mb-4">
<img class="avatar avatar-lg avatar-4x3" src="../assets/svg/brands/shopify-dark.svg" alt="Logo">
</div>
<blockquote class="blockquote">“ It's a beautiful looking theme with great support from the developers. The included demos are a great way to understand the theme, its features and speed up development. ”</blockquote>
<figcaption class="blockquote-footer">
<div class="d-flex align-items-center">
<div class="flex-shrink-0">
<img class="avatar avatar-circle" src="../assets/img/160x160/img8.jpg" alt="Image Description">
</div>
<div class="flex-grow-1 ms-3">
Christina
<span class="blockquote-footer-source">Head of Commercials</span>
</div>
</div>
</figcaption>
</figure>
<!-- End Blockquote -->
</div>
</div>
<!-- End Testimonials -->
</div>
</div>
<!-- End Col -->
<div class="col-lg-8">
<div class="mb-5">
<img class="img-fluid rounded-2" src="../assets/img/900x450/img17.jpg" alt="Image Description">
</div>
<div class="row">
<div class="col-sm-6 mb-3 mb-sm-0">
<h4 class="card-title">Autonomy and attitude</h4>
<p class="card-text text-body">We're a team of self-starters who take serious pride in our work – and it shows.</p>
</div>
<!-- End Col -->
<div class="col-sm-6">
<h4 class="card-title">Teamwork makes the dream work</h4>
<p class="card-text text-body">We work together to bring our passions and expertise to make Teachable the best it can be.</p>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
</a>
</div>
<!-- End Card -->
</div>
</div>
<!-- End Portfolio -->