<div class="card-group m-b-30"> <div class="card"> <div class="card-body"> <div class="row"> <div class="col-12"> <h2 class="m-b-0"> <i class="mdi mdi-briefcase-check text-info"></i> </h2> <h3 class="">2456</h3> <h6 class="card-subtitle">New Projects</h6> </div> <div class="col-12"> <ngb-progressbar [showValue]="false" type="info" [value]="50"></ngb-progressbar> </div> </div> </div> </div> <!-- Column --> <!-- Column --> <div class="card"> <div class="card-body"> <div class="row"> <div class="col-12"> <h2 class="m-b-0"> <i class="mdi mdi-alert-circle text-success"></i> </h2> <h3 class="">546</h3> <h6 class="card-subtitle">Pending Project</h6> </div> <div class="col-12"> <ngb-progressbar [showValue]="false" type="success" [value]="50"></ngb-progressbar> </div> </div> </div> </div> <!-- Column --> <!-- Column --> <div class="card"> <div class="card-body"> <div class="row"> <div class="col-12"> <h2 class="m-b-0"> <i class="mdi mdi-wallet text-purple"></i> </h2> <h3 class="">$24561</h3> <h6 class="card-subtitle">Total Cost</h6> </div> <div class="col-12"> <ngb-progressbar [showValue]="false" type="primary" [value]="50"></ngb-progressbar> </div> </div> </div> </div> <!-- Column --> <!-- Column --> <div class="card"> <div class="card-body"> <div class="row"> <div class="col-12"> <h2 class="m-b-0"> <i class="mdi mdi-buffer text-warning"></i> </h2> <h3 class="">$30010</h3> <h6 class="card-subtitle">Total Earnings</h6> </div> <div class="col-12"> <ngb-progressbar [showValue]="false" type="warning" [value]="50"></ngb-progressbar> </div> </div> </div> </div> </div>