Skip to main content

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

NameTypeDefaultDescription
raisedboolfalseIf 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

NameTypeDefaultDescription
titlenodeDefines the title of a card.
subheadernodeDefines the subheading of a card.

Content (CardContent)

The Content component is the area of the card where content is displayed.

Properties

NameTypeDefaultDescription
paddingstringThe padding space around the card content.
marginstringThe margin space around the card content.

Media (CardMedia)

The Media component displays media elements for the card.

Properties

NameTypeDefaultDescription
titlestringDefines the title of a media element.
imagestringThe image to be displayed as a background image.
heightstringThe 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.

on this page
Was this article useful?
89% of our users said this content was useful.