Logo v4.3.1
Image Description

No Results

  • Get Support
  • Preview Demo
Logo v4.3.1
  • Docs
  • Snippets
  • Snippets
  • Introduction
  • Navbar / Heroes
  • Headers (Navbar)
  • Hero Sections
  • Content
  • Features
    General Stats Step Navs (Tabs)
  • Icon Blocks
  • Cards
    Grid List
  • Directory
    Grid List
  • Testimonials
  • Blogs
    Grid List
  • Tables
  • E-commerce
  • Pricing
  • Team Sections
  • Breadcrumb
  • Call-to-Action (CTA)
  • Modals
  • Portfolio
  • Gallery
  • Clients
  • Countdown
  • FAQ
  • Lists
  • Collapse/Accordion
  • Comments
  • Feedback & Reviews
  • User Profile
  • Sidebar Examples
  • Calendar View
  • Notification
  • Content Sections
  • Forms
  • Authentication
  • Feedback
  • Filters
  • Search
  • Directory
  • Subscribe
  • Account
  • Wizard & Steps
  • Contact / Footer
  • Contact Sections
  • Footer

Directory Grid

Component #1

  • Preview
  • HTML

Getting started

Welcome to Front! We're so glad you're here. Let's get started!

Image Description
Image Description

1 article in this collection

Written by Luisa Woodfine and Neil Galavan

Account

Adjust your profile and preferences to make Front work just for you!

Image Description
Image Description

2 article in this collection

Written by Fiona Burke, Luisa Woodfine and Neil Galavan

Data security

Detailed information on how our customer data is securely stored.

Image Description
Image Description

5 article in this collection

Written by Fiona Burke, Luisa Woodfine, Neil Galavan and Monica Garcia

Market

Some further explanation on when Front can and cannot be used.

Image Description

3 article in this collection

Written by Luisa Woodfine

Subscription

Assistance on how and when you might use the subscription product.

Image Description
Image Description

2 article in this collection

Written by Fiona Burke, Luisa Woodfine and Neil Galavan

Tips, tricks & more

Tips and tools for beginners and experts alike.

Image Description

2 article in this collection

Written by Luisa Woodfine

See all topics
              
                <!-- Card Grid -->
                <div class="container content-space-2 content-space-lg-3">
                  <div class="row mb-5">
                    <div class="col-lg-6 mb-3 mb-lg-5">
                      <!-- Card -->
                      <a class="card card-bordered card-transition h-100" href="../demo-help-desk/listing.html">
                        <div class="card-body">
                          <!-- Media -->
                          <div class="d-block d-sm-flex">
                            <div class="flex-shrink-0">
                              <span class="svg-icon text-primary mb-2 mb-sm-0">
                                @@include("../assets/vendor/duotone-icons/gen/gen002.svg")
                              </span>
                            </div>

                            <div class="flex-grow-1 ms-sm-4">
                              <h3 class="card-title">Getting started</h3>
                              <p class="card-text text-body">Welcome to Front! We're so glad you're here. Let's get started!</p>

                              <div class="d-flex">
                                <div class="flex-shrink-0">
                                  <!-- Avatar Group -->
                                  <div class="avatar-group avatar-group-xs">
                                    <div class="avatar avatar-xs avatar-circle">
                                      <img class="avatar-img" src="../assets/img/160x160/img1.jpg" alt="Image Description">
                                    </div>
                                    <div class="avatar avatar-xs avatar-circle">
                                      <img class="avatar-img" src="../assets/img/160x160/img8.jpg" alt="Image Description">
                                    </div>
                                  </div>
                                  <!-- End Avatar Group -->
                                </div>

                                <div class="flex-grow-1 ms-2">
                                  <p class="card-text text-dark small mb-0">1 article in this collection</p>
                                  <p class="card-text text-dark small">
                                    <span class="text-muted">Written by</span>
                                    Luisa Woodfine
                                    <span class="text-muted">and</span>
                                    Neil Galavan
                                  </p>
                                </div>
                              </div>
                            </div>
                          </div>
                          <!-- End Media -->
                        </div>
                      </a>
                      <!-- End Card -->
                    </div>
                    <!-- End Col -->

                    <div class="col-lg-6 mb-3 mb-lg-5">
                      <!-- Card -->
                      <a class="card card-bordered card-transition h-100" href="../demo-help-desk/listing.html">
                        <div class="card-body">
                          <!-- Media -->
                          <div class="d-block d-sm-flex">
                            <div class="flex-shrink-0">
                              <span class="svg-icon text-primary mb-2 mb-sm-0">
                                
                                
                                
                                

                              </span>
                            </div>

                            <div class="flex-grow-1 ms-sm-4">
                              <h3 class="card-title">Account</h3>
                              <p class="card-text text-body">Adjust your profile and preferences to make Front work just for you!</p>

                              <div class="d-flex">
                                <div class="flex-shrink-0">
                                  <!-- Avatar Group -->
                                  <div class="avatar-group avatar-group-xs">
                                    <div class="avatar avatar-xs avatar-circle">
                                      <img class="avatar-img" src="../assets/img/160x160/img9.jpg" alt="Image Description">
                                    </div>
                                    <div class="avatar avatar-xs avatar-circle">
                                      <img class="avatar-img" src="../assets/img/160x160/img3.jpg" alt="Image Description">
                                    </div>
                                  </div>
                                  <!-- End Avatar Group -->
                                </div>

                                <div class="flex-grow-1 ms-2">
                                  <p class="card-text text-dark small mb-0">2 article in this collection</p>
                                  <p class="card-text text-dark small">
                                    <span class="text-muted">Written by</span>
                                    Fiona Burke, Luisa Woodfine
                                    <span class="text-muted">and</span>
                                    Neil Galavan
                                  </p>
                                </div>
                              </div>
                            </div>
                          </div>
                          <!-- End Media -->
                        </div>
                      </a>
                      <!-- End Card -->
                    </div>
                    <!-- End Col -->

                    <div class="col-lg-6 mb-3 mb-lg-5">
                      <!-- Card -->
                      <a class="card card-bordered card-transition h-100" href="../demo-help-desk/listing.html">
                        <div class="card-body">
                          <!-- Media -->
                          <div class="d-block d-sm-flex">
                            <div class="flex-shrink-0">
                              <span class="svg-icon text-primary mb-2 mb-sm-0">
                                
                                
                                
                                
                                
                                

                              </span>
                            </div>

                            <div class="flex-grow-1 ms-sm-4">
                              <h3 class="card-title">Data security</h3>
                              <p class="card-text text-body">Detailed information on how our customer data is securely stored.</p>

                              <div class="d-flex">
                                <div class="flex-shrink-0">
                                  <!-- Avatar Group -->
                                  <div class="avatar-group avatar-group-xs">
                                    <div class="avatar avatar-xs avatar-circle">
                                      <img class="avatar-img" src="../assets/img/160x160/img9.jpg" alt="Image Description">
                                    </div>
                                    <div class="avatar avatar-xs avatar-circle">
                                      <img class="avatar-img" src="../assets/img/160x160/img4.jpg" alt="Image Description">
                                    </div>
                                  </div>
                                  <!-- End Avatar Group -->
                                </div>

                                <div class="flex-grow-1 ms-2">
                                  <p class="card-text text-dark small mb-0">5 article in this collection</p>
                                  <p class="card-text text-dark small">
                                    <span class="text-muted">Written by</span>
                                    Fiona Burke, Luisa Woodfine, Neil Galavan
                                    <span class="text-muted">and</span>
                                    Monica Garcia
                                  </p>
                                </div>
                              </div>
                            </div>
                          </div>
                          <!-- End Media -->
                        </div>
                      </a>
                      <!-- End Card -->
                    </div>
                    <!-- End Col -->

                    <div class="col-lg-6 mb-3 mb-lg-5">
                      <!-- Card -->
                      <a class="card card-bordered card-transition h-100" href="../demo-help-desk/listing.html">
                        <div class="card-body">
                          <!-- Media -->
                          <div class="d-block d-sm-flex">
                            <div class="flex-shrink-0">
                              <span class="svg-icon text-primary mb-2 mb-sm-0">
                                
                                
                                
                                
                                
                                
                                
                                
                                
                                

                              </span>
                            </div>

                            <div class="flex-grow-1 ms-sm-4">
                              <h3 class="card-title">Market</h3>
                              <p class="card-text text-body">Some further explanation on when Front can and cannot be used.</p>

                              <div class="d-flex">
                                <div class="flex-shrink-0">
                                  <!-- Avatar Group -->
                                  <div class="avatar-group avatar-group-xs">
                                    <div class="avatar avatar-xs avatar-circle">
                                      <img class="avatar-img" src="../assets/img/160x160/img7.jpg" alt="Image Description">
                                    </div>
                                  </div>
                                  <!-- End Avatar Group -->
                                </div>

                                <div class="flex-grow-1 ms-2">
                                  <p class="card-text text-dark small mb-0">3 article in this collection</p>
                                  <p class="card-text text-dark small">
                                    <span class="text-muted">Written by</span>
                                    Luisa Woodfine
                                  </p>
                                </div>
                              </div>
                            </div>
                          </div>
                          <!-- End Media -->
                        </div>
                      </a>
                      <!-- End Card -->
                    </div>
                    <!-- End Col -->

                    <div class="col-lg-6 mb-3 mb-lg-5">
                      <!-- Card -->
                      <a class="card card-bordered card-transition h-100" href="../demo-help-desk/listing.html">
                        <div class="card-body">
                          <!-- Media -->
                          <div class="d-block d-sm-flex">
                            <div class="flex-shrink-0">
                              <span class="svg-icon text-primary mb-2 mb-sm-0">
                                
                                
                                
                                

                              </span>
                            </div>

                            <div class="flex-grow-1 ms-sm-4">
                              <h3 class="card-title">Subscription</h3>
                              <p class="card-text text-body">Assistance on how and when you might use the subscription product.</p>

                              <div class="d-flex">
                                <div class="flex-shrink-0">
                                  <!-- Avatar Group -->
                                  <div class="avatar-group avatar-group-xs">
                                    <div class="avatar avatar-xs avatar-circle">
                                      <img class="avatar-img" src="../assets/img/160x160/img9.jpg" alt="Image Description">
                                    </div>
                                    <div class="avatar avatar-xs avatar-circle">
                                    <img class="avatar-img" src="../assets/img/160x160/img3.jpg" alt="Image Description">
                                  </div>
                                  </div>
                                  <!-- End Avatar Group -->
                                </div>

                                <div class="flex-grow-1 ms-2">
                                  <p class="card-text text-dark small mb-0">2 article in this collection</p>
                                  <p class="card-text text-dark small">
                                    <span class="text-muted">Written by</span>
                                    Fiona Burke, Luisa Woodfine
                                    <span class="text-muted">and</span>
                                    Neil Galavan
                                  </p>
                                </div>
                              </div>
                            </div>
                          </div>
                          <!-- End Media -->
                        </div>
                      </a>
                      <!-- End Card -->
                    </div>
                    <!-- End Col -->

                    <div class="col-lg-6 mb-3 mb-lg-5">
                      <!-- Card -->
                      <a class="card card-bordered card-transition h-100" href="../demo-help-desk/listing.html">
                        <div class="card-body">
                          <!-- Media -->
                          <div class="d-block d-sm-flex">
                            <div class="flex-shrink-0">
                              <span class="svg-icon text-primary mb-2 mb-sm-0">
                                
                                
                                
                                
                                
                                

                              </span>
                            </div>

                            <div class="flex-grow-1 ms-sm-4">
                              <h3 class="card-title">Tips, tricks & more</h3>
                              <p class="card-text text-body">Tips and tools for beginners and experts alike.</p>

                              <div class="d-flex">
                                <div class="flex-shrink-0">
                                  <!-- Avatar Group -->
                                  <div class="avatar-group avatar-group-xs">
                                    <div class="avatar avatar-xs avatar-circle">
                                      <img class="avatar-img" src="../assets/img/160x160/img7.jpg" alt="Image Description">
                                    </div>
                                  </div>
                                  <!-- End Avatar Group -->
                                </div>

                                <div class="flex-grow-1 ms-2">
                                  <p class="card-text text-dark small mb-0">2 article in this collection</p>
                                  <p class="card-text text-dark small">
                                    <span class="text-muted">Written by</span>
                                    Luisa Woodfine
                                  </p>
                                </div>
                              </div>
                            </div>
                          </div>
                          <!-- End Media -->
                        </div>
                      </a>
                      <!-- End Card -->
                    </div>
                    <!-- End Col -->
                  </div>
                  <!-- End Row -->

                  <div class="text-center">
                    <a class="btn btn-outline-primary btn-transition" href="../demo-help-desk/listing.html">See all topics</a>
                  </div>
                </div>
                <!-- End Card Grid -->
              
            

