Cards

Space's cards provide a flexible and extensible content container with multiple variants and options.

Cards #1

.card-frame class has a few CSS styles along with transition effect on hover.

              
                <!-- List of Job Positions -->
                <ul class="list-unstyled mb-0">
                  <li class="my-3">
                    <!-- Job -->
                    <a class="d-block text-dark card-frame rounded p-4" href="../html/pages/careers-single.html">
                      <span class="row justify-content-sm-between align-items-sm-center">
                        <span class="col-sm-6 mb-2 mb-sm-0">
                          Business Strategy Manager
                          <small class="d-block text-muted">Chicago, US</small>
                        </span>
                        <span class="col-sm-6 text-primary text-sm-right">Full time</span>
                      </span>
                    </a>
                    <!-- End Job -->
                  </li>

                  <li class="my-3">
                    <!-- Job -->
                    <a class="d-block text-dark card-frame rounded p-4" href="../html/pages/careers-single.html">
                      <span class="row justify-content-sm-between align-items-sm-center">
                        <span class="col-sm-6 mb-2 mb-sm-0">
                          Business Strategy Senior Associate
                          <small class="d-block text-muted">New York, US</small>
                        </span>
                        <span class="col-sm-6 text-primary text-sm-right">Full time</span>
                      </span>
                    </a>
                    <!-- End Job -->
                  </li>

                  <li class="my-3">
                    <!-- Job -->
                    <a class="d-block text-dark card-frame rounded p-4" href="../html/pages/careers-single.html">
                      <span class="row justify-content-sm-between align-items-sm-center">
                        <span class="col-sm-6 mb-2 mb-sm-0">
                          Senior Analyst, Data Analytics
                          <small class="d-block text-muted">Sydney, Australia</small>
                        </span>
                        <span class="col-sm-6 text-primary text-sm-right">Full time</span>
                      </span>
                    </a>
                    <!-- End Job -->
                  </li>
                </ul>
                <!-- End List of Job Positions -->
              
            

Cards #2

