core/com.orange.ouds.core.component/OudsSmallCardItem

OudsSmallCardItem

fun OudsSmallCardItem(label: String, modifier: Modifier = Modifier, contentAlignment: OudsListItemContentAlignment = OudsListItemDefaults.ContentAlignment, decoration: OudsListItemDecoration = OudsCardItemDefaults.Decoration, description: String? = null, leading: OudsSmallListItemLeading? = null, trailing: OudsSmallListItemTrailing? = 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 small card item displays non-clickable information in a compact card format.

A static small card item combines the compact size of a small list item with the visual emphasis of a card. It is ideal for displaying condensed, grouped content in a contained format, such as compact feature cards, quick access tiles, or dense information grids. Unlike the standard card item, it omits overline and extra label to maintain a smaller footprint.

Parameters

label

The main label of the small card item.

modifier

Modifier applied to the layout of the small card item.

contentAlignment

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

decoration

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

description

Optional text displayed below the label.

leading

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

trailing

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

helperText

Optional helper text displayed below the small card item.

boldLabel

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

enabled

Controls the enabled state of the small 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 small card item.

Samples

Column(verticalArrangement = Arrangement.spacedBy(8.dp)) {
    OudsSmallCardItem(
        label = "Notifications",
        description = "3 new alerts",
        leading = OudsSmallListItemLeading.Icon(
            imageVector = Icons.Outlined.Notifications,
            contentDescription = "Notifications icon"
        ),
        decoration = OudsListItemDecoration.Outlined
    )
    OudsSmallCardItem(
        label = "Important",
        description = "Requires attention",
        leading = OudsSmallListItemLeading.Icon(
            imageVector = Icons.Outlined.Info,
            contentDescription = "Info icon"
        ),
        decoration = OudsListItemDecoration.Outlined
    )
}

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

OudsSmallCardItem(
    label = "Special offer",
    description = "Limited time only",
    leading = OudsSmallListItemLeading.Image(
        painter = CheckerboardPainter,
        contentDescription = "Offer image",
        ratio = OudsListItemImageRatio.Square
    ),
    trailing = OudsSmallListItemTrailing.Text(label = "-50%", style = OudsListItemTextStyle.LabelStrong),
    decoration = OudsListItemDecoration.Outlined
)

OudsSmallCardItem(
    label = "Featured",
    description = "Exclusive content",
    leading = OudsSmallListItemLeading.Icon(
        painter = rememberRainbowHeartPainter(),
        contentDescription = "Featured icon",
        tinted = false
    ),
    decoration = OudsListItemDecoration.Outlined
)

@Composable

fun OudsSmallCardItem(label: String, modifier: Modifier = Modifier, onClick: () -> Unit, indicator: OudsListItemIndicator = OudsListItemDefaults.Indicator, contentAlignment: OudsListItemContentAlignment = OudsListItemDefaults.ContentAlignment, decoration: OudsListItemDecoration = OudsCardItemDefaults.Decoration, description: String? = null, leading: OudsSmallListItemLeading? = null, trailing: OudsSmallListItemTrailing? = 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 small card item allows users to navigate to another screen or perform an action in a compact card format.

A navigation small card item combines the compact size of a small list item with the visual emphasis of a card, while remaining interactive. It is ideal for compact, navigable feature cards, quick action tiles, or dense interactive grids. The indicator type can be customized to show forward navigation, backward navigation, or external links. Unlike the standard card item, it omits overline and extra label to maintain a smaller footprint while remaining clickable.

Parameters

label

The main label of the small card item.

modifier

Modifier applied to the layout of the small card item.

onClick

Callback invoked when the small card item is clicked.

indicator

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

contentAlignment

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

decoration

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

description

Optional text displayed below the label.

leading

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

trailing

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

helperText

Optional helper text displayed below the small card item.

boldLabel

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

enabled

Controls the enabled state of the small 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 small card item.

Samples

Column(verticalArrangement = Arrangement.spacedBy(8.dp)) {
    OudsSmallCardItem(
        label = "Previous",
        onClick = { /* Navigate back */ },
        indicator = OudsListItemIndicator.Previous,
        decoration = OudsListItemDecoration.Outlined
    )
    OudsSmallCardItem(
        label = "Next",
        onClick = { /* Navigate forward */ },
        indicator = OudsListItemIndicator.Next,
        decoration = OudsListItemDecoration.Outlined
    )
    OudsSmallCardItem(
        label = "External",
        onClick = { /* Open browser */ },
        indicator = OudsListItemIndicator.External,
        decoration = OudsListItemDecoration.Outlined
    )
}

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

OudsSmallCardItem(
    label = "Special offer",
    description = "Limited time only",
    leading = OudsSmallListItemLeading.Image(
        painter = CheckerboardPainter,
        contentDescription = "Offer image",
        ratio = OudsListItemImageRatio.Square
    ),
    trailing = OudsSmallListItemTrailing.Text(label = "-50%", style = OudsListItemTextStyle.LabelStrong),
    decoration = OudsListItemDecoration.Outlined
)

OudsSmallCardItem(
    label = "Featured",
    description = "Exclusive content",
    leading = OudsSmallListItemLeading.Icon(
        painter = rememberRainbowHeartPainter(),
        contentDescription = "Featured icon",
        tinted = false
    ),
    decoration = OudsListItemDecoration.Outlined
)