WideCardContainer

Composable Component

WideCardContainer is an opinionated TV Material Card layout with an image and text content to show information about a subject.

Wide Card Container

Android
@Composable
fun WideCardContainer(
    imageCard: @Composable (interactionSource: MutableInteractionSource) -> Unit,
    title: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    subtitle: @Composable () -> Unit = {},
    description: @Composable () -> Unit = {},
    contentColor: CardContainerColors = CardContainerDefaults.contentColor(),
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
)

Parameters

imageCarddefines the Composable to be used for the image card.
titledefines the Composable title placed below the image card in the CardContainer.
modifierthe Modifier to be applied to this CardContainer.
subtitledefines the Composable supporting text placed below the title in CardContainer.
descriptiondefines the Composable description placed below the subtitle in CardContainer.
contentColorCardContainerColors defines the content color used in the CardContainer for different interaction states. See CardContainerDefaults.contentColor.
interactionSourcea hoisted MutableInteractionSource for observing and emitting Interactions for this CardContainer. This interaction source param would also be forwarded to be used with the imageCard composable.

Code Examples

WideCardContainerSample

@Composable
fun WideCardContainerSample() {
    WideCardContainer(
        modifier = Modifier.size(180.dp, 100.dp),
        imageCard = { interactionSource ->
            Card(onClick = {}, interactionSource = interactionSource) {
                Box(modifier = Modifier.fillMaxWidth().height(90.dp).background(Color.Blue))
            }
        },
        title = { Text("Wide Card", Modifier.padding(start = 8.dp)) },
    )
}