.card-frame class has a few CSS styles along with transition effect on hover.

              
                <!-- List of Topics -->
                <ul class="list-unstyled">
                  <li class="mt-2 mb-4">
                    <!-- Topic -->
                    <a class="d-block card-frame rounded p-5" href="#">
                      <div class="row align-items-center">
                        <div class="col-3 col-md-2">
                          <img class="d-block max-width-9 mx-auto" src="../assets/svg/components/receipt-dark-icon.svg" alt="Image Description">
                        </div>

                        <div class="col-9 col-md-10">
                          <h3 class="h4">How do I get a receipt for my purchase?</h3>

                          <div class="media">
                            <!-- Contributors List -->
                            <ul class="list-inline mr-2 mb-0">
                              <li class="list-inline-item mr-0">
                                <img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img3.jpg" alt="Image Description">
                              </li>
                              <li class="list-inline-item ml-offset-3 mr-0">
                                <img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img4.jpg" alt="Image Description">
                              </li>
                            </ul>
                            <!-- End Contributors List -->

                            <div class="media-body">
                              <!-- Article Authors -->
                              <small class="d-block text-secondary">1 article in this collection</small>
                              <small class="d-block text-secondary">
                                <span class="text-muted">Written by</span>
                                Luisa Woodfine
                                <span class="text-muted">and</span>
                                Neil Galavan
                              </small>
                              <!-- End Article Authors -->
                            </div>
                          </div>
                        </div>
                      </div>
                    </a>
                    <!-- End Topic -->
                  </li>

                  <li class="my-4">
                    <!-- Topic -->
                    <a class="d-block card-frame rounded p-5" href="#">
                      <div class="row align-items-center">
                        <div class="col-3 col-md-2">
                          <img class="d-block max-width-9 mx-auto" src="../assets/svg/components/payment-dark-icon.svg" alt="Image Description">
                        </div>

                        <div class="col-9 col-md-10">
                          <h3 class="h4">What methods of payments are supported?</h3>

                          <div class="media">
                            <!-- Contributors List -->
                            <ul class="list-inline mr-2 mb-0">
                              <li class="list-inline-item mr-0">
                                <img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img1.jpg" alt="Image Description">
                              </li>
                              <li class="list-inline-item ml-offset-3 mr-0">
                                <img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img3.jpg" alt="Image Description">
                              </li>
                              <li class="list-inline-item ml-offset-3 mr-0">
                                <img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img4.jpg" alt="Image Description">
                              </li>
                            </ul>
                            <!-- End Contributors List -->

                            <div class="media-body">
                              <!-- Article Authors -->
                              <small class="d-block text-secondary">2 article in this collection</small>
                              <small class="d-block text-secondary">
                                <span class="text-muted">Written by</span>
                                Fiona Burke, Luisa Woodfine
                                <span class="text-muted">and</span>
                                Neil Galavan
                              </small>
                              <!-- End Article Authors -->
                            </div>
                          </div>
                        </div>
                      </div>
                    </a>
                    <!-- End Topic -->
                  </li>

                  <li class="my-4">
                    <!-- Topic -->
                    <a class="d-block card-frame rounded p-5" href="#">
                      <div class="row align-items-center">
                        <div class="col-3 col-md-2">
                          <img class="d-block max-width-9 mx-auto" src="../assets/svg/components/unlocked-dark-icon.svg" alt="Image Description">
                        </div>

                        <div class="col-9 col-md-10">
                          <h3 class="h4">How do I get access to a theme I purchased?</h3>

                          <div class="media">
                            <!-- Contributors List -->
                            <ul class="list-inline mr-2 mb-0">
                              <li class="list-inline-item mr-0">
                                <img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img1.jpg" alt="Image Description">
                              </li>
                              <li class="list-inline-item ml-offset-3 mr-0">
                                <img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img3.jpg" alt="Image Description">
                              </li>
                              <li class="list-inline-item ml-offset-3 mr-0">
                                <img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img4.jpg" alt="Image Description">
                              </li>
                              <li class="list-inline-item ml-offset-3 mr-0">
                                <img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img5.jpg" alt="Image Description">
                              </li>
                            </ul>
                            <!-- End Contributors List -->

                            <div class="media-body">
                              <!-- Article Authors -->
                              <small class="d-block text-secondary">5 article in this collection</small>
                              <small class="d-block text-secondary">
                                <span class="text-muted">Written by</span>
                                Fiona Burke, Luisa Woodfine, Neil Galavan
                                <span class="text-muted">and</span>
                                Monica Garcia
                              </small>
                              <!-- End Article Authors -->
                            </div>
                          </div>
                        </div>
                      </div>
                    </a>
                    <!-- End Topic -->
                  </li>

                  <li class="my-4">
                    <!-- Topic -->
                    <a class="d-block card-frame rounded p-5" href="#">
                      <div class="row align-items-center">
                        <div class="col-3 col-md-2">
                          <img class="d-block max-width-9 mx-auto" src="../assets/svg/components/file-dark-icon.svg" alt="Image Description">
                        </div>

                        <div class="col-9 col-md-10">
                          <h3 class="h4">Which license do I need?</h3>

                          <div class="media">
                            <!-- Contributors List -->
                            <ul class="list-inline mr-2 mb-0">
                              <li class="list-inline-item mr-0">
                                <img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img1.jpg" alt="Image Description">
                              </li>
                              <li class="list-inline-item ml-offset-3 mr-0">
                                <img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img3.jpg" alt="Image Description">
                              </li>
                              <li class="list-inline-item ml-offset-3 mr-0">
                                <img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img4.jpg" alt="Image Description">
                              </li>
                              <li class="list-inline-item ml-offset-3 mr-0">
                                <img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img5.jpg" alt="Image Description">
                              </li>
                            </ul>
                            <!-- End Contributors List -->

                            <div class="media-body">
                              <!-- Article Authors -->
                              <small class="d-block text-secondary">5 article in this collection</small>
                              <small class="d-block text-secondary">
                                <span class="text-muted">Written by</span>
                                Fiona Burke, Luisa Woodfine, Neil Galavan
                                <span class="text-muted">and</span>
                                Monica Garcia
                              </small>
                              <!-- End Article Authors -->
                            </div>
                          </div>
                        </div>
                      </div>
                    </a>
                    <!-- End Topic -->
                  </li>

                  <li class="my-4">
                    <!-- Topic -->
                    <a class="d-block card-frame rounded p-5" href="#">
                      <div class="row align-items-center">
                        <div class="col-3 col-md-2">
                          <img class="d-block max-width-9 mx-auto" src="../assets/svg/components/refund-dark-icon.svg" alt="Image Description">
                        </div>

                        <div class="col-9 col-md-10">
                          <h3 class="h4">How can I get a refund?</h3>

                          <div class="media">
                            <!-- Contributors List -->
                            <ul class="list-inline mr-2 mb-0">
                              <li class="list-inline-item mr-0">
                                <img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img3.jpg" alt="Image Description">
                              </li>
                            </ul>
                            <!-- End Contributors List -->

                            <div class="media-body">
                              <!-- Article Authors -->
                              <small class="d-block text-secondary">3 article in this collection</small>
                              <small class="d-block text-secondary">
                                <span class="text-muted">Written by</span>
                                Luisa Woodfine
                              </small>
                              <!-- End Article Authors -->
                            </div>
                          </div>
                        </div>
                      </div>
                    </a>
                    <!-- End Topic -->
                  </li>

                  <li class="my-4">
                    <!-- Topic -->
                    <a class="d-block card-frame rounded p-5" href="#">
                      <div class="row align-items-center">
                        <div class="col-3 col-md-2">
                          <img class="d-block max-width-9 mx-auto" src="../assets/svg/components/comments-dark-icon.svg" alt="Image Description">
                        </div>

                        <div class="col-9 col-md-10">
                          <h3 class="h4">How do I get help with the theme I purchased?</h3>

                          <div class="media">
                            <!-- Contributors List -->
                            <ul class="list-inline mr-2 mb-0">
                              <li class="list-inline-item mr-0">
                                <img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img1.jpg" alt="Image Description">
                              </li>
                              <li class="list-inline-item ml-offset-3 mr-0">
                                <img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img3.jpg" alt="Image Description">
                              </li>
                              <li class="list-inline-item ml-offset-3 mr-0">
                                <img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img4.jpg" alt="Image Description">
                              </li>
                            </ul>
                            <!-- End Contributors List -->

                            <div class="media-body">
                              <!-- Article Authors -->
                              <small class="d-block text-secondary">2 article in this collection</small>
                              <small class="d-block text-secondary">
                                <span class="text-muted">Written by</span>
                                Fiona Burke, Luisa Woodfine
                                <span class="text-muted">and</span>
                                Neil Galavan
                              </small>
                              <!-- End Article Authors -->
                            </div>
                          </div>
                        </div>
                      </div>
                    </a>
                    <!-- End Topic -->
                  </li>

                  <li class="mt-4 mb-0">
                    <!-- Topic -->
                    <a class="d-block card-frame rounded p-5" href="#">
                      <div class="row align-items-center">
                        <div class="col-3 col-md-2">
                          <img class="d-block max-width-9 mx-auto" src="../assets/svg/components/user-dark-icon.svg" alt="Image Description">
                        </div>

                        <div class="col-9 col-md-10">
                          <h3 class="h4">My account</h3>

                          <div class="media">
                            <!-- Contributors List -->
                            <ul class="list-inline mr-2 mb-0">
                              <li class="list-inline-item mr-0">
                                <img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img3.jpg" alt="Image Description">
                              </li>
                              <li class="list-inline-item ml-offset-3 mr-0">
                                <img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img5.jpg" alt="Image Description">
                              </li>
                            </ul>
                            <!-- End Contributors List -->

                            <div class="media-body">
                              <!-- Article Authors -->
                              <small class="d-block text-secondary">1 article in this collection</small>
                              <small class="d-block text-secondary">
                                <span class="text-muted">Written by</span>
                                Luisa Woodfine
                                <span class="text-muted">and</span>
                                Monica Garcia
                              </small>
                              <!-- End Article Authors -->
                            </div>
                          </div>
                        </div>
                      </div>
                    </a>
                    <!-- End Topic -->
                  </li>
                </ul>
                <!-- End List of Topics -->
              
            

