Color Admin | Widgets Page

Light Dark

All the widgets is reusable and responsive. You may use the predefined css to configure the padding, margin or background. Besides that, all the widgets have light and dark version. Kindly add the .dark-mode to the widget will change it to the dark version.

source code WIDGET LIST

source code WIDGET LIST WITH ICON

source code WIDGET CHAT

Today

source code WIDGET TODOLIST

source code WIDGET MAP

source code WIDGET IMAGE / ICON

source code WIDGET CARD

source code WIDGET CARD SQUARE

Camera Roll

2,711

Videos

31

Memory 2021

1,239

Albums

8

source code WIDGET STAT

source code WIDGET CHART

source code WIDGET TABLE

Image

Product Info

Price

Qty

Total

Mavic Pro Combo

Portable yet powerful, the Mavic Pro is your personal drone, ready to go with you everywhere.

30%

status: Shipped

$999
~~$1,202~~

1

999.00

Edit

Inspire 2

Cinematic aerial performance for filmmakers.

100%

status: received

$999
~~$1,202~~

1

999.00

Edit

<!-- begin widget-map -->
<div class="widget-map rounded">
  <!-- begin widget-input-container -->
  <div class="widget-input-container">
    <div class="widget-input-icon"><a href="#" class="text-dark"><i class="fa fa-ellipsis-v"></i></a></div>
    <div class="widget-input-box">
      <input type="text" class="form-control" placeholder="Search here">
    </div>
    <div class="widget-input-icon"><a href="#" class=""><i class="fa fa-microphone"></i></a></div>
    <div class="widget-input-divider"></div>
    <div class="widget-input-icon"><a href="#"><i class="fa fa-location-arrow"></i></a></div>
  </div>
  <!-- end widget-input-container -->
  <!-- begin widget-map-body -->
  <div class="widget-map-body">
    <iframe src="-- googlemap embed url here --" width="100%" height="230" frameborder="0" style="border:0" allowfullscreen></iframe>
  </div>
  <!-- end widget-map-body -->
  <!-- begin widget-map-list -->
  <div class="widget-map-list">
    <div class="widget-list bg-none mb-4">
      <!-- begin widget-list-item -->
      <div class="widget-list-item">
        <div class="widget-list-media text-center">
          <a href="#"><i class="fab fa-twitter fa-3x"></i></a>
        </div>
        <div class="widget-list-content">
          <h4 class="widget-list-title">Twitter Headquater</h4>
          <p class="widget-list-desc">Corporate Office</p>
        </div>
        <div class="widget-list-action">
          <a href="#" data-bs-toggle="dropdown" class="text-gray-500"><i class="fa fa-angle-right fa-2x"></i></a>
        </div>
      </div>
      <!-- end widget-list-item -->
    </div>
  </div>
  <!-- end widget-map-list -->
</div>
<!-- begin widget-map -->

<!-- begin widget-todolist -->
<div class="widget-todolist rounded">
  <!-- begin widget-todolist-header -->
  <div class="widget-todolist-header">
    <h4 class="widget-todolist-header-title">Todolist</h4>
    <div class="widget-todolist-header-total">
      <span class="text-dark">0</span>
      <small>Done</small>
    </div>
  </div>
  <!-- end widget-todolist-header -->
  
  <!-- begin widget-todolist-body -->
  <div class="widget-todolist-body">
    <!-- begin widget-todolist-item -->
    <div class="widget-todolist-item">
      <div class="widget-todolist-input">
        <div class="form-check">
          <input class="form-check-input" type="checkbox" id="widget_todolist_1" />
          <label class="form-check-label" for="widget_todolist_1" class="ps-15px"> </label>
        </div>
      </div>
      <div class="widget-todolist-content">
        <h6 class="mb-0">Borrow Tony's travel guide</h4>
        <div class="text-muted">Vacation in Rome</p>
      </div>
      <div class="widget-todolist-icon">
        <a href="#"><i class="fa fa-question-circle"></i></a>
      </div>
    </div>
    <!-- end widget-todolist-item -->
    ...
    <!-- begin widget-todolist-item -->
    <div class="widget-todolist-item">
      <div class="widget-todolist-input">
        <i class="fa fa-plus text-gray-500"></i>
      </div>
      <div class="widget-todolist-content">
        <input type="text" class="form-control" placeholder="Write your task here..." />
      </div>
    </div>
    <!-- end widget-todolist-item -->
  </div>
  <!-- end widget-todolist-body -->
</div>
<!-- end widget-todolist -->

