# Directory Grid

## Component #1

- Preview
- HTML

### Getting started

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

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!

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.

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.

3 article in this collection

Written by Luisa Woodfine

### Subscription

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

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.

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">

                                  </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

#### Dropbox

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

#### Asana

Track tasks and projects, use agile boards, measure progress

#### Slack

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

New
For sale

#### Borrett Close, London

### £689,000

- 3 bed
- 2 bath
- 1,428 sqft

For sale

#### The Drive, Ilford

### £999,000

- 2 bed
- 1 bath
- 2,123 sqft

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

###### Mailchimp

### Senior B2B sales consultant

$125k-$135k yearly Remote

- Posted 7 hours ago
- Oxford
- Full time

###### Capsule

### Office assistant/Social media assistant

$50-$135 hourly

- Posted 21 hours ago
- Newcastle
- Part time

###### Dropbox

### Marketing and Communications Manager

$5k monthly

- Posted 1 day ago
- London
- Full time

###### 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

##### London, UK

##### Bristol, UK

##### Oxford, UK

##### Edinburgh, UK

##### Newcastle, UK

##### 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

New arrival
Accessories

#### Herschel backpack in dark blue

$56.99

0
Clothing

#### Front hoodie

$91.88

40
Out of stock
Accessories

#### Herschel backpack in gray

$29.99 $33.99

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 -->