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-gray-900 bg-opacity-70 rounded">
    <!-- top content -->
    <div class="flex-fill">
      <div class="d-flex align-items-center">
        <h6>Youtube</h6>
        <div class="dropdown ms-auto">
          <a href="#" class="text-white" data-bs-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 w-45px h-45px rounded-3 d-flex align-items-center justify-content-center">
          <i class="fa fa-play fa-lg"></i>
        </div>
        <div class="ms-3">
          <div class="fw-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 ms-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="w-40px h-40px d-flex align-items-center justify-content-center bg-gradient-orange text-white rounded-2 ms-n1">
      <i class="fa fa-book fa-lg"></i>
    </div>
    <div class="flex-fill ps-3 pe-3">
      <div class="fw-600">iBooks App</div>
      <div class="fs-12px text-muted">32 new download</div>
    </div>
    <div class="dropdown">
      <a href="#" data-bs-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="w-40px h-40px d-flex align-items-center justify-content-center ms-n1">
      <img src="assets/img/user/user.jpg" class="ms-100 mh-100 rounded-circle" />
    </div>
    <div class="flex-fill ps-3">
      <div class="fw-600">
        Isaiah Hughes <span class="fa fa-circle text-success fs-9px ms-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="fw-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 fw-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="w-40px h-40px 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 ps-3 pe-3">
        <div class="fw-600">Total Visitors</div>
        <div class="fs-12px text-muted">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 fw-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 fw-600 bg-none 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="w-30px h-40px d-flex align-items-center justify-content-center">
        <i class="fa fa-car fa-2x text-gray-300"></i>
      </div>
      <div class="flex-fill ps-3 pe-3">
        <div class="fw-600">via Road I-88E</div>
        <div class="fs-12px">Fastest route, the usual traffic</div>
      </div>
      <div class="text-nowrap">
        <div class="text-success fw-600">3h 54min</div>
        <div class="fs-12px">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-none fw-600 d-flex align-items-center">Discussion group <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 bg-light" 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-none">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Search for...">
      <button class="btn btn-default" type="button"><i class="fa fa-paper-plane text-muted"></i></button>
    </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-0 rounded-top" 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 bg-opacity-50">
    <div class="mb-2">
      <img src="assets/img/user/user-5.jpg" alt="" width="80" class="rounded-circle" />
    </div>
    <div>
      <div class="fw-600">Maurice Patterson</div>
      <div class="fs-13px">Never give up</div>
    </div>
  </div>
</div>

<!-- bottom card -->
<div class="card border-top-0 rounded-0 rounded-bottom">
  <div class="card-body py-2 px-3">
    <div class="row text-center">
      <div class="col-4">
        <div class="fw-600">415</div>
        <div class="fs-12px">posts</div>
      </div>
      <div class="col-4">
        <div class="fw-600">140k</div>
        <div class="fs-12px">followers</div>
      </div>
      <div class="col-4">
        <div class="fw-600">697</div>
        <div class="fs-12px">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="w-50px h-50px d-flex align-items-center justify-content-center ms-n1">
      <img src="assets/img/product/product-1.jpg" class="ms-100 mh-100 rounded">
    </div>
    <div class="flex-fill ps-3 pe-3">
      <div class="fw-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 me-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 fw-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="fw-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 me-2" /> Richard Leong
          </div>
          <a href="#" class="ms-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 pe-3">
        <div class="fw-600">Library (20)</div>
        <div class="fs-12px">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>
Dark Mode NEW
Adjust the appearance to reduce glare and give your eyes a break.