Cards
Cards are flexible user interface elements, which help organize content into meaningful sections and make it easier to display on different screen sizes. Cards contain various smaller components, such as images, text, links and buttons and may act as an entry to more detailed information, helping users scan the page quickly and find the most relevant content.
Default card
Use the card and cardBody to create a card and use it as the basis for a more advanced card design. A card is a perfect way to organize content and make it look neat and tidy.
Card with title
Add a title to your card by adding title props. You can also place the title inside the cardHeader slot to customize your header.
Card with title and image
To create a more visually appealing card, add a title and an image. Thanks to that, the card will go well with your inteface design and draw user’s attention.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem.
Blog post card
Add an image to your blog post card to make it eye-catching. You can do it by adding the image. Thanks to the grid within CardBody, the author details will be displayed at the bottom of the card.
Are you suggesting that coconuts migrate? No, no, no! Yes, yes. A bit. But she's got a wart. You ...
Row deck
Add the .row-deck (it's tabler helper) class to .row, if you want to display several cards next to one another. Thanks to that, they will all have the same height.
Card with background color
Color variations
Add a status color to your card, either at the top or on the side of the card, to customise it and make it more eye-catching.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur perferendis sed suscipit velit vitae.
Card Stamp
Add a CardStamp.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
Card Ribbon
Add a Ribbon to your card.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
Stacked Card
Use the card-stacked class to stack up multiple cards, if you want to save screen space or create a visually appealing effect.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
Card Media
Add a CardMedia to show image and other medias inside our card.
Body
Body
Burn her! How do you know she is a witch? You don't frighten us, English pig-dogs! Go and boil yo...
Burn her! How do you know she is a witch? You don't frighten us, English pig-dogs! Go and boil yo...