Component #2

  • Preview
  • HTML
Image Description

Dropbox

Image Description

A workspace to reduce busywork-so you can focus on the things that matter

Image Description

Asana

Image Description

Track tasks and projects, use agile boards, measure progress

Image Description

Slack

Image Description

Email collaboration and email service desk made easy

              
                <div class="row gx-3">
                  <div class="col-sm-6 col-md-4 mb-3 mb-md-0">
                    <!-- Card -->
                    <a class="card card-bordered card-transition h-100" href="../demo-app-marketplace/app-overview.html">
                      <img class="card-img-top" src="../assets/img/400x200/img5.jpg" alt="Image Description">

                      <div class="card-body">
                        <div class="d-flex align-items-center mb-2">
                          <h4 class="card-title mb-0">Dropbox</h4>
                          <img class="avatar avatar-xss ms-1" src="../assets/svg/illustrations/top-vendor.svg" alt="Image Description" title="Top Vendor">
                        </div>
                        <p class="card-text text-body">A workspace to reduce busywork-so you can focus on the things that matter</p>
                      </div>
                    </a>
                    <!-- End Card -->
                  </div>
                  <!-- End Col -->

                  <div class="col-sm-6 col-md-4 mb-3 mb-md-0">
                    <!-- Card -->
                    <a class="card card-bordered card-transition h-100" href="../demo-app-marketplace/app-overview.html">
                      <img class="card-img-top" src="../assets/img/400x200/img2.jpg" alt="Image Description">

                      <div class="card-body">
                        <div class="d-flex align-items-center mb-2">
                          <h4 class="card-title mb-0">Asana</h4>
                          <img class="avatar avatar-xss ms-1" src="../assets/svg/illustrations/top-vendor.svg" alt="Image Description" title="Top Vendor">
                        </div>
                        <p class="card-text text-body">Track tasks and projects, use agile boards, measure progress</p>
                      </div>
                    </a>
                    <!-- End Card -->
                  </div>
                  <!-- End Col -->

                  <div class="col-sm-6 col-md-4">
                    <!-- Card -->
                    <a class="card card-bordered card-transition h-100" href="../demo-app-marketplace/app-overview.html">
                      <img class="card-img-top" src="../assets/img/400x200/img3.jpg" alt="Image Description">

                      <div class="card-body">
                        <div class="d-flex align-items-center mb-2">
                          <h4 class="card-title mb-0">Slack</h4>
                          <img class="avatar avatar-xss ms-1" src="../assets/svg/illustrations/top-vendor.svg" alt="Image Description" title="Top Vendor">
                        </div>
                        <p class="card-text text-body">Email collaboration and email service desk made easy</p>
                      </div>
                    </a>
                    <!-- End Card -->
                  </div>
                  <!-- End Col -->
                </div>
                <!-- End Row -->
              
            

Component #3

  • Preview
  • HTML
  • JS
Image Description
New
For sale

Borrett Close, London

£689,000

  • 3 bed
  • 2 bath
  • 1,428 sqft
Image Description
For sale

The Drive, Ilford

£999,000

  • 2 bed
  • 1 bath
  • 2,123 sqft
Image Description
For sale

Alderney House, Enfield

