Widgets page header description goes here...

Card widget

Card widget is created by using existing Bootstrap .card component with .card-img, .card-img-overlay and .d-flex utilities.

Youtube
View Analytics Report 
<div class="card border-0 text-white overflow-hidden" style="max-height: 250px">
  <!-- card-img -->
  <img src="assets/img/gallery/widget-cover-1.jpg" class="card-img" />
  
  <!-- card-img-overlay -->
  <div class="card-img-overlay d-flex flex-column bg-dark-transparent-7 rounded">
    <!-- top content -->
    <div class="flex-fill">
      <div class="d-flex align-items-center">
        <h6>Youtube</h6>
        <div class="dropdown ml-auto">
          <a href="#" class="text-white" data-toggle="dropdown"><i class="fa fa-ellipsis-h"></i></a>
          <div class="dropdown-menu dropdown-menu-right">
            ...
          </div>
        </div>
      </div>
    </div>
    
    <!-- bottom-content -->
    <div>
      <a href="#" class="text-white text-decoration-none d-flex align-items-center">
        <div class="bg-gradient-red-pink width-40 height-40 rounded-lg d-flex align-items-center justify-content-center">
          <i class="fa fa-play"></i>
        </div>
        <div class="ml-3">
          <div class="font-weight-600">New Videos - Behind The Forest Tours</div>
          <div class="fs-13px">
            <i class="far fa-eye"></i> 892 views 
            <i class="far fa-clock ml-3"></i> 39min ago</div>
        </div>
      </a>
    </div>
  </div>
</div>

List widget

List widget is created by using existing Bootstrap .list-group component with .d-flex and studio utilities css classes.

WITH ICON
Apps Store
102 new download
View Analytics Report
iBooks App
32 new download
View Analytics Report
WITH IMAGE
Isaiah Hughes
Ryan Turner
WITH SETTINGS
Server auto backup
last backup since yesterday
Analytics enabled
3,392 data collected
Link with arrow
Link with arrow
 
<div class="list-group">
  <!-- with icon -->
  <div class="list-group-item d-flex align-items-center">
    <div class="width-40 height-40 d-flex align-items-center justify-content-center bg-gradient-orange text-white rounded ml-n1">
      <i class="fa fa-book fa-lg"></i>
    </div>
    <div class="flex-fill pl-3 pr-3">
      <div class="font-weight-600">iBooks App</div>
      <div class="fs-13px">32 new download</div>
    </div>
    <div class="dropdown">
      <a href="#" data-toggle="dropdown" class="text-muted"><i class="fa fa-ellipsis-h"></i></a>
      <div class="dropdown-menu dropdown-menu-right">
        ...
      </div>
    </div>
  </div>
  
  <!-- with image -->
  <a href="#" class="list-group-item list-group-item-action d-flex align-items-center text-dark">
    <div class="width-40 height-40 d-flex align-items-center justify-content-center ml-n1">
      <img src="assets/img/user/user.jpg" class="mw-100 mh-100 rounded-circle" />
    </div>
    <div class="flex-fill pl-3">
      <div class="font-weight-600">
        Isaiah Hughes <span class="fa fa-circle text-success fs-9px ml-2"></span>
      </div>
    </div>
  </a>
  
  <!-- link with icon -->
  <a href="#" class="list-group-item list-group-item-action d-flex align-items-center">
    <div class="flex-fill">
      <div class="font-weight-600">Link with arrow</div>
    </div>
    <div>
      <i class="fa fa-chevron-right"></i>
    </div>
  </a>
</div>

Stats widget

States widget is created by using Bootstrap .card component with .d-flex and background-color utilities.

Total Visitors + Page Views

22,930

Today, 11:25AM
 
<a href="#" class="card bg-gradient-cyan-blue border-0 text-decoration-none">
  <div class="card-body d-flex align-items-center text-white">
    <div class="flex-fill">
      <div class="mb-1">Total Visitors + Page Views</div>
      <h2>22,930</h2>
      <div>Today, 11:25AM</div>
    </div>
    <div class="opacity-5">
      <i class="fa fa-shopping-bag fa-4x"></i>
    </div>
  </div>
</a>

Chart widget

Chart widget created by using Bootstrap .card and .list-group component combined with Chart.js plugins.

Weekly Web Analytics
Week 11 May - 17 May
Total Visitors
11 May - 17 May

1.3m

