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.
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 linkThis 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 linkThis 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 linkPlaces 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.
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.
Some quick example text to build on the card title and make up the bulk of the card's content.
Turn an image into a card background and overlay your card’s text.
Add an optional color header 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...
Class Reference
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.
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 Reference
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.
Cards include their own variant classes for quickly changing card background.
Class Reference
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.
Class Reference
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.