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

← Back to Tv Material

CompactCard

Component
in
Tv Material
. Since 1.0.0-alpha07

Overview

Code Examples

Video

CompactCard is an opinionated TV Material card that offers a 4 slot layout to show information about a subject.

This card provides the interactive surface Surface with the image slot as the background (with an overlay scrim gradient). Other slots for the title, subtitle, and description are placed over it.

This Card handles click events, calling its onClick lambda.

@param onClick called when this card is clicked @param image defines the Composable image to be displayed on top of the Card. @param title defines the Composable title placed below the image in the Card. @param modifier the Modifier to be applied to this card. @param subtitle defines the Composable supporting text placed below the title of the Card. @param description defines the Composable description placed below the subtitle of the 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.compactCardColors. @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 scrimBrush Brush defines a brush/gradient to be used to draw the scrim over the image in the background. See CardDefaults.ContainerGradient. @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.

Overloads

CompactCard

@ExperimentalTvMaterial3Api
@Composable
fun CompactCard(
    onClick: () -> Unit,
    image: @Composable BoxScope.() -> Unit,
    title: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    subtitle: @Composable () -> Unit = {},
    description: @Composable () -> Unit = {},
    shape: CardShape = CardDefaults.shape(),
    colors: CardColors = CardDefaults.compactCardColors(),
    scale: CardScale = CardDefaults.scale(),
    border: CardBorder = CardDefaults.border(),
    glow: CardGlow = CardDefaults.glow(),
    scrimBrush: Brush = CardDefaults.ContainerGradient,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }
)

Parameters

NameDescription
onClickcalled when this card is clicked
imagedefines the Composable image to be displayed on top of the Card.
titledefines the Composable title placed below the image in the Card.
modifierthe Modifier to be applied to this card.
subtitledefines the Composable supporting text placed below the title of the Card.
descriptiondefines the Composable description placed below the subtitle of the 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.compactCardColors.
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.
scrimBrushBrush defines a brush/gradient to be used to draw the scrim over the image in the background. See CardDefaults.ContainerGradient.
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