<div class="card">
  <div class="card-header fw-bold bg-none d-flex align-items-center">
    Weekly Web Analytics
    <span class="badge ms-3 fw-semibold bg-theme-subtle text-theme">11 Mar - 18 Mar</span>
    <a href="#" class="ms-auto text-muted text-decoration-none" data-toggle="card-expand"><i class="fa fa-expand"></i></a>
  </div>
  <div class="card-body text-body text-center">
    <canvas id="barChart" class="h-150"></canvas>
  </div>
  <div class="list-group list-group-flush">
    <div class="list-group-item border-top-0 rounded-top-0 d-flex align-items-center">
      <div class="w-40px h-40px bg-primary-subtle text-primary d-flex align-items-center justify-content-center rounded-pill">
        <i class="bi-bar-chart-line fs-20px"></i>
      </div>
      <div class="flex-fill px-3 py-1">
        <div class="fw-semibold">Total Visitors</div>
        <div class="small text-body text-opacity-50">11 Mar - 18 Mar</div>
      </div>
      <div>
        <div class="fw-semibold h3 m-0">1.3m</div>
      </div>
    </div>
  </div>
</div>