£725,000

  • 1 bed
  • 1 bath
  • 1,791 sqft
              
                <!-- Card Grid -->
                <div class="container content-space-1">
                  <div class="row row-cols-1 row-cols-sm-2 row-cols-lg-3">
                    <div class="col mb-3">
                      <!-- Card -->
                      <div class="card card-flush shadow-none h-100">
                        <a class="card-pinned" href="../assets/img/1920x1080/img19.jpg" data-fslightbox="propertyGridGallery1">
                          <img class="card-img" src="../assets/img/480x320/img23.jpg" alt="Image Description">

                          <div class="card-pinned-top-start">
                            <span class="badge bg-success">New</span>
                          </div>

                          <div class="card-pinned-bottom-end">
                            <span class="btn btn-light btn-xs btn-icon">
                              <i class="bi-images"></i>
                            </span>
                          </div>
                        </a>

                        <a class="d-none" href="../assets/img/1920x1080/img20.jpg" data-fslightbox="propertyGridGallery1"></a>
                        <a class="d-none" href="../assets/img/1920x1080/img17.jpg" data-fslightbox="propertyGridGallery1"></a>
                        <a class="d-none" href="../assets/img/1920x1080/img16.jpg" data-fslightbox="propertyGridGallery1"></a>

                        <!-- Body -->
                        <a class="card-body" href="../demo-real-estate/property-overview.html">
                          <span class="card-subtitle text-body">For sale</span>

                          <div class="row align-items-center mb-3">
                            <div class="col">
                              <h4 class="card-title text-inherit">Borrett Close, London</h4>
                            </div>
                            <!-- End Col -->

                            <div class="col-auto">
                              <h3 class="card-title text-primary">£689,000</h3>
                            </div>
                            <!-- End Col -->
                          </div>
                          <!-- End Row -->

                          <ul class="list-inline list-separator text-body small">
                            <li class="list-inline-item">
                              <span class="svg-icon svg-icon-xs svg-inline text-muted me-1">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24"><path d="M22,19.5a.5.5,0,0,1-.5.5h-1a.5.5,0,0,1-.5-.5V16H4v3.5a.5.5,0,0,1-.5.5h-1a.5.5,0,0,1-.5-.5V4.5A.5.5,0,0,1,2.5,4h1a.5.5,0,0,1,.5.5V13H21a1,1,0,0,1,1,1ZM20,8H12a2,2,0,0,0-2,2v1.5a.5.5,0,0,0,.5.5h11a.5.5,0,0,0,.5-.5V10A2,2,0,0,0,20,8ZM5.5,12h3a.5.5,0,0,0,.5-.5V11a2,2,0,0,0-4,0v.5A.5.5,0,0,0,5.5,12Z"/></svg>
                              </span>
                              3 bed
                            </li>
                            <li class="list-inline-item">
                              <span class="svg-icon svg-icon-xs svg-inline text-muted me-1">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 512 512"><path d="M304,320a16,16,0,1,0,16,16A16,16,0,0,0,304,320Zm32-96a16,16,0,1,0,16,16A16,16,0,0,0,336,224Zm32,64a16,16,0,1,0-16-16A16,16,0,0,0,368,288Zm-32,32a16,16,0,1,0-16-16A16,16,0,0,0,336,320Zm-32-64a16,16,0,1,0,16,16A16,16,0,0,0,304,256Zm128-32a16,16,0,1,0-16-16A16,16,0,0,0,432,224Zm-48,16a16,16,0,1,0,16-16A16,16,0,0,0,384,240Zm-16-48a16,16,0,1,0,16,16A16,16,0,0,0,368,192Zm96,32a16,16,0,1,0,16,16A16,16,0,0,0,464,224Zm32-32a16,16,0,1,0,16,16A16,16,0,0,0,496,192Zm-64,64a16,16,0,1,0,16,16A16,16,0,0,0,432,256Zm-32,32a16,16,0,1,0,16,16A16,16,0,0,0,400,288Zm-64,64a16,16,0,1,0,16,16A16,16,0,0,0,336,352Zm-32,32a16,16,0,1,0,16,16A16,16,0,0,0,304,384Zm64-64a16,16,0,1,0,16,16A16,16,0,0,0,368,320Zm21.65-218.35-11.3-11.31a16,16,0,0,0-22.63,0L350.05,96A111.19,111.19,0,0,0,272,64c-19.24,0-37.08,5.3-52.9,13.85l-10-10A121.72,121.72,0,0,0,123.44,32C55.49,31.5,0,92.91,0,160.85V464a16,16,0,0,0,16,16H48a16,16,0,0,0,16-16V158.4c0-30.15,21-58.2,51-61.93a58.38,58.38,0,0,1,48.93,16.67l10,10C165.3,138.92,160,156.76,160,176a111.23,111.23,0,0,0,32,78.05l-5.66,5.67a16,16,0,0,0,0,22.62l11.3,11.31a16,16,0,0,0,22.63,0L389.65,124.28A16,16,0,0,0,389.65,101.65Z"/></svg>
                              </span>
                              2 bath
                            </li>
                            <li class="list-inline-item">
                              <i class="bi-rulers text-muted me-1"></i> 1,428 sqft
                            </li>
                          </ul>
                        </a>
                        <!-- End Body -->
                      </div>
                      <!-- End Card -->
                    </div>
                    <!-- End Col -->

                    <div class="col mb-3">
                      <!-- Card -->
                      <div class="card card-flush shadow-none h-100">
                        <a class="card-pinned" href="../assets/img/1920x1080/img12.jpg" data-fslightbox="propertyGridGallery2">
                          <img class="card-img" src="../assets/img/480x320/img19.jpg" alt="Image Description">

                          <div class="card-pinned-bottom-end">
                            <span class="btn btn-light btn-xs btn-icon">
                              <i class="bi-images"></i>
                            </span>
                          </div>
                        </a>

                        <a class="d-none" href="../assets/img/1920x1080/img11.jpg" data-fslightbox="propertyGridGallery2"></a>
                        <a class="d-none" href="../assets/img/1920x1080/img14.jpg" data-fslightbox="propertyGridGallery2"></a>

                        <!-- Body -->
                        <a class="card-body" href="../demo-real-estate/property-overview.html">
                          <span class="card-subtitle text-body">For sale</span>

                          <div class="row align-items-center mb-3">
                            <div class="col">
                              <h4 class="card-title text-inherit">The Drive, Ilford</h4>
                            </div>
                            <!-- End Col -->

                            <div class="col-auto">
                              <h3 class="card-title text-primary">£999,000</h3>
                            </div>
                            <!-- End Col -->
                          </div>
                          <!-- End Row -->

                          <ul class="list-inline list-separator text-body small">
                            <li class="list-inline-item">
                              <span class="svg-icon svg-icon-xs svg-inline text-muted me-1">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24"><path d="M22,19.5a.5.5,0,0,1-.5.5h-1a.5.5,0,0,1-.5-.5V16H4v3.5a.5.5,0,0,1-.5.5h-1a.5.5,0,0,1-.5-.5V4.5A.5.5,0,0,1,2.5,4h1a.5.5,0,0,1,.5.5V13H21a1,1,0,0,1,1,1ZM20,8H12a2,2,0,0,0-2,2v1.5a.5.5,0,0,0,.5.5h11a.5.5,0,0,0,.5-.5V10A2,2,0,0,0,20,8ZM5.5,12h3a.5.5,0,0,0,.5-.5V11a2,2,0,0,0-4,0v.5A.5.5,0,0,0,5.5,12Z"/></svg>
                              </span>
                              2 bed
                            </li>
                            <li class="list-inline-item">
                              <span class="svg-icon svg-icon-xs svg-inline text-muted me-1">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 512 512"><path d="M304,320a16,16,0,1,0,16,16A16,16,0,0,0,304,320Zm32-96a16,16,0,1,0,16,16A16,16,0,0,0,336,224Zm32,64a16,16,0,1,0-16-16A16,16,0,0,0,368,288Zm-32,32a16,16,0,1,0-16-16A16,16,0,0,0,336,320Zm-32-64a16,16,0,1,0,16,16A16,16,0,0,0,304,256Zm128-32a16,16,0,1,0-16-16A16,16,0,0,0,432,224Zm-48,16a16,16,0,1,0,16-16A16,16,0,0,0,384,240Zm-16-48a16,16,0,1,0,16,16A16,16,0,0,0,368,192Zm96,32a16,16,0,1,0,16,16A16,16,0,0,0,464,224Zm32-32a16,16,0,1,0,16,16A16,16,0,0,0,496,192Zm-64,64a16,16,0,1,0,16,16A16,16,0,0,0,432,256Zm-32,32a16,16,0,1,0,16,16A16,16,0,0,0,400,288Zm-64,64a16,16,0,1,0,16,16A16,16,0,0,0,336,352Zm-32,32a16,16,0,1,0,16,16A16,16,0,0,0,304,384Zm64-64a16,16,0,1,0,16,16A16,16,0,0,0,368,320Zm21.65-218.35-11.3-11.31a16,16,0,0,0-22.63,0L350.05,96A111.19,111.19,0,0,0,272,64c-19.24,0-37.08,5.3-52.9,13.85l-10-10A121.72,121.72,0,0,0,123.44,32C55.49,31.5,0,92.91,0,160.85V464a16,16,0,0,0,16,16H48a16,16,0,0,0,16-16V158.4c0-30.15,21-58.2,51-61.93a58.38,58.38,0,0,1,48.93,16.67l10,10C165.3,138.92,160,156.76,160,176a111.23,111.23,0,0,0,32,78.05l-5.66,5.67a16,16,0,0,0,0,22.62l11.3,11.31a16,16,0,0,0,22.63,0L389.65,124.28A16,16,0,0,0,389.65,101.65Z"/></svg>
                              </span>
                              1 bath
                            </li>
                            <li class="list-inline-item">
                              <i class="bi-rulers text-muted me-1"></i> 2,123 sqft
                            </li>
                          </ul>
                        </a>
                        <!-- End Body -->
                      </div>
                      <!-- End Card -->
                    </div>

                    <div class="col mb-3">
                      <!-- Card -->
                      <div class="card card-flush shadow-none h-100">
                        <a class="card-pinned" href="../assets/img/1920x1080/img26.jpg" data-fslightbox="propertyGridGallery3">
                          <img class="card-img" src="../assets/img/480x320/img20.jpg" alt="Image Description">

                          <div class="card-pinned-bottom-end">
                            <span class="btn btn-light btn-xs btn-icon">
                              <i class="bi-images"></i>
                            </span>
                          </div>
                        </a>

                        <a class="d-none" href="../assets/img/1920x1080/img18.jpg" data-fslightbox="propertyGridGallery3"></a>
                        <a class="d-none" href="../assets/img/1920x1080/img15.jpg" data-fslightbox="propertyGridGallery3"></a>

                        <!-- Body -->
                        <a class="card-body" href="../demo-real-estate/property-overview.html">
                          <span class="card-subtitle text-body">For sale</span>

                          <div class="row align-items-center mb-3">
                            <div class="col">
                              <h4 class="card-title text-inherit">Alderney House, Enfield</h4>
                            </div>
                            <!-- End Col -->

                            <div class="col-auto">
                              <h3 class="card-title text-primary">£725,000</h3>
                            </div>
                            <!-- End Col -->
                          </div>
                          <!-- End Row -->

                          <ul class="list-inline list-separator text-body small">
                            <li class="list-inline-item">
                              <span class="svg-icon svg-icon-xs svg-inline text-muted me-1">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24"><path d="M22,19.5a.5.5,0,0,1-.5.5h-1a.5.5,0,0,1-.5-.5V16H4v3.5a.5.5,0,0,1-.5.5h-1a.5.5,0,0,1-.5-.5V4.5A.5.5,0,0,1,2.5,4h1a.5.5,0,0,1,.5.5V13H21a1,1,0,0,1,1,1ZM20,8H12a2,2,0,0,0-2,2v1.5a.5.5,0,0,0,.5.5h11a.5.5,0,0,0,.5-.5V10A2,2,0,0,0,20,8ZM5.5,12h3a.5.5,0,0,0,.5-.5V11a2,2,0,0,0-4,0v.5A.5.5,0,0,0,5.5,12Z"/></svg>
                              </span>
                              1 bed
                            </li>
                            <li class="list-inline-item">
                              <span class="svg-icon svg-icon-xs svg-inline text-muted me-1">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 512 512"><path d="M304,320a16,16,0,1,0,16,16A16,16,0,0,0,304,320Zm32-96a16,16,0,1,0,16,16A16,16,0,0,0,336,224Zm32,64a16,16,0,1,0-16-16A16,16,0,0,0,368,288Zm-32,32a16,16,0,1,0-16-16A16,16,0,0,0,336,320Zm-32-64a16,16,0,1,0,16,16A16,16,0,0,0,304,256Zm128-32a16,16,0,1,0-16-16A16,16,0,0,0,432,224Zm-48,16a16,16,0,1,0,16-16A16,16,0,0,0,384,240Zm-16-48a16,16,0,1,0,16,16A16,16,0,0,0,368,192Zm96,32a16,16,0,1,0,16,16A16,16,0,0,0,464,224Zm32-32a16,16,0,1,0,16,16A16,16,0,0,0,496,192Zm-64,64a16,16,0,1,0,16,16A16,16,0,0,0,432,256Zm-32,32a16,16,0,1,0,16,16A16,16,0,0,0,400,288Zm-64,64a16,16,0,1,0,16,16A16,16,0,0,0,336,352Zm-32,32a16,16,0,1,0,16,16A16,16,0,0,0,304,384Zm64-64a16,16,0,1,0,16,16A16,16,0,0,0,368,320Zm21.65-218.35-11.3-11.31a16,16,0,0,0-22.63,0L350.05,96A111.19,111.19,0,0,0,272,64c-19.24,0-37.08,5.3-52.9,13.85l-10-10A121.72,121.72,0,0,0,123.44,32C55.49,31.5,0,92.91,0,160.85V464a16,16,0,0,0,16,16H48a16,16,0,0,0,16-16V158.4c0-30.15,21-58.2,51-61.93a58.38,58.38,0,0,1,48.93,16.67l10,10C165.3,138.92,160,156.76,160,176a111.23,111.23,0,0,0,32,78.05l-5.66,5.67a16,16,0,0,0,0,22.62l11.3,11.31a16,16,0,0,0,22.63,0L389.65,124.28A16,16,0,0,0,389.65,101.65Z"/></svg>
                              </span>
                              1 bath
                            </li>
                            <li class="list-inline-item">
                              <i class="bi-rulers text-muted me-1"></i> 1,791 sqft
                            </li>
                          </ul>
                        </a>
                        <!-- End Body -->
                      </div>
                      <!-- End Card -->
                    </div>
                  </div>
                  <!-- End Row -->
                </div>
                <!-- End Card Grid -->
              
            
              
                <script src="../node_modules/fslightbox/index.js"></script>
              
            

Component #4

  • Preview
  • HTML

Browse properties by city in the UK

Take a deep dive and browse original neighborhood photos, drone footage, resident reviews and local insights to see if the homes for sale are right for you.

  • For sale
  • For rent
3521 offers

London

Prices from £5,490,000
4659 offers

Oxford

Prices from £3,820,000
2471 offers

Edinburgh

Prices from £3,371,000
5523 offers

Newcastle

Prices from £2,588,000
939 offers

Liverpool

Prices from £1,318,000
364 offers

Bristol

Prices from £1,457,000
2471 offers

Edinburgh

Prices from £1,000
3521 offers

London

Prices from £5,000
4659 offers

Oxford

Prices from £7,000
939 offers

Liverpool

Prices from £8,000
364 offers

Bristol

Prices from £7,000
5523 offers

Newcastle

