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

Cards

A card is a flexible and extensible content container that includes options for headers and footers, etc.

Card Body

An example some text within a card body.

Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet consictetur...

Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet consictetur...

Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet consictetur...

Source Code

<div class="card card-body">
  <p class="card-text">...</p>
</div><!-- card -->
Card Titles, Text and Links

An example of using card title. In the same way, links are added and placed next to each other by adding link tag.

The Card Title

This is the card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Card link Another link
The Card Title

This is the card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Card link Another link
The Card Title

This is the card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Card link Another link

Source Code

<div class="card">
  <div class="card-body">
    <h5 class="card-title">The Card Title</h5>
    <p class="card-subtitle">This is the card subtitle</p>
    <p class="card-text">...</p>
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div><!-- card -->
Card Image Top

Places an image to the top, bottom or overlay of the card.

Image

Some quick example text to build on the card title and make up the bulk of the card's content.

Image

Some quick example text to build on the card title and make up the bulk of the card's content.

Image

Some quick example text to build on the card title and make up the bulk of the card's content.

Source Code

<div class="card">
  <img class="card-img-top img-fluid" src="../img/img12.jpg" alt="Image">
  <div class="card-body">
    <p class="card-text">...</p>
  </div>
</div><!-- card -->
Card Image Bottom

Places an image to the top, bottom or overlay of the card.

How to Be a Good Leader
March 21, 2017 8:30pm
Image
Why You're Not a Leader
March 22, 2017 6:30pm
Image
Talk Like a Leader
March 23, 2017 1:30pm
Image

Source Code

<div class="card">
  <div class="card-body">
    <p class="card-text">...</p>
  </div>
  <img class="card-img-bottom img-fluid" src="../img/img12.jpg" alt="Image">
</div><!-- card -->
Image Overlays

Turn an image into a card background and overlay your card’s text.

Image
The Cat Prisoner

Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet consictetur...

Read more

Image
The Ghost Town

Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet consictetur...

Read more

Image
The Green Leaves

Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet consictetur...

Read more

Source Code

<div class="card bd-0">
  <img class="card-img img-fluid" src="../img/img11.jpg" alt="Image">
  <div class="card-img-overlay pd-30 d-flex align-items-start flex-column">
    <h6 class="tx-white mg-b-15">The Green Leaves</h6>
    <p class="tx-white tx-white-7 mg-b-auto">...</p>
    <p class="mg-b-0"><a href="" class="tx-white">Read more</a></p>
  </div><!-- card-img-overlay -->
</div><!-- card -->
Card Header With Color Variations

Add an optional header within a card.

Description

Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet consictetur...

Description

Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet consictetur...

Description

Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet consictetur...

Description

Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet consictetur...

Description

Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet consictetur...

Description

Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet consictetur...

Description

Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet consictetur...

Description

Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet consictetur...

Description

Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet consictetur...

Description

Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet consictetur...

Description

Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet consictetur...

Description

Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet consictetur...

Source Code

<div class="card bd-0">
  <div class="card-header bg-primary">
    Description
  </div><!-- card-header -->
  <div class="card-body bd bd-t-0 rounded-bottom">
    ...
  </div><!-- card-body -->
</div><!-- card -->

Class Reference

Class Value
class="card-header bg-[value]"

SOLID:
primary | success | warning | danger | info | indigo | purple | pink | orange | light | dark

GRADIENT:
mantle | reef | transfile | neon | delicate | emerald | mojito | dance | teal-love | crystal-clear | grandeur | flickr | royal | firewatch

Card With Footer

Add an optional footer within a card.

Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet consictetur...

Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet consictetur...

Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet consictetur...

Source Code

<div class="card">
  <div class="card-body color-gray-lighter">...</div>
  <div class="card-footer">
    ...
  </div><!-- card-footer -->
</div><!-- card -->
Card With Navigation

Add a navigation in header of a card.

Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet consictetur...

Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet consictetur...

Source Code

<div class="card bd-0">
  <div class="card-header bg-dark">
    <ul class="nav nav-tabs nav-tabs-for-dark card-header-tabs">
      <li class="nav-item">
        <a class="nav-link bd-0 active pd-y-8" href="#">Popular</a>
      </li>
      <li class="nav-item">
        <a class="nav-link bd-0 tx-gray-light" href="#">Recent</a>
      </li>
      <li class="nav-item">
        <a class="nav-link bd-0 tx-gray-light" href="#">Top Rated</a>
      </li>
    </ul>
  </div><!-- card-header -->
  <div class="card-body">...</div>
</div><!-- card -->

Class Reference

Class Description
class="card-header bg-[value]" Set a card header background. Could be any value from known color.
nav-tabs-for-dark A styles that make the tabs better in dark background. Recommended for dark background of card header.
card-header-tabs The style for nav tabs that would fit for card header. Required when adding tabs to card header.
Background Variants

Cards include their own variant classes for quickly changing card background.

Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet consictetur.
Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet consictetur.
Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet consictetur.
Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet consictetur.
Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet consictetur.
Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet consictetur.

Source Code

<div class="card card-body tx-white bg-dark bd-0">
  Some quick example text to build on the card title...
</div><!-- card -->

Class Reference

Class Value
class="card card-body bd-0 bg-[value]" primary | success | warning | danger | info | indigo | purple | pink | orange | light | dark
Card with Buttons & Options

Cards with some options in the right corner of header of card.

Some Information

Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet consictetur...

Some Information

Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet consictetur...

Some Information

Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet consictetur...

Some Information

Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet consictetur...