Card Grid - Snippets | Space - Multipurpose Responsive Template

Component #1

Preview
HTML

Space features

Read how we've helped some great companies brand, design and get to market.

Attract

This is where we really begin to visualize your napkin sketches and make them into beautiful pixels.

Learn about Attract

Grow

Now that we've aligned the details, it's time to get things mapped out and organized.

Learn about Grow

Retain

We strive to embrace and drive change in our industry which allows us to keep our clients relevant.

Learn about Retain

Want to read more?

Explore Space news

              
                <!-- Blog -->
                <div class="container content-space-1">
                  <!-- Heading -->
                  <div class="w-lg-65 text-center mx-lg-auto mb-7">
                    <h3>Space features</h3>
                    <p class="fs-6">Read how we've helped some great companies brand, design and get to market.</p>
                  </div>
                  <!-- End Heading -->

                  <div class="row mb-5 mb-sm-5">
                    <div class="col-sm-6 col-lg-4 mb-3 mb-lg-5">
                      <!-- Card -->
                      <div class="card h-100 p-2">
                        <img class="card-img" src="../assets/img/600x400/img1.jpg" alt="Image Description">
                        <div class="card-body">
                          <h5 class="card-title">Attract</h5>
                          <p class="card-text">This is where we really begin to visualize your napkin sketches and make them into beautiful pixels.</p>
                          <a class="card-link" href="../blog-article.html">Learn about Attract <i class="bi-chevron-right small ms-1"></i></a>
                        </div>
                      </div>
                      <!-- End Card -->
                    </div>
                    <!-- End Col -->

                    <div class="col-sm-6 col-lg-4 mb-3 mb-lg-5">
                      <!-- Card -->
                      <div class="card h-100 p-2">
                        <img class="card-img" src="../assets/img/600x400/img2.jpg" alt="Image Description">
                        <div class="card-body">
                          <h5 class="card-title">Grow</h5>
                          <p class="card-text">Now that we've aligned the details, it's time to get things mapped out and organized.</p>
                          <a class="card-link" href="../blog-article.html">Learn about Grow <i class="bi-chevron-right small ms-1"></i></a>
                        </div>
                      </div>
                      <!-- End Card -->
                    </div>
                    <!-- End Col -->

                    <div class="col-sm-6 col-lg-4 mb-3 mb-lg-5">
                      <!-- Card -->
                      <div class="card h-100 p-2">
                        <img class="card-img" src="../assets/img/600x400/img3.jpg" alt="Image Description">
                        <div class="card-body">
                          <h5 class="card-title">Retain</h5>
                          <p class="card-text">We strive to embrace and drive change in our industry which allows us to keep our clients relevant.</p>
                          <a class="card-link" href="../blog-article.html">Learn about Retain <i class="bi-chevron-right small ms-1"></i></a>
                        </div>
                      </div>
                      <!-- End Card -->
                    </div>
                    <!-- End Col -->
                  </div>
                  <!-- End Row -->

                  <!-- Info -->
                  <div class="text-center">
                    <p class="mb-0">Want to read more?</p>
                    <a class="link" href="../blog-classic.html">Explore Space news <i class="bi-chevron-right small ms-1"></i></a>
                  </div>
                  <!-- End Info -->
                </div>
                <!-- End Blog -->

All about Space

Explore all Space guides and resources.

Data insights

Want to read more?