<!-- begin widget-chat -->
<div class="widget-chat rounded">
  <!-- begin widget-chat-header -->
  <div class="widget-chat-header">
    <div class="widget-chat-header-icon">
      <i class="fab fa-earlybirds w-30px h-30px fs-20px bg-yellow text-gray-900 text-center rounded-pill" style="line-height: 30px"></i>
    </div>
    <div class="widget-chat-header-content">
      <h4 class="widget-chat-header-title">Company Discussion Group</h4>
      <p class="widget-chat-header-desc">55 members, 4 online</p>
    </div>
  </div>
  <!-- end widget-chat-header -->
  
  <!-- begin widget-chat-body -->
  <div class="widget-chat-body" data-scrollbar="true" data-height="235px">
    <div class="text-center text-gray-500 m-3 fw-bold">Today</div>
    <div class="widget-chat-item with-media start">
      <div class="widget-chat-media">
        <img alt="" src="../assets/img/user/user-1.jpg" />
      </div>
      <div class="widget-chat-info">
        <div class="widget-chat-info-container">
          <div class="widget-chat-name text-indigo">Hudson Mendes</div>
          <div class="widget-chat-message">Should we plan for a company trip this year?</div>
          <div class="widget-chat-time">6:00PM</div>
        </div>
      </div>
    </div>
    <div class="widget-chat-item end">
      ...
    </div>
  </div>
  <!-- end widget-chat-body -->
  
  <!-- begin widget-input -->
  <div class="widget-input">
    <form action="" method="POST" name="">
      <div class="widget-input-container">
        <div class="widget-input-icon"><a href="#" class="text-gray-500"><i class="fa fa-camera"></i></a></div>
        <div class="widget-input-box">
          <input type="text" class="form-control" placeholder="Write a message..." />
        </div>
        <div class="widget-input-icon"><a href="#" class="text-gray-500"><i class="fa fa-smile"></i></a></div>
        <div class="widget-input-divider"></div>
        <div class="widget-input-icon"><a href="#" class="text-gray-500"><i class="fa fa-microphone"></i></a></div>
      </div>
    </form>
  </div>
  <!-- end widget-input -->
</div>
<!-- end widget-chat -->

<!-- begin widget-list -->
<div class="widget-list rounded mb-4">
  <!-- begin widget-list-item -->
  <div class="widget-list-item">
    <div class="widget-list-media">
      <img src="../assets/img/user/user-1.jpg" width="50" class="rounded" />
    </div>
    <div class="widget-list-content">
      <h4 class="widget-list-title">Christopher Struth</h4>
      <p class="widget-list-desc">Bank Transfer</p>
    </div>
    <div class="widget-list-action">
      <a href="#" data-bs-toggle="dropdown" class="text-gray-500">
        <i class="fa fa-ellipsis-h fs-14px"></i>
      </a>
      <ul class="dropdown-menu dropdown-menu-end">
        ...
      </ul>
    </div>
  </div>
  <!-- end widget-list-item -->
</div>
<!-- end widget-list -->

<!-- begin widget-list -->
<div class="widget-list rounded">
  <!-- begin widget-list-item -->
  <a href="#" class="widget-list-item">
    <div class="widget-list-media icon">
      <i class="fa fa-link bg-yellow text-dark"></i>
    </div>
    <div class="widget-list-content">
      <h4 class="widget-list-title">Personal Hotspot</h4>
    </div>
    <div class="widget-list-action text-nowrap text-gray-600 fw-bold text-decoration-none">
      Off
      <i class="fa fa-angle-right text-gray-500 fa-lg"></i>
    </div>
  </a>
  <!-- end widget-list-item -->
  ...
</div>
<!-- end widget-list -->

<!-- begin widget-icon -->
<div class="widget-icon rounded bg-success text-white">
  <i class="fab fa-android"></i>
</div>
<!-- end widget-icon -->

<!-- begin user widget-icon -->
<div class="widget-icon rounded bg-gray-500 text-white user">
  <i class="fa fa-user"></i>
</div>
<!-- end user widget-icon -->

<!-- begin widget-icon-sizes -->
<div class="widget-icon widget-icon-xl"></div>
<div class="widget-icon widget-icon-lg"></div>
<div class="widget-icon"></div>
<div class="widget-icon widget-icon-sm"></div>
<div class="widget-icon widget-icon-xs"></div>
<!-- end widget-icon-sizes -->

<!-- begin widget-img -->
<div class="widget-img rounded bg-dark" style="background-image: url(../assets/img/gallery/gallery-11-thumb.jpg)">
</div>
<!-- end widget-img -->

<!-- begin widget-img-sizes -->
<div class="widget-img widget-img-xl"></div>
<div class="widget-img widget-img-lg"></div>
<div class="widget-img"></div>
<div class="widget-img widget-img-sm"></div>
<div class="widget-img widget-img-xs"></div>
<!-- end widget-img-sizes -->

<!-- begin widget-card -->
<a href="#" class="widget-card rounded">
  <div class="widget-card-cover rounded" style="background-image: url(../assets/img/gallery/gallery-portrait-11-thumb.jpg)"></div>
  <div class="widget-card-content">
    <b class="text-white">Download and get free trial.</b>
  </div>
  <div class="widget-card-content bottom">
    <i class="fab fa-pushed fa-5x text-indigo"></i>
    <h4 class="text-white mt-10px"><b>Apple Draw<br /> Photo Booth</b></h4>
    <h5 class="fs-12px text-white text-opacity-75"><b>EASILY DRAW ON PHOTOS</b></h5>
  </div>
</a>
<!-- end widget-card -->