Cards #3

Image Description

Slack

A cloud-based set of proprietary team collaboration tools and services.

Image Description

Mapbox

A large provider of custom online maps for websites and applications.

Image Description

Spotify

An entertainment service, specialized in music, podcast, and video streaming service.

Image Description

Airbnb

An online marketplace and hospitality service for people to lease or rent short-term lodging.

Image Description

DigitalOcean

Providing developers and businesses a reliable, easy-to-use cloud computing platform of virtual servers.

Image Description

InVision

InVision is the digital product design platform used to make the world's best customer experiences.

              
                <div class="container space-2 space-3--lg">
                  <div class="card-deck d-block d-lg-flex card-lg-gutters-2">
                    <div class="card border-0 mb-3">
                      <!-- Works -->
                      <div class="card-body border border-bottom-0 rounded-top text-center p-5">
                        <img class="u-md-avatar rounded mb-4" src="../assets/img/160x160/img3.jpg" alt="Image Description">
                        <h4 class="h5 mb-1">Slack</h4>
                        <p class="mb-0">A cloud-based set of proprietary team collaboration tools and services.</p>
                      </div>

                      <div class="card-footer text-center border rounded-bottom p-5">
                        <h4 class="h6 text-secondary">Contributors</h4>

                        <!-- Contributors List -->
                        <ul class="list-inline mr-2 mb-4">
                          <li class="list-inline-item mr-0">
                            <img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img1.jpg" alt="Image Description">
                          </li>
                          <li class="list-inline-item ml-offset-3 mr-0">
                            <img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img3.jpg" alt="Image Description">
                          </li>
                          <li class="list-inline-item ml-offset-3 mr-0">
                            <img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img4.jpg" alt="Image Description">
                          </li>
                          <li class="list-inline-item ml-offset-3 mr-0">
                            <img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img5.jpg" alt="Image Description">
                          </li>
                        </ul>
                        <!-- End Contributors List -->

                        <a class="btn btn-sm btn-primary btn-wide" href="../html/portfolio/case-studies-simple.html">Learn More</a>
                      </div>
                      <!-- End Works -->
                    </div>

                    <div class="card border-0 mb-3">
                      <!-- Works -->
                      <div class="card-body border border-bottom-0 rounded-top text-center p-5">
                        <img class="u-md-avatar rounded mb-4" src="../assets/img/160x160/img4.jpg" alt="Image Description">
                        <h4 class="h5 mb-1">Mapbox</h4>
                        <p class="mb-0">A large provider of custom online maps for websites and applications.</p>
                      </div>

                      <div class="card-footer text-center border rounded-bottom p-5">
                        <h4 class="h6 text-secondary">Contributors</h4>

                        <!-- Contributors List -->
                        <ul class="list-inline mr-2 mb-4">
                          <li class="list-inline-item mr-0">
                            <img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img2.jpg" alt="Image Description">
                          </li>
                          <li class="list-inline-item ml-offset-3 mr-0">
                            <img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img4.jpg" alt="Image Description">
                          </li>
                          <li class="list-inline-item ml-offset-3 mr-0">
                            <img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img5.jpg" alt="Image Description">
                          </li>
                        </ul>
                        <!-- End Contributors List -->

                        <a class="btn btn-sm btn-primary btn-wide" href="../html/portfolio/case-studies-simple.html">Learn More</a>
                      </div>
                      <!-- End Works -->
                    </div>

                    <div class="card border-0 mb-3">
                      <!-- Works -->
                      <div class="card-body border border-bottom-0 rounded-top text-center p-5">
                        <img class="u-md-avatar rounded mb-4" src="../assets/img/160x160/img5.jpg" alt="Image Description">
                        <h4 class="h5 mb-1">Spotify</h4>
                        <p class="mb-0">An entertainment service, specialized in music, podcast, and video streaming service.</p>
                      </div>

                      <div class="card-footer text-center border rounded-bottom p-5">
                        <h4 class="h6 text-secondary">Contributors</h4>

                        <!-- Contributors List -->
                        <ul class="list-inline mr-2 mb-4">
                          <li class="list-inline-item mr-0">
                            <img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img1.jpg" alt="Image Description">
                          </li>
                          <li class="list-inline-item ml-offset-3 mr-0">
                            <img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img5.jpg" alt="Image Description">
                          </li>
                        </ul>
                        <!-- End Contributors List -->

                        <a class="btn btn-sm btn-primary btn-wide" href="../html/portfolio/case-studies-simple.html">Learn More</a>
                      </div>
                      <!-- End Works -->
                    </div>
                  </div>

                  <div class="card-deck d-block d-lg-flex card-lg-gutters-2">
                    <div class="card border-0 mb-3 mb-lg-0">
                      <!-- Works -->
                      <div class="card-body border border-bottom-0 rounded-top text-center p-5">
                        <img class="u-md-avatar rounded mb-4" src="../assets/img/160x160/img2.jpg" alt="Image Description">
                        <h4 class="h5 mb-1">Airbnb</h4>
                        <p class="mb-0">An online marketplace and hospitality service for people to lease or rent short-term lodging.</p>
                      </div>

                      <div class="card-footer text-center border rounded-bottom p-5">
                        <h4 class="h6 text-secondary">Contributors</h4>

                        <!-- Contributors List -->
                        <ul class="list-inline mr-2 mb-4">
                          <li class="list-inline-item mr-0">
                            <img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img1.jpg" alt="Image Description">
                          </li>
                          <li class="list-inline-item ml-offset-3 mr-0">
                            <img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img3.jpg" alt="Image Description">
                          </li>
                          <li class="list-inline-item ml-offset-3 mr-0">
                            <img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img2.jpg" alt="Image Description">
                          </li>
                          <li class="list-inline-item ml-offset-3 mr-0">
                            <img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img4.jpg" alt="Image Description">
                          </li>
                          <li class="list-inline-item ml-offset-3 mr-0">
                            <img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img5.jpg" alt="Image Description">
                          </li>
                        </ul>
                        <!-- End Contributors List -->

                        <a class="btn btn-sm btn-primary btn-wide" href="../html/portfolio/case-studies-simple.html">Learn More</a>
                      </div>
                      <!-- End Works -->
                    </div>

                    <div class="card border-0 mb-3 mb-lg-0">
                      <!-- Works -->
                      <div class="card-body border border-bottom-0 rounded-top text-center p-5">
                        <img class="u-md-avatar rounded mb-4" src="../assets/img/160x160/img6.jpg" alt="Image Description">
                        <h4 class="h5 mb-1">DigitalOcean</h4>
                        <p class="mb-0">Providing developers and businesses a reliable, easy-to-use cloud computing platform of virtual servers.</p>
                      </div>

                      <div class="card-footer text-center border rounded-bottom p-5">
                        <h4 class="h6 text-secondary">Contributors</h4>

                        <!-- Contributors List -->
                        <ul class="list-inline mr-2 mb-4">
                          <li class="list-inline-item mr-0">
                            <img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img3.jpg" alt="Image Description">
                          </li>
                          <li class="list-inline-item ml-offset-3 mr-0">
                            <img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img2.jpg" alt="Image Description">
                          </li>
                          <li class="list-inline-item ml-offset-3 mr-0">
                            <img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img4.jpg" alt="Image Description">
                          </li>
                          <li class="list-inline-item ml-offset-3 mr-0">
                            <img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img5.jpg" alt="Image Description">
                          </li>
                        </ul>
                        <!-- End Contributors List -->

                        <a class="btn btn-sm btn-primary btn-wide" href="../html/portfolio/case-studies-simple.html">Learn More</a>
                      </div>
                      <!-- End Works -->
                    </div>

                    <div class="card border-0">
                      <!-- Works -->
                      <div class="card-body border border-bottom-0 rounded-top text-center p-5">
                        <img class="u-md-avatar rounded mb-4" src="../assets/img/160x160/img1.jpg" alt="Image Description">
                        <h4 class="h5 mb-1">InVision</h4>
                        <p class="mb-0">InVision is the digital product design platform used to make the world's best customer experiences.</p>
                      </div>

                      <div class="card-footer text-center border rounded-bottom p-5">
                        <h4 class="h6 text-secondary">Contributors</h4>

                        <!-- Contributors List -->
                        <ul class="list-inline mr-2 mb-4">
                          <li class="list-inline-item mr-0">
                            <img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img1.jpg" alt="Image Description">
                          </li>
                          <li class="list-inline-item ml-offset-3 mr-0">
                            <img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img3.jpg" alt="Image Description">
                          </li>
                          <li class="list-inline-item ml-offset-3 mr-0">
                            <img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img5.jpg" alt="Image Description">
                          </li>
                        </ul>
                        <!-- End Contributors List -->

                        <a class="btn btn-sm btn-primary btn-wide" href="../html/portfolio/case-studies-simple.html">Learn More</a>
                      </div>
                      <!-- End Works -->
                    </div>
                  </div>
                </div>
              
            