Explore all Space resources

              
                <!-- Blog -->
                <div class="container content-space-1">
                  <!-- Heading -->
                  <div class="w-lg-65 text-center mx-lg-auto mb-7">
                    <h3>All about Space</h3>
                    <p class="fs-6">Explore all Space guides and resources.</p>
                  </div>
                  <!-- End Heading -->

                  <div class="row mb-5 mb-sm-5">
                    <div class="col-sm-6 col-lg-4 mb-3 mb-lg-5">
                      <!-- Card -->
                      <a class="card card-lg card-transition bg-primary-dark" href="../blog-article.html" style="min-height: 22rem;">
                        <div class="card-body">
                          <div class="mb-3">
                            <span class="badge bg-soft-light">Data insights</span>
                          </div>
                          <h4 class="card-title text-white mb-5">State of product analytics report</h4>
                          <span class="card-link link-light">Learn more <i class="bi-chevron-right small ms-1"></i></span>
                          <div class="position-absolute bottom-0 start-0 end-0">
                            <img class="card-img" src="../assets/svg/components/shape-4-soft-light.svg" alt="Image Description">
                          </div>
                        </div>
                      </a>
                      <!-- End Card -->
                    </div>
                    <!-- End Col -->

                    <div class="col-sm-6 col-lg-4 mb-3 mb-lg-5">
                      <!-- Card -->
                      <a class="card card-lg card-transition bg-primary-dark" href="../blog-article.html" style="min-height: 22rem;">
                        <div class="card-body">
                          <div class="mb-3">
                            <span class="badge bg-soft-light">Ebooks & reports</span>
                          </div>
                          <h4 class="card-title text-white mb-5">Space 2020 system architecture</h4>
                          <span class="card-link link-light">Learn more <i class="bi-chevron-right small ms-1"></i></span>
                          <div class="position-absolute bottom-0 start-0 end-0">
                            <img class="card-img" src="../assets/svg/components/shape-5-soft-light.svg" alt="Image Description">
                          </div>
                        </div>
                      </a>
                      <!-- End Card -->
                    </div>
                    <!-- End Col -->

                    <div class="col-sm-6 col-lg-4 mb-3 mb-lg-5">
                      <!-- Card -->
                      <a class="card card-lg card-transition bg-primary-dark" href="../blog-article.html" style="min-height: 22rem;">
                        <div class="card-body">
                          <div class="mb-3">
                            <span class="badge bg-soft-light">Ebooks & reports</span>
                          </div>
                          <h4 class="card-title text-white mb-5">A guide to Space product materials</h4>
                          <span class="card-link link-light">Learn more <i class="bi-chevron-right small ms-1"></i></span>
                          <div class="position-absolute bottom-0 start-0 end-0">
                            <img class="card-img" src="../assets/svg/components/shape-6-soft-light.svg" alt="Image Description">
                          </div>
                        </div>
                      </a>
                      <!-- End Card -->
                    </div>
                    <!-- End Col -->
                  </div>
                  <!-- End Row -->

                  <!-- Info -->
                  <div class="text-center">
                    <p class="mb-0">Want to read more?</p>
                    <a class="link" href="../blog-classic.html">Explore all Space resources <i class="bi-chevron-right small ms-1"></i></a>
                  </div>
                  <!-- End Info -->
                </div>
                <!-- End Blog -->

Component #3

Preview
HTML

The backbone for internet business

A technology-first approach to payments and finance

Documentation

Discover how to build and maintain coding systems.

Snippets

Start browsing our snippets pages to match Bootstrap's level of quality.

Demos

Coming soon

Apart from 30+ HTML-pages, the theme comes with several demos.

Have a question?

