Cards: List - Snippets | Unity - Multipurpose Responsive Template

Component #1

Preview
HTML

We work with companies with big ideas

Start with award-winning templates, then customize to fit your style and professional needs.

" Millions turn to Amazon for a great customer experience. "

It takes work to stand out from the pack—work that Amazon is proud to make much easier. Founded in 2003, the company provides people with the tools and templates to build, host, and promote their online brand. Even Amazon is built on Amazon.

Read customer story

              
                <!-- Card Grid -->
                <div class="container content-space-1">
                  <!-- Heading -->
                  <div class="w-lg-65 text-center mx-lg-auto mb-5 mb-sm-7 mb-lg-10">
                    <h2>We work with companies with big ideas</h2>
                    <p>Start with award-winning templates, then customize to fit your style and professional needs.</p>
                  </div>
                  <!-- End Heading -->

                  <div class="row align-items-md-center">
                    <div class="col-md-6 mb-5 mb-md-0">
                      <img class="img-fluid rounded-3" src="../assets/img/950x950/img2.jpg" alt="Image Description">
                    </div>
                    <!-- End Col -->

                    <div class="col-md-6">
                      <div class="ps-lg-7">
                        <div class="mb-3">
                          <img class="avatar avatar-xl avatar-4x3" src="../assets/svg/brands/amazon-dark.svg" alt="Logo">
                        </div>
                        <p class="fs-3 text-dark"><em>" Millions turn to Amazon for a great customer experience. "</em></p>
                        <p class="fs-3 text-dark">It takes work to stand out from the pack—work that Amazon is proud to make much easier. Founded in 2003, the company provides people with the tools and templates to build, host, and promote their online brand. Even Amazon is built on Amazon.</p>
                        <a class="link link-pointer" href="#">Read customer story</a>
                      </div>
                    </div>
                    <!-- End Col -->
                  </div>
                  <!-- End Row -->
                </div>
                <!-- End Card Grid -->

Airbnb uses Unity to provide personalized support to 37k customers

Read story

              
                <!-- Card List -->
                <div class="overflow-hidden">
                  <div class="container content-space-1">
                    <div class="row justify-content-lg-between align-items-md-center">
                      <div class="col-md-6 col-lg-5 mb-10 mb-md-0">
                        <div class="position-relative">
                          <img class="img-fluid rounded-3" src="../assets/img/950x950/img8.jpg" alt="Image Description">

                          <!-- SVG Shape -->
                          <figure class="position-absolute top-0 end-0 d-none d-lg-block mt-3 me-n7" style="width: 4rem;">
                            <img class="img-fluid" src="../assets/svg/components/pointer-up.svg" alt="Image Description">
                          </figure>
                          <!-- End SVG Shape -->

                          <!-- SVG Shape -->
                          <figure class="position-absolute bottom-0 start-0 mb-n8 ms-n8" style="width: 12rem;">
                            <img class="img-fluid" src="../assets/svg/components/curved-shape.svg" alt="Image Description">
                          </figure>
                          <!-- End SVG Shape -->
                        </div>
                      </div>
                      <!-- End Col -->

                      <div class="col-md-6">
                        <div class="mb-5">
                          <h2 class="h1">Airbnb uses Unity to provide personalized support to 37k customers</h2>
                        </div>
                        <a class="btn btn-primary btn-pointer" href="../page-customer-story.html">Read story</a>
                      </div>
                      <!-- End Col -->
                    </div>
                    <!-- End Row -->
                  </div>
                </div>
                <!-- End Card List -->

Component #3

Preview
HTML

Jobs

Sales Account Executive

London

Software Development

Apply

Software Developer (Full Stack)

Remote

Sales

Apply

Android Engineer 2 positions

London

Software Development

Apply

Business Strategy Manager

San Francisco

Business strategy

Apply

Product Designer 7 positions

San Francisco

Design

Apply

