# Card

> A container for content and actions about a single subject.

- Category: Containment
- API status: Stable
- Compose APIs: `Card`, `ElevatedCard`, `OutlinedCard`, `CardDefaults`
- Interactive page: https://m3e.ljzapps.app/#components/card

## When to use

Use filled cards for the lowest emphasis, elevated cards when the card should stand out from a busy background and outlined cards for the highest separation without a shadow.

Make the whole card clickable with the onClick overload when it leads to a detail view. Put separate actions in a row at the bottom instead.

## Playground

The interactive page has a playground with live property controls for this component and generated code.

## Examples

### Types

```kotlin
Card(Modifier.widthIn(max = 200.dp)) { Text("Filled", Modifier.padding(16.dp)) }
ElevatedCard(Modifier.widthIn(max = 200.dp)) { Text("Elevated", Modifier.padding(16.dp)) }
OutlinedCard(Modifier.widthIn(max = 200.dp)) { Text("Outlined", Modifier.padding(16.dp)) }
```

### Media and actions

A clickable card with a media area and text buttons.

```kotlin
ElevatedCard(onClick = {}, modifier = Modifier.widthIn(max = 320.dp)) {
    Box(
        modifier = Modifier
            .fillMaxWidth()
            .aspectRatio(16f / 9f)
            .background(MaterialTheme.colorScheme.tertiaryContainer),
    )
    Column(Modifier.padding(16.dp), verticalArrangement = Arrangement.spacedBy(4.dp)) {
        Text("Coastal route", style = MaterialTheme.typography.titleMediumEmphasized)
        Text("Plan stops, book stays and share the trip.", style = MaterialTheme.typography.bodyMedium)
    }
    Row(Modifier.fillMaxWidth().padding(horizontal = 8.dp, vertical = 4.dp), horizontalArrangement = Arrangement.End) {
        TextButton(onClick = {}) { Text("Share") }
        TextButton(onClick = {}) { Text("Open") }
    }
}
```

## Parameters

| Name | Type | Default | Description |
|---|---|---|---|
| `onClick` | `() -> Unit` |  | Optional. Makes the whole card a button. |
| `shape` | `Shape` | `CardDefaults.shape` | Corner shape. Use shapes from the theme. |
| `colors` | `CardColors` | `CardDefaults.cardColors()` | Container and content colors. |
| `elevation` | `CardElevation` | `CardDefaults.cardElevation()` | Shadow per state. |
| `content` | `@Composable ColumnScope.() -> Unit` |  | Card content, laid out in a column. |

## Guidelines

Do:
- Keep one subject per card.
- Align cards on a grid.

Don't:
- Do not nest cards.
- Do not put long scrolling content inside a card.

## Accessibility

- A clickable card is one focus target. Do not nest buttons inside it unless they are separate actions.
- Provide a descriptive text for images inside a card, or mark them decorative.

## Related components

- [Carousel](https://m3e.ljzapps.app/docs/components/carousel.md)
- [List](https://m3e.ljzapps.app/docs/components/list.md)
- [Buttons](https://m3e.ljzapps.app/docs/components/button.md)