Developed by Codescandy

Stats

A component that displays content as a stats with numbers.

Stats #1

Sales

$10,800

+20.9$ Number of sales
Courses

2,456

120+ Number of pending
Students

1,22,456

+1200 Students
Instructor

22,786

+200 Instructor 
<div class="row">
                                                            <div class="col-xl-3 col-lg-6 col-md-12 col-12">
                                                                <!-- card -->
                                                                <div class="card">
                                                                    <!-- card body -->
                                                                    <div class="card-body">
                                                                        <div class="d-flex align-items-center justify-content-between mb-3 lh-1">
                                                                            <div>
                                                                                <span class="font-size-xs text-uppercase font-weight-semi-bold">Sales</span>
                                    
                                                                            </div>
                                                                            <div>
                                                                                <span class="fe fe-shopping-bag font-size-lg text-primary"></span>
                                                                            </div>
                                                                        </div>
                                                                        <h2 class="font-weight-bold mb-1">
                                                                            $10,800
                                                                        </h2>
                                                                        <span class="text-success font-weight-semi-bold"><i class="fe fe-trending-up mr-1"></i>+20.9$</span>
                                                                        <span class="ml-1 font-weight-medium">Number of sales</span>
                                                                    </div>
                                    
                                                                </div>
                                                            </div>
                                                            <div class="col-xl-3 col-lg-6 col-md-12 col-12">
                                                                <!-- card -->
                                                                <div class="card">
                                                                    <!-- card body -->
                                                                    <div class="card-body">
                                                                        <div class="d-flex align-items-center justify-content-between mb-3 lh-1">
                                                                            <div>
                                                                                <span class="font-size-xs text-uppercase font-weight-semi-bold">Courses</span>
                                    
                                                                            </div>
                                                                            <div>
                                                                                <span class=" fe fe-book-open font-size-lg text-primary"></span>
                                                                            </div>
                                                                        </div>
                                                                        <h2 class="font-weight-bold mb-1">
                                                                            2,456
                                                                        </h2>
                                                                        <span class="text-danger font-weight-semi-bold">120+</span>
                                                                        <span class="ml-1 font-weight-medium">Number of pending</span>
                                                                    </div>
                                    
                                                                </div>
                                                                                                                   </div>
                                                            <div class="col-xl-3 col-lg-6 col-md-12 col-12">
                                                                <!-- card -->
                                                                <div class="card">
                                                                    <!-- card body -->
                                                                    <div class="card-body">
                                                                        <div class="d-flex align-items-center justify-content-between mb-3 lh-1">
                                                                            <div>
                                                                                <span class="font-size-xs text-uppercase font-weight-semi-bold">Students</span>
                                    
                                                                            </div>
                                                                            <div>
                                                                                <span class=" fe fe-users font-size-lg text-primary"></span>
                                                                            </div>
                                                                        </div>
                                                                        <h2 class="font-weight-bold mb-1">
                                                                            1,22,456
                                                                        </h2>
                                                                        <span class="text-success font-weight-semi-bold"><i class="fe fe-trending-up mr-1"></i>+1200</span>
                                                                        <span class="ml-1 font-weight-medium">Students</span>
                                                                    </div>
                                    
                                                                </div>
                                                            </div>
                                                            <div class="col-xl-3 col-lg-6 col-md-12 col-12">
                                                                <!-- card -->
                                                                <div class="card">
                                                                    <!-- card body -->
                                                                    <div class="card-body">
                                                                        <div class="d-flex align-items-center justify-content-between mb-3 lh-1">
                                                                            <div>
                                                                                <span class="font-size-xs text-uppercase font-weight-semi-bold">Instructor</span>
                                    
                                                                            </div>
                                                                            <div>
                                                                                <span class=" fe fe-user-check font-size-lg text-primary"></span>
                                                                            </div>
                                                                        </div>
                                                                        <h2 class="font-weight-bold mb-1">
                                                                            22,786
                                                                        </h2>
                                                                        <span class="text-success font-weight-semi-bold"><i class="fe fe-trending-up mr-1"></i>+200</span>
                                                                        <span class="ml-1 font-weight-medium">Instructor</span>
                                                                    </div>
                                    
                                                                </div>
                                                            </div>
                                                        </div>

