Skip to content

Card

Cards contain content and actions about a single subject.

Cards are surfaces that display content and actions on a single topic.

They should be easy to scan for relevant and actionable information. Elements, like text and images, should be placed on them in a way that clearly indicates hierarchy.

Simple card

Although cards can support multiple actions, UI controls, and an overflow menu, use restraint and remember that cards are entry points to more complex and detailed information.

Word of the Day

benevolent

adjective

well meaning and kindly.
"a benevolent smile"

Outlined Card

Set variant="outlined" to render an outlined card.

Word of the Day

benevolent

adjective

well meaning and kindly.
"a benevolent smile"

Complex Interaction

On desktop, card content can expand. (Click the downward chevron to view the recipe.)

R
Shrimp and Chorizo PaellaSeptember 14, 2016

This impressive paella is a perfect party dish and a fun meal to cook together with your guests. Add 1 cup of frozen peas along with the mussels, if you like.

Media

Example of a card using an image to reinforce the content.

Lizard

Lizards are a widespread group of squamate reptiles, with over 6,000 species, ranging across all continents except Antarctica

By default, we use the combination of a <div> element and a background image to display the media. It can be problematic in some situations, for example, you might want to display a video or a responsive image. Use the component prop for these use cases:

Contemplative Reptile
Lizard

Lizards are a widespread group of squamate reptiles, with over 6,000 species, ranging across all continents except Antarctica

⚠️ When component="img", CardMedia relies on object-fit for centering the image. It's not supported by IE11.

Primary action

Often a card allow users to interact with the entirety of its surface to trigger its main action, be it an expansion, a link to another screen or some other behavior. The action area of the card can be specified by wrapping its contents in a CardActionArea component.

A card can also offer supplemental actions which should stand detached from the main action area in order to avoid event overlap.

UI Controls

Supplemental actions within the card are explicitly called out using icons, text, and UI controls, typically placed at the bottom of the card.

Here's an example of a media control card.

Live From Space
Mac Miller

Customization

🎨 If you are looking for inspiration, you can check MUI Treasury's customization examples.