Color Admin

- 5
  NOTIFICATIONS (5)

  ###### Server Error Reports

  3 minutes ago

  ###### John Smith

  Quisque pulvinar tellus sit amet sem scelerisque tincidunt.

  25 minutes ago

  ###### Olivia

  Quisque pulvinar tellus sit amet sem scelerisque tincidunt.

  35 minutes ago

  ###### New User Registered

  1 hour ago

  ###### New Email From John

  2 hour ago
  View more
- Adam Schwartz
  Edit Profile 2 Inbox Calendar Setting
  Log Out

- Sean Ngu Front end developer
- - Settings
  - Send Feedback
  - Helps

- Navigation
- Dashboard
  - Dashboard v1
  - Dashboard v2
  - Dashboard v3
- 10 Email
  - Inbox
  - Compose
  - Detail
- Widgets NEW
- UI Elements NEW
  - General
  - Typography
  - Tabs & Accordions
  - Unlimited Nav Tabs
  - Modal & Notification
  - Widget Boxes
  - Media Object
  - Buttons
  - Icons
  - Simple Line Icons
  - Ionicons
  - Tree View
  - Language Bar & Icon
  - Social Buttons
  - Intro JS
- Bootstrap 4 NEW
- Form Stuff NEW
  - Form Elements
  - Form Plugins
  - Form Slider + Switcher
  - Form Validation
  - Wizards
  - Wizards + Validation
  - WYSIWYG
  - X-Editable
  - Multiple File Upload
  - Summernote
  - Dropzone
- Tables
  - Basic Tables
  - Managed Tables
    - Default
    - Autofill
    - Buttons
    - ColReorder
    - Fixed Column
    - Fixed Header
    - KeyTable
    - Responsive
    - RowReorder
    - Scroller
    - Select
    - Extension Combination
- Front End
  - One Page Parallax
  - Blog
  - Forum
  - E-Commerce
- Email Template
  - System Template
  - Newsletter Template
- Chart NEW
  - Flot Chart
  - Morris Chart
  - Chart JS
  - d3 Chart
  - Apex Chart
- Calendar
- Map
  - Vector Map
  - Google Map
- Gallery
  - Gallery v1
  - Gallery v2
- Page Options
  - Blank Page
  - Page with Footer
  - Page without Sidebar
  - Page with Right Sidebar
  - Page with Minified Sidebar
  - Page with Two Sidebar
  - Page with Line Icons
  - Page with Ionicons
  - Full Height Content
  - Page with Wide Sidebar
  - Page with Mega Menu
  - Page with Top Menu
  - Page with Boxed Layout
  - Page with Mixed Menu
  - Boxed Layout with Mixed Menu
- Extra
  - Timeline
  - Coming Soon Page
  - Search Results
  - Invoice
  - 404 Error Page
  - Profile Page
- Login & Register
  - Login
  - Login v2
  - Login v3
  - Register v3
- Version NEW
  - HTML
  - AJAX
  - ANGULAR JS
  - ANGULAR JS 8
  - LARAVEL
  - VUE JS
  - REACT JS
  - MATERIAL DESIGN
  - APPLE DESIGN
  - TRANSPARENT DESIGN
  - FACEBOOK DESIGN
- Helper
  - Predefined CSS Classes
- Menu Level
  - Menu 1.1
    - Menu 2.1
      - Menu 3.1
      - Menu 3.2
    - Menu 2.2
    - Menu 2.3
  - Menu 1.2
  - Menu 1.3

1. Home
2. Widgets

# Widgets header small text goes here...

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 `.inverse-mode` to the widget will change it to the dark version.

source code WIDGET LIST

#### Christopher Struth

Bank Transfer

Option 1 Option 2 Option 3
Option 4

#### Janie Flowers

Bank Transfer

Option 1 Option 2 Option 3
Option 4

#### Janie Flowers

Bank Transfer

Option 1 Option 2 Option 3
Option 4
source code WIDGET LIST WITH ICON

#### Airplane Mode

#### Wi-Fi

Connected

#### Bluetooth

On

#### Cellular

#### Personal Hotspot

Off
source code WIDGET CHAT

#### Company Discussion Group

55 members, 4 online

Hudson Mendes
Should we plan for a company trip this year?
6:00PM
Sam Sugerman
ok let's do it
6:01PM
i'm ok with it
6:05PM
Today
Jaxon Allwood
Here is some images for New Zealand
6:20PM
source code WIDGET TODOLIST

#### Todolist

0 Done

#### Borrow Tony's travel guide

Vacation in Rome

#### Finish expense report

Today, 4:00PM, Daily

#### Confirm conference call for Wednesday

Work

#### !! Mobile App WIP Presentation

Today, 12:00PM