Contact our sales team

              
                <!-- Blog -->
                <div class="container content-space-1">
                  <!-- Heading -->
                  <div class="w-lg-65 text-center mx-lg-auto mb-7">
                    <h3>The backbone for internet business</h3>
                    <p class="fs-6">A technology-first approach to payments and finance</p>
                  </div>
                  <!-- End Heading -->

                  <div class="row">
                    <div class="col-sm-6 col-md-4 mb-3 mb-sm-5 mb-md-7">
                      <!-- Card -->
                      <a class="card card-lg card-transition bg-soft-primary-light shadow-none h-100" href="../documentation/index.html">
                        <div class="card-header">
                          <h5 class="card-title text-inherit">Documentation</h5>
                          <p class="card-text text-body">Discover how to build and maintain coding systems.</p>
                        </div>
                        <div class="card-body">
                          <img class="card-img" src="../assets/svg/illustrations/frame-docs.svg" alt="Image Description">
                        </div>
                      </a>
                      <!-- End Card -->
                    </div>
                     <!-- End Cole -->

                    <div class="col-sm-6 col-md-4 mb-3 mb-sm-5 mb-md-7">
                      <!-- Card -->
                      <a class="card card-lg card-transition bg-soft-warning shadow-none h-100" href="../snippets/index.html">
                        <div class="card-header">
                          <h5 class="card-title text-inherit">Snippets</h5>
                          <p class="card-text text-body">Start browsing our snippets pages to match Bootstrap's level of quality.</p>
                        </div>
                        <div class="card-body">
                          <img class="card-img" src="../assets/svg/illustrations/frame-snippets.svg" alt="Image Description">
                        </div>
                      </a>
                      <!-- End Card -->
                    </div>
                    <!-- End Col -->

                    <div class="col-sm-6 col-md-4 mb-3 mb-sm-5 mb-md-7">
                      <!-- Card -->
                      <a class="card card-lg card-transition bg-soft-success shadow-none h-100" href="#">
                        <div class="card-header">
                          <div class="d-flex align-items-center">
                            <h5 class="card-title text-inherit mb-0">Demos</h5>
                            <span class="badge bg-soft-secondary text-secondary rounded-pill ms-1">Coming soon</span>
                          </div>
                          <p class="card-text text-body">Apart from 30+ HTML-pages, the theme comes with several demos.</p>
                        </div>
                        <div class="card-body">
                          <img class="card-img" src="../assets/svg/illustrations/frame-layouts.svg" alt="Image Description">
                        </div>
                      </a>
                      <!-- End Card -->
                    </div>
                    <!-- End Col -->
                  </div>
                  <!-- End Row -->

                  <!-- Info -->
                  <div class="text-center">
                    <p class="mb-0">Have a question?</p>
                    <a class="link" href="../page-contacts.html">Contact our sales team <i class="bi-chevron-right small ms-1"></i></a>
                  </div>
                  <!-- End Info -->
                </div>
                <!-- End Blog -->

Component #4

Preview
HTML

The backbone for internet business

A technology-first approach to payments and finance

Google

Google app is an easier way to search on Android.

Advanced Analytics
Digital Marketing
Organization

Get started Contact

Slack

Coming soon

Slack is a new way to communicate with your team. It's faster, better organized, and more secure than email.

Cost Transformation
Customer Experience
Mergers and Acquisitions

Get started Contact

Capsule

Simple yet powerful CRM. Discover an easier way to manage contacts, sales and grow lasting relationships.

Enterprise Technology
Private Equity
Sustainability

Get started Contact

Have a question?

