Card

Cards contain content and actions that relate information about a subject.

Android
@Composable
fun Card(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    onLongClick: (() -> Unit)? = null,
    shape: CardShape = CardDefaults.shape(),
    colors: CardColors = CardDefaults.colors(),
    scale: CardScale = CardDefaults.scale(),
    border: CardBorder = CardDefaults.border(),
    glow: CardGlow = CardDefaults.glow(),
    interactionSource: MutableInteractionSource? = null,
    content: @Composable ColumnScope.() -> Unit,
)

Parameters
onClick called when this card is clicked.
modifier the Modifier to be applied to this card.
onLongClick called when this card is long clicked (long-pressed).
shape CardShape defines the shape of this card's container in different interaction states. See CardDefaults.shape.
colors CardColors defines the background & content colors used in this card for different interaction states. See CardDefaults.colors.
scale CardScale defines size of the card relative to its original size for different interaction states. See CardDefaults.scale.
border CardBorder defines a border around the card for different interaction states. See CardDefaults.border.
glow CardGlow defines a shadow to be shown behind the card for different interaction states. See CardDefaults.glow.
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.
content defines the Composable content inside the Card.

Code Examples

HorizontalImageAspectRatioCardSample

@Composable
fun HorizontalImageAspectRatioCardSample() {
    Card(
        onClick = {},
        modifier = Modifier.width(200.dp).aspectRatio(CardDefaults.HorizontalImageAspectRatio),
        border =
            CardDefaults.border(
                focusedBorder =
                    Border(
                        border = BorderStroke(width = 3.dp, color = Color.Green),
                        shape = RoundedCornerShape(5),
                    )
            ),
        colors =
            CardDefaults.colors(containerColor = Color.Red, focusedContainerColor = Color.Yellow),
        scale = CardDefaults.scale(focusedScale = 1.05f),
    ) {}
}

SquareImageAspectRatioCardSample

@Composable
fun SquareImageAspectRatioCardSample() {
    Card(
        onClick = {},
        modifier = Modifier.width(150.dp).aspectRatio(CardDefaults.SquareImageAspectRatio),
        border =
            CardDefaults.border(
                focusedBorder = Border(border = BorderStroke(width = 3.dp, color = Color.Green))
            ),
        shape = CardDefaults.shape(shape = CircleShape),
        colors =
            CardDefaults.colors(containerColor = Color.Red, focusedContainerColor = Color.Yellow),
        scale = CardDefaults.scale(focusedScale = 1.05f),
    ) {}
}

VerticalImageAspectRatioCardSample

@Composable
fun VerticalImageAspectRatioCardSample() {
    Card(
        onClick = {},
        modifier = Modifier.width(200.dp).aspectRatio(CardDefaults.VerticalImageAspectRatio),
        border =
            CardDefaults.border(
                focusedBorder =
                    Border(
                        border = BorderStroke(width = 3.dp, color = Color.Green),
                        shape = RoundedCornerShape(5),
                    )
            ),
        colors =
            CardDefaults.colors(containerColor = Color.Red, focusedContainerColor = Color.Yellow),
        scale = CardDefaults.scale(focusedScale = 1.05f),
    ) {}
}
View all →
View all →