Cards

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...

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

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.

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

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

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

Add an optional color 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...

Class Value
class="card-header bg-[value]" primary | success | warning | danger | info | indigo | purple | pink | orange | light | dark

Add an optional gradient color 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...

Class Value
class="card-header bg-[value]" mantle | reef | transfile | neon | delicate | emerald | mojito | dance | teal-love | crystal-clear | grandeur | flickr | royal | firewatch

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...

Add a tab navigation in header of a card.

Recent content goes here...
Top rated content goes here...
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...
Recent content goes here...
Top rated content goes here...

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.
Class Value
class="card card-body bd-0 bg-[value]" primary | success | warning | danger | info | indigo | purple | pink | orange | dark

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.
Class Value
class="card card-body bd-0 bg-[value]" mantle | reef | transfile | neon | delicate | emerald | mojito | dance | teal-love | crystal-clear | grandeur | flickr | royal | firewatch

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...