<!-- Page Heading -->



          <div class="d-sm-flex align-items-center justify-content-between mb-4">



            <h1 class="h3 mb-0 text-gray-800">Cards</h1>



          </div>







          <div class="row">







            <!-- Earnings (Monthly) Card Example -->



            <div class="col-xl-3 col-md-6 mb-4">



              <div class="card border-left-primary shadow h-100 py-2">



                <div class="card-body">



                  <div class="row no-gutters align-items-center">



                    <div class="col mr-2">



                      <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">Earnings (Monthly)</div>



                      <div class="h5 mb-0 font-weight-bold text-gray-800">$40,000</div>



                    </div>



                    <div class="col-auto">



                      <i class="fas fa-calendar fa-2x text-gray-300"></i>



                    </div>



                  </div>



                </div>



              </div>



            </div>







            <!-- Earnings (Monthly) Card Example -->



            <div class="col-xl-3 col-md-6 mb-4">



              <div class="card border-left-success shadow h-100 py-2">



                <div class="card-body">



                  <div class="row no-gutters align-items-center">



                    <div class="col mr-2">



                      <div class="text-xs font-weight-bold text-success text-uppercase mb-1">Earnings (Annual)</div>



                      <div class="h5 mb-0 font-weight-bold text-gray-800">$215,000</div>



                    </div>



                    <div class="col-auto">



                      <i class="fas fa-dollar-sign fa-2x text-gray-300"></i>



                    </div>



                  </div>



                </div>



              </div>



            </div>







            <!-- Earnings (Monthly) Card Example -->



            <div class="col-xl-3 col-md-6 mb-4">



              <div class="card border-left-info shadow h-100 py-2">



                <div class="card-body">



                  <div class="row no-gutters align-items-center">



                    <div class="col mr-2">



                      <div class="text-xs font-weight-bold text-info text-uppercase mb-1">Tasks</div>



                      <div class="row no-gutters align-items-center">



                        <div class="col-auto">



                          <div class="h5 mb-0 mr-3 font-weight-bold text-gray-800">50%</div>



                        </div>



                        <div class="col">



                          <div class="progress progress-sm mr-2">



                            <div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>



                          </div>



                        </div>



                      </div>



                    </div>



                    <div class="col-auto">



                      <i class="fas fa-clipboard-list fa-2x text-gray-300"></i>



                    </div>



                  </div>



                </div>



              </div>



            </div>







            <!-- Pending Requests Card Example -->



            <div class="col-xl-3 col-md-6 mb-4">



              <div class="card border-left-warning shadow h-100 py-2">



                <div class="card-body">



                  <div class="row no-gutters align-items-center">



                    <div class="col mr-2">



                      <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">Pending Requests</div>



                      <div class="h5 mb-0 font-weight-bold text-gray-800">18</div>



                    </div>



                    <div class="col-auto">



                      <i class="fas fa-comments fa-2x text-gray-300"></i>



                    </div>



                  </div>



                </div>



              </div>



            </div>



          </div>







          <div class="row">







            <div class="col-lg-6">







              <!-- Default Card Example -->



              <div class="card mb-4">



                <div class="card-header">



                  Default Card Example



                </div>



                <div class="card-body">



                  This card uses Bootstrap's default styling with no utility classes added. Global styles are the only things modifying the look and feel of this default card example.



                </div>



              </div>







              <!-- Basic Card Example -->



              <div class="card shadow mb-4">



                <div class="card-header py-3">



                  <h6 class="m-0 font-weight-bold text-primary">Basic Card Example</h6>



                </div>



                <div class="card-body">



                  The styling for this basic card example is created by using default Bootstrap utility classes. By using utility classes, the style of the card component can be easily modified with no need for any custom CSS!



                </div>



              </div>







            </div>







            <div class="col-lg-6">







              <!-- Dropdown Card Example -->



              <div class="card shadow mb-4">



                <!-- Card Header - Dropdown -->



                <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">



                  <h6 class="m-0 font-weight-bold text-primary">Dropdown Card Example</h6>



                  <div class="dropdown no-arrow">



                    <a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">



                      <i class="fas fa-ellipsis-v fa-sm fa-fw text-gray-400"></i>



                    </a>



                    <div class="dropdown-menu dropdown-menu-right shadow animated--fade-in" aria-labelledby="dropdownMenuLink">



                      <div class="dropdown-header">Dropdown Header:</div>



                      <a class="dropdown-item" href="#">Action</a>



                      <a class="dropdown-item" href="#">Another action</a>



                      <div class="dropdown-divider"></div>



                      <a class="dropdown-item" href="#">Something else here</a>



                    </div>



                  </div>



                </div>



                <!-- Card Body -->



                <div class="card-body">



                  Dropdown menus can be placed in the card header in order to extend the functionality of a basic card. In this dropdown card example, the Font Awesome vertical ellipsis icon in the card header can be clicked on in order to toggle a dropdown menu.



                </div>



              </div>







              <!-- Collapsable Card Example -->



              <div class="card shadow mb-4">



                <!-- Card Header - Accordion -->



                <a href="#collapseCardExample" class="d-block card-header py-3" data-toggle="collapse" role="button" aria-expanded="true" aria-controls="collapseCardExample">



                  <h6 class="m-0 font-weight-bold text-primary">Collapsable Card Example</h6>



                </a>



                <!-- Card Content - Collapse -->



                <div class="collapse show" id="collapseCardExample">



                  <div class="card-body">



                    This is a collapsable card example using Bootstrap's built in collapse functionality. <strong>Click on the card header</strong> to see the card body collapse and expand!



                  </div>



                </div>



              </div>







            </div>







          </div>