Tables

Component #1

Your team
Name Status Access
Image Description
Amanda Harvey Image Description
amanda@example.com
Image Description
Anne Richard
anne@example.com
FH
Finch Hoot
finch@example.com
Image Description
David Harrison New
david@example.com
SD
Sean Dean
bob@example.com
Image Description
Sam Kart Image Description
sam@example.com
Image Description
Ella Marley
ella@example.com
Image Description
Rachel Doe New
rachel@example.com
BH
Brian Halligan
brian@example.com
                    
                      <!-- Card -->
                      <div class="card">
                        <div class="card-header">
                          <h5 class="card-header-title">Your team</h5>
                        </div>

                        <!-- Table -->
                        <div class="table-responsive">
                          <table class="table table-borderless table-thead-bordered table-nowrap table-align-middle">
                            <thead class="thead-light">
                              <tr>
                                <th>Name</th>
                                <th>Status</th>
                                <th>Access</th>
                                <th style="width: 5%;"></th>
                              </tr>
                            </thead>
                            <tbody>
                              <tr>
                                <td>
                                  <div class="media align-items-center">
                                    <img class="avatar avatar-sm avatar-circle mr-3" src="../assets/img/100x100/img1.jpg" alt="Image Description">

                                    <div class="media-body">
                                      <a class="d-inline-block text-dark" href="#">
                                        <h6 class="text-hover-primary mb-0">Amanda Harvey <img class="avatar avatar-xss ml-1" src="../assets/svg/illustrations/top-vendor.svg" alt="Image Description" data-toggle="tooltip" data-placement="top" title="Verified user"></h6>
                                      </a>
                                      <small class="d-block">amanda@example.com</small>
                                    </div>
                                  </div>
                                </td>
                                <td>
                                  <!-- Select -->
                                  <select class="js-custom-select"
                                        data-hs-select2-options='{
                                          "minimumResultsForSearch": "Infinity",
                                          "customClass": "custom-select custom-select-sm",
                                          "dropdownAutoWidth": true
                                        }'>
                                    <option value="memberStatusLabelActive1" selected data-option-template='<span class="d-flex align-items-center"><span class="legend-indicator bg-success mr-2"></span> Active</span>'>Active</option>
                                    <option value="memberStatusLabelInactive1" data-option-template='<span class="d-flex align-items-center"><span class="legend-indicator bg-danger mr-2"></span> Inactive</span>'>Inactive</option>
                                  </select>
                                  <!-- End Select -->
                                </td>
                                <td>
                                  <!-- Select -->
                                  <select class="js-custom-select"
                                        data-hs-select2-options='{
                                          "minimumResultsForSearch": "Infinity",
                                          "customClass": "custom-select custom-select-sm",
                                          "dropdownAutoWidth": true
                                        }'>
                                    <option value="memberStatusLabelAdmin1" selected>Admin</option>
                                    <option value="memberStatusLabelCanEdit1">Can edit</option>
                                    <option value="memberStatusLabelCanView1">Can view</option>
                                  </select>
                                  <!-- End Select -->
                                </td>
                                <td>
                                  <a class="text-body" href="javascript:;" data-toggle="tooltip" data-placement="top" title="Locked">
                                    <i class="fas fa-lock"></i>
                                  </a>
                                </td>
                              </tr>
                              <tr>
                                <td>
                                  <div class="media align-items-center">
                                    <img class="avatar avatar-sm avatar-circle mr-3" src="../assets/img/100x100/img2.jpg" alt="Image Description">

                                    <div class="media-body">
                                      <a class="d-inline-block text-dark" href="#">
                                        <h6 class="text-hover-primary mb-0">Anne Richard</h6>
                                      </a>
                                      <small class="d-block">anne@example.com</small>
                                    </div>
                                  </div>
                                </td>
                                <td>
                                  <!-- Select -->
                                  <select class="js-custom-select"
                                        data-hs-select2-options='{
                                          "minimumResultsForSearch": "Infinity",
                                          "customClass": "custom-select custom-select-sm",
                                          "dropdownAutoWidth": true
                                        }'>
                                    <option value="memberStatusLabelActive2" data-option-template='<span class="d-flex align-items-center"><span class="legend-indicator bg-success mr-2"></span> Active</span>'>Active</option>
                                    <option value="memberStatusLabelInactive2" selected data-option-template='<span class="d-flex align-items-center"><span class="legend-indicator bg-danger mr-2"></span> Inactive</span>'>Inactive</option>
                                  </select>
                                  <!-- End Select -->
                                </td>
                                <td>
                                  <!-- Select -->
                                  <select class="js-custom-select"
                                        data-hs-select2-options='{
                                          "minimumResultsForSearch": "Infinity",
                                          "customClass": "custom-select custom-select-sm",
                                          "dropdownAutoWidth": true
                                        }'>
                                    <option value="memberStatusLabelAdmin2">Admin</option>
                                    <option value="memberStatusLabelCanEdit2" selected>Can edit</option>
                                    <option value="memberStatusLabelCanView2">Can view</option>
                                  </select>
                                  <!-- End Select -->
                                </td>
                                <td>
                                  <a class="text-body" href="javascript:;" data-toggle="tooltip" data-placement="top" title="Remove member">
                                    <i class="far fa-trash-alt"></i>
                                  </a>
                                </td>
                              </tr>
                              <tr>
                                <td>
                                  <div class="media align-items-center">
                                    <span class="avatar avatar-sm avatar-dark avatar-circle mr-3">
                                      <span class="avatar-initials">FH</span>
                                    </span>

                                    <div class="media-body">
                                      <a class="d-inline-block text-dark" href="#">
                                        <h6 class="text-hover-primary mb-0">Finch Hoot</h6>
                                      </a>
                                      <small class="d-block">finch@example.com</small>
                                    </div>
                                  </div>
                                </td>
                                <td>
                                  <!-- Select -->
                                  <select class="js-custom-select"
                                        data-hs-select2-options='{
                                          "minimumResultsForSearch": "Infinity",
                                          "customClass": "custom-select custom-select-sm",
                                          "dropdownAutoWidth": true
                                        }'>
                                    <option value="memberStatusLabelActive4" selected data-option-template='<span class="d-flex align-items-center"><span class="legend-indicator bg-success mr-2"></span> Active</span>'>Active</option>
                                    <option value="memberStatusLabelInactive4" data-option-template='<span class="d-flex align-items-center"><span class="legend-indicator bg-danger mr-2"></span> Inactive</span>'>Inactive</option>
                                  </select>
                                  <!-- End Select -->
                                </td>
                                <td>
                                  <!-- Select -->
                                  <select class="js-custom-select"
                                        data-hs-select2-options='{
                                          "minimumResultsForSearch": "Infinity",
                                          "customClass": "custom-select custom-select-sm",
                                          "dropdownAutoWidth": true
                                        }'>
                                    <option value="memberStatusLabelAdmin4">Admin</option>
                                    <option value="memberStatusLabelCanEdit4">Can edit</option>
                                    <option value="memberStatusLabelCanView4" selected>Can view</option>
                                  </select>
                                  <!-- End Select -->
                                </td>
                                <td>
                                  <a class="text-body" href="javascript:;" data-toggle="tooltip" data-placement="top" title="Remove member">
                                    <i class="far fa-trash-alt"></i>
                                  </a>
                                </td>
                              </tr>
                              <tr>
                                <td>
                                  <div class="media align-items-center">
                                    <img class="avatar avatar-sm avatar-circle mr-3" src="../assets/img/100x100/img3.jpg" alt="Image Description">

                                    <div class="media-body">
                                      <a class="d-inline-block text-dark" href="#">
                                        <h6 class="text-hover-primary mb-0">David Harrison <span class="badge badge-soft-info badge-pill ml-1">New</span></h6>
                                      </a>
                                      <small class="d-block">david@example.com</small>
                                    </div>
                                  </div>
                                </td>
                                <td>
                                  <!-- Select -->
                                  <select class="js-custom-select"
                                        data-hs-select2-options='{
                                          "minimumResultsForSearch": "Infinity",
                                          "customClass": "custom-select custom-select-sm",
                                          "dropdownAutoWidth": true
                                        }'>
                                    <option value="memberStatusLabelActive3" selected data-option-template='<span class="d-flex align-items-center"><span class="legend-indicator bg-success mr-2"></span> Active</span>'>Active</option>
                                    <option value="memberStatusLabelInactive3" data-option-template='<span class="d-flex align-items-center"><span class="legend-indicator bg-danger mr-2"></span> Inactive</span>'>Inactive</option>
                                  </select>
                                  <!-- End Select -->
                                </td>
                                <td>
                                  <!-- Select -->
                                  <select class="js-custom-select"
                                        data-hs-select2-options='{
                                          "minimumResultsForSearch": "Infinity",
                                          "customClass": "custom-select custom-select-sm",
                                          "dropdownAutoWidth": true
                                        }'>
                                    <option value="memberStatusLabelAdmin3">Admin</option>
                                    <option value="memberStatusLabelCanEdit3" selected>Can edit</option>
                                    <option value="memberStatusLabelCanView3">Can view</option>
                                  </select>
                                  <!-- End Select -->
                                </td>
                                <td>
                                  <a class="text-body" href="javascript:;" data-toggle="tooltip" data-placement="top" title="Remove member">
                                    <i class="far fa-trash-alt"></i>
                                  </a>
                                </td>
                              </tr>
                              <tr>
                                <td>
                                  <div class="media align-items-center">
                                    <span class="avatar avatar-sm avatar-danger avatar-circle mr-3">
                                      <span class="avatar-initials">SD</span>
                                    </span>

                                    <div class="media-body">
                                      <a class="d-inline-block text-dark" href="#">
                                        <h6 class="text-hover-primary mb-0">Sean Dean</h6>
                                      </a>
                                      <small class="d-block">bob@example.com</small>
                                    </div>
                                  </div>
                                </td>
                                <td>
                                  <!-- Select -->
                                  <select class="js-custom-select"
                                        data-hs-select2-options='{
                                          "minimumResultsForSearch": "Infinity",
                                          "customClass": "custom-select custom-select-sm",
                                          "dropdownAutoWidth": true
                                        }'>
                                    <option value="memberStatusLabelActive5" data-option-template='<span class="d-flex align-items-center"><span class="legend-indicator bg-success mr-2"></span> Active</span>'>Active</option>
                                    <option value="memberStatusLabelInactive5" selected data-option-template='<span class="d-flex align-items-center"><span class="legend-indicator bg-danger mr-2"></span> Inactive</span>'>Inactive</option>
                                  </select>
                                  <!-- End Select -->
                                </td>
                                <td>
                                  <!-- Select -->
                                  <select class="js-custom-select"
                                        data-hs-select2-options='{
                                          "minimumResultsForSearch": "Infinity",
                                          "customClass": "custom-select custom-select-sm",
                                          "dropdownAutoWidth": true
                                        }'>
                                    <option value="memberStatusLabelAdmin5">Admin</option>
                                    <option value="memberStatusLabelCanEdit5" selected>Can edit</option>
                                    <option value="memberStatusLabelCanView5">Can view</option>
                                  </select>
                                  <!-- End Select -->
                                </td>
                                <td>
                                  <a class="text-body" href="javascript:;" data-toggle="tooltip" data-placement="top" title="Remove member">
                                    <i class="far fa-trash-alt"></i>
                                  </a>
                                </td>
                              </tr>
                              <tr>
                                <td>
                                  <div class="media align-items-center">
                                    <img class="avatar avatar-sm avatar-circle mr-3" src="../assets/img/100x100/img9.jpg" alt="Image Description">

                                    <div class="media-body">
                                      <a class="d-inline-block text-dark" href="#">
                                        <h6 class="text-hover-primary mb-0">Sam Kart <img class="avatar avatar-xss ml-1" src="../assets/svg/illustrations/top-vendor.svg" alt="Image Description" data-toggle="tooltip" data-placement="top" title="Verified user"></h6>
                                      </a>
                                      <small class="d-block">sam@example.com</small>
                                    </div>
                                  </div>
                                </td>
                                <td>
                                  <!-- Select -->
                                  <select class="js-custom-select"
                                        data-hs-select2-options='{
                                          "minimumResultsForSearch": "Infinity",
                                          "customClass": "custom-select custom-select-sm",
                                          "dropdownAutoWidth": true
                                        }'>
                                    <option value="memberStatusLabelActive6" data-option-template='<span class="d-flex align-items-center"><span class="legend-indicator bg-success mr-2"></span> Active</span>'>Active</option>
                                    <option value="memberStatusLabelInactive6" selected data-option-template='<span class="d-flex align-items-center"><span class="legend-indicator bg-danger mr-2"></span> Inactive</span>'>Inactive</option>
                                  </select>
                                  <!-- End Select -->
                                </td>
                                <td>
                                  <!-- Select -->
                                  <select class="js-custom-select"
                                        data-hs-select2-options='{
                                          "minimumResultsForSearch": "Infinity",
                                          "customClass": "custom-select custom-select-sm",
                                          "dropdownAutoWidth": true
                                        }'>
                                    <option value="memberStatusLabelAdmin6">Admin</option>
                                    <option value="memberStatusLabelCanEdit6">Can edit</option>
                                    <option value="memberStatusLabelCanView6" selected>Can view</option>
                                  </select>
                                  <!-- End Select -->
                                </td>
                                <td>
                                  <a class="text-body" href="javascript:;" data-toggle="tooltip" data-placement="top" title="Remove member">
                                    <i class="far fa-trash-alt"></i>
                                  </a>
                                </td>
                              </tr>
                              <tr>
                                <td>
                                  <div class="media align-items-center">
                                    <img class="avatar avatar-sm avatar-circle mr-3" src="../assets/img/100x100/img10.jpg" alt="Image Description">

                                    <div class="media-body">
                                      <a class="d-inline-block text-dark" href="#">
                                        <h6 class="text-hover-primary mb-0">Ella Marley</h6>
                                      </a>
                                      <small class="d-block">ella@example.com</small>
                                    </div>
                                  </div>
                                </td>
                                <td>
                                  <!-- Select -->
                                  <select class="js-custom-select"
                                        data-hs-select2-options='{
                                          "minimumResultsForSearch": "Infinity",
                                          "customClass": "custom-select custom-select-sm",
                                          "dropdownAutoWidth": true
                                        }'>
                                    <option value="memberStatusLabelActive7" selected data-option-template='<span class="d-flex align-items-center"><span class="legend-indicator bg-success mr-2"></span> Active</span>'>Active</option>
                                    <option value="memberStatusLabelInactive7" data-option-template='<span class="d-flex align-items-center"><span class="legend-indicator bg-danger mr-2"></span> Inactive</span>'>Inactive</option>
                                  </select>
                                  <!-- End Select -->
                                </td>
                                <td>
                                  <!-- Select -->
                                  <select class="js-custom-select"
                                        data-hs-select2-options='{
                                          "minimumResultsForSearch": "Infinity",
                                          "customClass": "custom-select custom-select-sm",
                                          "dropdownAutoWidth": true
                                        }'>
                                    <option value="memberStatusLabelAdmin7">Admin</option>
                                    <option value="memberStatusLabelCanEdit7" selected>Can edit</option>
                                    <option value="memberStatusLabelCanView7">Can view</option>
                                  </select>
                                  <!-- End Select -->
                                </td>
                                <td>
                                  <a class="text-body" href="javascript:;" data-toggle="tooltip" data-placement="top" title="Remove member">
                                    <i class="far fa-trash-alt"></i>
                                  </a>
                                </td>
                              </tr>
                              <tr>
                                <td>
                                  <div class="media align-items-center">
                                    <img class="avatar avatar-sm avatar-circle mr-3" src="../assets/img/100x100/img11.jpg" alt="Image Description">

                                    <div class="media-body">
                                      <a class="d-inline-block text-dark" href="#">
                                        <h6 class="text-hover-primary mb-0">Rachel Doe <span class="badge badge-soft-info badge-pill ml-1">New</span></h6>
                                      </a>
                                      <small class="d-block">rachel@example.com</small>
                                    </div>
                                  </div>
                                </td>
                                <td>
                                  <!-- Select -->
                                  <select class="js-custom-select"
                                        data-hs-select2-options='{
                                          "minimumResultsForSearch": "Infinity",
                                          "customClass": "custom-select custom-select-sm",
                                          "dropdownAutoWidth": true
                                        }'>
                                    <option value="memberStatusLabelActive8" selected data-option-template='<span class="d-flex align-items-center"><span class="legend-indicator bg-success mr-2"></span> Active</span>'>Active</option>
                                    <option value="memberStatusLabelInactive8" data-option-template='<span class="d-flex align-items-center"><span class="legend-indicator bg-danger mr-2"></span> Inactive</span>'>Inactive</option>
                                  </select>
                                  <!-- End Select -->
                                </td>
                                <td>
                                  <!-- Select -->
                                  <select class="js-custom-select"
                                        data-hs-select2-options='{
                                          "minimumResultsForSearch": "Infinity",
                                          "customClass": "custom-select custom-select-sm",
                                          "dropdownAutoWidth": true
                                        }'>
                                    <option value="memberStatusLabelAdmin8">Admin</option>
                                    <option value="memberStatusLabelCanEdit8" selected>Can edit</option>
                                    <option value="memberStatusLabelCanView8">Can view</option>
                                  </select>
                                  <!-- End Select -->
                                </td>
                                <td>
                                  <a class="text-body" href="javascript:;" data-toggle="tooltip" data-placement="top" title="Remove member">
                                    <i class="far fa-trash-alt"></i>
                                  </a>
                                </td>
                              </tr>
                              <tr>
                                <td>
                                  <div class="media align-items-center">
                                    <span class="avatar avatar-sm avatar-primary avatar-circle mr-3">
                                      <span class="avatar-initials">BH</span>
                                    </span>

                                    <div class="media-body">
                                      <a class="d-inline-block text-dark" href="#">
                                        <h6 class="text-hover-primary mb-0">Brian Halligan</h6>
                                      </a>
                                      <small class="d-block">brian@example.com</small>
                                    </div>
                                  </div>
                                </td>
                                <td>
                                  <!-- Select -->
                                  <select class="js-custom-select"
                                        data-hs-select2-options='{
                                          "minimumResultsForSearch": "Infinity",
                                          "customClass": "custom-select custom-select-sm",
                                          "dropdownAutoWidth": true
                                        }'>
                                    <option value="memberStatusLabelActive9" selected data-option-template='<span class="d-flex align-items-center"><span class="legend-indicator bg-success mr-2"></span> Active</span>'>Active</option>
                                    <option value="memberStatusLabelInactive9" data-option-template='<span class="d-flex align-items-center"><span class="legend-indicator bg-danger mr-2"></span> Inactive</span>'>Inactive</option>
                                  </select>
                                  <!-- End Select -->
                                </td>
                                <td>
                                  <!-- Select -->
                                  <select class="js-custom-select"
                                        data-hs-select2-options='{
                                          "minimumResultsForSearch": "Infinity",
                                          "customClass": "custom-select custom-select-sm",
                                          "dropdownAutoWidth": true
                                        }'>
                                    <option value="memberStatusLabelAdmin9">Admin</option>
                                    <option value="memberStatusLabelCanEdit9">Can edit</option>
                                    <option value="memberStatusLabelCanView9" selected>Can view</option>
                                  </select>
                                  <!-- End Select -->
                                </td>
                                <td>
                                  <a class="text-body" href="javascript:;" data-toggle="tooltip" data-placement="top" title="Remove member">
                                    <i class="far fa-trash-alt"></i>
                                  </a>
                                </td>
                              </tr>
                            </tbody>
                          </table>
                        </div>
                        <!-- End Table -->

                        <!-- Footer -->
                        <div class="card-footer d-flex justify-content-end">
                          <a class="btn btn-white" href="javascript:;">Cancel</a>
                          <span class="mx-2"></span>
                          <a class="btn btn-primary" href="javascript:;">Save Changes</a>
                        </div>
                        <!-- End Footer -->
                      </div>
                      <!-- End Card -->
                    
                  
                    
                      <link rel="stylesheet" href="./node_modules/select2/dist/css/select2.min.css">
                    
                  
                    
                      <!-- JS Implementing Plugins -->
                      <script src="./node_modules/select2/dist/js/select2.full.min.js"></script>

                      <!-- JS Front -->
                      <script src="./assets/js/hs.select2.js"></script>

                      <!-- JS Plugins Init. -->
                      <script>
                        $(document).on('ready', function () {
                          // INITIALIZATION OF SELECT2
                          // =======================================================
                          $('.js-custom-select').each(function () {
                            var select2 = $.HSCore.components.HSSelect2.init($(this));
                          });
                        });
                      </script>
                    
                  

