Background and Color Cards

Use text and background utilities to change the appearance of a card.

Header
Primary card title

Quick sample text to create the card title and make up the body of the card's content.

Header
Secondary card title

Quick sample text to create the card title and make up the body of the card's content.

Header
Success card title

Quick sample text to create the card title and make up the body of the card's content.

Header
Danger card title

Quick sample text to create the card title and make up the body of the card's content.

Header
Warning card title

Quick sample text to create the card title and make up the body of the card's content.

Header
Infomation card title

Quick sample text to create the card title and make up the body of the card's content.

Header
Light card title

Quick sample text to create the card title and make up the body of the card's content.

Header
Dark card title

Quick sample text to create the card title and make up the body of the card's content.

Border Cards

Use border utilities to change just the border-color of a card. Note that you can put .text-{color} classes on the parent .card or a subset of the card’s contents as shown below.

Header
Primary card title

Quick sample text to create the card title and make up the body of the card's content.

Header
Secondary card title

Quick sample text to create the card title and make up the body of the card's content.

Header
Success card title

Quick sample text to create the card title and make up the body of the card's content.

Header
Danger card title

Quick sample text to create the card title and make up the body of the card's content.

Header
Warning card title

Quick sample text to create the card title and make up the body of the card's content.

Header
Info card title

Quick sample text to create the card title and make up the body of the card's content.

Header
Light card title

Quick sample text to create the card title and make up the body of the card's content.

Header
Dark card title

Quick sample text to create the card title and make up the body of the card's content.

Witch accent Cards

Use .card-accent-{color} utilities to change the appearance of a card.

Header
Primary card title

Quick sample text to create the card title and make up the body of the card's content.

Header
Secondary card title

Quick sample text to create the card title and make up the body of the card's content.

Header
Success card title

Quick sample text to create the card title and make up the body of the card's content.

Header
Danger card title

Quick sample text to create the card title and make up the body of the card's content.

Header
Warning card title

Quick sample text to create the card title and make up the body of the card's content.

Header
Warning card title

Quick sample text to create the card title and make up the body of the card's content.

Header
Info card title

Quick sample text to create the card title and make up the body of the card's content.

Header
Dark card title

Quick sample text to create the card title and make up the body of the card's content.

Mixing Cards

You are able to adjust the borders on the card elements as needed, and even exclude their background-color with .bg-transparent.

Header
Success card title

Quick sample text to create the card title and make up the body of the card's content.

Header
Primary card title

Quick sample text to create the card title and make up the body of the card's content.

Header
Warning card title

Quick sample text to create the card title and make up the body of the card's content.

Header
Info card title

Quick sample text to create the card title and make up the body of the card's content.

Card groups

Use card groups to represent cards as a single, attached component with same width and height columns. Card groups use display: flex; to reach their sizing.

Card title

It's a broader card with text below as a natural lead-in to extra content. This content is a little longer.

Last updated 3 mins ago

Card title

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

Last updated 3 mins ago

Card title

It's a broader card with text below as a natural lead-in to extra content. This content is a little longer.This card has even longer content than the first to show that equal height action.

Last updated 3 mins ago

Card groups

When using card groups with footers, their content will automatically line up.

Card title

It's a broader card with text below as a natural lead-in to extra content. This content is a little longer.

Card title

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

Card title

It's a broader card with text below as a natural lead-in to extra content. This content is a little longer.This card has even longer content than the first to show that equal height action.

Card decks

Use of card decks if you need a set of identical width and height cards that aren’t attached to one another.

Card title

This is a longer card It's a broader card with text below as a natural lead-in to extra content. This content is a little longer. This content is a little bit longer.

Last updated 3 mins ago

Card title

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

Last updated 3 mins ago

Card title

It's a broader card with text below as a natural lead-in to extra content. This content is a little longer.This card has even longer content than the first to show that equal height action.

Last updated 3 mins ago

Card decks

Just like with card groups, card footers in decks will automatically line up.

Card title

It's a broader card with text below as a natural lead-in to extra content. This content is a little longer.

Card title

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

Card title

It's a broader card with text below as a natural lead-in to extra content. This content is a little longer.This card has even longer content than the first to show that equal height action.

Card Masonry

Cards can be formed into Masonry-like columns with just CSS by binding them in .card-columns. Cards are created with CSS column properties instead of flexbox for more regular alignment. Cards are arranged from top to bottom and left to right.

Card title that wraps to a new line

This is a longer card It's a broader card with text below as a natural lead-in to extra content. This content is a little longer. This content is a little bit longer.This is a longer card It's a broader card with text below as a natural lead-in to extra content. This content is a little longer. This content is a little bit longer.

Last updated 3 mins ago

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
Card title

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

Last updated 3 mins ago

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.

Someone famous in Source Title
Card title

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

Last updated 3 mins ago

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
Card title

It's a broader card with text below as a natural lead-in to extra content. This content is a little longer.This card has even longer content than the first to show that equal height action.

Last updated 3 mins ago

Brand Cards

A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and more...

89k
Likes
459
Share
89k
Likes
459
Share
89k
Likes
459
Share
89k
Likes
459
Share
89k
Likes
459
Share
89k
Likes
459
Share
89k
Likes
459
Share
89k
Likes
459
Share
89k
Likes
459
Share

Copyright© 2019 | All rights reserved. | Created By ColorlibCode