Prices from £5,000
              
                <!-- Card Grid -->
                <div class="container content-space-2 content-space-lg-3">
                  <!-- Title -->
                  <div class="w-md-75 w-lg-50 text-center mx-md-auto mb-5 mb-md-9">
                    <h2>Browse properties by city in the UK</h2>
                    <p>Take a deep dive and browse original neighborhood photos, drone footage, resident reviews and local insights to see if the homes for sale are right for you.</p>
                  </div>
                  <!-- End Title -->

                  <div class="text-center">
                    <!-- Nav -->
                    <ul class="nav nav-segment mb-7" id="featuresTab" role="tablist">
                      <li class="nav-item" role="presentation">
                        <a class="nav-link active" href="#forSale" id="forSale-tab" data-bs-toggle="tab" data-bs-target="#forSale" role="tab" aria-controls="forSale" aria-selected="true">For sale</a>
                      </li>

                      <li class="nav-item" role="presentation">
                        <a class="nav-link" href="#forRent" id="forRent-tab" data-bs-toggle="tab" data-bs-target="#forRent" role="tab" aria-controls="forRent" aria-selected="false">For rent</a>
                      </li>
                    </ul>
                    <!-- End Nav -->
                  </div>

                  <!-- Tab Content -->
                  <div class="tab-content" id="houseHeroTabContent">
                    <div class="tab-pane fade show active" id="forSale" role="tabpanel" aria-labelledby="forSale-tab">
                      <div class="row gx-3">
                        <div class="col-sm-6 col-lg-4 mb-3">
                          <!-- Card -->
                          <a class="card card-stretched-vertical card-transition shadow-none bg-img-start gradient-y-overlay-lg-dark" href="../demo-real-estate/property-grid.html" style="background-image: url(../assets/img/480x320/img28.jpg); min-height: 15rem;">
                            <div class="card-body">
                              <div class="mb-1">
                                <span class="badge bg-light text-dark">3521 offers</span>
                              </div>
                              
                              <div class="card-footer">
                                <h3 class="text-white mb-0">London</h3>
                                <span class="d-block text-white">Prices from £5,490,000</span>
                              </div>
                            </div>
                          </a>
                          <!-- End Card -->
                        </div>
                        <!-- End Col -->

                        <div class="col-sm-6 col-lg-4 mb-3">
                          <!-- Card -->
                          <a class="card card-stretched-vertical card-transition shadow-none bg-img-start gradient-y-overlay-lg-dark" href="../demo-real-estate/property-grid.html" style="background-image: url(../assets/img/480x320/img29.jpg); min-height: 15rem;">
                            <div class="card-body">
                              <div class="mb-1">
                                <span class="badge bg-light text-dark">4659 offers</span>
                              </div>
                              
                              <div class="card-footer">
                                <h3 class="text-white mb-0">Oxford</h3>
                                <span class="d-block text-white">Prices from £3,820,000</span>
                              </div>
                            </div>
                          </a>
                          <!-- End Card -->
                        </div>
                        <!-- End Col -->

                        <div class="col-sm-6 col-lg-4 mb-3">
                          <!-- Card -->
                          <a class="card card-stretched-vertical card-transition shadow-none bg-img-start gradient-y-overlay-lg-dark" href="../demo-real-estate/property-grid.html" style="background-image: url(../assets/img/480x320/img11.jpg); min-height: 15rem;">
                            <div class="card-body">
                              <div class="mb-1">
                                <span class="badge bg-light text-dark">2471 offers</span>
                              </div>
                              
                              <div class="card-footer">
                                <h3 class="text-white mb-0">Edinburgh</h3>
                                <span class="d-block text-white">Prices from £3,371,000</span>
                              </div>
                            </div>
                          </a>
                          <!-- End Card -->
                        </div>
                        <!-- End Col -->

                        <div class="col-sm-6 col-lg-4 mb-3">
                          <!-- Card -->
                          <a class="card card-stretched-vertical card-transition shadow-none bg-img-start gradient-y-overlay-lg-dark" href="../demo-real-estate/property-grid.html" style="background-image: url(../assets/img/480x320/img10.jpg); min-height: 15rem;">
                            <div class="card-body">
                              <div class="mb-1">
                                <span class="badge bg-light text-dark">5523 offers</span>
                              </div>
                              
                              <div class="card-footer">
                                <h3 class="text-white mb-0">Newcastle</h3>
                                <span class="d-block text-white">Prices from £2,588,000</span>
                              </div>
                            </div>
                          </a>
                          <!-- End Card -->
                        </div>
                        <!-- End Col -->

                        <div class="col-sm-6 col-lg-4 mb-3">
                          <!-- Card -->
                          <a class="card card-stretched-vertical card-transition shadow-none bg-img-start gradient-y-overlay-lg-dark" href="../demo-real-estate/property-grid.html" style="background-image: url(../assets/img/480x320/img9.jpg); min-height: 15rem;">
                            <div class="card-body">
                              <div class="mb-1">
                                <span class="badge bg-light text-dark">939 offers</span>
                              </div>
                              
                              <div class="card-footer">
                                <h3 class="text-white mb-0">Liverpool</h3>
                                <span class="d-block text-white">Prices from £1,318,000</span>
                              </div>
                            </div>
                          </a>
                          <!-- End Card -->
                        </div>
                        <!-- End Col -->

                        <div class="col-sm-6 col-lg-4 mb-3">
                          <!-- Card -->
                          <a class="card card-stretched-vertical card-transition shadow-none bg-img-start gradient-y-overlay-lg-dark" href="../demo-real-estate/property-grid.html" style="background-image: url(../assets/img/480x320/img8.jpg); min-height: 15rem;">
                            <div class="card-body">
                              <div class="mb-1">
                                <span class="badge bg-light text-dark">364 offers</span>
                              </div>
                              
                              <div class="card-footer">
                                <h3 class="text-white mb-0">Bristol</h3>
                                <span class="d-block text-white">Prices from £1,457,000</span>
                              </div>
                            </div>
                          </a>
                          <!-- End Card -->
                        </div>
                        <!-- End Col -->
                      </div>
                      <!-- End Row -->
                    </div>

                    <div class="tab-pane fade" id="forRent" role="tabpanel" aria-labelledby="forRent-tab">
                      <div class="row gx-3">
                        <div class="col-sm-6 col-lg-4 mb-3">
                          <!-- Card -->
                          <a class="card card-stretched-vertical card-transition shadow-none bg-img-start gradient-y-overlay-lg-dark" href="../demo-real-estate/property-grid.html" style="background-image: url(../assets/img/480x320/img11.jpg); min-height: 15rem;">
                            <div class="card-body">
                              <div class="mb-1">
                                <span class="badge bg-light text-dark">2471 offers</span>
                              </div>
                              
                              <div class="card-footer">
                                <h3 class="text-white mb-0">Edinburgh</h3>
                                <span class="d-block text-white">Prices from £1,000</span>
                              </div>
                            </div>
                          </a>
                          <!-- End Card -->
                        </div>
                        <!-- End Col -->

                        <div class="col-sm-6 col-lg-4 mb-3">
                          <!-- Card -->
                          <a class="card card-stretched-vertical card-transition shadow-none bg-img-start gradient-y-overlay-lg-dark" href="../demo-real-estate/property-grid.html" style="background-image: url(../assets/img/480x320/img28.jpg); min-height: 15rem;">
                            <div class="card-body">
                              <div class="mb-1">
                                <span class="badge bg-light text-dark">3521 offers</span>
                              </div>
                              
                              <div class="card-footer">
                                <h3 class="text-white mb-0">London</h3>
                                <span class="d-block text-white">Prices from £5,000</span>
                              </div>
                            </div>
                          </a>
                          <!-- End Card -->
                        </div>
                        <!-- End Col -->

                        <div class="col-sm-6 col-lg-4 mb-3">
                          <!-- Card -->
                          <a class="card card-stretched-vertical card-transition shadow-none bg-img-start gradient-y-overlay-lg-dark" href="../demo-real-estate/property-grid.html" style="background-image: url(../assets/img/480x320/img29.jpg); min-height: 15rem;">
                            <div class="card-body">
                              <div class="mb-1">
                                <span class="badge bg-light text-dark">4659 offers</span>
                              </div>
                              
                              <div class="card-footer">
                                <h3 class="text-white mb-0">Oxford</h3>
                                <span class="d-block text-white">Prices from £7,000</span>
                              </div>
                            </div>
                          </a>
                          <!-- End Card -->
                        </div>
                        <!-- End Col -->

                        <div class="col-sm-6 col-lg-4 mb-3">
                          <!-- Card -->
                          <a class="card card-stretched-vertical card-transition shadow-none bg-img-start gradient-y-overlay-lg-dark" href="../demo-real-estate/property-grid.html" style="background-image: url(../assets/img/480x320/img9.jpg); min-height: 15rem;">
                            <div class="card-body">
                              <div class="mb-1">
                                <span class="badge bg-light text-dark">939 offers</span>
                              </div>
                              
                              <div class="card-footer">
                                <h3 class="text-white mb-0">Liverpool</h3>
                                <span class="d-block text-white">Prices from £8,000</span>
                              </div>
                            </div>
                          </a>
                          <!-- End Card -->
                        </div>
                        <!-- End Col -->

                        <div class="col-sm-6 col-lg-4 mb-3">
                          <!-- Card -->
                          <a class="card card-stretched-vertical card-transition shadow-none bg-img-start gradient-y-overlay-lg-dark" href="../demo-real-estate/property-grid.html" style="background-image: url(../assets/img/480x320/img8.jpg); min-height: 15rem;">
                            <div class="card-body">
                              <div class="mb-1">
                                <span class="badge bg-light text-dark">364 offers</span>
                              </div>
                              
                              <div class="card-footer">
                                <h3 class="text-white mb-0">Bristol</h3>
                                <span class="d-block text-white">Prices from £7,000</span>
                              </div>
                            </div>
                          </a>
                          <!-- End Card -->
                        </div>
                        <!-- End Col -->

                        <div class="col-sm-6 col-lg-4 mb-3">
                          <!-- Card -->
                          <a class="card card-stretched-vertical card-transition shadow-none bg-img-start gradient-y-overlay-lg-dark" href="../demo-real-estate/property-grid.html" style="background-image: url(../assets/img/480x320/img10.jpg); min-height: 15rem;">
                            <div class="card-body">
                              <div class="mb-1">
                                <span class="badge bg-light text-dark">5523 offers</span>
                              </div>
                              
                              <div class="card-footer">
                                <h3 class="text-white mb-0">Newcastle</h3>
                                <span class="d-block text-white">Prices from £5,000</span>
                              </div>
                            </div>
                          </a>
                          <!-- End Card -->
                        </div>
                        <!-- End Col -->
                      </div>
                      <!-- End Row -->
                    </div>
                  </div>
                  <!-- End Tab Content -->
                </div>
                <!-- End Card Grid -->
              
            

Component #5

  • Preview
  • HTML

Explore Startups

Find a job you love. Set your career interests.

Management

4 job positions

App Development

26 job positions

Arts & Entertainment

9 job positions

Accounting

11 job positions

UI Designer

37 job positions

Apps

2 job positions

Content Writer