Don't worry if you don't see any roles you want to apply for now. Register your interest to be notified of any roles that come along that meet your criteria.

              
                <!-- List Directory -->
                <div id="openingsSection" class="container content-space-1">
                  <div class="row align-items-sm-center">
                    <div class="col-sm mb-3">
                      <h5 class="mb-0">Jobs</h5>
                    </div>
                    <!-- End Col -->

                    <div class="col-sm-auto mb-3">
                      <button type="button" class="btn btn-white">
                        <i class="bi-bell me-1"></i> Create alert  
                      </button>
                    </div>
                    <!-- End Col -->
                  </div>
                  <!-- End Row -->

                  <div class="d-grid gap-3">
                    <!-- Card -->
                    <a class="card" href="../page-careers-role-overview.html">
                      <div class="card-body">
                        <div class="row">
                          <div class="col-md-4 mb-2 mb-md-0">
                            <span class="h6">Sales Account Executive</span>
                          </div>
                          <!-- End Col -->

                          <div class="col-sm-5 col-md-2 mb-2 mb-sm-0">
                            <span class="text-body">London</span>
                          </div>
                          <!-- End Col -->

                          <div class="col-sm-5 col-md-4 mb-2 mb-sm-0">
                            <span class="text-body">Software Development</span>
                          </div>
                          <!-- End Col -->

                          <div class="col-sm-2 text-sm-end">
                            <span class="link link-pointer">Apply</span>
                          </div>
                          <!-- End Col -->
                        </div>
                        <!-- End Row -->
                      </div>
                    </a>
                    <!-- End Card -->

                    <!-- Card -->
                    <a class="card" href="../page-careers-role-overview.html">
                      <div class="card-body">
                        <div class="row">
                          <div class="col-md-4 mb-2 mb-md-0">
                            <span class="h6">Software Developer (Full Stack)</span>
                          </div>
                          <!-- End Col -->

                          <div class="col-sm-5 col-md-2 mb-2 mb-sm-0">
                            <span class="text-body">Remote</span>
                          </div>
                          <!-- End Col -->

                          <div class="col-sm-5 col-md-4 mb-2 mb-sm-0">
                            <span class="text-body">Sales</span>
                          </div>
                          <!-- End Col -->

                          <div class="col-sm-2 text-sm-end">
                            <span class="link link-pointer">Apply</span>
                          </div>
                          <!-- End Col -->
                        </div>
                        <!-- End Row -->
                      </div>
                    </a>
                    <!-- End Card -->

                    <!-- Card -->
                    <a class="card" href="../page-careers-role-overview.html">
                      <div class="card-body">
                        <div class="row">
                          <div class="col-md-4 mb-2 mb-md-0">
                            <span class="h6">Android Engineer</span>
                            <span class="badge bg-soft-dark text-dark rounded-pill">2 positions</span>
                          </div>
                          <!-- End Col -->

                          <div class="col-sm-5 col-md-2 mb-2 mb-sm-0">
                            <span class="text-body">London</span>
                          </div>
                          <!-- End Col -->

                          <div class="col-sm-5 col-md-4 mb-2 mb-sm-0">
                            <span class="text-body">Software Development</span>
                          </div>
                          <!-- End Col -->

                          <div class="col-sm-2 text-sm-end">
                            <span class="link link-pointer">Apply</span>
                          </div>
                          <!-- End Col -->
                        </div>
                        <!-- End Row -->
                      </div>
                    </a>
                    <!-- End Card -->

                    <!-- Card -->
                    <a class="card" href="../page-careers-role-overview.html">
                      <div class="card-body">
                        <div class="row">
                          <div class="col-md-4 mb-2 mb-md-0">
                            <span class="h6">Business Strategy Manager</span>
                          </div>
                          <!-- End Col -->

                          <div class="col-sm-5 col-md-2 mb-2 mb-sm-0">
                            <span class="text-body">San Francisco</span>
                          </div>
                          <!-- End Col -->

                          <div class="col-sm-5 col-md-4 mb-2 mb-sm-0">
                            <span class="text-body">Business strategy</span>
                          </div>
                          <!-- End Col -->

                          <div class="col-sm-2 text-sm-end">
                            <span class="link link-pointer">Apply</span>
                          </div>
                          <!-- End Col -->
                        </div>
                        <!-- End Row -->
                      </div>
                    </a>
                    <!-- End Card -->

                    <!-- Card -->
                    <a class="card" href="../page-careers-role-overview.html">
                      <div class="card-body">
                        <div class="row">
                          <div class="col-md-4 mb-2 mb-md-0">
                            <span class="h6">Product Designer</span>
                            <span class="badge bg-soft-dark text-dark rounded-pill">7 positions</span>
                          </div>
                          <!-- End Col -->

                          <div class="col-sm-5 col-md-2 mb-2 mb-sm-0">
                            <span class="text-body">San Francisco</span>
                          </div>
                          <!-- End Col -->

                          <div class="col-sm-5 col-md-4 mb-2 mb-sm-0">
                            <span class="text-body">Design</span>
                          </div>
                          <!-- End Col -->

                          <div class="col-sm-2 text-sm-end">
                            <span class="link link-pointer">Apply</span>
                          </div>
                          <!-- End Col -->
                        </div>
                        <!-- End Row -->
                      </div>
                    </a>
                    <!-- End Card -->
                  </div>

                  <div class="w-lg-65 text-center mx-lg-auto mt-7">
                    <p>Don't worry if you don't see any roles you want to apply for now. Register your interest to be notified of any roles that come along that meet your criteria.</p>
                    <a class="btn btn-primary" href="../page-contacts.html">Register your interest</a>
                  </div>
                </div>
                <!-- End List Directory -->

