State of Compose 2023 results are in! Click here to learn more

← Back to Material 3 Compose

ElevatedCard

Component
in
Material 3
. Since 1.0.0

Overview

Code Examples

<a href="https://m3.material.io/components/cards/overview" class="external" target="_blank">Material Design elevated card</a>.

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(https://developer.android.com/images/reference/androidx/compose/material3/elevated-card.png)

Elevated card sample:

Overloads

ElevatedCard

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

Parameters

NameDescription
modifierthe Modifier to be applied to this card
shapedefines the shape of this card's container and shadow (when using elevation)
colorsCardColors that will be used to resolve the color(s) used for this card in different states. See CardDefaults.elevatedCardElevation.
elevationCardElevation 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

ElevatedCard

@ExperimentalMaterial3Api
@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 = remember { MutableInteractionSource() },
    content: @Composable ColumnScope.() -> Unit
)

Parameters

NameDescription
onClickcalled when this card is clicked
modifierthe Modifier to be applied to this card
enabledcontrols 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.
shapedefines the shape of this card's container and shadow (when using elevation)
colorsCardColors that will be used to resolve the color(s) used for this card in different states. See CardDefaults.elevatedCardElevation.
elevationCardElevation 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.
interactionSourcethe MutableInteractionSource representing the stream of Interactions for this card. You can create and pass in your own remembered instance to observe Interactions and customize the appearance / behavior of this card in different states