10 job positions

Analytics

14 job positions

View all startups
              
                <!-- Card Grid -->
                <div class="container content-space-2 content-space-lg-3">
                  <!-- Heading -->
                  <div class="w-md-75 w-lg-50 text-center mx-md-auto mb-7">
                    <h2>Explore Startups</h2>
                    <p>Find a job you love. <a class="link" href="#">Set your career interests.</a></p>
                  </div>
                  <!-- End Heading -->

                  <div class="row row-cols-1 row-cols-sm-2 1 row-cols-md-3 row-cols-lg-4 mb-5">
                    <div class="col mb-3 mb-sm-4">
                      <!-- Card -->
                      <a class="card card-sm card-bordered card-transition h-100" href="../demo-jobs/job-overview.html">
                        <div class="card-body">
                          <div class="row align-items-center">
                            <div class="col">
                              <h5 class="card-title text-inherit">Management</h5>
                              <p class="card-text text-body small">4 job positions</p>
                            </div>
                            <!-- End Col -->
                            
                            <div class="col-auto">
                              <span class="text-muted">
                                <i class="bi-chevron-right small"></i>
                              </span>
                            </div>
                            <!-- End Col -->
                          </div>
                          <!-- End Row -->
                        </div>
                      </a>
                      <!-- End Card -->
                    </div>
                    <!-- End Col -->

                    <div class="col mb-3 mb-sm-4">
                      <!-- Card -->
                      <a class="card card-sm card-bordered card-transition h-100" href="../demo-jobs/job-overview.html">
                        <div class="card-body">
                          <div class="row align-items-center">
                            <div class="col">
                              <h5 class="card-title text-inherit">App Development</h5>
                              <p class="card-text text-body small">26 job positions</p>
                            </div>
                            <!-- End Col -->
                            
                            <div class="col-auto">
                              <span class="text-muted">
                                <i class="bi-chevron-right small"></i>
                              </span>
                            </div>
                            <!-- End Col -->
                          </div>
                          <!-- End Row -->
                        </div>
                      </a>
                      <!-- End Card -->
                    </div>
                    <!-- End Col -->

                    <div class="col mb-3 mb-sm-4">
                      <!-- Card -->
                      <a class="card card-sm card-bordered card-transition h-100" href="../demo-jobs/job-overview.html">
                        <div class="card-body">
                          <div class="row align-items-center">
                            <div class="col">
                              <h5 class="card-title text-inherit">Arts & Entertainment</h5>
                              <p class="card-text text-body small">9 job positions</p>
                            </div>
                            <!-- End Col -->
                            
                            <div class="col-auto">
                              <span class="text-muted">
                                <i class="bi-chevron-right small"></i>
                              </span>
                            </div>
                            <!-- End Col -->
                          </div>
                          <!-- End Row -->
                        </div>
                      </a>
                      <!-- End Card -->
                    </div>
                    <!-- End Col -->

                    <div class="col mb-3 mb-sm-4">
                      <!-- Card -->
                      <a class="card card-sm card-bordered card-transition h-100" href="../demo-jobs/job-overview.html">
                        <div class="card-body">
                          <div class="row align-items-center">
                            <div class="col">
                              <h5 class="card-title text-inherit">Accounting</h5>
                              <p class="card-text text-body small">11 job positions</p>
                            </div>
                            <!-- End Col -->
                            
                            <div class="col-auto">
                              <span class="text-muted">
                                <i class="bi-chevron-right small"></i>
                              </span>
                            </div>
                            <!-- End Col -->
                          </div>
                          <!-- End Row -->
                        </div>
                      </a>
                      <!-- End Card -->
                    </div>
                    <!-- End Col -->

                    <div class="col mb-3 mb-sm-4">
                      <!-- Card -->
                      <a class="card card-sm card-bordered card-transition h-100" href="../demo-jobs/job-overview.html">
                        <div class="card-body">
                          <div class="row align-items-center">
                            <div class="col">
                              <h5 class="card-title text-inherit">UI Designer</h5>
                              <p class="card-text text-body small">37 job positions</p>
                            </div>
                            <!-- End Col -->
                            
                            <div class="col-auto">
                              <span class="text-muted">
                                <i class="bi-chevron-right small"></i>
                              </span>
                            </div>
                            <!-- End Col -->
                          </div>
                          <!-- End Row -->
                        </div>
                      </a>
                      <!-- End Card -->
                    </div>
                    <!-- End Col -->

                    <div class="col mb-3 mb-sm-4">
                      <!-- Card -->
                      <a class="card card-sm card-bordered card-transition h-100" href="../demo-jobs/job-overview.html">
                        <div class="card-body">
                          <div class="row align-items-center">
                            <div class="col">
                              <h5 class="card-title text-inherit">Apps</h5>
                              <p class="card-text text-body small">2 job positions</p>
                            </div>
                            <!-- End Col -->
                            
                            <div class="col-auto">
                              <span class="text-muted">
                                <i class="bi-chevron-right small"></i>
                              </span>
                            </div>
                            <!-- End Col -->
                          </div>
                          <!-- End Row -->
                        </div>
                      </a>
                      <!-- End Card -->
                    </div>
                    <!-- End Col -->

                    <div class="col mb-3 mb-sm-4">
                      <!-- Card -->
                      <a class="card card-sm card-bordered card-transition h-100" href="../demo-jobs/job-overview.html">
                        <div class="card-body">
                          <div class="row align-items-center">
                            <div class="col">
                              <h5 class="card-title text-inherit">Content Writer</h5>
                              <p class="card-text text-body small">10 job positions</p>
                            </div>
                            <!-- End Col -->
                            
                            <div class="col-auto">
                              <span class="text-muted">
                                <i class="bi-chevron-right small"></i>
                              </span>
                            </div>
                            <!-- End Col -->
                          </div>
                          <!-- End Row -->
                        </div>
                      </a>
                      <!-- End Card -->
                    </div>
                    <!-- End Col -->

                    <div class="col mb-3 mb-sm-4">
                      <!-- Card -->
                      <a class="card card-sm card-bordered card-transition h-100" href="../demo-jobs/job-overview.html">
                        <div class="card-body">
                          <div class="row align-items-center">
                            <div class="col">
                              <h5 class="card-title text-inherit">Analytics</h5>
                              <p class="card-text text-body small">14 job positions</p>
                            </div>
                            <!-- End Col -->
                            
                            <div class="col-auto">
                              <span class="text-muted">
                                <i class="bi-chevron-right small"></i>
                              </span>
                            </div>
                            <!-- End Col -->
                          </div>
                          <!-- End Row -->
                        </div>
                      </a>
                      <!-- End Card -->
                    </div>
                    <!-- End Col -->
                  </div>
                  <!-- End Row -->

                  <div class="text-center">
                    <a class="btn btn-outline-primary" href="../demo-jobs/job-list.html">View all startups <i class="bi-chevron-right small ms-1"></i></a>
                  </div>
                </div>
                <!-- End Card Grid -->
              
            

Component #6

  • Preview
  • HTML
Image Description
Mailchimp Review rating

Senior B2B sales consultant

$125k-$135k yearly Remote
  • Posted 7 hours ago
  • Oxford
  • Full time
Image Description
Capsule

Office assistant/Social media assistant

$50-$135 hourly
  • Posted 21 hours ago
  • Newcastle
  • Part time
Image Description
Dropbox

Marketing and Communications Manager

$5k monthly
  • Posted 1 day ago
  • London
  • Full time
Image Description
Prosperops

Senior backend developer

