Compose Multiplatform Material3/androidx.compose.material3/Card

Card

@Composable
fun Card(modifier: Modifier = Modifier, shape: Shape = CardDefaults.shape, colors: CardColors = CardDefaults.cardColors(), elevation: CardElevation = CardDefaults.cardElevation(), border: BorderStroke? = null, content: @Composable ColumnScope.() -> Unit)

Material Design filled card.

Cards contain contain content and actions that relate information about a subject. Filled cards provide subtle separation from the background. This has less emphasis than elevated or outlined cards.

This Card does not handle input events - see the other Card overloads if you want a clickable or selectable Card.

Filled card image

Card sample:

Parameters

modifier

the Modifier to be applied to this card

shape

defines the shape of this card's container, border (when border is not null), and shadow (when using elevation)

colors

CardColors that will be used to resolve the colors used for this card in different states. See CardDefaults.cardColors.

elevation

CardElevation used to resolve the elevation for this card in different states. This controls the size of the shadow below the card. Additionally, when the container color is ColorScheme.surface, this controls the amount of primary color applied as an overlay. See also: Surface.

border

the border to draw around the container of this card

Samples

androidx.compose.material3.samples.CardSample
@Composable
fun Card(onClick: () -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, shape: Shape = CardDefaults.shape, colors: CardColors = CardDefaults.cardColors(), elevation: CardElevation = CardDefaults.cardElevation(), border: BorderStroke? = null, interactionSource: MutableInteractionSource? = null, content: @Composable ColumnScope.() -> Unit)

Material Design filled card.

Cards contain contain content and actions that relate information about a subject. Filled cards provide subtle separation from the background. This has less emphasis than elevated or outlined cards.

This Card handles click events, calling its onClick lambda.

Filled card image

Clickable card sample:

Parameters

onClick

called when this card is clicked

modifier

the Modifier to be applied to this card

enabled

controls the enabled state of this card. When false, this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services.

shape

defines the shape of this card's container, border (when border is not null), and shadow (when using elevation)

colors

CardColors that will be used to resolve the color(s) used for this card in different states. See CardDefaults.cardColors.

elevation

CardElevation used to resolve the elevation for this card in different states. This controls the size of the shadow below the card. Additionally, when the container color is ColorScheme.surface, this controls the amount of primary color applied as an overlay. See also: Surface.

border

the border to draw around the container of this card

interactionSource

an optional hoisted MutableInteractionSource for observing and emitting Interactions for this card. You can use this to change the card's appearance or preview the card in different states. Note that if null is provided, interactions will still happen internally.

Samples

androidx.compose.material3.samples.ClickableCardSample