---
components: Card, CardActions, CardContent, CardHeader, CardMedia, Collapse
---

# Cards

A [card](https://material.google.com/components/cards.html) is a sheet of material that serves as an entry point to more detailed information.

Cards display content composed of different elements whose size or supported actions vary.

Cards are a convenient means of displaying content composed of different elements. They’re also well-suited for showcasing elements whose size or supported actions vary, like photos with captions of variable length.

## 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.

{{demo='pages/component-demos/cards/SimpleCard.js'}}

## Media

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

{{demo='pages/component-demos/cards/SimpleMediaCard.js'}}

## 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.

{{demo='pages/component-demos/cards/NowPlayingCard.js'}}

## Complex Interaction

On desktop, card content can expand and scroll internally.

{{demo='pages/component-demos/cards/RecipeReviewCard.js'}}