<div class="card border-0 overflow-hidden">
  <div class="card-body bg-gradient-orange-red rounded-top text-white text-center">
    <div class="fs-16px font-weight-600">Weekly Web Analytics</div>
    <div class="fs-13px mb-3">Week 11 May - 17 May</div>
    <canvas id="barChart" height="120"></canvas>
  </div>
  <div class="list-group">
    <div class="list-group-item border-top-0 rounded-top-0 d-flex align-items-center p-3">
      <div class="width-40 height-40 rounded bg-gradient-orange-red text-white d-flex align-items-center justify-content-center">
        <i class="fa fa-user fa-lg"></i>
      </div>
      <div class="flex-fill pl-3 pr-3">
        <div class="font-weight-600">Total Visitors</div>
        <div class="fs-13px">11 May - 17 May</div>
      </div>
      <div>
        <h2 class="mb-0">1.3m</h2>
      </div>
    </div>
  </div>
</div>

User list widget

User list widget used to display people who participate in a project or a group.

+26
<div class="widget-user-list">
  <div class="widget-user-list-item"><a href="#" class="widget-user-list-link"><img src="assets/img/user/user-1.jpg" alt="" /></a></div>
  <div class="widget-user-list-item"><a href="#" class="widget-user-list-link"><img src="assets/img/user/user-2.jpg" alt="" /></a></div>
  <div class="widget-user-list-item"><a href="#" class="widget-user-list-link"><img src="assets/img/user/user-3.jpg" alt="" /></a></div>
  <div class="widget-user-list-item"><a href="#" class="widget-user-list-link"><img src="assets/img/user/user-4.jpg" alt="" /></a></div>
  <div class="widget-user-list-item"><a href="#" class="widget-user-list-link"><img src="assets/img/user/user-5.jpg" alt="" /></a></div>
  <div class="widget-user-list-item"><a href="#" class="widget-user-list-link"><img src="assets/img/user/user-6.jpg" alt="" /></a></div>
  <div class="widget-user-list-item"><a href="#" class="widget-user-list-link"><img src="assets/img/user/user-7.jpg" alt="" /></a></div>
  <div class="widget-user-list-item"><a href="#" class="widget-user-list-link bg-gray-200 text-gray-500 fs-12px font-weight-600">+26</a></div>
</div>

Map widget

Map widget created with Bootstrap .card and .list-group component twitted with helper css classes.

Google Map
via Road I-88E
Fastest route, the usual traffic
3h 54min
393km
<div class="card">
  <div class="card-header font-weight-600 bg-white border-0">Google Map</div>
  <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d960.5886473867613!2d-122.41743634015282!3d37.776451983493104!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8085809c6c8f4459%3A0xb10ed6d9b5050fa5!2sTwitter+HQ!5e0!3m2!1sen!2s!4v1495935122933" style="border:0; width: 100%; height: 10rem;" allowfullscreen></iframe>
  <div class="list-group list-group-flush">
    <div class="list-group-item d-flex">
      <div class="width-30 height-40 d-flex align-items-center justify-content-center">
        <i class="fa fa-car fa-2x text-gray-300"></i>
      </div>
      <div class="flex-fill pl-3 pr-3">
        <div class="font-weight-600">via Road I-88E</div>
        <div class="fs-13px">Fastest route, the usual traffic</div>
      </div>
      <div class="text-nowrap">
        <div class="text-success font-weight-600">3h 54min</div>
        <div class="fs-13px">393km</div>
      </div>
    </div>
  </div>
</div>

Chat widget

Chat widget created by using Bootstrap .card component with custom created bubble chat ui.

Discussion group
Roberto Lambert
Hey, I'm testing out group messaging.
Cool
Read 16:26
Today 14:21
Rick Powell
Awesome! What's new?
Roberto Lambert
Not much, It's got a new look, contact pics show up in group messaging, some other small stuff.
How's crusty old iOS 6 treating you?
Sucks
Read 16:30
<div class="card">
  <div class="card-header bg-white font-weight-600 d-flex align-items-center">Discussion group <a href="#" class="ml-auto text-muted text-decoration-none" data-toggle="card-expand"><i class="fa fa-expand"></i></a></div>
  <div class="card-body bg-gray-100" data-scrollbar="true" data-height="200px">
    <div class="widget-chat">
      <div class="widget-chat-date">Today 14:21</div>
      <div class="widget-chat-item">
        <div class="widget-chat-media"><img src="assets/img/user/user-2.jpg" alt="" /></div>
        <div class="widget-chat-content">
          <div class="widget-chat-name">Roberto Lambert</div>
          <div class="widget-chat-message">
            Not much, It's got a new look, contact pics show up in group messaging, some other small stuff.
          </div>
          <div class="widget-chat-message last">
            How's crusty old iOS 6 treating you?
          </div>
        </div>
      </div>
      <div class="widget-chat-item reply">
        <div class="widget-chat-content">
          <div class="widget-chat-message last">
            Sucks
          </div>
          <div class="widget-chat-status"><b>Read</b> 16:30</div>
        </div>
      </div>
    </div>
  </div>
  <div class="card-footer bg-white">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Search for...">
      <span class="input-group-append">
        <button class="btn btn-default" type="button"><i class="fa fa-paper-plane text-muted"></i></button>
      </span>
    </div>
  </div>