Stats #2

Total Posts

2,000

100Last 30Days
Assets

367

300+ Media
USers

13,234

1.5k in 30Days
Comments

120

20+ Comments 
<div class="row">
                                                        <div class="col-xl-3 col-lg-6 col-md-12 col-12">
                                                           <!-- Card -->
                                                           <div class="card mb-4">
                                                              <!-- Card body -->
                                                              <div class=" card-body">
                                                                 <span class="font-size-xs text-uppercase font-weight-semi-bold">Total Posts</span>
                                                                 <div class="mt-2 d-flex justify-content-between align-items-center">
                                                                    <div class="lh-1">
                                                                       <h2 class="h1 font-weight-bold mb-1">2,000</h2>
                                                                       <span>100Last 30Days</span>
                                                                    </div>
                                                                    <div>
                                                                       <span class="bg-light-primary icon-shape icon-xl rounded-lg text-dark-primary"><i class="mdi mdi-text-box-multiple mdi-24px"></i></span>
                                                                    </div>
                                                                 </div>
                                                              </div>
                                                           </div>
                                                        </div>
                                                        <div class="col-xl-3 col-lg-6 col-md-12 col-12">
                                                           <!-- Card -->
                                                           <div class="card mb-4">
                                                              <!-- Card Body -->
                                                              <div class=" card-body">
                                                                 <span class="font-size-xs text-uppercase font-weight-semi-bold">Assets</span>
                                                                 <div class="mt-2 d-flex justify-content-between align-items-center">
                                                                    <div class="lh-1">
                                                                       <h2 class="h1 font-weight-bold mb-1">367</h2>
                                                                       <span>300+ Media Object</span>
                                                                    </div>
                                                                    <div>
                                                                       <span class="bg-light-warning icon-shape icon-xl rounded-lg text-dark-warning"><i class="mdi mdi-folder-multiple-image mdi-24px"></i></span>
                                                                    </div>
                                                                 </div>
                                                              </div>
                                                           </div>
                                                        </div>
                                                        <div class="col-xl-3 col-lg-6 col-md-12 col-12">
                                                           <!-- Card -->
                                                           <div class="card mb-4">
                                                              <!-- Card Body -->
                                                              <div class=" card-body">
                                                                 <span class="font-size-xs text-uppercase font-weight-semi-bold">USers</span>
                                                                 <div class="mt-2 d-flex justify-content-between align-items-center">
                                                                    <div class="lh-1">
                                                                       <h2 class="h1 font-weight-bold mb-1">13,234</h2>
                                                                       <span>1.5k in 30Days</span>
                                                                    </div>
                                                                    <div>
                                                                       <span class="bg-light-success icon-shape icon-xl rounded-lg text-dark-success"><i class="mdi mdi-account-multiple mdi-24px"></i></span>
                                                                    </div>
                                                                 </div>
                                                              </div>
                                                           </div>
                                                        </div>
                                                        <div class="col-xl-3 col-lg-6 col-md-12 col-12">
                                                           <!-- Card -->
                                                           <div class="card mb-4">
                                                              <!-- Card Body -->
                                                              <div class=" card-body">
                                                                 <span class="font-size-xs text-uppercase font-weight-semi-bold">Comments</span>
                                                                 <div class="mt-2 d-flex justify-content-between align-items-center">
                                                                    <div class="lh-1">
                                                                       <h2 class="h1 font-weight-bold mb-1">120</h2>
                                                                       <span>20+ Comments</span>
                                                                    </div>
                                                                    <div>
                                                                       <span class="bg-light-info icon-shape icon-xl rounded-lg text-dark-info"><i class="mdi mdi-comment-text mdi-24px"></i></span>
                                                                    </div>
                                                                 </div>
                                                              </div>
                                                           </div>
                                                        </div>
                                                     </div>

Stats #3

$3,210

Earning this month

$3,800.00

Account Balance

$10,800.00

Life Time Sales

<div class="row">
                                                        <div class="col-lg-4 col-md-12 col-12">
                                                            <!-- Card -->
                                                            <div class="card mb-4  ">
                                                                <!-- Card Body -->
                                                                <div class="p-4">
                                                                    <span class="icon-shape icon-sm bg-light-primary text-dark-primary rounded-lg"><i class="fe fe-folder"></i></span>
                                                                    <h2 class="h1 font-weight-bold mb-0 mt-4 lh-1">$3,210</h2>
                                                                    <p>Earning this month</p>
                                                                    <div class="progress bg-light-primary" style="height: 2px;">
                                                                        <div class="progress-bar" role="progressbar" style="width: 65%;" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100"></div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-4 col-md-12 col-12">
                                                            <!-- Card Body -->
                                                            <div class="card mb-4  ">
                                                                <!-- Card Body -->
                                                                <div class="p-4">
                                                                    <span class="icon-shape icon-sm bg-light-danger text-dark-danger rounded-lg"><i class="fe fe-shopping-bag"></i></span>
                                                                    <h2 class="h1 font-weight-bold mb-0 mt-4 lh-1">$3,800.00</h2>
                                                                    <p>Account Balance</p>
                                                                    <div class="progress bg-light-danger" style="height: 2px;">
                                                                        <div class="progress-bar bg-danger" role="progressbar" style="width: 45%;" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100"></div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-4 col-md-12 col-12">
                                                            <!-- Card Body -->
                                                            <div class="card mb-4  ">
                                                                <!-- Card Body -->
                                                                <div class="p-4">
                                                                    <span class="icon-shape icon-sm bg-light-warning text-dark-warning rounded-lg"><i class="fe fe-send"></i></span>
                                                                    <h2 class="h1 font-weight-bold mb-0 mt-4 lh-1">$10,800.00</h2>
                                
                                                                    <p>Life Time Sales</p>
                                                                    <div class="progress bg-light-warning" style="height: 2px;">
                                                                        <div class="progress-bar bg-warning" role="progressbar" style="width: 35%;" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100"></div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>

Stats #4

Revenue

$467.34

Earning this month $203.23
students Enrollments

12,000

New this month 120+
Courses Rating

4.80

Rating this month 10+ 
<div class="row">
                                                        <div class="col-lg-4 col-md-12 col-12">
                                                           <!-- Card -->
                                                           <div class="card mb-4">
                                                              <div class="p-4">
                                                                 <span class="font-size-xs text-uppercase font-weight-semi-bold">Revenue</span>
                                                                 <h2 class="mt-4 font-weight-bold mb-1 d-flex align-items-center h1 lh-1">
                                                                    $467.34
                                                                 </h2>
                                                                 <span class="d-flex justify-content-between align-items-center">
                                                                 <span>Earning this month</span>
                                                                 <span class="badge badge-success ml-2">$203.23</span>
                                                                 </span>
                                                              </div>
                                                           </div>
                                                        </div>
                                                        <div class="col-lg-4 col-md-12 col-12">
                                                           <!-- Card -->
                                                           <div class="card mb-4">
                                                              <div class="p-4">
                                                                 <span class="font-size-xs text-uppercase font-weight-semi-bold">students Enrollments</span>
                                                                 <h2 class="mt-4 font-weight-bold mb-1 d-flex align-items-center h1 lh-1">
                                                                    12,000
                                                                 </h2>
                                                                 <span class="d-flex justify-content-between align-items-center">
                                                                 <span>New this month</span>
                                                                 <span class="badge badge-info ml-2">120+</span>
                                                                 </span>
                                                              </div>
                                                           </div>
                                                        </div>
                                                        <div class="col-lg-4 col-md-12 col-12">
                                                           <!-- Card -->
                                                           <div class="card mb-4">
                                                              <div class="p-4">
                                                                 <span class="font-size-xs text-uppercase font-weight-semi-bold">Courses Rating</span>
                                                                 <h2 class="mt-4 font-weight-bold mb-1 d-flex align-items-center h1 lh-1">
                                                                    4.80
                                                                 </h2>
                                                                 <span class="d-flex justify-content-between align-items-center">
                                                                 <span>Rating this month</span>
                                                                 <span class="badge badge-warning ml-2">10+</span>
                                                                 </span>
                                                              </div>
                                                           </div>
                                                        </div>
                                                     </div>