@activelylearn/material-ui/docs/src/pages/demos/cards/cards.md

Material-UI's workspace package

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

# Cards

A [card](https://material.io/design/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/demos/cards/SimpleCard.js"}}

## Media

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

{{"demo": "pages/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/demos/cards/MediaControlCard.js"}}

## Complex Interaction

On desktop, card content can expand.

{{"demo": "pages/demos/cards/RecipeReviewCard.js"}}