Cards: Grid

Component #1

Preview
HTML

Less overhead, more collaboration

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

Virtual Venue

Create an immersive attendee experience with interactive programming for both digital and onsite audiences

Explore Virtual Venue

Studio by Htmlstream

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

Explore Studio

Onsite

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

Explore Onsite

              
                <!-- 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>Less overhead, more collaboration</h2>
                    <p>Start with award-winning templates, then customize to fit your style and professional needs.</p>
                  </div>
                  <!-- End Heading -->

                  <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3">
                    <div class="col mb-5 mb-md-0">
                      <!-- Card -->
                      <a class="card card-ghost card-transition-zoom h-100" href="../blog-article.html">
                        <div class="card-transition-zoom-item">
                          <img class="card-img" src="../assets/img/580x480/img1.jpg" alt="Image Description">
                        </div>

                        <div class="card-body">
                          <h4>Virtual Venue</h4>
                          <p class="card-text">Create an immersive attendee experience with interactive programming for both digital and onsite audiences</p>
                        </div>

                        <div class="card-footer">
                          <span class="card-link">Explore Virtual Venue</span>
                        </div>
                      </a>
                      <!-- End Card -->
                    </div>
                    <!-- End Col -->

                    <div class="col mb-5 mb-md-0">
                      <!-- Card -->
                      <a class="card card-ghost card-transition-zoom h-100" href="../blog-article.html">
                        <div class="card-pinned card-transition-zoom-item">
                          <img class="card-img" src="../assets/img/580x480/img2.jpg" alt="Image Description">
                          <span class="badge bg-dark text-white card-pinned-top-end">Sponsored</span>
                        </div>

                        <div class="card-body">
                          <h4>Studio by Htmlstream</h4>
                          <p class="card-text">Produce professional, reliable streams easily leveraging Htmlstream's innovative broadcast studio</p>
                        </div>

                        <div class="card-footer">
                          <span class="card-link">Explore Studio</span>
                        </div>
                      </a>
                      <!-- End Card -->
                    </div>
                    <!-- End Col -->

                    <div class="col">
                      <!-- Card -->
                      <a class="card card-ghost card-transition-zoom h-100" href="../blog-article.html">
                        <div class="card-transition-zoom-item">
                          <img class="card-img" src="../assets/img/580x480/img3.jpg" alt="Image Description">
                        </div>

                        <div class="card-body">
                          <h4>Onsite</h4>
                          <p class="card-text">Optimize your in-person experience with best-in-class capabilities like badge printing and lead retrieval</p>
                        </div>

                        <div class="card-footer">
                          <span class="card-link">Explore Onsite</span>
                        </div>
                      </a>
                      <!-- End Card -->
                    </div>
                    <!-- End Col -->
                  </div>
                  <!-- End Row -->
                </div>
                <!-- End Card Grid -->

Component #2

Explore helpful resources

Our blog is packed with articles and insights to help you stay up to date with all things identity verification

Design

Explore the Snippets tool

Answer a few simple questions to get your policy. Talk to an agent if you need help.

Product

Assessing Constraints: Making Products for all Users

Design

Have a meaningful impact

Answer a few simple questions to get your policy. Talk to an agent if you need help.

Insights