Cards #4

Image Description

Mapbox Cloud free trial

Test Space on Mapbox Cloud with your own data for free.

Start Free Trial
Image Description

Slack Cloud free trial

Test Space on Slack Cloud with your own data for free.

Start Free Trial
Image Description

Atlassian Cloud free trial

Test Space on Atlassian Cloud with your own data for free.

Start Free Trial
              
                <!-- Features Section -->
                <div class="bg-gray-100">
                  <div class="container space-2 space-3--lg">
                    <div class="card-deck d-block d-md-flex text-center">
                      <!-- Card -->
                      <div class="card shadow-sm mb-5 mb-md-0">
                        <div class="card-header bg-gray-100 p-6">
                          <img class="max-width-18" src="../assets/img/logos/mapbox.png" alt="Image Description">
                        </div>
                        <div class="card-body p-6">
                          <div class="mb-4">
                            <h3 class="h4">Mapbox Cloud free trial</h3>
                            <p>Test Space on Mapbox Cloud with your own data for free.</p>
                          </div>
                          <a class="btn btn-sm btn-primary" href="#">Start Free Trial</a>
                        </div>
                      </div>
                      <!-- End Card -->

                      <!-- Card -->
                      <div class="card shadow-sm mb-5 mb-md-0">
                        <div class="card-header bg-gray-100 p-6">
                          <img class="max-width-18" src="../assets/img/logos/slack.png" alt="Image Description">
                        </div>
                        <div class="card-body p-6">
                          <div class="mb-4">
                            <h3 class="h4">Slack Cloud free trial</h3>
                            <p>Test Space on Slack Cloud with your own data for free.</p>
                          </div>
                          <a class="btn btn-sm btn-primary" href="#">Start Free Trial</a>
                        </div>
                      </div>
                      <!-- End Card -->

                      <!-- Card -->
                      <div class="card shadow-sm">
                        <div class="card-header bg-gray-100 p-6">
                          <img class="max-width-18" src="../assets/img/logos/atlassian.png" alt="Image Description">
                        </div>
                        <div class="card-body p-6">
                          <div class="mb-4">
                            <h3 class="h4">Atlassian Cloud free trial</h3>
                            <p>Test Space on Atlassian Cloud with your own data for free.</p>
                          </div>
                          <a class="btn btn-sm btn-primary" href="#">Start Free Trial</a>
                        </div>
                      </div>
                      <!-- End Card -->
                    </div>
                  </div>
                </div>
                <!-- End Features Section -->
              
            

