Compose Component

ImageCard

ImageCard is a version of a card that contains a primary image that is placed at the top of the card.

ImageCardSample

@Sampled
@Composable
fun ImageCardSample() {
    ImageCard(
        image = { Image(MyImage, "Localized description", contentScale = ContentScale.FillWidth) }
    ) {
        Text("This is an image card")
    }
}

ImageCardWithTitleAndSubtitleAndLeadingIconSample

@Sampled
@Composable
fun ImageCardWithTitleAndSubtitleAndLeadingIconSample() {
    ImageCard(
        image = { Image(MyImage, "Localized description", contentScale = ContentScale.FillWidth) },
        title = { Text("Title") },
        subtitle = { Text("Subtitle") },
        leadingIcon = { Icon(FavoriteIcon, "Localized description") },
    ) {
        Text("This is an image card with a title, subtitle, and leading icon")
    }
}

ClickableImageCardSample

@Sampled
@Composable
fun ClickableImageCardSample() {
    ImageCard(
        onClick = {},
        image = { Image(MyImage, "Localized description", contentScale = ContentScale.FillWidth) },
    ) {
        Text("This is an image card")
    }
}

ClickableImageCardWithTitleAndSubtitleAndLeadingIconSample

@Sampled
@Composable
fun ClickableImageCardWithTitleAndSubtitleAndLeadingIconSample() {
    ImageCard(
        onClick = {},
        image = { Image(MyImage, "Localized description", contentScale = ContentScale.FillWidth) },
        title = { Text("Title") },
        subtitle = { Text("Subtitle") },
        leadingIcon = { Icon(FavoriteIcon, "Localized description") },
    ) {
        Text("This is an image card with a title, subtitle, and leading icon")
    }
}

// -------------------------------------------------------------------------------------------------
// Leading/Trailing ImageCard samples
// -------------------------------------------------------------------------------------------------

Content updated: