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="fs-6 text-uppercase fw-semi-bold">Sales</span>
                 </div>
                 <div>
                     <span class="fe fe-shopping-bag fs-3 text-primary"></span>
                 </div>
             </div>
             <h2 class="fw-bold mb-1">
                 $10,800
             </h2>
             <span class="text-success fw-semi-bold"><i class="fe fe-trending-up ms-1"></i>+20.9$</span>
             <span class="ms-1 fw-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="fs-6 text-uppercase fw-semi-bold">Courses</span>
                 </div>
                 <div>
                     <span class=" fe fe-book-open fs-3 text-primary"></span>
                 </div>
             </div>
             <h2 class="fw-bold mb-1">
                 2,456
             </h2>
             <span class="text-danger fw-semi-bold">120+</span>
             <span class="ms-1 fw-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="fs-6 text-uppercase fw-semi-bold">Students</span>
                 </div>
                 <div>
                     <span class=" fe fe-users fs-3 text-primary"></span>
                 </div>
             </div>
             <h2 class="fw-bold mb-1">
                 1,22,456
             </h2>
             <span class="text-success fw-semi-bold"><i class="fe fe-trending-up ms-1"></i>+1200</span>
             <span class="ms-1 fw-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="fs-6 text-uppercase fw-semi-bold">Instructor</span>
                 </div>
                 <div>
                     <span class=" fe fe-user-check fs-3 text-primary"></span>
                 </div>
             </div>
             <h2 class="fw-bold mb-1">
                 22,786
             </h2>
             <span class="text-success fw-semi-bold"><i class="fe fe-trending-up ms-1"></i>+200</span>
             <span class="ms-1 fw-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="fs-6 text-uppercase fw-semi-bold">Total Posts</span>
          <div class="mt-2 d-flex justify-content-between align-items-center">
             <div class="lh-1">
                <h2 class="h1 fw-bold mb-1">2,000</h2>
                <span>100Last 30Days</span>
             </div>
             <div>
                <span class="bg-light-primary icon-shape icon-xl rounded-3 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="fs-6 text-uppercase fw-semi-bold">Assets</span>
          <div class="mt-2 d-flex justify-content-between align-items-center">
             <div class="lh-1">
                <h2 class="h1 fw-bold mb-1">367</h2>
                <span>300+ Media Object</span>
             </div>
             <div>
                <span class="bg-light-warning icon-shape icon-xl rounded-3 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="fs-6 text-uppercase fw-semi-bold">USers</span>
          <div class="mt-2 d-flex justify-content-between align-items-center">
             <div class="lh-1">
                <h2 class="h1 fw-bold mb-1">13,234</h2>
                <span>1.5k in 30Days</span>
             </div>
             <div>
                <span class="bg-light-success icon-shape icon-xl rounded-3 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="fs-6 text-uppercase fw-semi-bold">Comments</span>
          <div class="mt-2 d-flex justify-content-between align-items-center">
             <div class="lh-1">
                <h2 class="h1 fw-bold mb-1">120</h2>
                <span>20+ Comments</span>
             </div>
             <div>
                <span class="bg-light-info icon-shape icon-xl rounded-3 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-3"><i class="fe fe-folder"></i></span>
      <h2 class="h1 fw-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-3"><i class="fe fe-shopping-bag"></i></span>
      <h2 class="h1 fw-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-3"><i class="fe fe-send"></i></span>
              <h2 class="h1 fw-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="fs-6 text-uppercase fw-semi-bold">Revenue</span>
           <h2 class="mt-4 fw-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 bg-success ms-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="fs-6 text-uppercase fw-semi-bold">students Enrollments</span>
           <h2 class="mt-4 fw-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 bg-info ms-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="fs-6 text-uppercase fw-semi-bold">Courses Rating</span>
           <h2 class="mt-4 fw-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 bg-warning ms-2">10+</span>
           </span>
        </div>
     </div>
  </div>
</div>

Stats #5

Our global reach

Geeks is the leading global marketplace for teaching and learning, connecting millions of students to the skills they need to succeed.

20M

Learners

57K

Instructors

21K

Courses

380M

Course enrollments

<div class="row">
  <!-- row -->
 <div class="col-md-6 offset-right-md-6">
    <!-- heading -->
   <h1 class="display-4 fw-bold mb-3">Our global reach</h1>
    <!-- para -->
   <p class="lead">Geeks is the leading global marketplace for teaching and learning, connecting millions of
     students to the skills they need to succeed.</p>
 </div>
 <div class="col-lg-3 col-md-6 col-6">
    <!-- counter -->
   <div class="border-top pt-4 mt-6 mb-5">
     <h1 class="display-3 fw-bold mb-0">20M</h1>
     <p class="text-uppercase text-muted">Learners</p>
   </div>
 </div>
 <div class="col-lg-3 col-md-6 col-6">
   <!-- counter -->
   <div class="border-top pt-4 mt-6 mb-5">
     <h1 class="display-3 fw-bold mb-0">57K</h1>
     <p class="text-uppercase text-muted">Instructors</p>
   </div>
 </div>
 <div class="col-lg-3 col-md-6 col-6">
   <!-- counter -->
   <div class="border-top pt-4 mt-6 mb-5">
     <h1 class="display-3 fw-bold mb-0">21K</h1>
     <p class="text-uppercase text-muted">Courses</p>
   </div>
 </div>
 <div class="col-lg-3 col-md-6 col-6">
   <!-- counter -->
   <div class="border-top pt-4 mt-6 mb-5">
     <h1 class="display-3 fw-bold mb-0">380M</h1>
     <p class="text-uppercase text-muted">Course enrollments</p>
   </div>
 </div>
                           </div>
Contents