Card

Display content on a card item. Primarily used to, but not contrained to, contain individual content of item collections.

View in Playground

Constructors

@Composable
fun Card(
    modifier: Modifier = Modifier,
    shape: Shape = MaterialTheme.shapes.medium,
    color: Color = MaterialTheme.colors.surface,
    contentColor: Color = contentColorFor(color),
    border: Border? = null,
    elevation: Dp = 1.dp,
    content: @Composable () -> Unit
)
  • modifier – modifier to be applied

  • shape – shaoe to be used for the card background

  • color – color to be used for the card surface

  • contentColor – color to be used for the card content

  • border – border to be applied to the card

  • elevation – elevation to be applied to the card

  • content – content to be displayed within the card

    • required

Examples

Minimal Card

Card {
    Text(
        text = "Jetpack Compose",
        modifier = Modifier.padding(16.dp)
    )
}

Alert dialog

Card with Multiple Children

Card {
    Column {
        Text(
            text = "Jetpack",
            modifier = Modifier.padding(16.dp)
        )
        Spacer(modifier = Modifier.preferredHeight(8.dp))
        Text(
            text = "Compose",
            modifier = Modifier.padding(16.dp)
        )
    }

}

Alert dialog

Card with Shape Background

Card(
    shape = RoundedCornerShape(3.dp)
) {
    Text(
        text = "Jetpack Compose",
        modifier = Modifier.padding(16.dp)
    )
}

Alert dialog

Card with Background Color

Card(
    color = Color.LightGray
) {
    Text(
        text = "Jetpack Compose",
        modifier = Modifier.padding(16.dp)
    )
}

Alert dialog

Card with Colored Content

Card(
    color = Color.Black,
    contentColor = Color.White
) {
    Text(
        text = "Jetpack Compose",
        modifier = Modifier.padding(16.dp)
    )
}

Card with colored content

Card with Border

Card(
    border = Border(2.dp, Color.Black)
) {
    Text(
        text = "Jetpack Compose",
        modifier = Modifier.padding(16.dp)
    )
}

Alert dialog

Card with Elevation

Card(
    elevation = 12.dp
) {
    Text(
        text = "Jetpack Compose",
        modifier = Modifier.padding(16.dp)
    )
}

Alert dialog