Making the Brand: Fresh Finds Playlist Collection

              
                <!-- Card Grid -->
                <div class="overflow-hidden">
                  <div class="container content-space-1">
                    <div class="row justify-content-lg-between">
                      <div class="col-md-4 mb-7 mb-md-0">
                        <div class="mt-md-10 mb-5">
                          <h2>Explore helpful resources</h2>
                          <p>Our blog is packed with articles and insights to help you stay up to date with all things identity verification</p>
                        </div>

                        <!-- Alert -->
                        <div class="alert alert-soft-dark" role="alert">
                          <div class="d-flex">
                            <div class="flex-shrink-0">
                              <i class="bi-instagram"></i>
                            </div>
                            <div class="flex-grow-1 ms-3">
                              Follow us on <a class="alert-link" href="#" target="_blank">Instagram</a> to see Life at Unify
                            </div>
                          </div>
                        </div>
                        <!-- End Alert -->
                      </div>
                      <!-- End Col -->

                      <div class="col-md-7">
                        <!-- Swiper Slider -->
                        <div class="swiper-center-mode-end">
                          <div class="js-swiper-card-grid swiper swiper-equal-height ps-4">
                            <div class="swiper-wrapper">
                              <!-- Slide -->
                              <div class="swiper-slide pt-4 pb-8">
                                <!-- Card -->
                                <a class="card card-transition" href="#">
                                  <div class="card-pinned">
                                    <img class="card-img-top" src="../assets/svg/components/card-3.svg" alt="Image Description">
                                    <span class="badge bg-dark text-white card-pinned-top-end">Design</span>
                                  </div>
                                  <div class="card-body">
                                    <h5 class="card-title">Explore the Snippets tool</h5>
                                    <p>Answer a few simple questions to get your policy. Talk to an agent if you need help.</p>
                                  </div>
                                  <div class="card-footer pt-0">
                                    <span class="card-link">Read more</span>
                                  </div>
                                </a>
                                <!-- End Card -->
                              </div>
                              <!-- End Slide -->

                              <!-- Slide -->
                              <div class="swiper-slide pt-4 pb-8">
                                <!-- Card -->
                                <a class="card card-transition bg-primary" href="#" style="background-image: url(../assets/svg/components/wave-pattern-light.svg);">
                                  <div class="card-body">
                                    <span class="card-subtitle text-white mb-3">Product</span>
                                    <h3 class="card-title text-white lh-base">Assessing Constraints: Making Products for all Users</h3>
                                  </div>
                                  <div class="card-footer pt-0">
                                    <span class="card-link link-light">Read more</span>
                                  </div>
                                </a>
                                <!-- End Card -->
                              </div>
                              <!-- End Slide -->

                              <!-- Slide -->
                              <div class="swiper-slide pt-4 pb-8">
                                <!-- Card -->
                                <a class="card card-transition" href="#">
                                  <div class="card-pinned">
                                    <img class="card-img-top" src="../assets/svg/components/card-1.svg" alt="Image Description">
                                    <span class="badge bg-dark text-white card-pinned-top-end">Design</span>
                                  </div>
                                  <div class="card-body">
                                    <h5 class="card-title">Have a meaningful impact</h5>
                                    <p>Answer a few simple questions to get your policy. Talk to an agent if you need help.</p>
                                  </div>
                                  <div class="card-footer pt-0">
                                    <span class="card-link">Read more</span>
                                  </div>
                                </a>
                                <!-- End Card -->
                              </div>
                              <!-- End Slide -->

                              <!-- Slide -->
                              <div class="swiper-slide pt-4 pb-8">
                                <!-- Card -->
                                <a class="card card-transition bg-warning" href="#" style="background-image: url(../assets/svg/components/wave-pattern-2-light.svg);">
                                  <div class="card-body">
                                    <span class="card-subtitle text-white mb-3">Insights</span>
                                    <h3 class="card-title text-white lh-base">Making the Brand: Fresh Finds Playlist Collection</h3>
                                  </div>
                                  <div class="card-footer pt-0">
                                    <span class="card-link link-light">Read more</span>
                                  </div>
                                </a>
                                <!-- End Card -->
                              </div>
                              <!-- End Slide -->
                            </div>

                            <!-- Arrows -->
                            <div class="js-swiper-card-grid-button-prev swiper-button-prev swiper-static-button-prev"></div>
                            <div class="js-swiper-card-grid-button-next swiper-button-next swiper-static-button-next"></div>

                            <!-- Preloader -->
                            <div class="js-swiper-preloader swiper-preloader">
                              <div class="spinner-border text-primary" role="status">
                                <span class="visually-hidden">Loading...</span>
                              </div>
                            </div>
                            <!-- End Preloader -->
                          </div>
                        </div>
                        <!-- End Swiper Slider -->
                      </div>
                      <!-- End Col -->
                    </div>
                    <!-- End Row -->
                  </div>
                </div>
                <!-- End Card Grid -->

              
                <link rel="stylesheet" href="../node_modules/swiper/swiper-bundle.min.css">

              
                <!-- JS Implementing Plugins -->
                <script src="../node_modules/swiper/swiper-bundle.min.js"></script>

                <!-- JS Plugins Init. -->
                <script>
                  (function() {
                    // INITIALIZATION OF SWIPER
                    // =======================================================
                    var swiper = new Swiper('.js-swiper-card-grid',{
                      navigation: {
                        nextEl: '.js-swiper-card-grid-button-next',
                        prevEl: '.js-swiper-card-grid-button-prev',
                      },
                      slidesPerView: 1,
                      spaceBetween: 30,
                      loop: 1,
                      breakpoints: {
                        480: {
                          slidesPerView: 2
                        },
                        768: {
                          slidesPerView: 2
                        },
                        1024: {
                          slidesPerView: 3
                        },
                      },
                      on: {
                        'imagesReady': function (swiper) {
                          const preloader = swiper.el.querySelector('.js-swiper-preloader')
                          preloader.parentNode.removeChild(preloader)
                        }
                      }
                    });
                  })()
                </script>

