Cards

Card image
Card Title

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

Card Title
Card Subtitle

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

Card LinkAnother Link
Card image
Card Title
Card image

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

Normal Card
Card Subtitle

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

Card LinkAnother Link
Dashboard Overview
User Profile
Notifications Settings
Logout
Featured
Home
Messages
Settings
Card image
Card Title

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

Cras justo odio
Dapibus ac facilisis in
Vestibulum at eros
Card image
Card Title

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

Cras justo odio
Dapibus ac facilisis in
Vestibulum at eros
Card Title

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

Card image
Cras justo odio
Dapibus ac facilisis in
Vestibulum at eros
Featured
Data Overview

Dive deep into detailed metrics and analytics to monitor and optimize your account's performance effectively.

Featured
Special title treatment

With supporting text below as a natural lead-in to additional content.

Quote Card Color
Inspiration

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

Winston Churchill in London
Motivation

Believe you can and you're halfway there.

Theodore Roosevelt in Washington
Wisdom

Happiness is not something ready-made. It comes from your own actions.

Dalai Lama in Dharamshala
Aspiration

The future belongs to those who believe in the beauty of their dreams.

Eleanor Roosevelt in New York
Perseverance

It always seems impossible until it's done.

Nelson Mandela in Johannesburg
Determination

Do not watch the clock. Do what it does. Keep going.

Sam Levenson in Boston
Featured
Special title treatment

With supporting text below as a natural lead-in to additional content.

Featured
Special title treatment

With supporting text below as a natural lead-in to additional content.

Featured
Special title treatment

With supporting text below as a natural lead-in to additional content.

Card image

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

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

Card image
Card image
Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Card Colors
Primary Header
Primary Card

Represents a primary action or importance. Often used for main buttons and actions.

Secondary Header
Secondary Card

A subtle and less dominant tone. Often used for supporting information.

Success Header
Success Card

Indicates a successful or positive action. Commonly used for confirmations.

Warning Header
Warning Card

Draws attention to potential issues or alerts that need caution.

Purple Header
Purple Card

Often used for creativity or luxury. A versatile and modern choice.

Orange Header
Orange Card

Represents energy and enthusiasm. Ideal for calls to action or promotions.

Danger Header
Danger Card

Highlights errors, warnings, or critical issues. Demands immediate attention.

Info Header
Info Card

Provides helpful information or additional context. Used for neutral alerts.

Dark Mode
Dark Card

Often used for modern, sleek interfaces. Provides a focus on content while reducing eye strain.

Light Mode
Light Card

Commonly used for clean, classic designs. Ideal for readability and simplicity.

Card Border & Header Colors
Primary Header
Primary Card

Represents primary actions or main elements in the interface. Ideal for calls to action.

Secondary Header
Secondary Card

Used for supplementary information or less emphasized content in the UI.

Success Header
Success Card

Indicates successful operations or positive feedback. Commonly used for confirmations.

Warning Header
Warning Card

Highlights cautionary messages or potential risks. Use for alerts and warnings.

Purple Header
Purple Card

Adds a sense of creativity or luxury to the interface. Often used for standout elements.

Orange Header
Orange Card

Represents energy and enthusiasm. Ideal for promotional or attention-grabbing elements.

Danger Header
Danger Card

Highlights critical issues or errors. Use for high-priority alerts or destructive actions.

Info Header
Info Card

Provides helpful or contextual information. Often used for neutral alerts or tips.

Dark Header
Dark Card

Creates a modern and sleek look. Used for emphasizing content while reducing eye strain.

Card Groups
Card image
Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Card image
Card title

This card has supporting text below as a natural lead-in to additional content.

Card image
Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

Theme Settings
Sidebar Color Scheme
Default
Primary
Gradient
Dark sidebar is disabled in dark mode for better visibility
Layout Options
Sidebar Layout
Choose your preferred sidebar size
Changes are saved automatically