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 
<link href="assets/plugins/lity/dist/lity.min.css" rel="stylesheet" />
<script src="assets/plugins/lity/dist/lity.min.js"></script>

<div class="card text-white p-5px">
  <!-- card-img -->
  <div style="max-height: 250px" class="overflow-hidden">
    <img src="assets/img/gallery/widget-cover-1.jpg" class="card-img" />
  </div>
  
  <!-- card-img-overlay -->
  <div class="card-img-overlay d-flex flex-column bg-gray-600 bg-opacity-75 m-5px" style="z-index: 20">
    <!-- 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-end">
            ...
          </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-50px h-50px rounded-3 d-flex align-items-center justify-content-center">
          <i class="fa fa-play"></i>
        </div>
        <div class="ms-3 flex-1">
          <div class="fw-bold">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>
  
  <!-- card-arrow -->
  <div class="card-arrow">
    <div class="card-arrow-top-left"></div>
    <div class="card-arrow-top-right"></div>
    <div class="card-arrow-bottom-left"></div>
    <div class="card-arrow-bottom-right"></div>
  </div>
</div>

List widget

List widget is created by using existing Bootstrap .list-group component with .d-flex and hud 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 px-3">
      <div class="fw-bold">iBooks App</div>
      <div class="small text-white text-opacity-50">32 new download</div>
    </div>
    <div class="dropdown">
      <a href="#" data-bs-toggle="dropdown" class="text-white text-opacity-50"><i class="fa fa-ellipsis-h"></i></a>
      <div class="dropdown-menu dropdown-menu-end">
        ...
      </div>
    </div>
  </div>
  
  <!-- with image -->
  <a href="#" class="list-group-item list-group-item-action d-flex align-items-center text-white">
    <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-bold">
        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-bold">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 text-decoration-none">
  <div class="card-body d-flex align-items-center text-white m-5px bg-white bg-opacity-15">
    <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>
  
  <!-- card-arrow -->
  <div class="card-arrow">
    <div class="card-arrow-top-left"></div>
    <div class="card-arrow-top-right"></div>
    <div class="card-arrow-bottom-left"></div>
    <div class="card-arrow-bottom-right"></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">
  <div class="card-body text-white text-center">
    <div class="fs-16px fw-bold">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 bg-white bg-opacity-25 d-flex align-items-center justify-content-center">
        <i class="fa fa-user fa-lg"></i>
      </div>
      <div class="flex-fill px-3">
        <div class="fw-bold">Total Visitors</div>
        <div class="small text-white text-opacity-50">11 May - 17 May</div>
      </div>
      <div>
        <h2 class="mb-0">1.3m</h2>
      </div>
    </div>
  </div>
  
  <!-- card-arrow -->
  <div class="card-arrow">
    <div class="card-arrow-top-left"></div>
    <div class="card-arrow-top-right"></div>
    <div class="card-arrow-bottom-left"></div>
    <div class="card-arrow-bottom-right"></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-bold">+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="m-1 bg-white bg-opacity-15">
    <div class="card-header fw-bold 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 px-3">
          <div class="fw-bold">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-bold">3h 54min</div>
          <div class="fs-12px">393km</div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- card-arrow -->
  <div class="card-arrow">
    <div class="card-arrow-top-left"></div>
    <div class="card-arrow-top-right"></div>
    <div class="card-arrow-bottom-left"></div>
    <div class="card-arrow-bottom-right"></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-bold 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-white bg-opacity-15" 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-outline-default" type="button"><i class="fa fa-paper-plane text-muted"></i></button>
    </div>
  </div>
  
  <!-- card-arrow -->
  <div class="card-arrow">
    <div class="card-arrow-top-left"></div>
    <div class="card-arrow-top-right"></div>
    <div class="card-arrow-bottom-left"></div>
    <div class="card-arrow-bottom-right"></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
<div class="card">
  <div class="m-1 bg-white bg-opacity-15">
    <div class="position-relative overflow-hidden" 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="fw-bold">Maurice Patterson</div>
          <div class="fs-12px">Never give up</div>
        </div>
      </div>
    </div>
    <div class="card-body py-2 px-3">
      <div class="row text-center">
        <div class="col-4">
          <div class="fw-bold">415</div>
          <div class="fs-12px">posts</div>
        </div>
        <div class="col-4">
          <div class="fw-bold">140k</div>
          <div class="fs-12px">followers</div>
        </div>
        <div class="col-4">
          <div class="fw-bold">697</div>
          <div class="fs-12px">following</div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- card-arrow -->
  <div class="card-arrow">
    <div class="card-arrow-top-left"></div>
    <div class="card-arrow-top-right"></div>
    <div class="card-arrow-bottom-left"></div>
    <div class="card-arrow-bottom-right"></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-white">
    <div class="w-60px h-60px d-flex align-items-center justify-content-center ms-n1">
      <img src="assets/img/product/product-1.jpg" class="mw-100 mh-100 rounded">
    </div>
    <div class="flex-fill px-3">
      <div class="fw-bold">iPhone 11 Pro Max</div>
      <div class="small text-white text-opacity-50">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-theme text-theme 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-bold">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-bold">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>
  
  <!-- card-arrow -->
  <div class="card-arrow">
    <div class="card-arrow-top-left"></div>
    <div class="card-arrow-top-right"></div>
    <div class="card-arrow-bottom-left"></div>
    <div class="card-arrow-bottom-right"></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
 
<link href="assets/plugins/lity/dist/lity.min.css" rel="stylesheet" />
<script src="assets/plugins/lity/dist/lity.min.js"></script>

<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-white">
      <div class="flex-fill pe-3">
        <div class="fw-bold">Library (20)</div>
        <div class="small text-white text-opacity-50">3,192 Image Found</div>
      </div>
      <div>
        <i class="fa fa-chevron-right fa-lg text-white text-opacity-50"></i>
      </div>
    </a>
  </div>
  <hr class="m-0" />
  <div class="card-body">
    <div class="widget-img-list">
      <div class="widget-img-list-item"><a href="/assets/img/gallery/gallery-1.jpg" data-lity><span class="img" style="background-image: url(/assets/img/gallery/gallery-1.jpg)"></span></a></div>
      ...
    </div>
  </div>
  
  <!-- card-arrow -->
  <div class="card-arrow">
    <div class="card-arrow-top-left"></div>
    <div class="card-arrow-top-right"></div>
    <div class="card-arrow-bottom-left"></div>
    <div class="card-arrow-bottom-right"></div>
  </div>
</div>
Theme Color
 
 
 
 
 
 
 
 
 
 
 
 
Theme Cover