Component #2

Order history
Reference Status Amount Updated Invoice
#3682303 Pending $264 22/04/2020 PDF Quick view
#2333234 Successful $264 22/04/2019 PDF Quick view
#9834283 Successful $264 22/04/2018 PDF Quick view
                    
                      <!-- Card -->
                      <div class="card">
                        <!-- Header -->
                        <div class="card-header">
                          <h5 class="card-header-title">Order history</h5>
                        </div>
                        <!-- End Header -->

                        <!-- Table -->
                        <div class="table-responsive">
                          <table class="table table-borderless table-thead-bordered table-nowrap table-align-middle">
                            <thead class="thead-light">
                              <tr>
                                <th>Reference</th>
                                <th>Status</th>
                                <th>Amount</th>
                                <th>Updated</th>
                                <th>Invoice</th>
                                <th style="width: 5%;"></th>
                              </tr>
                            </thead>
                            <tbody>
                              <tr>
                                <td><a href="#">#3682303</a></td>
                                <td><span class="badge badge-soft-warning">Pending</span></td>
                                <td>$264</td>
                                <td>22/04/2020</td>
                                <td><a class="btn btn-xs btn-white" href="#"><i class="fas fa-file-download mr-1"></i> PDF</a></td>
                                <td><a class="btn btn-xs btn-white" href="javascript:;" data-toggle="modal" data-target="#invoiceReceiptModal"><i class="fas fa-eye mr-1"></i> Quick view</a></td>
                              </tr>
                              <tr>
                                <td><a href="#">#2333234</a></td>
                                <td><span class="badge badge-soft-success">Successful</span></td>
                                <td>$264</td>
                                <td>22/04/2019</td>
                                <td><a class="btn btn-xs btn-white" href="#"><i class="fas fa-file-download mr-1"></i> PDF</a></td>
                                <td><a class="btn btn-xs btn-white" href="javascript:;" data-toggle="modal" data-target="#invoiceReceiptModal"><i class="fas fa-eye mr-1"></i> Quick view</a></td>
                              </tr>
                              <tr>
                                <td><a href="#">#9834283</a></td>
                                <td><span class="badge badge-soft-success">Successful</span></td>
                                <td>$264</td>
                                <td>22/04/2018</td>
                                <td><a class="btn btn-xs btn-white" href="#"><i class="fas fa-file-download mr-1"></i> PDF</a></td>
                                <td><a class="btn btn-xs btn-white" href="javascript:;" data-toggle="modal" data-target="#invoiceReceiptModal"><i class="fas fa-eye mr-1"></i> Quick view</a></td>
                              </tr>
                            </tbody>
                          </table>
                        </div>
                        <!-- End Table -->
                      </div>
                      <!-- End Card -->

                      <!-- Invoice Modal -->
                      <div class="modal fade" id="invoiceReceiptModal" tabindex="-1" role="dialog" aria-hidden="true">
                        <div class="modal-dialog modal-dialog-centered" role="document">
                          <div class="modal-content">
                            <!-- Header -->
                            <div class="modal-top-cover bg-primary text-center">
                              <figure class="position-absolute right-0 bottom-0 left-0">
                                <svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 1920 100.1">
                                  <path fill="#fff" d="M0,0c0,0,934.4,93.4,1920,0v100.1H0L0,0z"/>
                                </svg>
                              </figure>

                              <div class="modal-close">
                                <button type="button" class="btn btn-icon btn-sm btn-ghost-light" data-dismiss="modal" aria-label="Close">
                                  <svg width="16" height="16" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
                                    <path fill="currentColor" d="M11.5,9.5l5-5c0.2-0.2,0.2-0.6-0.1-0.9l-1-1c-0.3-0.3-0.7-0.3-0.9-0.1l-5,5l-5-5C4.3,2.3,3.9,2.4,3.6,2.6l-1,1 C2.4,3.9,2.3,4.3,2.5,4.5l5,5l-5,5c-0.2,0.2-0.2,0.6,0.1,0.9l1,1c0.3,0.3,0.7,0.3,0.9,0.1l5-5l5,5c0.2,0.2,0.6,0.2,0.9-0.1l1-1 c0.3-0.3,0.3-0.7,0.1-0.9L11.5,9.5z"/>
                                  </svg>
                                </button>
                              </div>
                            </div>
                            <!-- End Header -->

                            <div class="modal-top-cover-avatar">
                              <img class="avatar avatar-lg avatar-circle avatar-border-lg avatar-centered shadow-soft" src="../assets/svg/brands/front.svg" alt="Logo">
                            </div>

                            <!-- Body -->
                            <div class="modal-body pt-3 pb-sm-5 px-sm-5">
                              <div class="text-center mb-5">
                                <h3 class="mb-1">Invoice from Front</h3>
                                <span class="d-block">Invoice #3682303</span>
                              </div>

                              <div class="row mb-6">
                                <div class="col-md-4 mb-3 mb-md-0">
                                  <small class="text-cap">Amount paid:</small>
                                  <span class="text-dark">$316.8</span>
                                </div>

                                <div class="col-md-4 mb-3 mb-md-0">
                                  <small class="text-cap">Date paid:</small>
                                  <span class="text-dark">April 22, 2020</span>
                                </div>

                                <div class="col-md-4">
                                  <small class="text-cap">Payment method:</small>
                                  <div class="d-flex align-items-center">
                                    <img class="avatar avatar-xss mr-2" src="../assets/svg/brands/mastercard.svg" alt="Image Description">
                                    <span class="text-dark">•••• 4242</span>
                                  </div>
                                </div>
                              </div>

                              <small class="text-cap mb-2">Summary</small>

                              <ul class="list-group mb-4">
                                <li class="list-group-item text-dark">
                                  <div class="d-flex justify-content-between align-items-center">
                                    <span>Payment to Front</span>
                                    <span>$264.00</span>
                                  </div>
                                </li>
                                <li class="list-group-item text-dark">
                                  <div class="d-flex justify-content-between align-items-center">
                                    <span>Tax fee</span>
                                    <span>$52.8</span>
                                  </div>
                                </li>
                                <li class="list-group-item list-group-item-light text-dark">
                                  <div class="d-flex justify-content-between align-items-center">
                                    <strong>Amount paid</strong>
                                    <strong>$316.8</strong>
                                  </div>
                                </li>
                              </ul>

                              <div class="d-flex justify-content-end">
                                <a class="btn btn-xs btn-white" href="#"><i class="fas fa-file-download mr-1"></i> PDF</a>
                                <span class="mx-1"></span>
                                <a class="btn btn-xs btn-white" href="#"><i class="fas fa-print mr-1"></i> Print Details</a>
                              </div>

                              <hr class="my-5">

                              <p class="modal-footer-text">If you have any questions, please contact us at <a href="mailto:example@gmail.com">example@gmail.com</a> or call at <a class="text-nowrap" href="#">+1 898 34-5492</a></p>
                            </div>
                            <!-- End Body -->
                          </div>
                        </div>
                      </div>
                      <!-- End Invoice Modal -->