Cards
Use text and background utilities to change the appearance of a card.
Primary card title
Quick sample text to create the card title and make up the body of the card's content.
Secondary card title
Quick sample text to create the card title and make up the body of the card's content.
Success card title
Quick sample text to create the card title and make up the body of the card's content.
Danger card title
Quick sample text to create the card title and make up the body of the card's content.
Warning card title
Quick sample text to create the card title and make up the body of the card's content.
Infomation card title
Quick sample text to create the card title and make up the body of the card's content.
Light card title
Quick sample text to create the card title and make up the body of the card's content.
Dark card title
Quick sample text to create the card title and make up the body of the card's content.
Use border utilities to change just the border-colorof a card. Note that you can put .text-{color}classes on the parent .cardor a subset of the card’s contents as shown below.
Primary card title
Quick sample text to create the card title and make up the body of the card's content.
Secondary card title
Quick sample text to create the card title and make up the body of the card's content.
Success card title
Quick sample text to create the card title and make up the body of the card's content.
Danger card title
Quick sample text to create the card title and make up the body of the card's content.
Warning card title
Quick sample text to create the card title and make up the body of the card's content.
Info card title
Quick sample text to create the card title and make up the body of the card's content.
Light card title
Quick sample text to create the card title and make up the body of the card's content.
Dark card title
Quick sample text to create the card title and make up the body of the card's content.
Use .card-accent-{color}utilities to change the appearance of a card.
Primary card title
Quick sample text to create the card title and make up the body of the card's content.
Secondary card title
Quick sample text to create the card title and make up the body of the card's content.
Success card title
Quick sample text to create the card title and make up the body of the card's content.
Danger card title
Quick sample text to create the card title and make up the body of the card's content.
Warning card title
Quick sample text to create the card title and make up the body of the card's content.
Warning card title
Quick sample text to create the card title and make up the body of the card's content.
Info card title
Quick sample text to create the card title and make up the body of the card's content.
Dark card title
Quick sample text to create the card title and make up the body of the card's content.
You are able to adjust the borders on the card elements as needed,and even exclude their background-colorwith .bg-transparent.
Success card title
Quick sample text to create the card title and make up the body of the card's content.
Primary card title
Quick sample text to create the card title and make up the body of the card's content.
Warning card title
Quick sample text to create the card title and make up the body of the card's content.
Info card title
Quick sample text to create the card title and make up the body of the card's content.
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
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.
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
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.
Cards can be formed into Masonry-like columns with just CSS by binding them in .card-columns. Cards are created with CSS columnproperties 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.
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.
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.
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
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...