Black Friday! Up to 90% OFF
<div class="card draggable"> <div class="card-header border-0"> <div class="row align-items-center"> <div class="col"> <h3 class="mb-0">Page visits</h3> </div> <div class="col text-right"> <a href="#!" class="btn btn-sm btn-primary">See all</a> </div> </div> </div> <div class="table-responsive"> <table class="table align-items-center table-flush"> <thead class="thead-light"> <tr> <th scope="col">Page name</th> <th scope="col">Visitors</th> <th scope="col">Unique users</th> <th scope="col">Bounce rate</th> </tr> </thead> <tbody> <tr> <th scope="row"> /argon/ </th> <td> 4,569 </td> <td> 340 </td> <td> <i class="fas fa-arrow-up text-success mr-3"></i> 46,53% </td> </tr> <tr> <th scope="row"> /argon/index.html </th> <td> 3,985 </td> <td> 319 </td> <td> <i class="fas fa-arrow-down text-warning mr-3"></i> 46,53% </td> </tr> <tr> <th scope="row"> /argon/charts.html </th> <td> 3,513 </td> <td> 294 </td> <td> <i class="fas fa-arrow-down text-warning mr-3"></i> 36,49% </td> </tr> <tr> <th scope="row"> /argon/tables.html </th> <td> 2,050 </td> <td> 147 </td> <td> <i class="fas fa-arrow-up text-success mr-3"></i> 50,87% </td> </tr> <tr> <th scope="row"> /argon/profile.html </th> <td> 1,795 </td> <td> 190 </td> <td> <i class="fas fa-arrow-down text-danger mr-3"></i> 46,53% </td> </tr> </tbody> </table> </div> </div>
<div class="card bg-default shadow draggable"> <div class="card-header bg-transparent border-0"> <h3 class="text-white mb-0">Dark table</h3> </div> <div class="table-responsive"> <table class="table align-items-center table-dark table-flush"> <thead class="thead-dark"> <tr> <th scope="col" class="sort" data-sort="name">Project</th> <th scope="col" class="sort" data-sort="budget">Budget</th> <th scope="col" class="sort" data-sort="status">Status</th> <th scope="col">Users</th> <th scope="col" class="sort" data-sort="completion">Completion</th> <th scope="col"></th> </tr> </thead> <tbody class="list"> <tr> <th scope="row"> <div class="media align-items-center"> <a href="#" class="avatar rounded-circle mr-3"> <img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/bootstrap.jpg"> </a> <div class="media-body"> <span class="name mb-0 text-sm">Argon Design System</span> </div> </div> </th> <td class="budget"> $2500 USD </td> <td> <span class="badge badge-dot mr-4"> <i class="bg-warning"></i> <span class="status">pending</span> </span> </td> <td> <div class="avatar-group"> <a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip" data-original-title="Ryan Tompson"> <img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/team-1.jpg"> </a> <a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip" data-original-title="Romina Hadid"> <img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/team-2.jpg"> </a> <a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip" data-original-title="Alexander Smith"> <img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/team-3.jpg"> </a> <a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip" data-original-title="Jessica Doe"> <img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/team-4.jpg"> </a> </div> </td> <td> <div class="d-flex align-items-center"> <span class="completion mr-2">60%</span> <div> <div class="progress"> <div class="progress-bar bg-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div> </div> </div> </div> </td> <td class="text-right"> <div class="dropdown"> <a class="btn btn-sm btn-icon-only text-light" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="fas fa-ellipsis-v"></i> </a> <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> </div> </td> </tr> <tr> <th scope="row"> <div class="media align-items-center"> <a href="#" class="avatar rounded-circle mr-3"> <img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/angular.jpg"> </a> <div class="media-body"> <span class="name mb-0 text-sm">Angular Now UI Kit PRO</span> </div> </div> </th> <td class="budget"> $1800 USD </td> <td> <span class="badge badge-dot mr-4"> <i class="bg-success"></i> <span class="status">completed</span> </span> </td> <td> <div class="avatar-group"> <a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip" data-original-title="Ryan Tompson"> <img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/team-1.jpg"> </a> <a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip" data-original-title="Romina Hadid"> <img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/team-2.jpg"> </a> <a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip" data-original-title="Alexander Smith"> <img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/team-3.jpg"> </a> <a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip" data-original-title="Jessica Doe"> <img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/team-4.jpg"> </a> </div> </td> <td> <div class="d-flex align-items-center"> <span class="completion mr-2">100%</span> <div> <div class="progress"> <div class="progress-bar bg-success" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;"></div> </div> </div> </div> </td> <td class="text-right"> <div class="dropdown"> <a class="btn btn-sm btn-icon-only text-light" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="fas fa-ellipsis-v"></i> </a> <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> </div> </td> </tr> <tr> <th scope="row"> <div class="media align-items-center"> <a href="#" class="avatar rounded-circle mr-3"> <img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/sketch.jpg"> </a> <div class="media-body"> <span class="name mb-0 text-sm">Black Dashboard</span> </div> </div> </th> <td class="budget"> $3150 USD </td> <td> <span class="badge badge-dot mr-4"> <i class="bg-danger"></i> <span class="status">delayed</span> </span> </td> <td> <div class="avatar-group"> <a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip" data-original-title="Ryan Tompson"> <img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/team-1.jpg"> </a> <a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip" data-original-title="Romina Hadid"> <img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/team-2.jpg"> </a> <a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip" data-original-title="Alexander Smith"> <img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/team-3.jpg"> </a> <a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip" data-original-title="Jessica Doe"> <img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/team-4.jpg"> </a> </div> </td> <td> <div class="d-flex align-items-center"> <span class="completion mr-2">72%</span> <div> <div class="progress"> <div class="progress-bar bg-danger" role="progressbar" aria-valuenow="72" aria-valuemin="0" aria-valuemax="100" style="width: 72%;"></div> </div> </div> </div> </td> <td class="text-right"> <div class="dropdown"> <a class="btn btn-sm btn-icon-only text-light" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="fas fa-ellipsis-v"></i> </a> <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> </div> </td> </tr> <tr> <th scope="row"> <div class="media align-items-center"> <a href="#" class="avatar rounded-circle mr-3"> <img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/react.jpg"> </a> <div class="media-body"> <span class="name mb-0 text-sm">React Material Dashboard</span> </div> </div> </th> <td class="budget"> $4400 USD </td> <td> <span class="badge badge-dot mr-4"> <i class="bg-info"></i> <span class="status">on schedule</span> </span> </td> <td> <div class="avatar-group"> <a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip" data-original-title="Ryan Tompson"> <img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/team-1.jpg"> </a> <a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip" data-original-title="Romina Hadid"> <img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/team-2.jpg"> </a> <a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip" data-original-title="Alexander Smith"> <img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/team-3.jpg"> </a> <a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip" data-original-title="Jessica Doe"> <img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/team-4.jpg"> </a> </div> </td> <td> <div class="d-flex align-items-center"> <span class="completion mr-2">90%</span> <div> <div class="progress"> <div class="progress-bar bg-info" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width: 90%;"></div> </div> </div> </div> </td> <td class="text-right"> <div class="dropdown"> <a class="btn btn-sm btn-icon-only text-light" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="fas fa-ellipsis-v"></i> </a> <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> </div> </td> </tr> <tr> <th scope="row"> <div class="media align-items-center"> <a href="#" class="avatar rounded-circle mr-3"> <img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/vue.jpg"> </a> <div class="media-body"> <span class="name mb-0 text-sm">Vue Paper UI Kit PRO</span> </div> </div> </th> <td class="budget"> $2200 USD </td> <td> <span class="badge badge-dot mr-4"> <i class="bg-success"></i> <span class="status">completed</span> </span> </td> <td> <div class="avatar-group"> <a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip" data-original-title="Ryan Tompson"> <img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/team-1.jpg"> </a> <a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip" data-original-title="Romina Hadid"> <img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/team-2.jpg"> </a> <a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip" data-original-title="Alexander Smith"> <img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/team-3.jpg"> </a> <a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip" data-original-title="Jessica Doe"> <img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/team-4.jpg"> </a> </div> </td> <td> <div class="d-flex align-items-center"> <span class="completion mr-2">100%</span> <div> <div class="progress"> <div class="progress-bar bg-success" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;"></div> </div> </div> </div> </td> <td class="text-right"> <div class="dropdown"> <a class="btn btn-sm btn-icon-only text-light" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="fas fa-ellipsis-v"></i> </a> <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> </div> </td> </tr> </tbody> </table> </div> </div>
<div class="card draggable"> <div class="card-header border-0"> <div class="row align-items-center"> <div class="col"> <h3 class="mb-0">Social traffic</h3> </div> <div class="col text-right"> <a href="#!" class="btn btn-sm btn-primary">See all</a> </div> </div> </div> <div class="table-responsive"> <table class="table align-items-center table-flush"> <thead class="thead-light"> <tr> <th scope="col">Referral</th> <th scope="col">Visitors</th> <th scope="col"></th> </tr> </thead> <tbody> <tr> <th scope="row"> Facebook </th> <td> 1,480 </td> <td> <div class="d-flex align-items-center"> <span class="mr-2">60%</span> <div> <div class="progress"> <div class="progress-bar bg-gradient-danger" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div> </div> </div> </div> </td> </tr> <tr> <th scope="row"> Facebook </th> <td> 5,480 </td> <td> <div class="d-flex align-items-center"> <span class="mr-2">70%</span> <div> <div class="progress"> <div class="progress-bar bg-gradient-success" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 70%;"></div> </div> </div> </div> </td> </tr> <tr> <th scope="row"> Google </th> <td> 4,807 </td> <td> <div class="d-flex align-items-center"> <span class="mr-2">80%</span> <div> <div class="progress"> <div class="progress-bar bg-gradient-primary" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;"></div> </div> </div> </div> </td> </tr> <tr> <th scope="row"> Instagram </th> <td> 3,678 </td> <td> <div class="d-flex align-items-center"> <span class="mr-2">75%</span> <div> <div class="progress"> <div class="progress-bar bg-gradient-info" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%;"></div> </div> </div> </div> </td> </tr> <tr> <th scope="row"> twitter </th> <td> 2,645 </td> <td> <div class="d-flex align-items-center"> <span class="mr-2">30%</span> <div> <div class="progress"> <div class="progress-bar bg-gradient-warning" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 30%;"></div> </div> </div> </div> </td> </tr> </tbody> </table> </div> </div>