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.

Basic Card

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.

Card TitleCard Subheader

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

Card with Actions

Cards can include action buttons at the bottom for user interaction.