Card
The Card component is a surface that displays content and actions on a single topic. Cards are composed of sub-components such as CardHeader, CardContent, CardActions, and CardMedia, which can be combined to create a variety of layouts.
Cards are used to group related information in a flexible container. They support rich media, headers, body text, and action buttons.
Usage
Basic Card
A basic Card wraps content in an elevated surface with shadow and rounded corners.
This is a simple card with only content inside it.
Card with Header and Content
Use CardHeader to add a title and subheader above the card content.
This card includes a header with a title and subheader, followed by descriptive body content.
Customization
Cards can be customized with actions using CardActions, which places buttons or other interactive elements at the bottom of the card.
Card with Actions
Cards can include action buttons at the bottom for user interaction.