Component #4

Preview
HTML

Business

Front becomes an official Instagram Marketing Partner

Great news we're eager to share.

Aaron Larsson

Feb 15, 2021

              
                >!-- Card Grid -->
                >div class="container content-space-1">
                  >div class="row justify-content-lg-between">
                    >div class="col-lg-8">
                      >div class="d-grid gap-7">
                        >!-- Card -->
                        >div class="card card-borderless card-flush card-stretched-vertical">
                          >div class="row">
                            >div class="col-sm-5">
                              >img class="card-img" src="../assets/img/400x500/img7.jpg" alt="Image Description">
                            >/div>
                            >!-- End Col -->

                            >div class="col-sm-7">
                              >!-- Card Body -->
                              >div class="card-body">
                                >div class="mb-2">
                                  >a class="link" href="#">Business>/a>
                                >/div>

                                >h4 class="card-title">
                                  >a class="text-dark" href="../blog-article.html">Front becomes an official Instagram Marketing Partner>/a>
                                >/h4>
                                
                                >p class="card-text">Great news we're eager to share.>/p>
                                
                                >!-- Card Footer -->
                                >div class="card-footer">
                                  >div class="d-flex">
                                    >div class="flex-shrink-0">
                                      >a class="avatar avatar-circle" href="../blog-author-profile.html">
                                        >img class="avatar-img" src="../assets/img/160x160/img3.jpg" alt="Image Description">
                                      >/a>
                                    >/div>
                                  
                                    >div class="flex-grow-1 ms-3">
                                      >a class="link link-dark fw-medium" href="../blog-author-profile.html">Aaron Larsson>/a>
                                      >p class="card-text fs-5">Feb 15, 2021>/p>
                                    >/div>
                                  >/div>
                                >/div>
                                >!-- End Card Footer -->
                              >/div>
                              >!-- End Card Body -->
                            >/div>
                            >!-- End Col -->
                          >/div>
                          >!-- End Row -->
                        >/div>
                        >!-- End Card -->
                      >/div>
                    >/div>
                    >!-- End Col -->
                  >/div>
                  >!-- End Row -->
                >/div>
                >!-- End Card Grid -->

