sleek-dashboard
Version:
Premium & Free Bootstrap 4 admin dashboard template by TAFcoder.com
619 lines (601 loc) • 27.3 kB
HTML
---
layout: default
title: "General Widgets - Sleek Admin Dashboard Template"
parent: "widgets"
sub_parent: "widgets"
activePage: "general-widget"
plugins: ["vector_map"]
---
<!-- First Row -->
<div class="row">
<div class="col-md-6 col-lg-6 col-xl-3">
<div class="media widget-media p-4 bg-white border">
<div class="icon rounded-circle mr-4 bg-primary">
<i class="mdi mdi-account-outline text-white "></i>
</div>
<div class="media-body align-self-center">
<h4 class="text-primary mb-2">5300</h4>
<p>New Users</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-6 col-xl-3">
<div class="media widget-media p-4 bg-white border">
<div class="icon rounded-circle bg-warning mr-4">
<i class="mdi mdi-cart-outline text-white "></i>
</div>
<div class="media-body align-self-center">
<h4 class="text-primary mb-2">1953</h4>
<p>Order Placed</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-6 col-xl-3">
<div class="media widget-media p-4 bg-white border">
<div class="icon rounded-circle mr-4 bg-danger">
<i class="mdi mdi-cart-outline text-white "></i>
</div>
<div class="media-body align-self-center">
<h4 class="text-primary mb-2">1450</h4>
<p>Total Sales</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-6 col-xl-3">
<div class="media widget-media p-4 bg-white border">
<div class="icon bg-success rounded-circle mr-4">
<i class="mdi mdi-diamond text-white "></i>
</div>
<div class="media-body align-self-center">
<h4 class="text-primary mb-2">9503</h4>
<p>Monthly Revenue</p>
</div>
</div>
</div>
</div>
<!-- Second Row -->
<div class="row">
<div class="col-md-6 col-lg-6 col-xl-3">
<div class="media widget-media p-4 bg-white border">
<i class="mdi mdi-account-outline text-blue mr-4"></i>
<div class="media-body align-self-center">
<h4 class="text-primary mb-2">5300</h4>
<p>New Users</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-6 col-xl-3">
<div class="media widget-media p-4 rounded bg-white border">
<i class="mdi mdi-cart-outline text-warning mr-4"></i>
<div class="media-body align-self-center">
<h4 class="text-primary mb-2">1953</h4>
<p>Order Placed</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-6 col-xl-3">
<div class="media widget-media p-4 rounded bg-white border">
<i class="mdi mdi-cart-outline text-danger mr-4"></i>
<div class="media-body align-self-center">
<h4 class="text-primary mb-2">1450</h4>
<p>Total Sales</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-6 col-xl-3">
<div class="media widget-media p-4 rounded bg-white border">
<i class="mdi mdi-diamond text-success mr-4"></i>
<div class="media-body align-self-center">
<h4 class="text-primary mb-2">9503</h4>
<p>Monthly Revenue</p>
</div>
</div>
</div>
</div>
<!-- Third Row -->
<div class="row">
<div class="col-md-6 col-lg-6 col-xl-3">
<div class="card widget-block p-4 rounded bg-white border">
<div class="card-block">
<i class="mdi mdi-account-outline text-blue mr-4"></i>
<h4 class="text-primary my-2">5300</h4>
<p>New Users</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-6 col-xl-3">
<div class="card widget-block p-4 rounded bg-white border">
<div class="card-block">
<i class="mdi mdi-cart-outline text-warning mr-4"></i>
<h4 class="text-primary my-2">1953</h4>
<p>Order Placed</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-6 col-xl-3">
<div class="card widget-block p-4 rounded bg-white border">
<div class="card-block">
<i class="mdi mdi-cart-outline text-danger mr-4"></i>
<h4 class="text-primary my-2">1450</h4>
<p>Total Sales</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-6 col-xl-3">
<div class="card widget-block p-4 rounded bg-white border">
<div class="card-block">
<i class="mdi mdi-diamond text-success mr-4"></i>
<h4 class="text-primary my-2">9503</h4>
<p>Monthly Revenue</p>
</div>
</div>
</div>
</div>
<!-- Fourth Row -->
<div class="row">
<div class="col-md-6 col-lg-6 col-xl-3">
<div class="card widget-block p-4 rounded bg-primary border">
<div class="card-block">
<i class="mdi mdi-account-outline mr-4 text-white"></i>
<h4 class="text-white my-2">5300</h4>
<p>New Users</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-6 col-xl-3">
<div class="card widget-block p-4 rounded bg-warning border">
<div class="card-block">
<i class="mdi mdi-cart-outline mr-4 text-white"></i>
<h4 class="text-white my-2">1953</h4>
<p>Order Placed</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-6 col-xl-3">
<div class="card widget-block p-4 rounded bg-danger border">
<div class="card-block">
<i class="mdi mdi-cart-outline mr-4 text-white"></i>
<h4 class="text-white my-2">1450</h4>
<p>Total Sales</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-6 col-xl-3">
<div class="card widget-block p-4 rounded bg-success border">
<div class="card-block">
<i class="mdi mdi-diamond t mr-4 text-white"></i>
<h4 class="text-white my-2">9503</h4>
<p>Monthly Revenue</p>
</div>
</div>
</div>
</div>
<!-- Fifth Row -->
<div class="row">
<div class="col-md-6 col-lg-6 col-xl-3">
<div class="card widget-block p-4 rounded bg-white border">
<div class="card-block">
<h4 class="text-primary my-2">90%</h4>
<p class="pb-3">New Users</p>
<div class="progress my-2" style="height: 5px;">
<div class="progress-bar bg-primary" role="progressbar" style="width: 90%;" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-6 col-xl-3">
<div class="card widget-block p-4 rounded bg-white border">
<div class="card-block">
<h4 class="text-primary my-2">50%</h4>
<p class="pb-3">Order Placed</p>
<div class="progress my-2" style="height: 5px;">
<div class="progress-bar bg-warning" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-6 col-xl-3">
<div class="card widget-block p-4 rounded bg-white border">
<div class="card-block">
<h4 class="text-primary my-2">70%</h4>
<p class="pb-3">Total Sales</p>
<div class="progress my-2" style="height: 5px;">
<div class="progress-bar bg-danger" role="progressbar" style="width: 70%;" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-6 col-xl-3">
<div class="card widget-block p-4 rounded bg-white border">
<div class="card-block">
<h4 class="text-primary my-2">80%</h4>
<p class="pb-3">Monthly Revenue</p>
<div class="progress my-2" style="height: 5px;">
<div class="progress-bar bg-success" role="progressbar" style="width: 80%;" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
</div>
<!-- Sixth Row -->
<div class="row">
<div class="col-md-6 col-lg-6 col-xl-3">
<div class="card widget-block p-4 rounded bg-primary border">
<div class="card-block">
<h4 class="text-white my-2">90%</h4>
<p class="pb-3">New Users</p>
<div class="progress my-2" style="height: 5px;">
<div class="progress-bar bg-white" role="progressbar" style="width: 90%;" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-6 col-xl-3">
<div class="card widget-block p-4 rounded bg-warning border">
<div class="card-block">
<h4 class="text-white my-2">50%</h4>
<p class="pb-3">Order Placed</p>
<div class="progress my-2" style="height: 5px;">
<div class="progress-bar bg-white" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-6 col-xl-3">
<div class="card widget-block p-4 rounded bg-danger border">
<div class="card-block">
<h4 class="text-white my-2">70%</h4>
<p class="pb-3">Total Sales</p>
<div class="progress my-2" style="height: 5px;">
<div class="progress-bar bg-white" role="progressbar" style="width: 70%;" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-6 col-xl-3">
<div class="card widget-block p-4 rounded bg-success border">
<div class="card-block">
<h4 class="text-white my-2">80%</h4>
<p class="pb-3">Monthly Revenue</p>
<div class="progress my-2" style="height: 5px;">
<div class="progress-bar bg-white" role="progressbar" style="width: 80%;" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
</div>
<!-- Seventh Row -->
<div class="row">
<div class="col-xl-6">
<div class="card card-default todo-table" id="todo" data-scroll-height="540">
<div class="card-header justify-content-between align-items-center">
<h2 class="d-inline-block">To Do List</h2>
<a class="btn btn-primary btn-pill" id="add-task" href="#" role="button"> Add task </a>
</div>
<div class="card-body slim-scroll">
<div class="todo-single-item d-none" id="todo-input">
<form >
<div class="form-group">
<input type="text" class="form-control" placeholder="Enter Todo" autofocus>
</div>
</form>
</div>
<div class="todo-list" id="todo-list">
<div class="todo-single-item d-flex flex-row justify-content-between finished">
<i class="mdi"></i>
<span >Finish Dashboard UI Kit update</span>
<span class="badge badge-primary">Finished</span>
</div>
<div class="todo-single-item d-flex flex-row justify-content-between current">
<i class="mdi"></i>
<span >Create new prototype for the landing page</span>
<span class="badge badge-primary">Today</span>
</div>
<div class="todo-single-item d-flex flex-row justify-content-between ">
<i class="mdi"></i>
<span > Add new Google Analytics code to all main files </span>
<span class="badge badge-danger">Yesterday</span>
</div>
<div class="todo-single-item d-flex flex-row justify-content-between ">
<i class="mdi"></i>
<span >Update parallax scroll on team page</span>
<span class="badge badge-success">Dec 15, 2018</span>
</div>
<div class="todo-single-item d-flex flex-row justify-content-between ">
<i class="mdi"></i>
<span >Update parallax scroll on team page</span>
<span class="badge badge-success">Dec 15, 2018</span>
</div>
<div class="todo-single-item d-flex flex-row justify-content-between ">
<i class="mdi"></i>
<span >Create online customer list book</span>
<span class="badge badge-success">Dec 15, 2018</span>
</div>
<div class="todo-single-item d-flex flex-row justify-content-between ">
<i class="mdi"></i>
<span >Lorem ipsum dolor sit amet, consectetur.</span>
<span class="badge badge-success">Dec 15, 2018</span>
</div>
<div class="todo-single-item d-flex flex-row justify-content-between mb-1">
<i class="mdi"></i>
<span >Update parallax scroll on team page</span>
<span class="badge badge-success">Dec 15, 2018</span>
</div>
</div>
</div>
<div class="mt-3"></div>
</div>
</div>
<div class="col-sm-12 col-xl-6">
<div class="card card-default">
<div class="card-header d-block d-md-flex justify-content-between">
<h2>World Wide Customer </h2>
<div class="dropdown show d-inline-block widget-dropdown ml-auto">
<a class="dropdown-toggle" href="#" role="button" id="world-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-display="static">
World Wide
</a>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="world-dropdown">
<li class="dropdown-item"><a href="#">Continetal chart</a></li>
<li class="dropdown-item"><a href="#">Sub-continental</a></li>
</ul>
</div>
</div>
<div class="card-body vector-map-world">
<div id="world" style="height: 100%; width: 100%;"></div>
</div>
<div class="card-footer d-flex flex-wrap bg-white p-0">
<div class="col-6">
<div class="p-4">
<ul class="d-flex flex-column justify-content-between">
<li class="mb-2"><i class="mdi mdi-checkbox-blank-circle-outline mr-2" style="color: #29cc97"></i>America <span
class="float-right">5k</span></li>
<li><i class="mdi mdi-checkbox-blank-circle-outline mr-2" style="color: #4c84ff "></i>Australia <span class="float-right">3k</span></li>
</ul>
</div>
</div>
<div class="col-6">
<div class="p-4 border-left">
<ul class="d-flex flex-column justify-content-between">
<li class="mb-2"><i class="mdi mdi-checkbox-blank-circle-outline mr-2" style="color: #ffa128"></i>Europe <span
class="float-right">4k</span></li>
<li><i class="mdi mdi-checkbox-blank-circle-outline mr-2" style="color: #fe5461"></i>Africa <span class="float-right">2k</span></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Eighth Row -->
<div class="row">
<div class="col-sm-12 col-lg-6 col-xl-4">
<div class="card card-table-border-none" data-scroll-height="580">
<div class="card-header justify-content-between">
<h2 class="d-inline-block">New Customers</h2>
<div>
<button class="text-black-50 mr-2 font-size-20">
<i class="mdi mdi-cached"></i>
</button>
<div class="dropdown show d-inline-block widget-dropdown">
<a class="dropdown-toggle icon-burger-mini" href="#" role="button" id="dropdown-customar" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-display="static">
</a>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdown-customar">
<li class="dropdown-item"><a href="#">Action</a></li>
<li class="dropdown-item"><a href="#">Another action</a></li>
<li class="dropdown-item"><a href="#">Something else here</a></li>
</ul>
</div>
</div>
</div>
<div class="card-body pt-0">
<table class="table ">
<tbody>
<tr>
<td >
<div class="media">
<div class="media-image mr-3 rounded-circle">
<a href="profile.html"><img class="rounded-circle w-45" src="assets/img/user/u1.jpg" alt="customer image"></a>
</div>
<div class="media-body align-self-center">
<a href="profile.html">
<h6 class="mt-0 text-dark font-weight-medium">Selena Wagner</h6>
</a>
<small>@selena.oi</small>
</div>
</div>
</td>
<td >2 Orders</td>
<td class="text-dark d-none d-md-block">$150</td>
</tr>
<tr>
<td >
<div class="media">
<div class="media-image mr-3 rounded-circle">
<a href="profile.html"><img class="rounded-circle w-45" src="assets/img/user/u2.jpg" alt="customer image"></a>
</div>
<div class="media-body align-self-center">
<a href="profile.html">
<h6 class="mt-0 text-dark font-weight-medium">Walter Reuter</h6>
</a>
<small>@walter.me</small>
</div>
</div>
</td>
<td >5 Orders</td>
<td class="text-dark d-none d-md-block">$200</td>
</tr>
<tr>
<td >
<div class="media">
<div class="media-image mr-3 rounded-circle">
<a href="profile.html"><img class="rounded-circle w-45" src="assets/img/user/u3.jpg" alt="customer image"></a>
</div>
<div class="media-body align-self-center">
<a href="profile.html">
<h6 class="mt-0 text-dark font-weight-medium">Larissa Gebhardt</h6>
</a>
<small>@larissa.gb</small>
</div>
</div>
</td>
<td >1 Order</td>
<td class="text-dark d-none d-md-block">$50</td>
</tr>
<tr>
<td >
<div class="media">
<div class="media-image mr-3 rounded-circle">
<a href="profile.html"><img class="rounded-circle w-45" src="assets/img/user/u4.jpg" alt="customer image"></a>
</div>
<div class="media-body align-self-center">
<a href="profile.html">
<h6 class="mt-0 text-dark font-weight-medium">Albrecht Straub</h6>
</a>
<small>@albrech.as</small>
</div>
</div>
</td>
<td >2 Orders</td>
<td class="text-dark d-none d-md-block">$100</td>
</tr>
<tr>
<td >
<div class="media">
<div class="media-image mr-3 rounded-circle">
<a href="profile.html"><img class="rounded-circle w-45" src="assets/img/user/u5.jpg" alt="customer image"></a>
</div>
<div class="media-body align-self-center">
<a href="profile.html">
<h6 class="mt-0 text-dark font-weight-medium">Leopold Ebert</h6>
</a>
<small>@leopold.et</small>
</div>
</div>
</td>
<td >1 Order</td>
<td class="text-dark d-none d-md-block">$60</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-sm-12 col-lg-6 col-xl-4">
<div class="card card-default" data-scroll-height="575">
<div class="card-header justify-content-between align-items-center">
<h2>Latest Notifications</h2>
<div>
<button class="text-black-50 mr-2 font-size-20"><i class="mdi mdi-cached"></i></button>
<div class="dropdown show d-inline-block widget-dropdown">
<a class="dropdown-toggle icon-burger-mini" href="#" role="button" id="dropdown-notification" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-display="static"></a>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdown-notification">
<li class="dropdown-item"><a href="#">Action</a></li>
<li class="dropdown-item"><a href="#">Another action</a></li>
<li class="dropdown-item"><a href="#">Something else here</a></li>
</ul>
</div>
</div>
</div>
<div class="card-body slim-scroll">
<div class="media py-3 align-items-center justify-content-between">
<div class="d-flex rounded-circle align-items-center justify-content-center mr-3 media-icon iconbox-45 bg-primary text-white">
<i class="mdi mdi-cart-outline font-size-20"></i>
</div>
<div class="media-body pr-3 ">
<a class="mt-0 mb-1 font-size-15 text-dark" href="#">New Order</a>
<p >Selena has placed an new order</p>
</div>
<span class=" font-size-12 d-inline-block"><i class="mdi mdi-clock-outline"></i> 10 AM</span>
</div>
<div class="media py-3 align-items-center justify-content-between">
<div class="d-flex rounded-circle align-items-center justify-content-center mr-3 media-icon iconbox-45 bg-success text-white">
<i class="mdi mdi-email-outline font-size-20"></i>
</div>
<div class="media-body pr-3">
<a class="mt-0 mb-1 font-size-15 text-dark" href="#">New Enquiry</a>
<p >Phileine has placed an new order</p>
</div>
<span class=" font-size-12 d-inline-block"><i class="mdi mdi-clock-outline"></i> 9 AM</span>
</div>
<div class="media py-3 align-items-center justify-content-between">
<div class="d-flex rounded-circle align-items-center justify-content-center mr-3 media-icon iconbox-45 bg-warning text-white">
<i class="mdi mdi-stack-exchange font-size-20"></i>
</div>
<div class="media-body pr-3">
<a class="mt-0 mb-1 font-size-15 text-dark" href="#">Support Ticket</a>
<p >Emma has placed an new order</p>
</div>
<span class=" font-size-12 d-inline-block"><i class="mdi mdi-clock-outline"></i> 10 AM</span>
</div>
<div class="media py-3 align-items-center justify-content-between">
<div class="d-flex rounded-circle align-items-center justify-content-center mr-3 media-icon iconbox-45 bg-primary text-white">
<i class="mdi mdi-cart-outline font-size-20"></i>
</div>
<div class="media-body pr-3">
<a class="mt-0 mb-1 font-size-15 text-dark" href="#">New order</a>
<p >Ryan has placed an new order</p>
</div>
<span class=" font-size-12 d-inline-block"><i class="mdi mdi-clock-outline"></i> 10 AM</span>
</div>
<div class="media py-3 align-items-center justify-content-between">
<div class="d-flex rounded-circle align-items-center justify-content-center mr-3 media-icon iconbox-45 bg-info text-white">
<i class="mdi mdi-calendar-blank font-size-20"></i>
</div>
<div class="media-body pr-3">
<a class="mt-0 mb-1 font-size-15 text-dark" href="">Comapny Meetup</a>
<p >Phileine has placed an new order</p>
</div>
<span class=" font-size-12 d-inline-block"><i class="mdi mdi-clock-outline"></i> 10 AM</span>
</div>
<div class="media py-3 align-items-center justify-content-between">
<div class="d-flex rounded-circle align-items-center justify-content-center mr-3 media-icon iconbox-45 bg-warning text-white">
<i class="mdi mdi-stack-exchange font-size-20"></i>
</div>
<div class="media-body pr-3">
<a class="mt-0 mb-1 font-size-15 text-dark" href="#">Support Ticket</a>
<p >Emma has placed an new order</p>
</div>
<span class=" font-size-12 d-inline-block"><i class="mdi mdi-clock-outline"></i> 10 AM</span>
</div>
<div class="media py-3 align-items-center justify-content-between">
<div class="d-flex rounded-circle align-items-center justify-content-center mr-3 media-icon iconbox-45 bg-success text-white">
<i class="mdi mdi-email-outline font-size-20"></i>
</div>
<div class="media-body pr-3">
<a class="mt-0 mb-1 font-size-15 text-dark" href="#">New Enquiry</a>
<p >Phileine has placed an new order</p>
</div>
<span class=" font-size-12 d-inline-block"><i class="mdi mdi-clock-outline"></i> 9 AM</span>
</div>
</div>
<div class="mt-3"></div>
</div>
</div>
<div class="col-lg-6 col-sm-12 col-xl-4">
<div class="card card-default" data-scroll-height="575">
<div class="card-header">
<h2>Profile</h2>
</div>
<div class="card-body text-center">
<img class="rounded-circle d-flex mx-auto" src="assets/img/user/u6.jpg" alt="user image">
<h4 class="py-2 text-dark">Albrecht Straub</h4>
<p>Albrecht.straub@gmail.com</p>
<a class="btn btn-primary btn-pill btn-lg my-4" href="#">Follow</a>
</div>
<div class="d-flex justify-content-between px-5 pb-4">
<div class="text-center pb-4">
<h6 class="text-dark pb-2">1503</h6>
<p>Friends</p>
</div>
<div class="text-center pb-4">
<h6 class="text-dark pb-2">2905</h6>
<p>Followers</p>
</div>
<div class="text-center pb-4">
<h6 class="text-dark pb-2">1200</h6>
<p>Following</p>
</div>
</div>
</div>
</div>
</div>