# Card List

## Component #1

- Preview
- HTML

### 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

                    <!-- 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

- Preview
- HTML

## Hubble

The more affordable daily contact lens. Modify or cancel anytime.

> “ 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! ”

Max Fitbit Agency Partner

#### Support and win

When we empower others to succeed, we all win. (And we're not talking about participation trophies.)

#### Open communication

We're big fans of transparency for many reasons, but the abridged version is: it makes easier.

## Curology

For healthy and beautiful skin, get skincare customized just for you from experts at Curology.

> “ 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. ”

Luisa Executive Creative Director

#### Hit heavy, stay small

Tight-knit, dynamic teams work with more agility, communication, and freedom than large-scale companies.

#### Ambition by the boatload

We love people who aim for greatness. They inspire and excite their teammates, raising the bar for all of us.

## Larq

LARQ Bottle Benefit Edition. 0. Lives will be saved with access. to clean water.

> “ 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. ”

Christina Head of Commercials

#### Autonomy and attitude

We're a team of self-starters who take serious pride in our work – and it shows.

#### Teamwork makes the dream work

We work together to bring our passions and expertise to make Teachable the best it can be.

                    <!-- 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 -->