Profile Cover

Beautiful profile cover panels.

Basic example

Image Description
Image Description

Capsule Review rating

Review rating Review rating Review rating Review rating Review rating 4.5 (2,391 reviews)
54 Open jobs Follow Get weekly updates, new jobs, and reviews
                    
                      <!-- Page Header -->
                      <div class="container">
                        <!-- Profile Cover -->
                        <div class="profile-cover">
                          <div class="profile-cover-img-wrapper">
                            <img class="profile-cover-img" src="../assets/img/1920x400/img1.jpg" alt="Image Description">
                          </div>
                        </div>
                        <!-- End Profile Cover -->

                        <!-- Media -->
                        <div class="d-sm-flex align-items-lg-center pt-1 px-3 pb-3">
                          <div class="mb-2 mb-sm-0 mr-4">
                            <img class="avatar avatar-xl profile-cover-avatar shadow-soft" src="../assets/svg/brands/capsule.svg" alt="Image Description">
                          </div>
                          
                          <div class="media-body">
                            <div class="row">
                              <div class="col-lg mb-3 mb-lg-0">
                                <h1 class="h2 mb-1">Capsule <img class="avatar avatar-xs" src="../assets/svg/illustrations/top-vendor.svg" alt="Review rating" data-toggle="tooltip" data-placement="top" title="Claimed profile"></h1>

                                <!-- Rating List -->
                                <div class="d-flex align-items-center">
                                  <img class="mr-1" src="../assets/svg/illustrations/star.svg" alt="Review rating" width="12">
                                  <img class="mr-1" src="../assets/svg/illustrations/star.svg" alt="Review rating" width="12">
                                  <img class="mr-1" src="../assets/svg/illustrations/star.svg" alt="Review rating" width="12">
                                  <img class="mr-1" src="../assets/svg/illustrations/star.svg" alt="Review rating" width="12">
                                  <img class="mr-1" src="../assets/svg/illustrations/star-half.svg" alt="Review rating" width="12">
                                  <span class="font-weight-bold text-dark ml-1">4.5</span>
                                  <span class="font-size-1 ml-1">(2,391 reviews)</span>
                                </div>
                                <!-- End Rating List -->
                              </div>
                              
                              <div class="col-lg-auto align-self-lg-end text-lg-right">
                                <a class="btn btn-sm btn-primary mb-1 mr-1" href="#">54 Open jobs</a>
                                <a class="btn btn-sm btn-outline-primary mb-1" href="#">
                                  <i class="fas fa-plus fa-sm mr-1"></i> Follow
                                </a>
                                <small class="d-block">Get weekly updates, new jobs, and reviews</small> 
                              </div>
                            </div>
                            <!-- End Row -->
                          </div>
                        </div>
                        <!-- End Media -->
                      </div>
                      <!-- End Page Header -->