Compose Multiplatform Material3/androidx.compose.material3/ElevatedCard

ElevatedCard

@Composable
fun ElevatedCard(modifier: Modifier = Modifier, shape: Shape = CardDefaults.elevatedShape, colors: CardColors = CardDefaults.elevatedCardColors(), elevation: CardElevation = CardDefaults.elevatedCardElevation(), content: @Composable ColumnScope.() -> Unit)

Material Design elevated card.

Elevated cards contain content and actions that relate information about a subject. They have a drop shadow, providing more separation from the background than filled cards, but less than outlined cards.

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

Elevated card image

Elevated card sample:

Parameters

modifier

the Modifier to be applied to this card

shape

defines the shape of this card's container 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.elevatedCardElevation.

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.

Samples

androidx.compose.material3.samples.ElevatedCardSample
@Composable
fun ElevatedCard(onClick: () -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, shape: Shape = CardDefaults.elevatedShape, colors: CardColors = CardDefaults.elevatedCardColors(), elevation: CardElevation = CardDefaults.elevatedCardElevation(), interactionSource: MutableInteractionSource? = null, content: @Composable ColumnScope.() -> Unit)

Material Design elevated card.

Elevated cards contain content and actions that relate information about a subject. They have a drop shadow, providing more separation from the background than filled cards, but less than outlined cards.

This ElevatedCard handles click events, calling its onClick lambda.

Elevated card image

Clickable elevated 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 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.elevatedCardElevation.

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.

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