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

← Back to Material Compose

Card

Component
in
Material
. Since 0.1.0-dev15

Overview

Code Examples

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

Cards contain content and actions about a single subject.

!Cards image(https://developer.android.com/images/reference/androidx/compose/material/cards.png)

This version of Card will block clicks behind it. For clickable card, please use another overload that accepts onClick as a parameter.

Overloads

Card

@Composable
@NonRestartableComposable
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

Card

@ExperimentalMaterialApi
@Composable
@NonRestartableComposable
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 = remember { MutableInteractionSource() },
    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.
interactionSourcethe MutableInteractionSource representing the stream of Interactions for this Card. You can create and pass in your own remembered MutableInteractionSource if you want to observe Interactions and customize the appearance / behavior of this card in different Interactions