Component #5

Preview
HTML

Aaron Larsson

Jan 09, 2020

Facebook is creating a news section in Watch to feature breaking news

Facebook launched the Watch platform in August

              
                <!-- Card Grid -->
                <div class="container content-space-1">
                  <div class="row justify-content-lg-between">
                    <div class="col-lg-8">
                      <!-- Card -->
                      <a class="card card-transition align-items-start flex-wrap flex-row bg-img-start" href="../blog-article.html" style="background-image: url(../assets/img/900x450/img1.jpg); min-height: 25rem;">
                        <!-- Card Header -->
                        <div class="card-header w-100">
                          <div class="d-flex align-items-center">
                            <div class="flex-shrink-0">
                              <span class="avatar avatar-sm avatar-circle">
                                <img class="avatar-img" src="../assets/img/160x160/img3.jpg" alt="Image Description">
                              </span>
                            </div>

                            <div class="flex-grow-1 ms-3">
                              <h4 class="card-title text-white mb-0">Aaron Larsson</h4>
                              <p class="card-text text-white-70 small">Jan 09, 2020</p>
                            </div>
                          </div>
                        </div>
                        <!-- End Card Header -->

                        <!-- Card Footer -->
                        <div class="card-footer mt-auto">
                          <h3 class="text-white">Facebook is creating a news section in Watch to feature breaking news</h3>
                          <p class="text-white-70">Facebook launched the Watch platform in August</p>
                        </div>
                        <!-- End Card Footer -->
                      </a>
                      <!-- End Card -->
                    </div>
                    <!-- End Col -->
                  </div>
                  <!-- End Row -->
                </div>
                <!-- End Card Grid -->

Component #6

Preview
HTML

Studio by Htmlstream

Produce professional, reliable streams easily leveraging Htmlstream's innovative broadcast studio

Onsite

Optimize your in-person experience with best-in-class capabilities like badge printing and lead retrieval

              
                <!-- Card Grid -->
                <div class="container content-space-1 overflow-hidden">
                  <div class="row row-cols-1 row-cols-sm-2 gx-7">
                    <div class="col mb-7 mb-md-10">
                      <!-- Card -->
                      <a class="card card-ghost h-100" href="../blog-article.html">
                        <div class="row">
                          <div class="col-lg-5 mb-3 mb-lg-0">
                            <img class="card-img" src="../assets/img/580x480/img14.jpg" alt="Image Description">
                          </div>
                          <!-- End Col -->

                          <div class="col-lg-7">
                            <h4>Studio by Htmlstream</h4>
                            <p class="card-text">Produce professional, reliable streams easily leveraging Htmlstream's innovative broadcast studio</p>
                            <span class="card-link">Read more</span>
                          </div>
                          <!-- End Col -->
                        </div>
                        <!-- End Row -->
                      </a>
                      <!-- End Card -->
                    </div>
                    <!-- End Col -->

                    <div class="col mb-7 mb-md-10">
                      <!-- Card -->
                      <a class="card card-ghost h-100" href="../blog-article.html">
                        <div class="row">
                          <div class="col-lg-5 mb-3 mb-lg-0">
                            <img class="card-img" src="../assets/img/580x480/img15.jpg" alt="Image Description">
                          </div>
                          <!-- End Col -->

                          <div class="col-lg-7">
                            <h4>Onsite</h4>
                            <p class="card-text">Optimize your in-person experience with best-in-class capabilities like badge printing and lead retrieval</p>
                            <span class="card-link">Read more</span>
                          </div>
                          <!-- End Col -->
                        </div>
                        <!-- End Row -->
                      </a>
                      <!-- End Card -->
                    </div>
                    <!-- End Col -->
                  </div>
                  <!-- End Row -->
                </div>
                <!-- End Card Grid -->