Contact our support team

              
                <!-- Cards -->
                <div class="container content-space-1">
                  <!-- Heading -->
                  <div class="w-lg-65 text-center mx-lg-auto mb-7">
                    <h3>The backbone for internet business</h3>
                    <p class="fs-6">A technology-first approach to payments and finance</p>
                  </div>
                  <!-- End Heading -->

                  <div class="row mb-5 mb-md-0">
                    <div class="col-sm-6 col-lg-4 mb-3 mb-sm-5 mb-lg-7">
                      <!-- Card -->
                      <div class="card card-lg h-100">
                        <div class="card-header bg-soft-primary-light position-relative overflow-hidden">
                          <img class="avatar avatar-sm mb-3" src="../assets/svg/brands/google-icon.svg" alt="Image Description">
                          <h5 class="card-title">Google</h5>
                          <div class="position-absolute bottom-0 end-0">
                            <img src="../assets/svg/components/shape-5.svg" alt="Image Description" style="width: 10rem;">
                          </div>
                        </div>

                        <div class="card-body">
                          <p class="card-text">Google app is an easier way to search on Android.</p>

                          <!-- List Checked -->
                          <ul class="list-checked list-checked-primary mb-0">
                            <li class="list-checked-item">Advanced Analytics</li>
                            <li class="list-checked-item">Digital Marketing</li>
                            <li class="list-checked-item">Organization</li>
                          </ul>
                          <!-- End List Checked -->
                        </div>

                        <div class="card-footer pt-0">
                          <a class="btn btn-ghost-primary" href="#">Get started <i class="bi-chevron-right small ms-1"></i></a>
                          <a class="btn btn-ghost-secondary" href="#">Contact</a>
                        </div>
                      </div>
                      <!-- End Card -->
                    </div>
                     <!-- End Col -->

                    <div class="col-sm-6 col-lg-4 mb-3 mb-sm-5 mb-lg-7">
                      <!-- Card -->
                      <div class="card card-lg h-100">
                        <div class="card-header bg-soft-warning position-relative overflow-hidden">
                          <img class="avatar avatar-sm mb-3" src="../assets/svg/brands/slack-icon.svg" alt="Image Description">
                          <div class="d-flex align-items-center mb-2">
                            <h5 class="card-title mb-0">Slack</h5>
                            <span class="badge bg-warning text-dark rounded-pill ms-2">Coming soon</span>
                          </div>
                          <div class="position-absolute top-0 end-0">
                            <img src="../assets/svg/components/shape-3.svg" alt="Image Description" style="width: 10rem;">
                          </div>
                        </div>

                        <div class="card-body">
                          <p class="card-text">Slack is a new way to communicate with your team. It's faster, better organized, and more secure than email.</p>

                          <!-- List Checked -->
                          <ul class="list-checked list-checked-primary mb-0">
                            <li class="list-checked-item">Cost Transformation</li>
                            <li class="list-checked-item">Customer Experience</li>
                            <li class="list-checked-item">Mergers and Acquisitions</li>
                          </ul>
                          <!-- End List Checked -->
                        </div>

                        <div class="card-footer pt-0">
                          <a class="btn btn-ghost-primary" href="#">Get started <i class="bi-chevron-right small ms-1"></i></a>
                          <a class="btn btn-ghost-secondary" href="#">Contact</a>
                        </div>
                      </div>
                      <!-- End Card -->
                    </div>
                    <!-- End Col -->

                    <div class="col-sm-6 col-lg-4 mb-3 mb-sm-5 mb-lg-7">
                      <!-- Card -->
                      <div class="card card-lg h-100">
                        <div class="card-header bg-soft-success position-relative overflow-hidden">
                          <img class="avatar avatar-sm mb-3" src="../assets/svg/brands/capsule-icon.svg" alt="Image Description">
                          <h5 class="card-title">Capsule</h5>
                          <div class="position-absolute bottom-0 end-0">
                            <img src="../assets/svg/components/shape-6.svg" alt="Image Description" style="width: 10rem;">
                          </div>
                        </div>

                        <div class="card-body">
                          <p class="card-text">Simple yet powerful CRM. Discover an easier way to manage contacts, sales and grow lasting relationships.</p>

                          <!-- List Checked -->
                          <ul class="list-checked list-checked-primary mb-0">
                            <li class="list-checked-item">Enterprise Technology</li>
                            <li class="list-checked-item">Private Equity</li>
                            <li class="list-checked-item">Sustainability</li>
                          </ul>
                          <!-- End List Checked -->
                        </div>

                        <div class="card-footer pt-0">
                          <a class="btn btn-ghost-primary" href="#">Get started <i class="bi-chevron-right small ms-1"></i></a>
                          <a class="btn btn-ghost-secondary" href="#">Contact</a>
                        </div>
                      </div>
                      <!-- End Card -->
                    </div>
                    <!-- End Col -->
                  </div>
                  <!-- End Row -->

                  <!-- Info -->
                  <div class="text-center">
                    <p class="mb-0">Have a question?</p>
                    <a class="link" href="../page-contacts.html">Contact our support team <i class="bi-chevron-right small ms-1"></i></a>
                  </div>
                  <!-- End Info -->
                </div>
                <!-- End Cards -->

Component #5

Preview
HTML

Explore the Knowledge Base

Getting started

9 articles

See all articles

Your profile

14 articles

See all articles

Workspace administration

2 articles

See all articles

Payments

12 articles

See all articles

Billing & Accounts

5 articles

See all articles

Support

7 articles

