Card

Functions summary

Unit
@Composable
@NonRestartableComposable
Card(
    modifier: Modifier,
    shape: Shape,
    backgroundColor: Color,
    contentColor: Color,
    border: BorderStroke?,
    elevation: Dp,
    content: @Composable () -> Unit
)

Material Design card

Cmn
Unit
@ExperimentalMaterialApi
@Composable
@NonRestartableComposable
Card(
    onClick: () -> Unit,
    modifier: Modifier,
    enabled: Boolean,
    shape: Shape,
    backgroundColor: Color,
    contentColor: Color,
    border: BorderStroke?,
    elevation: Dp,
    interactionSource: MutableInteractionSource?,
    content: @Composable () -> Unit
)

Cards are Surfaces that display content and actions on a single topic.

Cmn

Functions

@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
): Unit

Material Design card

Cards contain content and actions about a single subject.

Cards
image

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

import androidx.compose.material.Card
import androidx.compose.material.Text

Card { Text("Card Content") }
Parameters
modifier: Modifier = Modifier

Modifier to be applied to the layout of the card.

shape: Shape = MaterialTheme.shapes.medium

Defines the card's shape as well its shadow. A shadow is only displayed if the elevation is greater than zero.

backgroundColor: Color = MaterialTheme.colors.surface

The background color.

contentColor: Color = contentColorFor(backgroundColor)

The 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.

border: BorderStroke? = null

Optional border to draw on top of the card

elevation: Dp = 1.dp

The z-coordinate at which to place this card. This controls the size of the shadow below the card.

content: @Composable () -> Unit

The content displayed on the 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? = null,
    content: @Composable () -> Unit
): Unit

Cards are Surfaces that display content and actions on a single topic.

This version of Card provides click handling as well. If you do not want Card to handle clicks, consider using another overload.

import androidx.compose.material.Card
import androidx.compose.material.Text
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember

var count by remember { mutableStateOf(0) }
Card(onClick = { count++ }) { Text("Clickable card content with count: $count") }
Parameters
onClick: () -> Unit

callback to be called when the card is clicked

modifier: Modifier = Modifier

Modifier to be applied to the layout of the card.

enabled: Boolean = true

Controls the enabled state of the card. When false, this card will not be clickable

shape: Shape = MaterialTheme.shapes.medium

Defines the card's shape as well its shadow. A shadow is only displayed if the elevation is greater than zero.

backgroundColor: Color = MaterialTheme.colors.surface

The background color.

contentColor: Color = contentColorFor(backgroundColor)

The 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.

border: BorderStroke? = null

Optional border to draw on top of the card

elevation: Dp = 1.dp

The z-coordinate at which to place this card. This controls the size of the shadow below the card.

interactionSource: MutableInteractionSource? = null

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: @Composable () -> Unit

The content displayed on the card.