<!-- begin widget-card-square -->
<a href="#" class="widget-card rounded square mb-5px">
  <div class="widget-card-cover rounded" style="background-image: url(../assets/img/login-bg/login-bg-10.jpg)">
    <div class="d-flex h-100 align-items-center justify-content-center">
      <div class="text-center">
        <div class="text-white fs-14px"><b>PORTRAITS OF</b></div>
        <div class="text-white text-opacity-75 fw-bold">2021</div>
      </div>
    </div>
  </div>
</a>
<div class="fs-12px fw-bold text-black pt-2px">Memory 2021</div>
<div class="fs-10px fw-bold text-black-lighter mb-15px">1,239</div>
<!-- end widget-card-square -->

<!-- begin widget-stats -->
<div class="widget widget-stats bg-teal mb-10px">
  <div class="stats-icon stats-icon-lg"><i class="fa fa-globe fa-fw"></i></div>
  <div class="stats-content">
    <div class="stats-title">TODAY'S VISITS</div>
    <div class="stats-number">7,842,900</div>
    <div class="stats-progress progress">
      <div class="progress-bar" style="width: 70.1%;"></div>
    </div>
    <div class="stats-desc">Better than last week (70.1%)</div>
  </div>
</div>
<!-- end widget-stats -->

<!-- begin widget-chart -->
<div class="widget rounded">
  <div class="widget-header">
    <h4 class="widget-header-title">Audience Overview</h4>
    <div class="widget-header-icon"><a href="#" class="text-gray-500"><i class="fa fa-fw fa-upload"></i></a></div>
    <div class="widget-header-icon"><a href="#" class="text-gray-500"><i class="fa fa-fw fa-cog"></i></a></div>
  </div>
  <div class="d-flex">
    <div class="flex-1 widget-chart-content">
      <div id="nv-stacked-area-chart" style="height: 108%"></div>
    </div>
    <div class="p-3" style="width: 30%;">
      <div class="widget-chart-info">
        <h4 class="widget-chart-info-title">Total sales</h4>
        <p class="widget-chart-info-desc">Lorem ipsum dolor sit consectetur adipiscing elit.</p>
        <div class="widget-chart-info-progress">
          <b>Monthly Plan</b>
          <span class="float-end">70%</span>
        </div>
        <div class="progress h-10px">
          <div class="progress-bar progress-bar-striped progress-bar-animated rounded-pill" style="width:70%;"></div>
        </div>
      </div>
      <hr />
      <div class="widget-chart-info">
        <h4 class="widget-chart-info-title">Task progress</h4>
        <p class="widget-chart-info-desc">Vestibulum sollicitudin in lectus a cursus.</p>
        <div class="widget-chart-info-progress">
          <b>Marketing Research</b>
          <span class="float-end">74%</span>
        </div>
        <div class="progress h-10px mb-15px">
          <div class="progress-bar progress-bar-striped progress-bar-animated rounded-pill bg-indigo" style="width: 74%"></div>
        </div>
        <div class="widget-chart-info-progress">
          <b>Mobile App Development</b>
          <span class="float-end">25%</span>
        </div>
        <div class="progress h-10px mb-15px">
          <div class="progress-bar progress-bar-striped progress-bar-animated rounded-pill bg-green" style="width: 25%"></div>
        </div>
        <div class="widget-chart-info-progress">
          <b>Website Redesign</b>
          <span class="float-end">95%</span>
        </div>
        <div class="progress h-10px">
          <div class="progress-bar progress-bar-striped progress-bar-animated rounded-pill bg-orange" style="width: 95%"></div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- end widget-chart -->

<!-- begin widget-table -->
<table class="table table-bordered widget-table widget-table-rounded">
  <thead>
    <tr>
      <th width="1%">Image</th>
      <th>Product Info</th>
      <th>Price</th>
      <th>Qty</th>
      <th>Total</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <img src="../assets/img/product/product-6.png" width="100" />
      </td>
      <td>
        <h5>Mavic Pro Combo</h5>
        <p class="fs-11px text-gray-600 fw-bold mb-3">Portable yet powerful, the Mavic Pro is your personal drone, ready to go with you everywhere.</p>
        <div class="progress h-10px rounded-pill mb-5px">
          <div class="progress-bar progress-bar-striped progress-bar-animated bg-orange fs-10px fw-bold" style="width: 30%;">30%</div>
        </div>
        <div class="clearfix fs-10px">
          status: <b class="text-dark">Shipped</b>
        </div>
      </td>
      <td class="text-nowrap">
        <b class="text-dark">$999</b><br />
        <small class="text-dark"><del>$1,202</del></small>
      </td>
      <td>1</td>
      <td>999.00</td>
      <td><a href="#" class="btn btn-dark btn-sm w-80px rounded-pill">Edit</a></td>
    </tr>
  </tbody>
</table>
<!-- end widget-table -->

App Settings

Dark Mode NEW

Adjust the appearance to reduce glare and give your eyes a break.

Header Fixed

Header Inverse

Sidebar Fixed

Admin Design (5)

Language Version (7)

Frontend Design (5)

Documentation Reset Local Storage