Cards #5

Product designer event

  • Join from anywhere
  • Nov 15-16
  • Image Description
  • Image Description
  • Image Description
  • +9
  • speakers

Design engineering

  • New York City, NY
  • Dec 04-07
  • Image Description
  • Image Description
  • Image Description
  • +1
  • speakers

Developer Meetup

  • San Francisco, CA
  • Dec 22-24
  • Image Description
  • Image Description
  • speakers

Space for Marketing

  • New York City, NY
  • Jan 19-22
  • Image Description
  • Image Description
  • KD
  • speakers
              
                <div class="card-deck d-block d-lg-flex mb-3">
                  <!-- Card -->
                  <div class="card gradient-half-purple-v1 text-white border-0 mb-3 mb-lg-0">
                    <div class="card-body">
                      <div class="media align-items-center">
                        <div class="align-self-start mr-3">
                          <span class="u-icon u-icon--light rounded-circle">
                            <span class="fa fa-play font-size-13 text-purple u-icon__inner"></span>
                          </span>
                        </div>
                        <div class="mr-2">
                          <div class="mb-2">
                            <h4 class="h5 font-weight-medium mb-0">Product designer event</h4>
                            <ul class="list-inline small text-light-70">
                              <li class="list-inline-item mr-3">
                                <span class="fa fa-map-marker-alt mr-1"></span>
                                <span>Join from anywhere</span>
                              </li>
                              <li class="list-inline-item">
                                <span class="fa fa-calendar-alt mr-1"></span>
                                <span>Nov 15-16</span>
                              </li>
                            </ul>
                          </div>

                          <!-- Speakers List -->
                          <ul class="list-inline mb-0">
                            <li class="list-inline-item mr-0">
                              <img class="img-fluid u-xs-avatar rounded-circle" src="../../assets/img/32x32/img2.jpg" alt="Image Description">
                            </li>
                            <li class="list-inline-item ml-offset-3 mr-0">
                              <img class="img-fluid u-xs-avatar rounded-circle" src="../../assets/img/32x32/img4.jpg" alt="Image Description">
                            </li>
                            <li class="list-inline-item ml-offset-3 mr-0">
                              <img class="img-fluid u-xs-avatar rounded-circle" src="../../assets/img/32x32/img3.jpg" alt="Image Description">
                            </li>
                            <li class="list-inline-item ml-offset-3 mr-0">
                              <span class="u-icon u-icon--sm u-icon--light rounded-circle">
                                <span class="u-icon__inner">+9</span>
                              </span>
                            </li>
                            <li class="list-inline-item text-light-70 small ml-1">speakers</li>
                          </ul>
                          <!-- End Speakers List -->
                        </div>
                        <div class="media-body text-right">
                          <button type="button" class="btn btn-sm btn-outline-light">Register</button>
                        </div>
                      </div>
                    </div>
                  </div>
                  <!-- End Card -->

                  <!-- Card -->
                  <div class="card">
                    <div class="card-body">
                      <div class="media align-items-center">
                        <div class="mr-2">
                          <div class="mb-2">
                            <h4 class="h5 font-weight-medium mb-0">Design engineering</h4>
                            <ul class="list-inline small text-secondary">
                              <li class="list-inline-item mr-3">
                                <span class="fa fa-map-marker-alt mr-1"></span>
                                <span>New York City, NY</span>
                              </li>
                              <li class="list-inline-item">
                                <span class="fa fa-calendar-alt mr-1"></span>
                                <span>Dec 04-07</span>
                              </li>
                            </ul>
                          </div>

                          <!-- Speakers List -->
                          <ul class="list-inline mb-0">
                            <li class="list-inline-item mr-0">
                              <img class="img-fluid u-xs-avatar rounded-circle" src="../../assets/img/32x32/img1.jpg" alt="Image Description">
                            </li>
                            <li class="list-inline-item ml-offset-3 mr-0">
                              <img class="img-fluid u-xs-avatar rounded-circle" src="../../assets/img/32x32/img5.jpg" alt="Image Description">
                            </li>
                            <li class="list-inline-item ml-offset-3 mr-0">
                              <img class="img-fluid u-xs-avatar rounded-circle" src="../../assets/img/32x32/img4.jpg" alt="Image Description">
                            </li>
                            <li class="list-inline-item ml-offset-3 mr-0">
                              <span class="u-icon u-icon--sm u-icon--secondary rounded-circle">
                                <span class="u-icon__inner">+1</span>
                              </span>
                            </li>
                            <li class="list-inline-item text-secondary small ml-1">speakers</li>
                          </ul>
                          <!-- End Speakers List -->
                        </div>
                        <div class="media-body text-right">
                          <button type="button" class="btn btn-sm btn-outline-primary">Register</button>
                        </div>
                      </div>
                    </div>
                  </div>
                  <!-- End Card -->
                </div>

                <div class="card-deck d-block d-lg-flex mb-3">
                  <!-- Card -->
                  <div class="card mb-3 mb-lg-0">
                    <div class="card-body">
                      <div class="media align-items-center">
                        <div class="mr-2">
                          <div class="mb-2">
                            <h4 class="h5 font-weight-medium mb-0">Developer Meetup</h4>
                            <ul class="list-inline small text-secondary">
                              <li class="list-inline-item mr-3">
                                <span class="fa fa-map-marker-alt mr-1"></span>
                                <span>San Francisco, CA</span>
                              </li>
                              <li class="list-inline-item">
                                <span class="fa fa-calendar-alt mr-1"></span>
                                <span>Dec 22-24</span>
                              </li>
                            </ul>
                          </div>

                          <!-- Speakers List -->
                          <ul class="list-inline mb-0">
                            <li class="list-inline-item mr-0">
                              <img class="img-fluid u-xs-avatar rounded-circle" src="../../assets/img/32x32/img5.jpg" alt="Image Description">
                            </li>
                            <li class="list-inline-item ml-offset-3 mr-0">
                              <img class="img-fluid u-xs-avatar rounded-circle" src="../../assets/img/32x32/img4.jpg" alt="Image Description">
                            </li>
                            <li class="list-inline-item text-secondary small ml-1">speakers</li>
                          </ul>
                          <!-- End Speakers List -->
                        </div>
                        <div class="media-body text-right">
                          <button type="button" class="btn btn-sm btn-outline-primary">Register</button>
                        </div>
                      </div>
                    </div>
                  </div>
                  <!-- End Card -->

                  <!-- Card -->
                  <div class="card">
                    <div class="card-body">
                      <div class="media align-items-center">
                        <div class="mr-2">
                          <div class="mb-2">
                            <h4 class="h5 font-weight-medium mb-0">Space for Marketing</h4>
                            <ul class="list-inline small text-secondary">
                              <li class="list-inline-item mr-3">
                                <span class="fa fa-map-marker-alt mr-1"></span>
                                <span>New York City, NY</span>
                              </li>
                              <li class="list-inline-item">
                                <span class="fa fa-calendar-alt mr-1"></span>
                                <span>Jan 19-22</span>
                              </li>
                            </ul>
                          </div>

                          <!-- Speakers List -->
                          <ul class="list-inline mb-0">
                            <li class="list-inline-item mr-0">
                              <img class="img-fluid u-xs-avatar rounded-circle" src="../../assets/img/32x32/img3.jpg" alt="Image Description">
                            </li>
                            <li class="list-inline-item ml-offset-3 mr-0">
                              <img class="img-fluid u-xs-avatar rounded-circle" src="../../assets/img/32x32/img1.jpg" alt="Image Description">
                            </li>
                            <li class="list-inline-item ml-offset-3 mr-0">
                              <span class="u-icon u-icon--sm u-icon--primary rounded-circle">
                                <span class="u-icon__inner">KD</span>
                              </span>
                            </li>
                            <li class="list-inline-item text-secondary small ml-1">speakers</li>
                          </ul>
                          <!-- End Speakers List -->
                        </div>
                        <div class="media-body text-right">
                          <button type="button" class="btn btn-sm btn-outline-primary">Register</button>
                        </div>
                      </div>
                    </div>
                  </div>
                  <!-- End Card -->
                </div>
              
            

