Cards

Card components for displaying content in contained sections.

Basic card

Card Title

This is a basic card component with a title and description.

Basic cards provide a simple container for content with consistent spacing and borders.

Cards can contain additional content sections.

This is the card content area. You can put any content here including text, images, or other components.

CardContent provides a section for the main content of the card.

Card with Actions

Cards can include action buttons in the footer.

This card demonstrates the footer section with action buttons.

CardFooter is ideal for action buttons or additional links.

Card 1

Card content with consistent spacing and styling.

Card 2

Card content with consistent spacing and styling.

Card 3

Card content with consistent spacing and styling.

Cards work well in grid layouts for displaying collections of related content.

Cards can include images, illustrations, or other visual content at the top.

Image cards are useful for displaying product listings, blog posts, or featured content.