See all articles

              
                <!-- Card -->
                <div class="container content-space-1">
                  <div class="w-lg-75 mx-lg-auto">
                    <!-- Heading -->
                    <div class="text-center mb-7">
                      <h3>Explore the Knowledge Base</h3>
                    </div>
                    <!-- End Heading -->

                    <div class="row">
                      <div class="col-sm-6 col-md-4 mb-4">
                        <!-- Card -->
                        <a class="card card-transition card-bordered shadow-none h-100" href="../page-help-center-categories.html">
                          <div class="card-body">
                            <div class="text-center mb-4">
                              <img class="img-fluid" src="../assets/img/illustrations/release.png" alt="Image Description" style="height: 7rem;">
                            </div>

                            <h6 class="card-title">Getting started</h6>
                            <p class="card-text text-body">9 articles</p>
                            <span class="small">See all articles <i class="bi-chevron-right small ms-1"></i></span>
                          </div>
                        </a>
                        <!-- End Card -->
                      </div>
                      <!-- End Col -->

                      <div class="col-sm-6 col-md-4 mb-4">
                        <!-- Card -->
                        <a class="card card-transition card-bordered shadow-none h-100" href="../page-help-center-categories.html">
                          <div class="card-body">
                            <div class="text-center mb-4">
                              <img class="img-fluid" src="../assets/img/illustrations/book.png" alt="Image Description" style="height: 7rem;">
                            </div>

                            <h6 class="card-title">Your profile</h6>
                            <p class="card-text text-body">14 articles</p>
                            <span class="small">See all articles <i class="bi-chevron-right small ms-1"></i></span>
                          </div>
                        </a>
                        <!-- End Card -->
                      </div>
                      <!-- End Col -->

                      <div class="col-sm-6 col-md-4 mb-4">
                        <!-- Card -->
                        <a class="card card-transition card-bordered shadow-none h-100" href="../page-help-center-categories.html">
                          <div class="card-body">
                            <div class="text-center mb-4">
                              <img class="img-fluid" src="../assets/img/illustrations/create.png" alt="Image Description" style="height: 7rem;">
                            </div>

                            <h6 class="card-title">Workspace administration</h6>
                            <p class="card-text text-body">2 articles</p>
                            <span class="small">See all articles <i class="bi-chevron-right small ms-1"></i></span>
                          </div>
                        </a>
                        <!-- End Card -->
                      </div>
                      <!-- End Col -->

                      <div class="col-sm-6 col-md-4 mb-4 mb-md-0">
                        <!-- Card -->
                        <a class="card card-transition card-bordered shadow-none h-100" href="../page-help-center-categories.html">
                          <div class="card-body">
                            <div class="text-center mb-4">
                              <img class="img-fluid" src="../assets/img/illustrations/presenting.png" alt="Image Description" style="height: 7rem;">
                            </div>

                            <h6 class="card-title">Payments</h6>
                            <p class="card-text text-body">12 articles</p>
                            <span class="small">See all articles <i class="bi-chevron-right small ms-1"></i></span>
                          </div>
                        </a>
                        <!-- End Card -->
                      </div>
                      <!-- End Col -->

                      <div class="col-sm-6 col-md-4 mb-4 mb-sm-0">
                        <!-- Card -->
                        <a class="card card-transition card-bordered shadow-none h-100" href="../page-help-center-categories.html">
                          <div class="card-body">
                            <div class="text-center mb-4">
                              <img class="img-fluid" src="../assets/img/illustrations/unlock.png" alt="Image Description" style="height: 7rem;">
                            </div>

                            <h6 class="card-title">Billing & Accounts</h6>
                            <p class="card-text text-body">5 articles</p>
                            <span class="small">See all articles <i class="bi-chevron-right small ms-1"></i></span>
                          </div>
                        </a>
                        <!-- End Card -->
                      </div>
                      <!-- End Col -->

                      <div class="col-sm-6 col-md-4">
                        <!-- Card -->
                        <a class="card card-transition card-bordered shadow-none h-100" href="../page-help-center-categories.html">
                          <div class="card-body">
                            <div class="text-center mb-4">
                              <img class="img-fluid" src="../assets/img/illustrations/phone.png" alt="Image Description" style="height: 7rem;">
                            </div>

                            <h6 class="card-title">Support</h6>
                            <p class="card-text text-body">7 articles</p>
                            <span class="small">See all articles <i class="bi-chevron-right small ms-1"></i></span>
                          </div>
                        </a>
                        <!-- End Card -->
                      </div>
                      <!-- End Col -->
                    </div>
                    <!-- End Row -->
                  </div>
                </div>
                <!-- End Card -->