Widgets
You can use these cards to show statistics, profiles, events and many more
Widget cards
Total Installs
367,567
Feb 1 - Apr 1, WorldWide
<div class="card shadow-sm">
<div class="card-body">
<h2 class="h5">Total Installs</h2>
<h3 class="h2 mb-1">367,567</h3>
<div class="small mb-3">Feb 1 - Apr 1, <span class="icon icon-small"><span class="fas fa-globe-europe"></span></span> WorldWide</div>
</div>
</div>Counters
Use these cards to show counters and statistics:
Customers
345,678
Customers
345k
18.2% Since last month
<div class="row">
<div class="col-12 col-lg-8">
<div class="card shadow-sm">
<div class="card-body">
<div class="row d-block d-xl-flex align-items-center">
<div class="col-12 col-xl-5 text-xl-center mb-3 mb-xl-0 d-flex align-items-center justify-content-xl-center">
<div class="icon icon-shape icon-md icon-shape-primary rounded me-4 me-sm-0"><span class="fas fa-chart-line"></span></div>
<div class="d-sm-none">
<h2 class="h5">Customers</h2>
<h3 class="mb-1">345,678</h3>
</div>
</div>
<div class="col-12 col-xl-7 px-xl-0">
<div class="d-none d-sm-block">
<h2 class="h5">Customers</h2>
<h3 class="mb-1">345k</h3>
</div>
<small>Feb 1 - Apr 1, <span class="icon icon-small"><span class="fas fa-globe-europe"></span></span> WorldWide</small>
<div class="small mt-2">
<span class="fas fa-angle-up text-success"></span>
<span class="text-success fw-bold">18.2%</span> Since last month
</div>
</div>
</div>
</div>
</div>
</div>
</div>Category
Use these cards to display categories:
<div class="row">
<div class="col-12 col-lg-8">
<div class="card shadow-sm">
<div class="card-body">
<div class="d-flex align-items-center justify-content-between border-bottom border-gray-300 pb-3">
<div>
<h6 class="mb-0"><span class="icon icon-xs me-3"><span class="fas fa-globe-europe"></span></span>Global Rank</h6>
</div>
<div>
<a href="#" class="text-primary fw-bold">#755<span class="fas fa-chart-line ms-2"></span></a>
</div>
</div>
<div class="d-flex align-items-center justify-content-between border-bottom border-gray-300 py-3">
<div>
<h6 class="mb-0"><span class="icon icon-xs me-3"><span class="fas fa-flag-usa"></span></span>Country Rank</h6>
<div class="small card-stats">United States<span class="icon icon-xs text-success ms-2"><span class="fas fa-angle-up"></span></span></div>
</div>
<div>
<a href="#" class="text-primary fw-bold">#32<span class="fas fa-chart-line ms-2"></span></a>
</div>
</div>
<div class="d-flex align-items-center justify-content-between pt-3">
<div>
<h6 class="mb-0"><span class="icon icon-xs me-3"><span class="fas fa-folder-open"></span></span>Category Rank</h6>
<a href="#" class="small card-stats">Travel > Accomodation</a>
</div>
<div>
<a href="#" class="text-primary fw-bold">#16<span class="fas fa-chart-line ms-2"></span></a>
</div>
</div>
</div>
</div>
</div>
</div>Ratings Pro
Use these card to show ratings for certain elements:
Average Rating
4.5
5
4
3
2
1
<div class="card shadow-sm">
<div class="card-body">
<div class="row d-block d-md-flex align-items-center">
<div class="col-12 col-md-5">
<h2 class="h5 mb-1">Average Rating</h2>
<h3 class="h1 mb-1">4.5</h3>
<div class="mb-2">
<span class="fas fa-star text-warning"></span>
<span class="fas fa-star text-warning"></span>
<span class="fas fa-star text-warning"></span>
<span class="fas fa-star text-warning"></span>
<span class="fas fa-star-half-alt text-warning"></span>
</div>
<span class="small">Based on <span class="fw-bold text-dark">103,456</span> ratings</span>
</div>
<div class="col-12 col-md-7 mt-3 mt-md-0">
<div class="col-12">
<div class="row d-flex align-items-center mb-1">
<div class="col-2 text-gray fw-bold px-0 small">
5<span class="fas fa-star ms-1"></span>
</div>
<div class="col-10 px-0">
<div class="progress progress-lg rounded mb-0">
<div class="progress-bar bg-success rounded" role="progressbar" aria-valuenow="51" aria-valuemin="0" aria-valuemax="100" style="width: 51%;"></div>
</div>
</div>
</div>
<!-- end row -->
<div class="row d-flex align-items-center mb-1">
<div class="col-2 text-gray fw-bold px-0 small">
4<span class="fas fa-star ms-1"></span>
</div>
<div class="col-10 px-0">
<div class="progress progress-lg rounded mb-0">
<div class="progress-bar bg-cyan rounded" role="progressbar" aria-valuenow="31" aria-valuemin="0" aria-valuemax="100" style="width: 31%;"></div>
</div>
</div>
</div>
<!-- end row -->
<div class="row d-flex align-items-center mb-1">
<div class="col-2 text-gray fw-bold px-0 small">
3<span class="fas fa-star ms-1"></span>
</div>
<div class="col-10 px-0">
<div class="progress progress-lg rounded mb-0">
<div class="progress-bar bg-warning rounded" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%;"></div>
</div>
</div>
</div>
<!-- end row -->
<div class="row d-flex align-items-center mb-1">
<div class="col-2 text-gray fw-bold px-0 small">
2<span class="fas fa-star ms-1"></span>
</div>
<div class="col-10 px-0">
<div class="progress progress-lg rounded mb-0">
<div class="progress-bar bg-orange rounded" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" style="width: 10%;"></div>
</div>
</div>
</div>
<!-- end row -->
<div class="row d-flex align-items-center mb-1">
<div class="col-2 text-gray fw-bold px-0 small">
1<span class="fas fa-star ms-1"></span>
</div>
<div class="col-10 px-0">
<div class="progress progress-lg rounded mb-0">
<div class="progress-bar bg-danger rounded" role="progressbar" aria-valuenow="6" aria-valuemin="0" aria-valuemax="100" style="width: 6%;"></div>
</div>
</div>
</div>
<!-- end row -->
</div>
</div>
</div>
</div>
</div>Progress tracker Pro
Use these card to show progress for certain elements:
Progress track
Rocket - SaaS Template
34 %
Pixel - Design System
60 %
Spaces - Listings Template
45 %
Stellar - Dashboard
35 %
Volt - Dashboard
34 %
<div class="card shadow-sm">
<div class="card-header border-bottom border-gray-300">
<h2 class="h5 mb-0">Progress track</h2>
</div>
<div class="card-body">
<div class="row align-items-center mb-4">
<div class="col-auto">
<span class="icon icon-md text-purple"><span class="fab fa-bootstrap"></span></span>
</div>
<div class="col">
<div class="progress-wrapper">
<div class="progress-info">
<div class="h6 mb-0">Rocket - SaaS Template</div>
<div class="small fw-bold text-dark"><span>34 %</span></div>
</div>
<div class="progress mb-0">
<div class="progress-bar bg-purple" role="progressbar" aria-valuenow="34" aria-valuemin="0" aria-valuemax="100" style="width: 34%;"></div>
</div>
</div>
</div>
</div>
<div class="row align-items-center mb-4">
<div class="col-auto">
<span class="icon icon-md text-danger"><span class="fab fa-angular"></span></span>
</div>
<div class="col">
<div class="progress-wrapper">
<div class="progress-info">
<div class="h6 mb-0">Pixel - Design System</div>
<div class="small fw-bold text-dark"><span>60 %</span></div>
</div>
<div class="progress mb-0">
<div class="progress-bar bg-danger" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div>
</div>
</div>
</div>
</div>
<div class="row align-items-center mb-4">
<div class="col-auto">
<span class="icon icon-md text-success"><span class="fab fa-vuejs"></span></span>
</div>
<div class="col">
<div class="progress-wrapper">
<div class="progress-info">
<div class="h6 mb-0">Spaces - Listings Template</div>
<div class="small fw-bold text-dark"><span>45 %</span></div>
</div>
<div class="progress mb-0">
<div class="progress-bar bg-tertiary" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%;"></div>
</div>
</div>
</div>
</div>
<div class="row align-items-center mb-4">
<div class="col-auto">
<span class="icon icon-md text-info"><span class="fab fa-react"></span></span>
</div>
<div class="col">
<div class="progress-wrapper">
<div class="progress-info">
<div class="h6 mb-0">Stellar - Dashboard</div>
<div class="small fw-bold text-dark"><span>35 %</span></div>
</div>
<div class="progress mb-0">
<div class="progress-bar bg-info" role="progressbar" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100" style="width: 35%;"></div>
</div>
</div>
</div>
</div>
<div class="row align-items-center">
<div class="col-auto">
<span class="icon icon-md text-purple"><span class="fab fa-bootstrap"></span></span>
</div>
<div class="col">
<div class="progress-wrapper">
<div class="progress-info">
<div class="h6 mb-0">Volt - Dashboard</div>
<div class="small fw-bold text-dark"><span>34 %</span></div>
</div>
<div class="progress mb-0">
<div class="progress-bar bg-purple" role="progressbar" aria-valuenow="34" aria-valuemin="0" aria-valuemax="100" style="width: 34%;"></div>
</div>
</div>
</div>
</div>
</div>
</div>Events Pro
Events
Aug10
Newmarket Nights
Organized by University of OxfordTime: 6:00AM
Place: Cambridge Boat Club, Cambridge
Sep12
Noco Hemp Expo
Organized by University of OxfordThu, 12 Sep - Sat, 18 Sep 2020
Place: Denver Expo Club, USA
Sep20
Canadian National Exhibition (CNE)
Organized by University of OxfordFri, 20 Sep - Mon, 07 Oct 2020
Place: Toronto , Canada
<div class="card shadow-sm mb-4">
<div class="card-header border-bottom border-gray-300">
<h2 class="h5 mb-0">Events</h2>
</div>
<div class="card-body">
<div class="row align-items-center border-bottom border-gray-300 pb-4 mb-4">
<div class="col-auto">
<div class="calendar d-flex"><span class="calendar-month">Aug</span><span class="calendar-day">10</span></div>
</div>
<div class="col">
<a href="#"><h3 class="h5">Newmarket Nights</h3></a>
<span>Organized by <a href="#" class="text-700">University of Oxford</a></span>
<div class="small fw-bold mt-1">Time: 6:00AM</div>
<span class="small fw-bold">Place: Cambridge Boat Club, Cambridge</span>
</div>
</div>
<div class="row align-items-center border-bottom border-gray-300 pb-4 mb-4">
<div class="col-auto">
<div class="calendar d-flex"><span class="calendar-month">Sep</span><span class="calendar-day">12</span></div>
</div>
<div class="col">
<a href="#"><h3 class="h5 mb-0">Noco Hemp Expo</h3></a>
<span>Organized by <a href="#" class="text-700">University of Oxford</a></span>
<div class="small fw-bold mt-1">Thu, 12 Sep - Sat, 18 Sep 2020</div>
<span class="small fw-bold">Place: Denver Expo Club, USA</span>
</div>
</div>
<div class="row align-items-center">
<div class="col-auto">
<div class="calendar d-flex"><span class="calendar-month">Sep</span><span class="calendar-day">20</span></div>
</div>
<div class="col">
<a href="#"><h3 class="h5 mb-0">Canadian National Exhibition (CNE)</h3></a>
<span>Organized by <a href="#" class="text-700">University of Oxford</a></span>
<div class="small fw-bold mt-1">Fri, 20 Sep - Mon, 07 Oct 2020</div>
<span class="small fw-bold">Place: Toronto , Canada</span>
</div>
</div>
</div>
<div class="card-footer border-top border-gray-300 text-center">
<a class="fw-bold text-primary" href="#">See all</a>
</div>
</div>Profile card Pro
You can use these card to showcase a profile:
<div class="card text-center p-0 mb-4">
<div class="profile-cover rounded-top" data-background="../../assets/img/profile-cover.jpg"></div>
<div class="card-body pb-5">
<img src="../../assets/img/team/profile-picture-1.jpg" class="user-avatar large-avatar rounded-circle mx-auto mt-n7 mb-4" alt="Neil Portrait">
<h4 class="h3">Neil Sims</h4>
<h5 class="fw-normal">Senior Software Engineer</h5>
<p class="text-gray mb-4">New York, USA</p>
<a class="btn btn-sm btn-dark me-2" href="#"><span class="fas fa-user-plus me-1"></span> Connect</a>
<a class="btn btn-sm btn-secondary" href="#">Send Message</a>
</div>
</div>Profile list Pro
Team members
<div class="row">
<div class="col-12 mb-4">
<div class="card shadow-sm">
<div class="card-header border-bottom border-gray-300">
<h2 class="h5 mb-0">Team members</h2>
</div>
<div class="card-body">
<ul class="list-group list-group-flush list my--3">
<li class="list-group-item px-0">
<div class="row align-items-center">
<div class="col-auto">
<!-- Avatar -->
<a href="#" class="user-avatar">
<img class="rounded-circle" alt="Image placeholder" src="../../assets/img/team/profile-picture-1.jpg">
</a>
</div>
<div class="col ms--2">
<h4 class="h6 mb-0">
<a href="#">Christopher Wood</a>
</h4>
<span class="text-success">●</span>
<small>Online</small>
</div>
<div class="col-auto">
<button type="button" class="btn btn-sm btn-tertiary">Add</button>
</div>
</div>
</li>
<li class="list-group-item px-0">
<div class="row align-items-center">
<div class="col-auto">
<!-- Avatar -->
<a href="#" class="user-avatar">
<img class="rounded-circle" alt="Image placeholder" src="../../assets/img/team/profile-picture-2.jpg">
</a>
</div>
<div class="col ms--2">
<h4 class="h6 mb-0">
<a href="#">Jose Leos</a>
</h4>
<span class="text-warning">●</span>
<small>In a meeting</small>
</div>
<div class="col-auto">
<button type="button" class="btn btn-sm btn-tertiary">Add</button>
</div>
</div>
</li>
<li class="list-group-item px-0">
<div class="row align-items-center">
<div class="col-auto">
<!-- Avatar -->
<a href="#" class="user-avatar">
<img class="rounded-circle" alt="Image placeholder" src="../../assets/img/team/profile-picture-3.jpg">
</a>
</div>
<div class="col ms--2">
<h4 class="h6 mb-0">
<a href="#">Bonnie Green</a>
</h4>
<span class="text-danger">●</span>
<small>Offline</small>
</div>
<div class="col-auto">
<button type="button" class="btn btn-sm btn-tertiary">Add</button>
</div>
</div>
</li>
<li class="list-group-item px-0">
<div class="row align-items-center">
<div class="col-auto">
<!-- Avatar -->
<a href="#" class="user-avatar">
<img class="rounded-circle" alt="Image placeholder" src="../../assets/img/team/profile-picture-4.jpg">
</a>
</div>
<div class="col ms--2">
<h4 class="h6 mb-0">
<a href="#">Neil Sims</a>
</h4>
<span class="text-success">●</span>
<small>Online</small>
</div>
<div class="col-auto">
<button type="button" class="btn btn-sm btn-tertiary">Add</button>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>Alerts & Notifications Pro
Alerts & Notifications
-
Company News
Get Rocket news, announcements, and product updates
-
Account Activity
Get important notifications about you or activity you've missed
-
Meetups Near You
Get an email when a Dribbble Meetup is posted close to my location
<div class="row">
<div class="col-12 mb-4">
<div class="card card-body bg-white border-gray-300">
<h2 class="h5 mb-4">Alerts & Notifications</h2>
<ul class="list-group list-group-flush">
<li class="list-group-item d-flex align-items-center justify-content-between px-0 pt-4 border-bottom">
<div>
<h3 class="h6 mb-1">Company News</h3>
<p class="small pe-4">Get Rocket news, announcements, and product updates</p>
</div>
<div>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="user-notification-1">
<label class="form-check-label" for="user-notification-1"></label>
</div>
</div>
</li>
<li class="list-group-item d-flex align-items-center justify-content-between px-0 pt-4 border-bottom">
<div>
<h3 class="h6 mb-1">Account Activity</h3>
<p class="small pe-4">Get important notifications about you or activity you've missed</p>
</div>
<div>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="user-notification-2" checked>
<label class="form-check-label" for="user-notification-2"></label>
</div>
</div>
</li>
<li class="list-group-item d-flex align-items-center justify-content-between px-0 pt-4">
<div>
<h3 class="h6 mb-1">Meetups Near You</h3>
<p class="small pe-4">Get an email when a Dribbble Meetup is posted close to my location</p>
</div>
<div>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="user-notification-3" checked>
<label class="form-check-label" for="user-notification-3"></label>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>Invoices Pro
Order History
Manage billing information and view receipts
-
Invoice #120345
Billed August 21, 2019 -
Invoice #120344
Billed July 21, 2019Paid
<div class="row">
<div class="col-12 mb-4">
<div class="card card-body shadow-sm bg-white border-gray-300 p-0 p-md-4">
<div class="card-header border-bottom p-3">
<h3 class="h5">Order History</h3>
<p class="mb-0">Manage billing information and view receipts</p>
</div>
<div class="card-body px-0 py-0">
<ul class="list-group">
<li class="list-group-item border-bottom">
<div class="row align-items-center">
<div class="col">
<h3 class="h6 mb-1">
<a href="#">Invoice #120345</a>
</h3>
<!-- Text -->
<small class="text-gray-700">
Billed August 21, 2019
</small>
</div>
<div class="col-auto">
<button class="btn btn-sm btn-outline-dark">
Pay now
</button>
</div>
</div>
</li>
<li class="list-group-item">
<div class="row align-items-center">
<div class="col">
<h3 class="h6 mb-1">
<a href="#">Invoice #120344</a>
</h3>
<!-- Text -->
<small class="text-gray-700">
Billed July 21, 2019
</small>
</div>
<div class="col-auto">
<span class="badge badge-pill badge-success">
<span class="text-uppercase fw-bold">Paid</span>
</span>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>Timeline Pro
Notification Timeline
New message
Let's meet at Starbucks at 11:30. Wdyt?
2m agoIssue
A new issue has been reported for Pixel Pro.
3 hrs ago
Update
Spaces - Listings Template has been updated
3 hrs ago<div class="row">
<div class="col-12 mb-4">
<div class="card shadow-sm">
<div class="card-header d-flex align-items-center border-bottom border-gray-300">
<h3 class="h5 mb-0">
Notification Timeline
</h3>
<div class="ms-auto"><a class="text-primary fw-bold" href="#">View all</a></div>
</div>
<div class="card-body">
<div class="list-group list-group-flush list-group-timeline">
<div class="list-group-item">
<div class="row">
<div class="col-auto">
<div class="icon icon-shape icon-sm bg-tertiary text-white rounded-circle"><span class="fas fa-envelope-open-text"></span></div>
</div>
<div class="col ms-n2">
<span class="badge bg-success py-1 mb-2">New message</span>
<p class="text-dark fw-bold mb-1">
Let's meet at Starbucks at 11:30. Wdyt?
</p>
<!-- Time -->
<small class="text-gray">
<span class="fas fa-clock me-2"></span>2m ago
</small>
</div>
</div>
<!-- / .row -->
</div>
<div class="list-group-item">
<div class="row">
<div class="col-auto">
<div class="icon icon-shape icon-sm bg-danger text-white rounded-circle"><span class="fas fa-exclamation"></span></div>
</div>
<div class="col ms-n2">
<h3 class="h6 text-gray fw-normal mb-1">
<span class="badge bg-danger py-1 mb-2">Issue</span>
<p class="text-dark fw-bold mb-1">
A new issue has been reported for Pixel Pro.
</p>
<!-- Time -->
<small class="text-gray">
<span class="fas fa-clock me-2"></span>3 hrs ago
</small>
</div>
</div>
<!-- / .row -->
</div>
<div class="list-group-item">
<div class="row">
<div class="col-auto">
<div class="icon icon-shape icon-sm bg-info text-white rounded-circle"><span class="fas fa-history"></span></div>
</div>
<div class="col ms-n2">
<span class="badge bg-info py-1 mb-2">Update</span>
<p class="text-dark fw-bold mb-1">
Spaces - Listings Template has been updated
</p>
<!-- Time -->
<small class="text-gray">
<span class="fas fa-clock me-2"></span>3 hrs ago
</small>
</div>
</div>
<!-- / .row -->
</div>
</div>
</div>
</div>
</div>
</div>Blog card Pro
List of public corporations by market capitalization
All of the world's 10 largest companies as measured by market capitalization are American. Market capitalization is the total value of a company's entire purchased shares of stock. While these companies...
<div class="row">
<div class="col-12 col-lg-10 mb-4">
<div class="card shadow p-2 p-md-4">
<div class="card-header px-0">
<div class="post-meta">
<div class="media d-flex align-items-center justify-content-between">
<div class="post-group">
<a href="#" data-bs-toggle="tooltip" data-bs-placement="top" title="23k followers" data-bs-original-title="23k followers">
<img class="avatar-sm me-2 img-fluid rounded-circle" src="../../assets/img/team/profile-picture-2.jpg" alt="avatar"> techhub
</a>
</div>
<div class="d-flex align-items-center">
<div class="author-name text-dark fw-bold font-small me-4 d-none d-lg-block">
Posted by <a href="#" class="me-2">@bonniegreen</a>5 hours ago
</div>
<div class="btn-group">
<button class="btn btn-link dropdown-toggle dropdown-toggle-split m-0 p-0" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="icon icon-sm">
<i class="fas fa-ellipsis-h icon-dark"></i>
</span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu py-0">
<a class="dropdown-item rounded-top" href="#"><span class="fas fa-edit me-2"></span>Edit post</a>
<a class="dropdown-item text-danger rounded-bottom" href="#"><span class="fa fa-trash me-2" aria-hidden="true"></span>Delete post</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card-body py-4 px-0">
<a href="#">
<img src="../../assets/img/profile-cover.jpg" class="card-img-top rounded" alt="blog image">
<h4 class="my-4">List of public corporations by market capitalization</h4>
</a>
<p class="card-text mb-4">All of the world's 10 largest companies as measured by market capitalization are American. Market capitalization is the total value of a company's entire purchased shares of stock. While these companies... </p>
</div>
<div class="card-footer bg-white border-0 pt-0 px-0">
<div class="d-flex flex-wrap flex-lg-nowrap align-items-center justify-content-between">
<div class="post-details mb-3 mb-lg-0">
<button class="btn btn-sm btn-dark animate-hover me-2">
<span class="fas fa-arrow-up me-2 animate-up-2"></span>
4
</button>
<button class="btn btn-sm btn-danger animate-hover">
<span class="fas fa-arrow-down me-2 animate-down-2"></span>
1
</button>
</div>
<div class="post-meta">
<a class="text-dark me-3" href="#"><i class="far fa-comments me-2"></i>33.7k</a>
<button class="btn me-3 btn-link text-primary"><i class="fas fa-share me-2"></i>Share</button>
<button class="btn btn-secondary"><i class="far fa-save me-2"></i>Save</button>
</div>
</div>
</div>
</div>
</div>
</div>