Card

Composable Component

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 `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	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,
            )
    ) {}
}

Create your own Component Library

Material Components are meant to be used as is and they do not allow customizations. To build your own Jetpack Compose component library use Compose Unstyled