Cards #6

01.

Request Quote

Request quotes from our 10k+ rated transport providers.

02.

Compare price

Compare prices and read previous customer feedback to pick the right delivery quote for you.

03.

Choose provider

Sit back and relax while your item is safely delivered by your chosen transport provider.

              
                <div class="card-deck d-block d-lg-flex">
                  <!-- Card -->
                  <div class="card shadow-sm overflow-hidden mb-3 mb-lg-0">
                    <div class="card-body p-5 pr-9">
                      <span class="h1 text-primary">01.</span>
                      <h3 class="h5 font-weight-medium">Request Quote</h3>
                      <p>Request quotes from our 10k+ rated transport providers.</p>
                    </div>
                    <div class="card-footer border-top-0 p-5 pr-9">
                      <a class="font-weight-medium" href="#">Explore more</a>
                    </div>
                  </div>
                  <!-- End Card -->

                  <!-- Card -->
                  <div class="card shadow-sm overflow-hidden mb-3 mb-lg-0">
                    <div class="card-body p-5 pr-9">
                      <span class="h1 text-primary">02.</span>
                      <h3 class="h5 font-weight-medium">Compare price</h3>
                      <p>Compare prices and read previous customer feedback to pick the right delivery quote for you.</p>
                    </div>
                    <div class="card-footer border-top-0 p-5 pr-9">
                      <a class="font-weight-medium" href="#">Explore more</a>
                    </div>
                  </div>
                  <!-- End Card -->

                  <!-- Card -->
                  <div class="card shadow-sm overflow-hidden">
                    <div class="card-body p-5 pr-9">
                      <span class="h1 text-primary">03.</span>
                      <h3 class="h5 font-weight-medium">Choose provider</h3>
                      <p>Sit back and relax while your item is safely delivered by your chosen transport provider.</p>
                    </div>
                    <div class="card-footer border-top-0 p-5 pr-9">
                      <a class="font-weight-medium" href="#">Explore more</a>
                    </div>
                  </div>
                  <!-- End Card -->
                </div>