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

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.

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.