source code WIDGET MAP

#### Twitter Headquater

Corporate Office

source code WIDGET IMAGE / ICON
source code WIDGET CARD
Download and get free trial.

#### Apple Draw
Photo Booth

##### EASILY DRAW ON PHOTOS

##### MAKING A DIFFERENCE

#### Apple Heart
Study App

Opt in and help heart research.
source code WIDGET CARD SQUARE
Camera Roll
2,711
Videos
31
PORTRAITS OF
2017
Memory 2017
1,239
Albums
8
source code WIDGET STAT
TODAY'S VISITS
7,842,900
Better than last week (70.1%)
TODAY'S PROFIT
180,200
Better than last week (40.5%)
NEW ORDERS
38,900
Better than last week (76.3%)
NEW COMMENTS
3,988
Better than last week (54.9%)
PENDING INVOICE
20
More than last week (23.5%)
ERROR LOG
5
More than last week (10.5%)
source code WIDGET CHART

#### Audience Overview

#### Total sales

Lorem ipsum dolor sit consectetur adipiscing elit.

Monthly Plan 70%

#### Task progress

Vestibulum sollicitudin in lectus a cursus.

Marketing Research 74%
Mobile App Development 25%
Website Redesign 95%
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

#### Widget Map

×

    <!-- begin widget-map -->
    <div class="widget-map widget-map-rounded">
      <!-- begin widget-input-container -->
      <div class="widget-input-container">
        <div class="widget-input-icon"><a href="#" class="text-inverse"><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 widget-list-rounded m-b-30">
          <!-- 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-toggle="dropdown" class="text-muted pull-right"><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 -->

Close

#### Widget Todolist

×

    <!-- begin widget-todolist -->
    <div class="widget-todolist widget-todolist-rounded">
      <!-- begin widget-todolist-header -->
      <div class="widget-todolist-header">
        <div class="widget-todolist-header-left">
          <h4 class="widget-todolist-header-title">Todolist</h4>
        </div>
        <div class="widget-todolist-header-right">
          <div class="widget-todolist-header-total">
            <span class="text-inverse">0</span>
            <small>Done</small>
          </div>
        </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="checkbox checkbox-css pt-0">
              <input type="checkbox" id="widget_todolist_1" />
              <label for="widget_todolist_1" class="p-l-15"> </label>
            </div>
          </div>
          <div class="widget-todolist-content">
            <h4 class="widget-todolist-title">Borrow Tony's travel guide</h4>
            <p class="widget-todolist-desc">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-muted"></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 -->

Close

#### Widget Chat & Input

×

    <!-- begin widget-chat -->
    <div class="widget-chat widget-chat-rounded">
      <!-- begin widget-chat-header -->
      <div class="widget-chat-header">
        <div class="widget-chat-header-icon">
          <i class="fab fa-earlybirds width-30 height-30 f-s-20 bg-yellow text-inverse text-center rounded-corner" 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-muted m-10 f-w-600">Today</div>
        <div class="widget-chat-item with-media left">
          <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 right">
          ...
        </div>
      </div>
      <!-- end widget-chat-body -->

      <!-- begin widget-input -->
      <div class="widget-input widget-input-rounded">
        <form action="" method="POST" name="">
          <div class="widget-input-container">
            <div class="widget-input-icon"><a href="#" class="text-grey"><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-grey"><i class="fa fa-smile"></i></a></div>
            <div class="widget-input-divider"></div>
            <div class="widget-input-icon"><a href="#" class="text-grey"><i class="fa fa-microphone"></i></a></div>
          </div>
        </form>
      </div>
      <!-- end widget-input -->
    </div>
    <!-- end widget-chat -->

Close

#### Widget List

×

    <!-- begin widget-list -->
    <div class="widget-list widget-list-rounded m-b-30">
      <!-- begin widget-list-item -->
      <div class="widget-list-item">
        <div class="widget-list-media">
          <img src="../assets/img/user/user-1.jpg" 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-toggle="dropdown" class="text-muted pull-right">
            <i class="fa fa-ellipsis-h f-s-14"></i>
          </a>
          <ul class="dropdown-menu dropdown-menu-right">
            ...
          </ul>
        </div>
      </div>
      <!-- end widget-list-item -->
    </div>
    <!-- end widget-list -->

Close

#### Widget List with Icon

×

    <!-- begin widget-list -->
    <div class="widget-list 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-inverse"></i>
        </div>
        <div class="widget-list-content">
          <h4 class="widget-list-title">Personal Hotspot</h4>
        </div>
        <div class="widget-list-action text-nowrap text-grey-darker text-right">
          Off
          <i class="fa fa-angle-right text-muted t-plus-1 fa-lg m-l-5"></i>
        </div>
      </a>
      <!-- end widget-list-item -->
      ...
    </div>
    <!-- end widget-list -->

