core/com.orange.ouds.core.component/OudsCardItem

OudsCardItem

fun OudsCardItem(label: String, modifier: Modifier = Modifier, verticalAlignment: OudsListItemVerticalAlignment = OudsListItemDefaults.VerticalAlignment, decoration: OudsListItemDecoration = OudsCardItemDefaults.Decoration, overline: String? = null, extraLabel: String? = null, description: String? = null, leading: OudsListItemLeading? = null, trailing: OudsListItemTrailing? = null, helperText: String? = null, boldLabel: Boolean = false, enabled: Boolean = true, interactionSource: MutableInteractionSource? = null)

TODO update description when available and add version and guideline link

Static card item displays non-clickable information in a card format with visual emphasis.

A static card item can be used to present read-only information in a contained format. Cards are ideal for displaying grouped content like product cards, destination highlights, or feature summaries. The card supports various decorations outlined, background with or without divider.

Parameters

label

The main label of the card item.

modifier

Modifier applied to the layout of the card item.

verticalAlignment

Controls the vertical alignment of the content. Defaults to OudsListItemVerticalAlignment.CenterVertically.

decoration

The decoration style of the card. Defaults to OudsListItemDecoration.Background (with divider).

overline

Optional text displayed above the label.

extraLabel

Optional strong accompanying label for the main label, displayed between the label and the description.

description

Optional text displayed below the label and extraLabel.

leading

Optional leading content such as an icon or image displayed at the start of the card item.

trailing

Optional trailing content such as an icon, image, or text displayed at the end of the card item.

helperText

Optional helper text displayed below the card item.

boldLabel

Controls whether the label text is displayed in bold. Defaults to false.

enabled

Controls the enabled state of the card item. When false, the content is displayed in a disabled state. Defaults to true.

interactionSource

Optional hoisted MutableInteractionSource for observing and emitting interactions for this card item.

Samples

Column(verticalArrangement = Arrangement.spacedBy(8.dp)) {
    OudsCardItem(
        label = "Hotel Paradise",
        description = "Luxury hotel in the city center",
        leading = OudsListItemLeading.Icon(
            imageVector = Icons.Outlined.LocationOn,
            contentDescription = "Location icon"
        ),
        trailing = OudsListItemTrailing.Text(label = "4.5★", style = OudsListItemTextStyle.LabelStrong)
    )
    OudsCardItem(
        label = "Beach Resort",
        description = "Relaxing resort by the sea",
        leading = OudsListItemLeading.Icon(
            imageVector = Icons.Outlined.Star,
            contentDescription = "Star icon"
        ),
        trailing = OudsListItemTrailing.Text(label = "4.8★", style = OudsListItemTextStyle.LabelStrong)
    )
}

OudsCardItem(
    overline = "Featured destination",
    label = "Paris, France",
    extraLabel = "Special offer",
    description = "Discover the city of lights with exclusive deals.",
    leading = OudsListItemLeading.Icon(
        imageVector = Icons.Outlined.Favorite,
        contentDescription = "Favorite icon"
    ),
    trailing = OudsListItemTrailing.Text(label = "From €299", style = OudsListItemTextStyle.LabelStrong),
    helperText = "Limited time offer - Book now!",
    boldLabel = true,
    decoration = OudsListItemDecoration.Background(divider = true)
)

OudsCardItem(
    label = "Premium Suite",
    description = "Spacious room with panoramic view",
    leading = OudsListItemLeading.Image(
        painter = CheckerboardPainter,
        contentDescription = "Suite image",
        size = OudsListItemImageSize.Large,
        ratio = OudsListItemImageRatio.Square
    ),
    trailing = OudsListItemTrailing.Text(label = "€450/night", style = OudsListItemTextStyle.LabelStrong),
    decoration = OudsListItemDecoration.Outlined
)

OudsCardItem(
    label = "Wishlist",
    description = "Your favorite destinations",
    leading = OudsListItemLeading.Icon(
        painter = rememberRainbowHeartPainter(),
        contentDescription = "Wishlist icon",
        tinted = false
    ),
    decoration = OudsListItemDecoration.Outlined
)

@Composable