$75k-$85k yearly Remote
  • Posted 1 day ago
  • Liverpool
  • Full time
              
                <div class="row row-cols-1 row-cols-sm-2">
                  <div class="col mb-5">
                    <!-- Card -->
                    <div class="card card-bordered h-100">
                      <!-- Card Body -->
                      <div class="card-body">
                        <div class="row mb-3">
                          <div class="col">
                            <!-- Media -->
                            <div class="d-flex align-items-center">
                              <div class="flex-shrink-0">
                                <img class="avatar avatar-sm avatar-4x3" src="../assets/svg/brands/mailchimp-icon.svg" alt="Image Description">
                              </div>

                              <div class="flex-grow-1 ms-3">
                                <h6 class="card-title">
                                  <a class="text-dark" href="../demo-jobs/employer.html">Mailchimp</a>
                                  <img class="avatar avatar-xss ms-1" src="../assets/svg/illustrations/top-vendor.svg" alt="Review rating" data-toggle="tooltip" data-placement="top" title="Claimed profile">
                                </h6>
                              </div>
                            </div>
                            <!-- End Media -->
                          </div>
                          <!-- End Col -->

                          <div class="col-auto">
                            <!-- Checkbbox Bookmark -->
                            <div class="form-check form-check-bookmark">
                              <input class="form-check-input" type="checkbox" value="" id="jobsCardBookmarkCheck1">
                              <label class="form-check-label" for="jobsCardBookmarkCheck1">
                                <span class="form-check-bookmark-default" data-bs-toggle="tooltip" data-bs-placement="top" title="Save this job">
                                  <i class="bi-star"></i>
                                </span>
                                <span class="form-check-bookmark-active" data-bs-toggle="tooltip" data-bs-placement="top" title="Saved">
                                  <i class="bi-star-fill"></i>
                                </span>
                              </label>
                            </div>
                            <!-- End Checkbbox Bookmark -->
                          </div>
                          <!-- End Col -->
                        </div>
                        <!-- End Row -->

                        <h3 class="card-title">
                          <a class="text-dark" href="../demo-jobs/employer.html">Senior B2B sales consultant</a>
                        </h3>

                        <span class="d-block small text-body mb-1">$125k-$135k yearly</span>

                        <span class="badge bg-soft-info text-info me-2">
                          <span class="legend-indicator bg-info"></span>Remote
                        </span>
                      </div>
                      <!-- End Card Body -->

                      <!-- Card Footer -->
                      <div class="card-footer pt-0">
                        <ul class="list-inline list-separator small text-body">
                          <li class="list-inline-item">Posted 7 hours ago</li>
                          <li class="list-inline-item">Oxford</li>
                          <li class="list-inline-item">Full time</li>
                        </ul>
                      </div>
                      <!-- End Card Footer -->
                    </div>
                    <!-- End Card -->
                  </div>
                  <!-- End Col -->

                  <div class="col mb-5">
                    <!-- Card -->
                    <div class="card card-bordered h-100">
                      <!-- Card Body -->
                      <div class="card-body">
                        <div class="row mb-3">
                          <div class="col">
                            <!-- Media -->
                            <div class="d-flex align-items-center">
                              <div class="flex-shrink-0">
                                <img class="avatar avatar-sm avatar-4x3" src="../assets/svg/brands/capsule-icon.svg" alt="Image Description">
                              </div>

                              <div class="flex-grow-1 ms-3">
                                <h6 class="card-title">
                                  <a class="text-dark" href="../demo-jobs/employer.html">Capsule</a>
                                </h6>
                              </div>
                            </div>
                            <!-- End Media -->
                          </div>
                          <!-- End Col -->

                          <div class="col-auto">
                            <!-- Checkbbox Bookmark -->
                            <div class="form-check form-check-bookmark">
                              <input class="form-check-input" type="checkbox" value="" id="jobsCardBookmarkCheck2">
                              <label class="form-check-label" for="jobsCardBookmarkCheck2">
                                <span class="form-check-bookmark-default" data-bs-toggle="tooltip" data-bs-placement="top" title="Save this job">
                                  <i class="bi-star"></i>
                                </span>
                                <span class="form-check-bookmark-active" data-bs-toggle="tooltip" data-bs-placement="top" title="Saved">
                                  <i class="bi-star-fill"></i>
                                </span>
                              </label>
                            </div>
                            <!-- End Checkbbox Bookmark -->
                          </div>
                          <!-- End Col -->
                        </div>
                        <!-- End Row -->

                        <h3 class="card-title">
                          <a class="text-dark" href="../demo-jobs/employer.html">Office assistant/Social media assistant</a>
                        </h3>

                        <span class="d-block small text-body mb-1">$50-$135 hourly</span>
                      </div>
                      <!-- End Card Body -->

                      <!-- Card Footer -->
                      <div class="card-footer pt-0">
                        <ul class="list-inline list-separator small text-body">
                          <li class="list-inline-item">Posted 21 hours ago</li>
                          <li class="list-inline-item">Newcastle</li>
                          <li class="list-inline-item">Part time</li>
                        </ul>
                      </div>
                      <!-- End Card Footer -->
                    </div>
                    <!-- End Card -->
                  </div>
                  <!-- End Col -->

                  <div class="col mb-5">
                    <!-- Card -->
                    <div class="card card-bordered h-100">
                      <!-- Card Body -->
                      <div class="card-body">
                        <div class="row mb-3">
                          <div class="col">
                            <!-- Media -->
                            <div class="d-flex align-items-center">
                              <div class="flex-shrink-0">
                                <img class="avatar avatar-sm avatar-4x3" src="../assets/svg/brands/dropbox-icon.svg" alt="Image Description">
                              </div>

                              <div class="flex-grow-1 ms-3">
                                <h6 class="card-title">
                                  <a class="text-dark" href="../demo-jobs/employer.html">Dropbox</a>
                                </h6>
                              </div>
                            </div>
                            <!-- End Media -->
                          </div>
                          <!-- End Col -->

                          <div class="col-auto">
                            <!-- Checkbbox Bookmark -->
                            <div class="form-check form-check-bookmark">
                              <input class="form-check-input" type="checkbox" value="" id="jobsCardBookmarkCheck3">
                              <label class="form-check-label" for="jobsCardBookmarkCheck3">
                                <span class="form-check-bookmark-default" data-bs-toggle="tooltip" data-bs-placement="top" title="Save this job">
                                  <i class="bi-star"></i>
                                </span>
                                <span class="form-check-bookmark-active" data-bs-toggle="tooltip" data-bs-placement="top" title="Saved">
                                  <i class="bi-star-fill"></i>
                                </span>
                              </label>
                            </div>
                            <!-- End Checkbbox Bookmark -->
                          </div>
                          <!-- End Col -->
                        </div>
                        <!-- End Row -->

                        <h3 class="card-title">
                          <a class="text-dark" href="../demo-jobs/employer.html">Marketing and Communications Manager</a>
                        </h3>

                        <span class="d-block small text-body mb-1">$5k monthly</span>
                      </div>
                      <!-- End Card Body -->

                      <!-- Card Footer -->
                      <div class="card-footer pt-0">
                        <ul class="list-inline list-separator small text-body">
                          <li class="list-inline-item">Posted 1 day ago</li>
                          <li class="list-inline-item">London</li>
                          <li class="list-inline-item">Full time</li>
                        </ul>
                      </div>
                      <!-- End Card Footer -->
                    </div>
                    <!-- End Card -->
                  </div>
                  <!-- End Col -->

                  <div class="col mb-5">
                    <!-- Card -->
                    <div class="card card-bordered h-100">
                      <!-- Card Body -->
                      <div class="card-body">
                        <div class="row mb-3">
                          <div class="col">
                            <!-- Media -->
                            <div class="d-flex align-items-center">
                              <div class="flex-shrink-0">
                                <img class="avatar avatar-sm avatar-4x3" src="../assets/svg/brands/prosperops-icon.svg" alt="Image Description">
                              </div>

                              <div class="flex-grow-1 ms-3">
                                <h6 class="card-title">
                                  <a class="text-dark" href="../demo-jobs/employer.html">Prosperops</a>
                                </h6>
                              </div>
                            </div>
                            <!-- End Media -->
                          </div>
                          <!-- End Col -->

                          <div class="col-auto">
                            <!-- Checkbbox Bookmark -->
                            <div class="form-check form-check-bookmark">
                              <input class="form-check-input" type="checkbox" value="" id="jobsCardBookmarkCheck4">
                              <label class="form-check-label" for="jobsCardBookmarkCheck4">
                                <span class="form-check-bookmark-default" data-bs-toggle="tooltip" data-bs-placement="top" title="Save this job">
                                  <i class="bi-star"></i>
                                </span>
                                <span class="form-check-bookmark-active" data-bs-toggle="tooltip" data-bs-placement="top" title="Saved">
                                  <i class="bi-star-fill"></i>
                                </span>
                              </label>
                            </div>
                            <!-- End Checkbbox Bookmark -->
                          </div>
                          <!-- End Col -->
                        </div>
                        <!-- End Row -->

                        <h3 class="card-title">
                          <a class="text-dark" href="../demo-jobs/employer.html">Senior backend developer</a>
                        </h3>

                        <span class="d-block small text-body mb-1">$75k-$85k yearly</span>

                        <span class="badge bg-soft-info text-info me-2">
                          <span class="legend-indicator bg-info"></span>Remote
                        </span>
                      </div>
                      <!-- End Card Body -->

                      <!-- Card Footer -->
                      <div class="card-footer pt-0">
                        <ul class="list-inline list-separator small text-body">
                          <li class="list-inline-item">Posted 1 day ago</li>
                          <li class="list-inline-item">Liverpool</li>
                          <li class="list-inline-item">Full time</li>
                        </ul>
                      </div>
                      <!-- End Card Footer -->
                    </div>
                    <!-- End Card -->
                  </div>
                  <!-- End Col -->
                </div>
                <!-- End Row -->
              
            

Component #7

  • Preview
  • HTML
  • CSS
  • JS

Jobs

We were not able to detect your location. You can browse through all 105 jobs Capsule has to offer.

Senior B2B sales consultant

$125k-$135k yearly Remote
  • Posted 7 hours ago
  • Oxford
  • Full time

Office assistant/Social media assistant

$50-$135 hourly
  • Posted 21 hours ago
  • Newcastle
  • Part time

Marketing and Communications Manager

$5k monthly
  • Posted 1 day ago
  • London
  • Full time

Senior backend developer

$75k-$85k yearly Remote
  • Posted 1 day ago
  • Liverpool
  • Full time

Senior product manager

$76k-$98k yearly
  • Posted 2 days ago
  • London
  • Full time

iOS Engineer

