ElevatedCard

Functions summary

`Unit`	`@Composable ElevatedCard( modifier: Modifier, shape: Shape, colors: CardColors, elevation: CardElevation, content: @Composable ColumnScope.() -> Unit )` Material Design elevated card	Cmn
`Unit`	`@Composable ElevatedCard( onClick: () -> Unit, modifier: Modifier, enabled: Boolean, shape: Shape, colors: CardColors, elevation: CardElevation, interactionSource: MutableInteractionSource?, content: @Composable ColumnScope.() -> Unit )` Material Design elevated card	Cmn

Functions

ElevatedCard

Cmn

Artifact: androidx.compose.material3:material3

View Source

Added in 1.0.0

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

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.size
import androidx.compose.material3.Card
import androidx.compose.material3.ElevatedCard
import androidx.compose.material3.Text
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

ElevatedCard(Modifier.size(width = 180.dp, height = 100.dp)) {
    Box(Modifier.fillMaxSize()) { Text("Card content", Modifier.align(Alignment.Center)) }
}

Parameters
`modifier: Modifier = Modifier`	the `Modifier` to be applied to this card
`shape: Shape = CardDefaults.elevatedShape`	defines the shape of this card's container and shadow (when using `elevation`)
`colors: CardColors = CardDefaults.elevatedCardColors()`	`CardColors` that will be used to resolve the color(s) used for this card in different states. See `CardDefaults.elevatedCardElevation`.
`elevation: CardElevation = CardDefaults.elevatedCardElevation()`	`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`.
`content: @Composable ColumnScope.() -> Unit`	The content displayed on the card

ElevatedCard

Cmn

Artifact: androidx.compose.material3:material3

View Source

Added in 1.0.0

@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
): Unit

Material Design elevated card

This ElevatedCard handles click events, calling its onClick lambda.

Elevated card
image

Clickable elevated card sample:

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.size
import androidx.compose.material3.Card
import androidx.compose.material3.ElevatedCard
import androidx.compose.material3.Text
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

ElevatedCard(
    onClick = { /* Do something */ },
    modifier = Modifier.size(width = 180.dp, height = 100.dp),
) {
    Box(Modifier.fillMaxSize()) { Text("Clickable", Modifier.align(Alignment.Center)) }
}

Parameters
`onClick: () -> Unit`	called when this card is clicked
`modifier: Modifier = Modifier`	the `Modifier` to be applied to this card
`enabled: Boolean = true`	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: Shape = CardDefaults.elevatedShape`	defines the shape of this card's container and shadow (when using `elevation`)
`colors: CardColors = CardDefaults.elevatedCardColors()`	`CardColors` that will be used to resolve the color(s) used for this card in different states. See `CardDefaults.elevatedCardElevation`.
`elevation: CardElevation = CardDefaults.elevatedCardElevation()`	`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: MutableInteractionSource? = null`	an optional hoisted `MutableInteractionSource` for observing and emitting `Interaction`s 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.
`content: @Composable ColumnScope.() -> Unit`	The content displayed on the card