fun OudsCardItem(label: String, modifier: Modifier = Modifier, onClick: () -> Unit, indicator: OudsListItemIndicator = OudsListItemDefaults.Indicator, verticalAlignment: OudsListItemVerticalAlignment = OudsListItemDefaults.VerticalAlignment, decoration: OudsListItemDecoration = OudsCardItemDefaults.Decoration, overline: String? = null, extraLabel: String? = null, description: String? = null, leading: OudsListItemLeading? = null, trailing: OudsListItemTrailing? = null, helperText: String? = null, boldLabel: Boolean = false, enabled: Boolean = true, interactionSource: MutableInteractionSource? = null)

TODO update description when available and add version and guideline link

Navigation card item allows users to navigate to another screen or perform an action in a card format.

A navigation card item is clickable and presented in a card format with visual emphasis. It can be used for navigable product cards, destination selections, or feature highlights. The indicator type can be customized to show forward navigation, backward navigation, or external links. The card supports various decorations to adapt to different visual styles: outlined, background with or without divider.

Parameters

label

The main label of the card item.

modifier

Modifier applied to the layout of the card item.

onClick

Callback invoked when the card item is clicked.

indicator

The navigation indicator to display. Defaults to OudsListItemIndicator.Next.

verticalAlignment

Controls the vertical alignment of the content. Defaults to OudsListItemVerticalAlignment.CenterVertically.

decoration

The decoration style of the card. Defaults to OudsListItemDecoration.Background (with divider).

overline

Optional text displayed above the label.

extraLabel

Optional strong accompanying label for the main label, displayed between the label and the description.

description

Optional text displayed below the label and extraLabel.

leading

Optional leading content such as an icon or image displayed at the start of the card item.

trailing

Optional trailing content such as an icon, image, or text displayed at the end of the card item.

helperText

Optional helper text displayed below the card item.

boldLabel

Controls whether the label text is displayed in bold. Defaults to false.

enabled

Controls the enabled state of the card item. When false, the item is not clickable and content is displayed in a disabled state. Defaults to true.

interactionSource

Optional hoisted MutableInteractionSource for observing and emitting interactions for this card item.

Samples

Column(verticalArrangement = Arrangement.spacedBy(8.dp)) {
    OudsCardItem(
        label = "Return to search",
        onClick = { /* Navigate back */ },
        indicator = OudsListItemIndicator.Previous,
        decoration = OudsListItemDecoration.Outlined
    )
    OudsCardItem(
        label = "View details",
        onClick = { /* Navigate forward */ },
        indicator = OudsListItemIndicator.Next,
        decoration = OudsListItemDecoration.Outlined
    )
    OudsCardItem(
        label = "Book on partner website",
        onClick = { /* Open browser */ },
        indicator = OudsListItemIndicator.External,
        decoration = OudsListItemDecoration.Outlined
    )
}

OudsCardItem(
    overline = "Featured destination",
    label = "Paris, France",
    extraLabel = "Special offer",
    description = "Discover the city of lights with exclusive deals.",
    leading = OudsListItemLeading.Icon(
        imageVector = Icons.Outlined.Favorite,
        contentDescription = "Favorite icon"
    ),
    trailing = OudsListItemTrailing.Text(label = "From €299", style = OudsListItemTextStyle.LabelStrong),
    helperText = "Limited time offer - Book now!",
    boldLabel = true,
    decoration = OudsListItemDecoration.Background(divider = true)
)

OudsCardItem(
    label = "Premium Suite",
    description = "Spacious room with panoramic view",
    leading = OudsListItemLeading.Image(
        painter = CheckerboardPainter,
        contentDescription = "Suite image",
        size = OudsListItemImageSize.Large,
        ratio = OudsListItemImageRatio.Square
    ),
    trailing = OudsListItemTrailing.Text(label = "€450/night", style = OudsListItemTextStyle.LabelStrong),
    decoration = OudsListItemDecoration.Outlined
)

OudsCardItem(
    label = "Wishlist",
    description = "Your favorite destinations",
    leading = OudsListItemLeading.Icon(
        painter = rememberRainbowHeartPainter(),
        contentDescription = "Wishlist icon",
        tinted = false
    ),
    decoration = OudsListItemDecoration.Outlined
)