New Compose Multiplatform components arrived on Composables UICheck it out →

Card

Cards contain content and actions about a single subject.

Cards image

Last updated:

Installation

dependencies {
   implementation("androidx.compose.material:material:1.7.0-beta03")
}

Overloads

@NonRestartableComposable
@Composable
fun Card(
    modifier: Modifier = Modifier,
    shape: Shape = MaterialTheme.shapes.medium,
    backgroundColor: Color = MaterialTheme.colors.surface,
    contentColor: Color = contentColorFor(backgroundColor),
    border: BorderStroke? = null,
    elevation: Dp = 1.dp,
    content: @Composable () -> Unit
)

Parameters

namedescription
modifierModifier to be applied to the layout of the card.
shapeDefines the card's shape as well its shadow. A shadow is only displayed if the [elevation] is greater than zero.
backgroundColorThe background color.
contentColorThe preferred content color provided by this card to its children. Defaults to either the matching content color for [backgroundColor], or if [backgroundColor] is not a color from the theme, this will keep the same value set above this card.
borderOptional border to draw on top of the card
elevationThe z-coordinate at which to place this card. This controls the size of the shadow below the card.
@NonRestartableComposable
@Composable
@ExperimentalMaterialApi
fun Card(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    shape: Shape = MaterialTheme.shapes.medium,
    backgroundColor: Color = MaterialTheme.colors.surface,
    contentColor: Color = contentColorFor(backgroundColor),
    border: BorderStroke? = null,
    elevation: Dp = 1.dp,
    interactionSource: MutableInteractionSource? = null,
    content: @Composable () -> Unit
)

Parameters

namedescription
onClickcallback to be called when the card is clicked
modifierModifier to be applied to the layout of the card.
enabledControls the enabled state of the card. When false, this card will not be clickable
shapeDefines the card's shape as well its shadow. A shadow is only displayed if the [elevation] is greater than zero.
backgroundColorThe background color.
contentColorThe preferred content color provided by this card to its children. Defaults to either the matching content color for [backgroundColor], or if [backgroundColor] is not a color from the theme, this will keep the same value set above this card.
borderOptional border to draw on top of the card
elevationThe z-coordinate at which to place this card. This controls the size of the shadow below the card.
interactionSourcean 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.

Code Examples

CardSample

@Composable
@Sampled
fun CardSample() {
    Card {
        Text("Card Content")
    }
}

ClickableCardSample

@Composable
@Sampled
@OptIn(ExperimentalMaterialApi::class
fun ClickableCardSample() {
    var count by remember { mutableStateOf(0) }
    Card(onClick = { count++ }) {
        Text("Clickable card content with count: $count")
    }
}