Close

#### Widget Image / Icon

×

    <!-- 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-white-transparent-2 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-inverse" 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 -->

Close

#### Widget List Card

×

    <!-- begin widget-card -->
    <a href="#" class="widget-card widget-card-rounded">
      <div class="widget-card-cover" 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 m-t-10"><b>Apple Draw<br /> Photo Booth</b></h4>
        <h5 class="f-s-12 text-white-transparent-7 m-b-2"><b>EASILY DRAW ON PHOTOS</b></h5>
      </div>
    </a>
    <!-- end widget-card -->

Close

#### Widget List Card Square

×

    <!-- begin widget-card-square -->
    <a href="#" class="widget-card widget-card-rounded square m-b-5">
      <div class="widget-card-cover" style="background-image: url(../assets/img/login-bg/login-bg-10.jpg)">
        <div class="vertical-box vertical-box-widget">
          <div class="vertical-box-column valign-middle text-center">
            <div class="text-white f-s-14"><b>PORTRAITS OF</b></div>
            <div class="text-white-transparent-8 f-w-600">2017</div>
          </div>
        </div>
      </div>
    </a>
    <div class="f-s-12 f-w-700 text-black p-t-2">Memory 2017</div>
    <div class="f-s-10 f-w-600 text-black-lighter m-b-15">1,239</div>
    <!-- end widget-card-square -->

Close

#### Widget Stat

×

    <!-- begin widget-stats -->
    <div class="widget widget-stats bg-gradient-teal m-b-10">
      <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 -->

Close

#### Widget Chart

×

    <!-- begin widget-chart -->
    <div class="widget widget-rounded">
      <div class="widget-header">
        <h4 class="widget-header-title">Audience Overview</h4>
        <div class="widget-header-icon"><a href="#" class="text-muted"><i class="fa fa-fw fa-upload"></i></a></div>
        <div class="widget-header-icon"><a href="#" class="text-muted"><i class="fa fa-fw fa-cog"></i></a></div>
      </div>
      <div class="vertical-box with-grid with-border-top">
        <div class="vertical-box-column widget-chart-content">
          <div id="nv-stacked-area-chart" style="height: 108%"></div>
        </div>
        <div class="vertical-box-column p-15" 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="pull-right">70%</span>
            </div>
            <div class="progress progress-sm">
              <div class="progress-bar progress-bar-striped progress-bar-animated rounded-corner" 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="pull-right">74%</span>
            </div>
            <div class="progress progress-sm m-b-15">
              <div class="progress-bar progress-bar-striped progress-bar-animated rounded-corner bg-indigo" style="width: 74%"></div>
            </div>
            <div class="widget-chart-info-progress">
              <b>Mobile App Development</b>
              <span class="pull-right">25%</span>
            </div>
            <div class="progress progress-sm m-b-15">
              <div class="progress-bar progress-bar-striped progress-bar-animated rounded-corner bg-green" style="width: 25%"></div>
            </div>
            <div class="widget-chart-info-progress">
              <b>Website Redesign</b>
              <span class="pull-right">95%</span>
            </div>
            <div class="progress progress-sm">
              <div class="progress-bar progress-bar-striped progress-bar-animated rounded-corner bg-orange" style="width: 95%"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- end widget-chart -->

Close

#### Widget Table

×

    <!-- 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>
            <div class="widget-table-img" style="background-image: url(../assets/img/product/product-6.png);"></div>
          </td>
          <td>
            <h4 class="widget-table-title">Mavic Pro Combo</h4>
            <p class="widget-table-desc m-b-15">Portable yet powerful, the Mavic Pro is your personal drone, ready to go with you everywhere.</p>
            <div class="progress progress-sm rounded-corner m-b-5">
              <div class="progress-bar progress-bar-striped progress-bar-animated bg-orange f-s-10 f-w-600" style="width: 30%;">30%</div>
            </div>
            <div class="clearfix f-s-10">
              status: <b class="text-white">Shipped</b>
            </div>
          </td>
          <td class="text-nowrap">
            <b class="text-white">$999</b><br />
            <small class="text-white text-line-through">$1,202</small>
          </td>
          <td>1</td>
          <td>999.00</td>
          <td><a href="#" class="btn btn-inverse btn-sm width-80 rounded-corner">Edit</a></td>
        </tr>
      </tbody>
    </table>
    <!-- end widget-table -->

Close

##### App Settings

Header Fixed
Sidebar Fixed
Sidebar Grid
Sidebar Gradient

##### Admin Design (5)

##### Language Version (7)

##### Frontend Design (4)

Documentation Reset Local Storage