Card

CardSample

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

CardWithTrailingIconSample

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

CardWithTitleAndSubtitleAndLeadingIconSample

@Sampled
@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")
    }
}

NonFocusableCardWithButtonGroupSample

@Sampled
@Composable
fun NonFocusableCardWithButtonGroupSample() {
    Column(verticalArrangement = Arrangement.spacedBy(GlimmerTheme.componentSpacingValues.large)) {
        Card(focusable = false) { Text("This is a non-focusable card with a button group") }
        ButtonGroup(modifier = Modifier.fillMaxWidth()) {
            Button(onClick = {}) { Text("Button 1") }
            Button(onClick = {}) { Text("Button 2") }
            Button(onClick = {}) { Text("Button 3") }
        }
    }
}

// -------------------------------------------------------------------------------------------------
// ActionCard samples
// -------------------------------------------------------------------------------------------------

ClickableCardSample

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

ClickableCardWithTrailingIconSample

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

ClickableCardWithTitleAndSubtitleAndLeadingIconSample

@Sampled
@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")
    }
}