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

← Back to Tv Material

Card

Component
in
Tv Material
. Since 1.0.0-alpha07

Overview

Code Examples

Video

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

This Card handles click events, calling its onClick lambda.

@param onClick called when this card is clicked @param modifier the Modifier to be applied to this card @param shape CardShape defines the shape of this card's container in different interaction states. See CardDefaults.shape. @param colors CardColors defines the background & content colors used in this card for different interaction states. See CardDefaults.colors. @param scale CardScale defines size of the card relative to its original size for different interaction states. See CardDefaults.scale. @param border CardBorder defines a border around the card for different interaction states. See CardDefaults.border. @param glow CardGlow defines a shadow to be shown behind the card for different interaction states. See CardDefaults.glow. @param interactionSource the MutableInteractionSource representing the stream of Interactions for this card. You can create and pass in your own remembered instance to observe Interactions and customize the appearance / behavior of this card in different states. @param content defines the Composable content inside the Card.

Overloads

Card

@ExperimentalTvMaterial3Api
@Composable
fun Card(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    shape: CardShape = CardDefaults.shape(),
    colors: CardColors = CardDefaults.colors(),
    scale: CardScale = CardDefaults.scale(),
    border: CardBorder = CardDefaults.border(),
    glow: CardGlow = CardDefaults.glow(),
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    content: @Composable ColumnScope.() -> Unit
)

Parameters

NameDescription
onClickcalled when this card is clicked
modifierthe Modifier to be applied to this card
shapeCardShape defines the shape of this card's container in different interaction states. See CardDefaults.shape.
colorsCardColors defines the background & content colors used in this card for different interaction states. See CardDefaults.colors.
scaleCardScale defines size of the card relative to its original size for different interaction states. See CardDefaults.scale.
borderCardBorder defines a border around the card for different interaction states. See CardDefaults.border.
glowCardGlow defines a shadow to be shown behind the card for different interaction states. See CardDefaults.glow.
interactionSourcethe MutableInteractionSource representing the stream of Interactions for this card. You can create and pass in your own remembered instance to observe Interactions and customize the appearance / behavior of this card in different states.
contentdefines the Composable content inside the Card