For people and companies who have a story to tell

Built for you

Telling your story in the best way possible.

Built with creativity

We strive to embrace and drive change in our industry.

Built for business

Functionality your customers actually want.

Built for speed

72% faster loading speed compared to traditional websites.

              
                <!-- Features -->
                <div class="overflow-hidden">
                  <div class="container position-relative content-space-1">
                    <div class="row">
                      <div class="col-lg-5 align-self-lg-end mb-7 mb-lg-0">
                        <h2>For people and companies who have a story to tell</h2>
                        <div class="d-none d-lg-flex justify-content-center mt-7" style="width: 15rem;">
                          <img class="img-fluid" src="../assets/svg/illustrations/plane.svg" alt="Image Description">
                        </div>
                      </div>
                      <!-- End Col -->

                      <div class="col-lg-7 align-self-lg-center">
                        <div class="row">
                          <div class="col-lg-6 mb-4">
                            <!-- Card -->
                            <div class="card card-shadow h-100">
                              <div class="card-body">
                                <div class="mb-3">
                                  <i class="bi-emoji-smile fs-2 text-dark"></i>
                                </div>
                                <h4>Built for you</h4>
                                <p class="mb-0">Telling your story in the best way possible.</p>
                              </div>
                            </div>
                            <!-- End Card -->
                          </div>
                          <!-- End Col -->

                          <div class="col-lg-6 mb-4">
                            <!-- Card -->
                            <div class="card card-shadow h-100">
                              <div class="card-body">
                                <div class="mb-3">
                                  <i class="bi-droplet fs-2 text-dark"></i>
                                </div>
                                <h4>Built with creativity</h4>
                                <p class="mb-0">We strive to embrace and drive change in our industry.</p>
                              </div>
                            </div>
                            <!-- End Card -->
                          </div>
                          <!-- End Col -->

                          <div class="w-100"></div>

                          <div class="col-lg-6 mb-4 mb-lg-0">
                            <!-- Card -->
                            <div class="card card-shadow h-100">
                              <div class="card-body">
                                <div class="mb-3">
                                  <i class="bi-briefcase fs-2 text-dark"></i>
                                </div>
                                <h4>Built for business</h4>
                                <p class="mb-0">Functionality your customers actually want.</p>
                              </div>
                            </div>
                            <!-- End Card -->
                          </div>
                          <!-- End Col -->

                          <div class="col-lg-6">
                            <!-- Card -->
                            <div class="card card-shadow h-100">
                              <div class="card-body">
                                <div class="mb-3">
                                  <i class="bi-speedometer2 fs-2 text-dark"></i>
                                </div>
                                <h4>Built for speed</h4>
                                <p class="mb-0">72% faster loading speed compared to traditional websites.</p>
                              </div>
                            </div>
                            <!-- End Card -->
                          </div>
                          <!-- End Col -->
                        </div>
                        <!-- End Row -->
                      </div>
                      <!-- End Col -->
                    </div>
                    <!-- End Row -->

                    <div class="position-absolute top-0 start-0 w-100 w-lg-65 h-65 h-lg-100 bg-light rounded-3 zi-n1 ms-n5"></div>
                  </div>
                </div>
                <!-- End Features -->

Component #4

Preview
HTML