$500-$1000 weekly Remote
  • Posted 3 days ago
  • Manchester
  • Part time
              
                <!-- Card Grid -->
                <div id="jobs-section" class="container">
                  <div class="mb-4">
                    <h3>Jobs</h3>
                    <p>We were not able to detect your location. You can browse through all 105 jobs Capsule has to offer.</p>
                  </div>

                  <!-- Swiper Slider -->
                  <div class="js-swiper-employer-jobs swiper swiper-equal-height">
                    <div class="swiper-wrapper">
                      <!-- Slide -->
                      <div class="swiper-slide">
                        <!-- Card -->
                        <div class="card card-bordered shadow-none w-100">
                          <!-- Card Body -->
                          <div class="card-body">
                            <h3 class="card-title">
                              <a class="text-dark" href="../demo-jobs/employer.html">Senior B2B sales consultant</a>
                            </h3>

                            <span class="d-block small text-body mb-1">$125k-$135k yearly</span>

                            <span class="badge bg-soft-info text-info me-2">
                              <span class="legend-indicator bg-info"></span>Remote
                            </span>
                          </div>
                          <!-- End Card Body -->

                          <!-- Card Footer -->
                          <div class="card-footer pt-0">
                            <ul class="list-inline list-separator small text-body">
                              <li class="list-inline-item">Posted 7 hours ago</li>
                              <li class="list-inline-item">Oxford</li>
                              <li class="list-inline-item">Full time</li>
                            </ul>
                          </div>
                          <!-- End Card Footer -->
                        </div>
                        <!-- End Card -->
                      </div>
                      <!-- End Slide -->

                      <!-- Slide -->
                      <div class="swiper-slide">
                        <!-- Card -->
                        <div class="card card-bordered shadow-none w-100">
                          <!-- Card Body -->
                          <div class="card-body">
                            <h3 class="card-title">
                              <a class="text-dark" href="../demo-jobs/employer.html">Office assistant/Social media assistant</a>
                            </h3>

                            <span class="d-block small text-body mb-1">$50-$135 hourly</span>
                          </div>
                          <!-- End Card Body -->

                          <!-- Card Footer -->
                          <div class="card-footer pt-0">
                            <ul class="list-inline list-separator small text-body">
                              <li class="list-inline-item">Posted 21 hours ago</li>
                              <li class="list-inline-item">Newcastle</li>
                              <li class="list-inline-item">Part time</li>
                            </ul>
                          </div>
                          <!-- End Card Footer -->
                        </div>
                        <!-- End Card -->
                      </div>
                      <!-- End Slide -->

                      <!-- Slide -->
                      <div class="swiper-slide">
                        <!-- Card -->
                        <div class="card card-bordered shadow-none w-100">
                          <!-- Card Body -->
                          <div class="card-body">
                            <h3 class="card-title">
                              <a class="text-dark" href="../demo-jobs/employer.html">Marketing and Communications Manager</a>
                            </h3>

                            <span class="d-block small text-body mb-1">$5k monthly</span>
                          </div>
                          <!-- End Card Body -->

                          <!-- Card Footer -->
                          <div class="card-footer pt-0">
                            <ul class="list-inline list-separator small text-body">
                              <li class="list-inline-item">Posted 1 day ago</li>
                              <li class="list-inline-item">London</li>
                              <li class="list-inline-item">Full time</li>
                            </ul>
                          </div>
                          <!-- End Card Footer -->
                        </div>
                        <!-- End Card -->
                      </div>
                      <!-- End Slide -->

                      <!-- Slide -->
                      <div class="swiper-slide">
                        <!-- Card -->
                        <div class="card card-bordered shadow-none w-100">
                          <!-- Card Body -->
                          <div class="card-body">
                            <h3 class="card-title">
                              <a class="text-dark" href="../demo-jobs/employer.html">Senior backend developer</a>
                            </h3>

                            <span class="d-block small text-body mb-1">$75k-$85k yearly</span>

                            <span class="badge bg-soft-info text-info me-2">
                              <span class="legend-indicator bg-info"></span>Remote
                            </span>
                          </div>
                          <!-- End Card Body -->

                          <!-- Card Footer -->
                          <div class="card-footer pt-0">
                            <ul class="list-inline list-separator small text-body">
                              <li class="list-inline-item">Posted 1 day ago</li>
                              <li class="list-inline-item">Liverpool</li>
                              <li class="list-inline-item">Full time</li>
                            </ul>
                          </div>
                          <!-- End Card Footer -->
                        </div>
                        <!-- End Card -->
                      </div>
                      <!-- End Slide -->

                      <!-- Slide -->
                      <div class="swiper-slide">
                        <!-- Card -->
                        <div class="card card-bordered shadow-none w-100">
                          <!-- Card Body -->
                          <div class="card-body">
                            <h3 class="card-title">
                              <a class="text-dark" href="../demo-jobs/employer.html">Senior product manager</a>
                            </h3>

                            <span class="d-block small text-body mb-1">$76k-$98k yearly</span>
                          </div>
                          <!-- End Card Body -->

                          <!-- Card Footer -->
                          <div class="card-footer pt-0">
                            <ul class="list-inline list-separator small text-body">
                              <li class="list-inline-item">Posted 2 days ago</li>
                              <li class="list-inline-item">London</li>
                              <li class="list-inline-item">Full time</li>
                            </ul>
                          </div>
                          <!-- End Card Footer -->
                        </div>
                        <!-- End Card -->
                      </div>
                      <!-- End Slide -->

                      <!-- Slide -->
                      <div class="swiper-slide">
                        <!-- Card -->
                        <div class="card card-bordered shadow-none w-100">
                          <!-- Card Body -->
                          <div class="card-body">
                            <h3 class="card-title">
                              <a class="text-dark" href="../demo-jobs/employer.html">iOS Engineer</a>
                            </h3>

                            <span class="d-block small text-body mb-1">$500-$1000 weekly</span>

                            <span class="badge bg-soft-info text-info me-2">
                              <span class="legend-indicator bg-info"></span>Remote
                            </span>
                          </div>
                          <!-- End Card Body -->

                          <!-- Card Footer -->
                          <div class="card-footer pt-0">
                            <ul class="list-inline list-separator small text-body">
                              <li class="list-inline-item">Posted 3 days ago</li>
                              <li class="list-inline-item">Manchester</li>
                              <li class="list-inline-item">Part time</li>
                            </ul>
                          </div>
                          <!-- End Card Footer -->
                        </div>
                        <!-- End Card -->
                      </div>
                      <!-- End Slide -->
                    </div>

                    <!-- Arrows -->
                    <div class="js-swiper-employer-jobs-button-next swiper-button-next"></div>
                    <div class="js-swiper-employer-jobs-button-prev swiper-button-prev"></div>
                  </div>
                  <!-- End Swiper Slider -->
                </div>
                <!-- 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-employer-jobs',{
                      slidesPerView: 1,
                      navigation: {
                        nextEl: '.js-swiper-employer-jobs-button-next',
                        prevEl: '.js-swiper-employer-jobs-button-prev',
                      },
                      breakpoints: {
                        480: {
                          slidesPerView: 2,
                          spaceBetween: 15,
                        },
                        768: {
                          slidesPerView: 3,
                          spaceBetween: 15,
                        },
                      }
                    });
                  })()
                </script>
              
            

Component #8

  • Preview
  • HTML

Interview insights

Insights from 209 Front Job users who have interviewed with Capsule within the last 5 years.

Interview experience:

Favorable

Interview difficulty:

Medium

Interview process length:

About a day or two

Interview process length

About a day or two
43%
About a week
28%
About two weeks
17%
More than one month
6%
About a month
5%
View all interviews
              
                <!-- Card Grid -->
                <div id="interview-section" class="container">
                  <div class="mb-4">
                    <h3>Interview insights</h3>
                    <p>Insights from 209 Front Job users who have interviewed with Capsule within the last 5 years.</p>
                  </div>

                  <div class="row mb-5">
                    <div class="col-md mb-3">
                      <!-- Card -->
                      <div class="card card-bordered shadow-none h-100">
                        <div class="card-body">
                          <p class="card-text">Interview experience:</p>
                          <h4 class="card-title">Favorable</h4>
                        </div>
                      </div>
                      <!-- End Card -->
                    </div>
                    <!-- End Col -->

                    <div class="col-md mb-3">
                      <!-- Card -->
                      <div class="card card-bordered shadow-none h-100">
                        <div class="card-body">
                          <p class="card-text">Interview difficulty:</p>
                          <h4 class="card-title">Medium</h4>
                        </div>
                      </div>
                      <!-- End Card -->
                    </div>
                    <!-- End Col -->

                    <div class="col-md mb-3">
                      <!-- Card -->
                      <div class="card card-bordered shadow-none h-100">
                        <div class="card-body">
                          <p class="card-text">Interview process length:</p>
                          <h4 class="card-title">About a day or two</h4>
                        </div>
                      </div>
                      <!-- End Card -->
                    </div>
                    <!-- End Col -->
                  </div>
                  <!-- End Row -->

                  <div class="mb-4">
                    <h4>Interview process length</h4>
                  </div>

                  <div class="row row-cols-2 row-cols-sm-3 row-cols-lg-5 gx-3 mb-7">
                    <div class="col mb-3">
                      <!-- Card -->
                      <div class="card card-sm card-bordered shadow-none h-100">
                        <div class="card-body">
                          <h6 class="card-title">About a day or two</h6>
                        </div>

                        <div class="card-footer pt-0">
                          <span class="card-subtitle">43%</span>

                          <div class="progress" style="height: 8px;">
                            <div class="progress-bar bg-success" role="progressbar" style="width: 43%" aria-valuenow="43" aria-valuemin="0" aria-valuemax="100"></div>
                          </div>
                        </div>
                      </div>
                      <!-- End Card -->
                    </div>
                    <!-- End Col -->

                    <div class="col mb-3">
                      <!-- Card -->
                      <div class="card card-sm card-bordered shadow-none h-100">
                        <div class="card-body">
                          <h6 class="card-title">About a week</h6>
                        </div>

                        <div class="card-footer pt-0">
                          <span class="card-subtitle">28%</span>

                          <div class="progress" style="height: 8px;">
                            <div class="progress-bar bg-success" role="progressbar" style="width: 28%" aria-valuenow="28" aria-valuemin="0" aria-valuemax="100"></div>
                          </div>
                        </div>
                      </div>
                      <!-- End Card -->
                    </div>
                    <!-- End Col -->

                    <div class="col mb-3">
                      <!-- Card -->
                      <div class="card card-sm card-bordered shadow-none h-100">
                        <div class="card-body">
                          <h6 class="card-title">About two weeks</h6>
                        </div>

                        <div class="card-footer pt-0">
                          <span class="card-subtitle">17%</span>

                          <div class="progress" style="height: 8px;">
                            <div class="progress-bar bg-success" role="progressbar" style="width: 17%" aria-valuenow="17" aria-valuemin="0" aria-valuemax="100"></div>
                          </div>
                        </div>
                      </div>
                      <!-- End Card -->
                    </div>
                    <!-- End Col -->

                    <div class="col mb-3">
                      <!-- Card -->
                      <div class="card card-sm card-bordered shadow-none h-100">
                        <div class="card-body">
                          <h6 class="card-title">More than one month</h6>
                        </div>

                        <div class="card-footer pt-0">
                          <span class="card-subtitle">6%</span>

                          <div class="progress" style="height: 8px;">
                            <div class="progress-bar bg-success" role="progressbar" style="width: 6%" aria-valuenow="6" aria-valuemin="0" aria-valuemax="100"></div>
                          </div>
                        </div>
                      </div>
                      <!-- End Card -->
                    </div>
                    <!-- End Col -->

                    <div class="col mb-3">
                      <!-- Card -->
                      <div class="card card-sm card-bordered shadow-none h-100">
                        <div class="card-body">
                          <h6 class="card-title">About a month</h6>
                        </div>

                        <div class="card-footer pt-0">
                          <span class="card-subtitle">5%</span>

                          <div class="progress" style="height: 8px;">
                            <div class="progress-bar bg-success" role="progressbar" style="width: 5%" aria-valuenow="5" aria-valuemin="0" aria-valuemax="100"></div>
                          </div>
                        </div>
                      </div>
                      <!-- End Card -->
                    </div>
                    <!-- End Col -->
                  </div>
                  <!-- End Row -->

                  <a class="btn btn-outline-primary" href="#">View all interviews <i class="bi-chevron-right small ms-1"></i></a>
                </div>
                <!-- Card Grid -->
              
            

Component #9

  • Preview
  • HTML

Capsule locations

