Messages

  • John Doe

    Hey, can we meet?

  • Sarah J.

    Check your inbox!

View all
Notifications

  • New Login

    IP 192.168.1.1

  • System Alert

    High CPU Usage

View all

Admin User

admin@example.com

Badges

Badge Colors

Danger Warning Yellow Lime Green Success Primary Info Purple Indigo Dark Pink Secondary Default Light

Badges by Size

Danger Warning Success Primary

Alerts

Your changes have been saved successfully.
Oops! Something went wrong. Please try again.
Warning: Your subscription will expire soon.
Heads up! A new version of the dashboard is now available.

Alerts and Callouts

Alerts

Alert!

Danger! A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.

Alert!

Info alert preview. This alert is dismissable.

Alert!

Warning alert preview. This alert is dismissable.

Alert!

Success alert preview. This alert is dismissable.

Callouts

I am a danger callout!

There is a problem that we need to fix. A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.

I am an info callout!

Follow the steps to continue to payment.

I am a warning callout!

This is a yellow callout.

I am a success callout!

This is a green callout.

Tabbed panel

Tabs

Option A Option B
A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than now.
Tab 2 content goes here...
Tab 3 content goes here...

Accordion and Carousel

Collapsible Accordion

This is the content of accordion item 1. It is open by default.
This is the content of accordion item 2. It expands when clicked.
This is the content of accordion item 3. You can put dynamic data here.

Image Carousel

Progress Bars

Progress Bars by Color

Primary

Success

Danger

Warning

Info

Striped Progress (70%)

Animated Striped Progress (50%)

Progress Bars by Size

Extra Small (h-1)

Small (h-2)

Medium (h-3)

Large (h-4)

Extra Large (h-6)

Striped Progress (70%)

Animated Striped Progress (85%)

Vertical Progress by Color

Vertical Progress by Size

XS

SM

MD

LG

XL

Listing Types

Unstyled List

  • Dashboard
    • Overview
    • Analytics
    • Account
    • Privacy
  • Settings
  • Profile
  • Logout

Unordered List

  • Dashboard
    • Overview
    • Reports
    • Password
    • Notifications
  • Settings
  • Profile
  • Logout

Ordered List

  1. Dashboard
    1. Overview
    2. Metrics
    3. General
    4. Security
  2. Settings
  3. Profile
  4. Logout

Block Quotes

Left Border Quote

“The only way to do great work is to love what you do.”
— Steve Jobs

Centered Quote

Success is not final, failure is not fatal: it is the courage to continue that counts.

— Winston Churchill

Card Quote

“Don't watch the clock; do what it does. Keep going.”
— Sam Levenson

Term Description

Description List (Vertical)

Full Name
John Doe
Email
john.doe@example.com
Role
Administrator

Description List (Horizontal)

Full Name
John Doe
Email
john.doe@example.com
Role
Administrator

Month Pagination

Pagination Month Picker with Year

Month & Year Buttons

Paginations and Notes

Pagination