We work with companies with big ideas

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

              
                <!-- 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 row-cols-1 row-cols-sm-2 row-cols-md-3">
                    <div class="col mb-5 mb-md-0">
                      <!-- Card -->
                      <a class="card card-ghost card-transition-zoom h-100" href="#">
                        <div class="card-transition-zoom-item">
                          <img class="card-img" src="../assets/img/580x480/img1.jpg" alt="Image Description">
                        </div>

                        <div class="card-body">
                          <div class="mb-3">
                            <img class="avatar avatar-lg avatar-4x3" src="../assets/svg/brands/fitbit-dark.svg" alt="Logo">
                          </div>
                          <h5>Making tracks with global payments</h5>
                        </div>

                        <div class="card-footer mt-n5 mt-sm-0">
                          <span class="card-link">Read customer story</span>
                        </div>
                      </a>
                      <!-- End Card -->
                    </div>
                    <!-- End Col -->

                    <div class="col mb-5 mb-md-0">
                      <!-- Card -->
                      <a class="card card-ghost card-transition-zoom h-100" href="#">
                        <div class="card-pinned card-transition-zoom-item">
                          <img class="card-img" src="../assets/img/580x480/img2.jpg" alt="Image Description">
                          <span class="badge bg-dark text-white card-pinned-top-end">New startup</span>
                        </div>

                        <div class="card-body">
                          <div class="mb-3">
                            <img class="avatar avatar-lg avatar-4x3" src="../assets/svg/brands/mailchimp-dark.svg" alt="Logo">
                          </div>
                          <h5>The road to global expansion</h5>
                        </div>

                        <div class="card-footer mt-n5 mt-sm-0">
                          <span class="card-link">Read customer story</span>
                        </div>
                      </a>
                      <!-- End Card -->
                    </div>
                    <!-- End Col -->

                    <div class="col">
                      <!-- Card -->
                      <a class="card card-ghost card-transition-zoom h-100" href="#">
                        <div class="card-transition-zoom-item">
                          <img class="card-img" src="../assets/img/580x480/img4.jpg" alt="Image Description">
                        </div>

                        <div class="card-body">
                          <div class="mb-3">
                            <img class="avatar avatar-lg avatar-4x3" src="../assets/svg/brands/capsule-dark.svg" alt="Logo">
                          </div>
                          <h5>4 questions with Wade Stokes</h5>
                        </div>

                        <div class="card-footer mt-n5 mt-sm-0">
                          <span class="card-link">Read customer story</span>
                        </div>
                      </a>
                      <!-- End Card -->
                    </div>
                    <!-- End Col -->
                  </div>
                  <!-- End Row -->
                </div>
                <!-- End Card Grid -->

Component #5

Preview
HTML

Ask our community

Get help from 40k+ Unify users

Get help in the app

Just head to «Help» in the app

Email us

Reach us at info@site.com

              
                <!-- Card Grid -->
                <div class="container">
                  <div class="row">
                    <div class="col-sm-6 col-lg-4 mb-3 mb-lg-0">
                      <!-- Card -->
                      <a class="card card-transition h-100" href="#">
                        <div class="card-body">
                          <!-- Icon Block -->
                          <div class="d-flex">
                            <div class="flex-shrink-0">
                              <i class="bi-people fs-3 text-dark"></i>
                            </div>
                            <div class="flex-grow-1 ms-4">
                              <h5 class="card-title">Ask our community</h5>
                              <p class="card-text">Get help from 40k+ Unify users</p>
                            </div>
                          </div>
                          <!-- End Icon Block -->
                        </div>
                      </a>
                      <!-- End Card -->
                    </div>
                    <!-- End Col -->

                    <div class="col-sm-6 col-lg-4 mb-3 mb-lg-0">
                      <!-- Card -->
                      <a class="card card-transition h-100" href="#">
                        <div class="card-body">
                          <!-- Icon Block -->
                          <div class="d-flex">
                            <div class="flex-shrink-0">
                              <i class="bi-app-indicator fs-3 text-dark"></i>
                            </div>
                            <div class="flex-grow-1 ms-4">
                              <h5 class="card-title">Get help in the app</h5>
                              <p class="card-text">Just head to «Help» in the app</p>
                            </div>
                          </div>
                          <!-- End Icon Block -->
                        </div>
                      </a>
                      <!-- End Card -->
                    </div>
                    <!-- End Col -->

                    <div class="col-sm-6 col-lg-4">
                      <!-- Card -->
                      <a class="card card-transition h-100" href="#">
                        <div class="card-body">
                          <!-- Icon Block -->
                          <div class="d-flex">
                            <div class="flex-shrink-0">
                              <i class="bi-envelope-open fs-3 text-dark"></i>
                            </div>
                            <div class="flex-grow-1 ms-4">
                              <h5 class="card-title">Email us</h5>
                              <p class="card-text">Reach us at <span class="text-primary">info@site.com</span></p>
                            </div>
                          </div>
                          <!-- End Icon Block -->
                        </div>
                      </a>
                      <!-- End Card -->
                    </div>
                    <!-- End Col -->
                  </div>
                  <!-- End Row -->
                </div>
                <!-- End Card Grid -->

