Composable Component

Card

Card is a component used to group related information into a single digestible unit.

RevenueCat

RevenueCat

Add subscriptions to your apps in minutes

Ad Get started for free

CardSample

@Composable
fun CardSample() {
    Card { Text("This is a card") }
}

CardWithTitleAndActionSample

@Composable
fun CardWithTitleAndActionSample() {
    Card(action = { Button(onClick = {}) { Text("Send") } }, title = { Text("Title") }) {
        Text("This is a card with a title and action")
    }
}

CardWithTitleAndHeaderSample

@Composable
fun CardWithTitleAndHeaderSample() {
    Card(
        title = { Text("Title") },
        header = {
            Image(MyHeaderImage, "Localized description", contentScale = ContentScale.FillWidth)
        },
    ) {
        Text("This is a card with a title and header image")
    }
}

CardWithTitleAndSubtitleAndLeadingIconSample

@Composable
fun CardWithTitleAndSubtitleAndLeadingIconSample() {
    Card(
        title = { Text("Title") },
        subtitle = { Text("Subtitle") },
        leadingIcon = { Icon(FavoriteIcon, "Localized description") },
    ) {
        Text("This is a card with a title, subtitle, and leading icon")
    }
}

CardWithTrailingIconSample

@Composable
fun CardWithTrailingIconSample() {
    Card(trailingIcon = { Icon(FavoriteIcon, "Localized description") }) {
        Text("This is a card with a trailing icon")
    }
}

ClickableCardSample

@Composable
fun ClickableCardSample() {
    Card(onClick = {}) { Text("This is a card") }
}

ClickableCardWithTitleAndHeaderSample

@Composable
fun ClickableCardWithTitleAndHeaderSample() {
    Card(
        onClick = {},
        title = { Text("Title") },
        header = {
            Image(MyHeaderImage, "Localized description", contentScale = ContentScale.FillWidth)
        },
    ) {
        Text("This is a card with a title and header image")
    }
}

ClickableCardWithTitleAndSubtitleAndLeadingIconSample

@Composable
fun ClickableCardWithTitleAndSubtitleAndLeadingIconSample() {
    Card(
        onClick = {},
        title = { Text("Title") },
        subtitle = { Text("Subtitle") },
        leadingIcon = { Icon(FavoriteIcon, "Localized description") },
    ) {
        Text("This is a card with a title, subtitle, and leading icon")
    }
}

ClickableCardWithTrailingIconSample

@Composable
fun ClickableCardWithTrailingIconSample() {
    Card(onClick = {}, trailingIcon = { Icon(FavoriteIcon, "Localized description") }) {
        Text("This is a card with a trailing icon")
    }
}