Skip to main content


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

raisedboolfalseIf true, the card uses a raised style.


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.


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.


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.


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.