</div>

Profile widget

Profile widget created by using Bootstrap .card component with Bootstrap grid.

Maurice Patterson
Never give up
415
posts
140k
followers
697
following
<!-- top card -->
<div class="card border-0 overflow-hidden rounded-bottom-0" style="height: 165px">
  <img src="assets/img/gallery/widget-cover-1.jpg" class="card-img rounded-0" alt="" />
  <div class="card-img-overlay text-white text-center bg-dark-transparent-5">
    <div class="mb-2">
      <img src="assets/img/user/user-5.jpg" alt="" width="80" class="rounded-circle" />
    </div>
    <div>
      <div class="font-weight-600">Maurice Patterson</div>
      <div class="fs-13px">Never give up</div>
    </div>
  </div>
</div>

<!-- bottom card -->
<div class="card border-top-0 rounded-top-0">
  <div class="card-body p-3">
    <div class="row text-center">
      <div class="col-4">
        <div class="font-weight-600">415</div>
        <div class="fs-13px">posts</div>
      </div>
      <div class="col-4">
        <div class="font-weight-600">140k</div>
        <div class="fs-13px">followers</div>
      </div>
      <div class="col-4">
        <div class="font-weight-600">697</div>
        <div class="fs-13px">following</div>
      </div>
    </div>
  </div>
</div>

Product widget

Product widget created by using Bootstrap .list-group component with .d-flex utilities.

iPhone 11 Pro Max
Apple
(128)
$999.00
Macbook Pro
Apple
(93)
$599.00
Apple Watch Series 5
Apple
(41)
$399.00 
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action d-flex align-items-center text-dark">
    <div class="width-50 height-50 d-flex align-items-center justify-content-center ml-n1">
      <img src="assets/img/product/product-1.jpg" class="mw-100 mh-100 rounded">
    </div>
    <div class="flex-fill pl-3 pr-3">
      <div class="font-weight-600">iPhone 11 Pro Max</div>
      <div class="fs-12px text-muted">Apple</div>
      <div class="d-flex align-items-center fs-11px">
        <i class="fa fa-star text-warning"></i>
        <i class="fa fa-star text-warning"></i>
        <i class="fa fa-star text-warning"></i>
        <i class="fa fa-star text-warning"></i>
        <i class="fa fa-star text-gray-300 mr-1"></i>
        (128)
      </div>
    </div>
    <div>
      <span class="label bg-transparent border border-primary text-primary fs-12px fw-500 rounded-sm">
        $999.00
      </span>
    </div>
  </a>
</div>

Reminder widget

Reminder widget used to create a simple calendar to notify the user upcoming events or task.

Today, Nov 4
09:00
12:00
Meeting with HR
- Conference Room
20:00
23:00
Dinner with Richard
- Tom's Too Restaurant
Richard Leong
Contact
Tomorrow, Nov 5
All day
Terry Birthday
08:00
Meeting
00:00
00:30
Server Maintenance
- Data Centre
<div class="card">
  <div class="card-header font-weight-600">Today, Nov 4</div>
  <div class="widget-reminder">
    <div class="widget-reminder-item">
      <div class="widget-reminder-time">20:00<br>23:00</div>
      <div class="widget-reminder-divider bg-primary"></div>
      <div class="widget-reminder-content">
        <div class="font-weight-600">Dinner with Richard</div>
        <div class="fs-13px">Tom's Too Restaurant</div>
        <div class="d-flex align-items-center fs-13px mt-2">
          <div class="flex-fill d-flex align-items-center">
            <img src="assets/img/user/user-3.jpg" alt="" width="16" class="rounded-circle mr-2" /> Richard Leong
          </div>
          <a href="#" class="ml-auto">Contact</a>
        </div>
      </div>
    </div>
  </div>
</div>

Image list widget

Image list widget created by using Bootstrap .card and .list-group component with .d-flex utilities.

Library (20)
3,192 Image Found
 
<div class="card">
  <div class="list-group list-group-flush">
    <a href="#" class="list-group-item list-group-item-action d-flex align-items-center text-dark">
      <div class="flex-fill pr-3">
        <div class="font-weight-600">Library (20)</div>
        <div class="fs-13px">3,192 Image Found</div>
      </div>
      <div>
        <i class="fa fa-chevron-right fa-lg text-muted"></i>
      </div>
    </a>
  </div>
  <div class="card-body">
    <div class="widget-img-list">
      <div class="widget-img-list-item"><a href="#"><span class="img" style="background-image: url(assets/img/gallery/gallery-1.jpg)"></span></a></div>
      ...
    </div>
  </div>
</div>