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