Component #6

Preview
HTML

Get more from your career

Join the people creating a one-stop shop for financial freedom.

6 positions

Database Administrator

2 positions

Assistant Company Secretary

19 positions

Legal

25 positions

Sales Director

              
                <!-- 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>Get more from your career</h2>
                    <p>Join the people creating a one-stop shop for financial freedom.</p>
                  </div>
                  <!-- End Heading -->

                  <div class="row row-cols-1 row-cols-sm-2 row-cols-lg-4 gx-2 gx-md-4">
                    <div class="col mb-2 mb-md-4">
                      <!-- Card -->
                      <a class="card card-borderless card-transition-zoom bg-soft-primary h-100" href="#">
                        <div class="card-transition-zoom-item">
                          <img class="card-img" src="../assets/svg/components/card-7.svg" alt="Image Description">
                        </div>
                        <div class="card-body">
                          <span class="card-subtitle text-body"><span class="fw-bold text-dark">6</span> positions</span>
                          <h4 class="card-title">Database Administrator</h4>
                        </div>
                      </a>
                      <!-- End Card -->
                    </div>
                    <!-- End Col -->

                    <div class="col mb-2 mb-md-4">
                      <!-- Card -->
                      <a class="card card-borderless card-transition-zoom bg-soft-primary h-100" href="#">
                        <div class="card-transition-zoom-item">
                          <img class="card-img" src="../assets/svg/components/card-8.svg" alt="Image Description">
                        </div>
                        <div class="card-body">
                          <span class="card-subtitle text-body"><span class="fw-bold text-dark">2</span> positions</span>
                          <h4 class="card-title">Assistant Company Secretary</h4>
                        </div>
                      </a>
                      <!-- End Card -->
                    </div>
                    <!-- End Col -->

                    <div class="col mb-2 mb-md-4">
                      <!-- Card -->
                      <a class="card card-borderless card-transition-zoom bg-soft-primary h-100" href="#">
                        <div class="card-transition-zoom-item">
                          <img class="card-img" src="../assets/svg/components/card-10.svg" alt="Image Description">
                        </div>
                        <div class="card-body">
                          <span class="card-subtitle text-body"><span class="fw-bold text-dark">19</span> positions</span>
                          <h4 class="card-title">Legal</h4>
                        </div>
                      </a>
                      <!-- End Card -->
                    </div>
                    <!-- End Col -->

                    <div class="col mb-2 mb-md-4">
                      <!-- Card -->
                      <a class="card card-borderless card-transition-zoom bg-soft-primary h-100" href="#">
                        <div class="card-transition-zoom-item">
                          <img class="card-img" src="../assets/svg/components/card-9.svg" alt="Image Description">
                        </div>
                        <div class="card-body">
                          <span class="card-subtitle text-body"><span class="fw-bold text-dark">25</span> positions</span>
                          <h4 class="card-title">Sales Director</h4>
                        </div>
                      </a>
                      <!-- End Card -->
                    </div>
                    <!-- End Col -->
                  </div>
                  <!-- End Row -->
                </div>
                <!-- End Card Grid -->

Component #7

Preview
HTML

The work we do,
and the people we help

New addition

Proof – Creating a design system for a suite of products

Branding

Front – Multipurpose Responsive Template

Admin & Dashboard

Front Dashboard – Admin & Dashboard Template

Landing & Corporate