Card
The Card component is a surface that displays content and actions for a single topic.
Cards can contain text, media, and UI controls, and are used to display complex or detailed information.
Style Attributes
| Name | Type | Default | Description |
|---|---|---|---|
| raised | bool | false | If true, the card uses a raised style. |
Subcomponents
The Card component consists several subcomponents that define various aspects of a card's content.
Header (CardHeader)
The Header component provides an area on the card to display a title and subheading.
Properties
| Name | Type | Default | Description |
|---|---|---|---|
| title | node | Defines the title of a card. | |
| subheader | node | Defines the subheading of a card. |
Content (CardContent)
The Content component is the area of the card where content is displayed.
Properties
| Name | Type | Default | Description |
|---|---|---|---|
| padding | string | The padding space around the card content. | |
| margin | string | The margin space around the card content. |
Media (CardMedia)
The Media component displays media elements for the card.
Properties
| Name | Type | Default | Description |
|---|---|---|---|
| title | string | Defines the title of a media element. | |
| image | string | The image to be displayed as a background image. | |
| height | string | The height of the background image in pixels; if missing the image will not display. |
For more detail on the Card component, see the MUI developer docs.