SVG
London, UK
SVG
Bristol, UK
SVG
Oxford, UK
SVG
Edinburgh, UK
SVG
Newcastle, UK
SVG
Liverpool, UK
              
                <!-- Card Grid -->
                <div id="locations-section" class="container">
                  <div class="mb-4">
                    <h3>Capsule locations</h3>
                  </div>

                  <div class="row row-cols-1 row-cols-sm-2 1 row-cols-md-3 row-cols-lg-4">
                    <div class="col mb-4">
                      <!-- Card -->
                      <a class="card card-sm card-bordered card-transition h-100" href="#">
                        <div class="card-body">
                          <div class="row align-items-center">
                            <div class="col">
                              <div class="d-flex align-items-center">
                                <div class="flex-shrink-0">
                                  <img class="avatar avatar-sm avatar-circle" src="../assets/img/480x320/img28.jpg" alt="SVG">
                                </div>

                                <div class="flex-grow-1 ms-3">
                                  <h5 class="card-title text-inherit">London, UK</h5>
                                </div>
                              </div>
                            </div>
                            <!-- End Col -->

                            <div class="col-auto">
                              <span class="text-muted">
                                <i class="bi-chevron-right small"></i>
                              </span>
                            </div>
                            <!-- End Col -->
                          </div>
                          <!-- End Row -->
                        </div>
                      </a>
                      <!-- End Card -->
                    </div>
                    <!-- End Col -->

                    <div class="col mb-4">
                      <!-- Card -->
                      <a class="card card-sm card-bordered card-transition h-100" href="#">
                        <div class="card-body">
                          <div class="row align-items-center">
                            <div class="col">
                              <div class="d-flex align-items-center">
                                <div class="flex-shrink-0">
                                  <img class="avatar avatar-sm avatar-circle" src="../assets/img/480x320/img8.jpg" alt="SVG">
                                </div>

                                <div class="flex-grow-1 ms-3">
                                  <h5 class="card-title text-inherit">Bristol, UK</h5>
                                </div>
                              </div>
                            </div>
                            <!-- End Col -->

                            <div class="col-auto">
                              <span class="text-muted">
                                <i class="bi-chevron-right small"></i>
                              </span>
                            </div>
                            <!-- End Col -->
                          </div>
                          <!-- End Row -->
                        </div>
                      </a>
                      <!-- End Card -->
                    </div>
                    <!-- End Col -->

                    <div class="col mb-4">
                      <!-- Card -->
                      <a class="card card-sm card-bordered card-transition h-100" href="#">
                        <div class="card-body">
                          <div class="row align-items-center">
                            <div class="col">
                              <div class="d-flex align-items-center">
                                <div class="flex-shrink-0">
                                  <img class="avatar avatar-sm avatar-circle" src="../assets/img/480x320/img29.jpg" alt="SVG">
                                </div>

                                <div class="flex-grow-1 ms-3">
                                  <h5 class="card-title text-inherit">Oxford, UK</h5>
                                </div>
                              </div>
                            </div>
                            <!-- End Col -->

                            <div class="col-auto">
                              <span class="text-muted">
                                <i class="bi-chevron-right small"></i>
                              </span>
                            </div>
                            <!-- End Col -->
                          </div>
                          <!-- End Row -->
                        </div>
                      </a>
                      <!-- End Card -->
                    </div>
                    <!-- End Col -->

                    <div class="col mb-4">
                      <!-- Card -->
                      <a class="card card-sm card-bordered card-transition h-100" href="#">
                        <div class="card-body">
                          <div class="row align-items-center">
                            <div class="col">
                              <div class="d-flex align-items-center">
                                <div class="flex-shrink-0">
                                  <img class="avatar avatar-sm avatar-circle" src="../assets/img/480x320/img11.jpg" alt="SVG">
                                </div>

                                <div class="flex-grow-1 ms-3">
                                  <h5 class="card-title text-inherit">Edinburgh, UK</h5>
                                </div>
                              </div>
                            </div>
                            <!-- End Col -->

                            <div class="col-auto">
                              <span class="text-muted">
                                <i class="bi-chevron-right small"></i>
                              </span>
                            </div>
                            <!-- End Col -->
                          </div>
                          <!-- End Row -->
                        </div>
                      </a>
                      <!-- End Card -->
                    </div>
                    <!-- End Col -->

                    <div class="col mb-4">
                      <!-- Card -->
                      <a class="card card-sm card-bordered card-transition h-100" href="#">
                        <div class="card-body">
                          <div class="row align-items-center">
                            <div class="col">
                              <div class="d-flex align-items-center">
                                <div class="flex-shrink-0">
                                  <img class="avatar avatar-sm avatar-circle" src="../assets/img/480x320/img10.jpg" alt="SVG">
                                </div>

                                <div class="flex-grow-1 ms-3">
                                  <h5 class="card-title text-inherit">Newcastle, UK</h5>
                                </div>
                              </div>
                            </div>
                            <!-- End Col -->

                            <div class="col-auto">
                              <span class="text-muted">
                                <i class="bi-chevron-right small"></i>
                              </span>
                            </div>
                            <!-- End Col -->
                          </div>
                          <!-- End Row -->
                        </div>
                      </a>
                      <!-- End Card -->
                    </div>
                    <!-- End Col -->

                    <div id="pageHeaderTabEndPoint" class="col mb-3">
                      <!-- Card -->
                      <a class="card card-sm card-bordered card-transition h-100" href="#">
                        <div class="card-body">
                          <div class="row align-items-center">
                            <div class="col">
                              <div class="d-flex align-items-center">
                                <div class="flex-shrink-0">
                                  <img class="avatar avatar-sm avatar-circle" src="../assets/img/480x320/img9.jpg" alt="SVG">
                                </div>

                                <div class="flex-grow-1 ms-3">
                                  <h5 class="card-title text-inherit">Liverpool, UK</h5>
                                </div>
                              </div>
                            </div>
                            <!-- End Col -->

                            <div class="col-auto">
                              <span class="text-muted">
                                <i class="bi-chevron-right small"></i>
                              </span>
                            </div>
                            <!-- End Col -->
                          </div>
                          <!-- End Row -->
                        </div>
                      </a>
                      <!-- End Card -->
                    </div>
                    <!-- End Col -->
                  </div>
                  <!-- End Row -->
                </div>
                <!-- Card Grid -->
              
            

Component #10

  • Preview
  • HTML
Image Description
New arrival
Accessories

Herschel backpack in dark blue

$56.99

Review rating Review rating Review rating Review rating Review rating
0
Image Description
Clothing

Front hoodie

$91.88

Review rating Review rating Review rating Review rating Review rating
40
Image Description
Out of stock
Accessories

Herschel backpack in gray

$29.99 $33.99

Review rating Review rating Review rating Review rating Review rating
125
              
                <div class="row row-cols-sm-2 row-cols-md-3">
                  <div class="col mb-4">
                    <!-- Card -->
                    <div class="card card-bordered shadow-none text-center h-100">
                      <div class="card-pinned">
                        <img class="card-img-top" src="../assets/img/300x180/img3.jpg" alt="Image Description">

                        <div class="card-pinned-top-start">
                          <span class="badge bg-success rounded-pill">New arrival</span>
                        </div>

                        <div class="card-pinned-top-end">
                          <button type="button" class="btn btn-outline-secondary btn-xs btn-icon rounded-circle" data-bs-toggle="tooltip" data-bs-placement="top" title="Save for later">
                            <i class="bi-heart"></i>
                          </button>
                        </div>
                      </div>

                      <div class="card-body">
                        <div class="mb-2">
                          <a class="link-sm link-secondary" href="#">Accessories</a>
                        </div>
                        
                        <h4 class="card-title">
                          <a class="text-dark" href="../demo-shop/product-overview.html">Herschel backpack in dark blue</a>
                        </h4>
                        <p class="card-text text-dark">$56.99</p>
                      </div>

                      <div class="card-footer pt-0">
                        <!-- Rating -->
                        <a class="d-inline-flex align-items-center mb-3" href="#">
                          <div class="d-flex gap-1 me-2">
                            <img src="../assets/svg/illustrations/star-muted.svg" alt="Review rating" width="16">
                            <img src="../assets/svg/illustrations/star-muted.svg" alt="Review rating" width="16">
                            <img src="../assets/svg/illustrations/star-muted.svg" alt="Review rating" width="16">
                            <img src="../assets/svg/illustrations/star-muted.svg" alt="Review rating" width="16">
                            <img src="../assets/svg/illustrations/star-muted.svg" alt="Review rating" width="16">
                          </div>
                          <span class="small">0</span>
                        </a>
                        <!-- End Rating -->

                        <button type="button" class="btn btn-outline-primary btn-sm rounded-pill">Add to cart</button>
                      </div>
                    </div>
                    <!-- End Card -->
                  </div>
                  <!-- End Col -->

                  <div class="col mb-4">
                    <!-- Card -->
                    <div class="card card-bordered shadow-none text-center h-100">
                      <div class="card-pinned">
                        <img class="card-img-top" src="../assets/img/300x180/img1.jpg" alt="Image Description">

                        <div class="card-pinned-top-end">
                          <button type="button" class="btn btn-outline-secondary btn-xs btn-icon rounded-circle" data-bs-toggle="tooltip" data-bs-placement="top" title="Save for later">
                            <i class="bi-heart"></i>
                          </button>
                        </div>
                      </div>

                      <div class="card-body">
                        <div class="mb-2">
                          <a class="link-sm link-secondary" href="#">Clothing</a>
                        </div>
                        
                        <h4 class="card-title">
                          <a class="text-dark" href="../demo-shop/product-overview.html">Front hoodie</a>
                        </h4>
                        <p class="card-text text-dark">$91.88</p>
                      </div>

                      <div class="card-footer pt-0">
                        <!-- Rating -->
                        <a class="d-inline-flex align-items-center mb-3" href="#">
                          <div class="d-flex gap-1 me-2">
                            <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                            <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                            <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                            <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                            <img src="../assets/svg/illustrations/star-muted.svg" alt="Review rating" width="16">
                          </div>
                          <span class="small">40</span>
                        </a>
                        <!-- End Rating -->

                        <button type="button" class="btn btn-outline-primary btn-sm rounded-pill">Add to cart</button>
                      </div>
                    </div>
                    <!-- End Card -->
                  </div>
                  <!-- End Col -->

                  <div class="col mb-4">
                    <!-- Card -->
                    <div class="card card-bordered shadow-none text-center h-100">
                      <div class="card-pinned">
                        <img class="card-img-top" src="../assets/img/300x180/img4.jpg" alt="Image Description">

                        <div class="card-pinned-top-start">
                          <span class="badge bg-danger rounded-pill">Out of stock</span>
                        </div>

                        <div class="card-pinned-top-end">
                          <button type="button" class="btn btn-outline-secondary btn-xs btn-icon rounded-circle" data-bs-toggle="tooltip" data-bs-placement="top" title="Save for later">
                            <i class="bi-heart"></i>
                          </button>
                        </div>
                      </div>

                      <div class="card-body">
                        <div class="mb-2">
                          <a class="link-sm link-secondary" href="#">Accessories</a>
                        </div>
                        
                        <h4 class="card-title">
                          <a class="text-dark" href="../demo-shop/product-overview.html">Herschel backpack in gray</a>
                        </h4>
                        <p class="card-text text-dark">$29.99 <span class="text-body ms-1"><del>$33.99</del></span></p>
                      </div>

                      <div class="card-footer pt-0">
                        <!-- Rating -->
                        <a class="d-inline-flex align-items-center mb-3" href="#">
                          <div class="d-flex gap-1 me-2">
                            <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                            <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                            <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                            <img src="../assets/svg/illustrations/star-muted.svg" alt="Review rating" width="16">
                            <img src="../assets/svg/illustrations/star-muted.svg" alt="Review rating" width="16">
                          </div>
                          <span class="small">125</span>
                        </a>
                        <!-- End Rating -->

                        <button type="button" class="btn btn-outline-primary btn-sm rounded-pill">Add to cart</button>
                      </div>
                    </div>
                    <!-- End Card -->
                  </div>
                  <!-- End Col -->
                </div>
                <!-- End Row -->