Dashboard
Mailbox
Cards & Widgets
UI Elements
Navigation
Charts
Forms
Tables
Maps
Utilities
Apps & Pages
Layouts
Sitemap

Memory Usage

32.3%
8,6,5,9,8,4,9,3,5,9

CPU Usage

140.05
4,3,5,7,12,10,4,5,11,7

Disk Usage

82.02%
1,2,1,3,2,10,4,12,7

Daily Traffic

62,201
3,12,7,9,2,3,4,5,2

IMG_43445

JPG Image

1.2mb

VID_6543

MP4 Video

24.8mb

Tax_Form

Word Document

5.5mb

Getting_Started

PDF Document

12.7mb

Introduction

PDF Document

7.7mb

IMG_43420

JPG Image

2.2mb

IMG_43447

JPG Image

3.2mb

VID_6545

AVI Video

14.8mb

Secret_Document

Word Document

4.5mb

+ Add Event
Sound Notification

Play an alert sound everytime there is a new notification.

2 Steps Verification

Sign in using a two step verification by sending a verification code to your phone.

Location Services

Allowing us to access your location

Newsletter Subscription

Enables you to send us news and updates send straight to your email.

Your email

Form Elements

Forms are used to collect user information with different element types of input, select, checkboxes, radios and more.

Basic Form Input

A basic form control with disabled and readonly mode.

Source Code

<input class="form-control" placeholder="Input box" type="text">
<input class="form-control" placeholder="Input box" type="text" readonly>
<input class="form-control" placeholder="Input box" type="text" disabled>
Valid State Input

A form control with success, warning and error state.

Source Code

<input class="form-control is-valid" placeholder="Input box" type="text">
<input class="form-control is-warning" placeholder="Input box" type="text">
<input class="form-control is-invalid" placeholder="Input box" type="text">
Custom Checkboxes and Radios

A custom styled checkboxes and radios.

Checkbox Source Code

<label class="ckbox">
  <input type="checkbox">
  <span>Checkbox Unchecked</span>
</label>

Radiobox Source Code

<label class="rdiobox">
  <input name="rdio" type="radio">
  <span>Radio Unchecked</span>
</label>
Active State Color Variant

A custom styled checkboxes and radios with colored active state.

Source Code

<label class="ckbox ckbox-success">...</label>
<label class="rdiobox rdiobox-success">...</label>

Class Reference

Class Values
class="ckbox ckbox-[value]" success | warning | danger | info | teal | indigo | purple | pink | orange | dark
class="rdiobox rdiobox-[value]"
Custom Select Box

Select2 gives you a customizable select box with support for searching, tagging, remote data sets, infinite scrolling, and many other highly used options.

Source Code

<select class="form-control select2" data-placeholder="Choose Browser">
  <option value="Firefox">Firefox</option>
  <option value="Chrome">Chrome</option>
  <option value="Safari">Safari</option>
  <option value="Opera">Opera</option>
  <option value="Internet Explorer">Internet Explorer</option>
</select>
File Browser

A custom styled file browser.

Source Code

<label class="custom-file">
  <input type="file" id="file" class="custom-file-input">
  <span class="custom-file-control"></span>
</label>
Toggle Switches

A lightweight jQuery plugin that creates easily-styleable toggle buttons.

Source Code

<div class="toggle-wrapper">
  <div class="toggle toggle-light primary"></div>
</div>

<div class="toggle-wrapper">
  <div class="toggle toggle-modern primary"></div>
</div>

Class Reference

Class Values
class="toggle toggle-light [value]" primary | success | warning | danger | info | teal | indigo | purple | pink | orange
class="toggle toggle-modern [value]"
Input Groups

Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs.

@ex.com
$ .00

Source Code

<div class="input-group">
  <span class="input-group-addon"><i class="icon ion-person tx-16 lh-0 op-6"></i></span>
  <input type="text" class="form-control" placeholder="Username">
</div>
Input Mask

Input masks allows a user to more easily enter fixed width input where you would like them to enter the data in a certain format (dates,phones, etc).

Source Code

$('#dateMask').mask('99/99/9999');
$('#phoneMask').mask('(999) 999-9999');
$('#ssnMask').mask('999-99-9999');
Input Tags

User interface for managing tags.

Source Code

<input type="text" value="Amsterdam,Washington,Sydney,Beijing,Cairo" data-role="tagsinput">
Date Picker

The datepicker is tied to a standard form input field. Click on the input to open an interactive calendar in a small overlay. If a date is chosen, feedback is shown as the input's value.

Default Functionality

Source Code

<div class="input-group">
  <span class="input-group-addon"><i class="icon ion-calendar tx-16 lh-0 op-6"></i></span>
  <input type="text" class="form-control fc-datepicker" placeholder="MM/DD/YYYY">
</div>

Set the numberOfMonths option to an integer of 2 or more to show multiple months in a single datepicker.

Source Code

$('#datepickerNoOfMonths').datepicker({
  showOtherMonths: true,
  selectOtherMonths: true,
  numberOfMonths: 2
});

Display the datepicker embedded in the page instead of in an overlay.

Source Code

<div class="fc-datepicker"></div>
Time Picker

Easily select a time for a text input using your mouse or keyboards arrow keys.

Source Code

<div class="input-group">
  <span class="input-group-addon"><i class="fa fa-clock-o tx-16 lh-0 op-6"></i></span>
  <input id="tpBasic" type="text" class="form-control" placeholder="Set time">
</div>

Javascript Code

$('#tpBasic').timepicker();
Color Picker

A simple component to select color in the same way you select color in Adobe Photoshop.

Javascript Code

$('#colorpicker').spectrum({
  color: '#17A2B8'
});

You can allow alpha transparency selection. Check out these example.

Javascript Code

$('#showAlpha').spectrum({
  color: 'rgba(23,162,184,0.5)',
  showAlpha: true
});

Show pallete only. If you'd like, spectrum can show the palettes you specify, and nothing else.

Javascript Code

$('#showPaletteOnly').spectrum({
  showPaletteOnly: true,
  showPalette:true,
  color: '#DC3545',
  palette: [
    ['#1D2939', '#FFF', '#0866C6','#23BF08', '#F49917'],
    ['#DC3545', '#17A2B8', '#6610F2', '#fa1e81', '#72e7a6']
  ]
});
Range Slider

Simple, small and fast javascript/jquery slider element.

HTML Code

<input type="text" id="rangeslider1" name="example_name" value="" />

Javascript Code

$('#rangeslider1').ionRangeSlider();