OudsCardItem
TODO update description when available and add 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.
Design
| Name | Static Card Item |
| Version | 0.3.0 |
Parameters
The main label of the card item.
Modifier applied to the layout of the card item.
Controls the vertical alignment of the content. Defaults to OudsListItemVerticalAlignment.CenterVertically.
The decoration style of the card. Defaults to OudsListItemDecoration.Background (with divider).
Optional text displayed above the label.
Optional strong accompanying label for the main label, displayed between the label and the description.
Optional text displayed below the label and extraLabel.
Optional leading content such as an icon or image displayed at the start of the card item.
Optional trailing content such as an icon, image, or text displayed at the end of the card item.
Optional helper text displayed below the card item.
Controls whether the label text is displayed in bold. Defaults to false.
Optional custom content displayed at the bottom of the card item across the entire width, below the main row content. Use it when the information cannot be clearly represented by the standard description or helperText parameters.
Controls the enabled state of the card item. When false, the content is displayed in a disabled state. Defaults to true.
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)
)
}val contentColor = OudsTheme.colorScheme.content.default
OudsCardItem(
label = "Hotel Paradise",
description = "Luxury beachfront resort",
decoration = OudsListItemDecoration.Background(divider = true),
leading = OudsListItemLeading.Content {
Column(
modifier = Modifier
.size(56.dp)
.background(OudsTheme.colorScheme.surface.status.info.muted, RoundedCornerShape(8.dp)),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center
) {
Icon(
imageVector = Icons.Outlined.Star,
contentDescription = "Rating",
tint = OudsTheme.colorScheme.content.onStatus.warning.muted
)
Text(text = "4.8", style = OudsTheme.typography.label.medium.strong, color = contentColor)
}
},
trailing = OudsListItemTrailing.Content {
Text(text = "€299", style = OudsTheme.typography.label.large.strong, color = contentColor)
},
belowTextContent = {
Row(horizontalArrangement = Arrangement.spacedBy(4.dp)) {
OudsTag(label = "Pool", status = OudsTagStatus.Info(), size = OudsTagSize.Small)
OudsTag(label = "WiFi", status = OudsTagStatus.Info(), size = OudsTagSize.Small)
}
},
bottomContent = {
Text(
text = "Only 2 rooms available",
style = OudsTheme.typography.label.small.strong,
color = OudsTheme.colorScheme.content.status.warning
)
}
)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.Tag(status = OudsTagStatus.Positive(), label = "Available", size = OudsTagSize.Small),
decoration = OudsListItemDecoration.Outlined
)OudsCardItem(
label = "Messages",
description = "Unread notifications",
leading = OudsListItemLeading.Icon(
imageVector = Icons.Outlined.Email,
contentDescription = "Location icon"
),
trailing = OudsListItemTrailing.Badge(count = 5),
decoration = OudsListItemDecoration.Outlined
)OudsCardItem(
label = "Wishlist",
description = "Your favorite destinations",
leading = OudsListItemLeading.Icon(
painter = rememberRainbowHeartPainter(),
contentDescription = "Wishlist icon",
tinted = false
),
decoration = OudsListItemDecoration.Outlined
)TODO update description when available and add 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.
This version of the static card item allows to use a custom content in place of the label. Use it when the standard label cannot support the required content structure.
Design
| Name | Static Card Item |
| Version | 0.3.0 |
Parameters
Custom label content of the card item used for custom primary content such as: A product-specific text arrangement, a combination of text elements not supported by the standard properties.
Modifier applied to the layout of the card item.
Controls the vertical alignment of the content. Defaults to OudsListItemVerticalAlignment.CenterVertically.
The decoration style of the card. Defaults to OudsListItemDecoration.Background (with divider).
Optional text displayed above the label.
Optional strong accompanying label for the main label, displayed between the labelContent and the description.
Optional text displayed below the labelContent and extraLabel.
Optional leading content such as an icon or image displayed at the start of the card item.
Optional trailing content such as an icon, image, or text displayed at the end of the card item.
Optional helper text displayed below the card item.
Controls whether the label text is displayed in bold. Defaults to false.
Optional custom content displayed at the bottom of the card item across the entire width, below the main row content. Use it when the information cannot be clearly represented by the standard description or helperText parameters.
Controls the enabled state of the card item. When false, the content is displayed in a disabled state. Defaults to true.
Optional hoisted MutableInteractionSource for observing and emitting interactions for this card item.
Samples
val contentColor = OudsTheme.colorScheme.content.default
OudsCardItem(
labelContent = {
Row(
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.spacedBy(OudsTheme.spaces.fixed.extraSmall)
) {
Text(text = "Grand Hotel", style = OudsTheme.typography.label.large.strong, color = contentColor)
Row(
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.spacedBy(OudsTheme.spaces.fixed.threeExtraSmall)
) {
Icon(imageVector = Icons.Outlined.Star, contentDescription = null, modifier = Modifier.size(14.dp), tint = contentColor)
Text(text = "4.9", style = OudsTheme.typography.label.small.strong, color = contentColor)
}
}
},
description = "Historic 5-star hotel in city center",
decoration = OudsListItemDecoration.Background(divider = true),
leading = OudsListItemLeading.Image(
painter = CheckerboardPainter,
contentDescription = "Hotel image",
size = OudsListItemImageSize.Large,
ratio = OudsListItemImageRatio.Square
)
)TODO update description when available and add 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.
Design
| Name | Navigation Card Item |
| Version | 0.3.0 |
Parameters
The main label of the card item.
Modifier applied to the layout of the card item.
Callback invoked when the card item is clicked.
The navigation indicator to display. Defaults to OudsListItemIndicator.Next.
Controls the vertical alignment of the content. Defaults to OudsListItemVerticalAlignment.CenterVertically.
The decoration style of the card. Defaults to OudsListItemDecoration.Background (with divider).
Optional text displayed above the label.
Optional strong accompanying label for the main label, displayed between the label and the description.
Optional text displayed below the label and extraLabel.
Optional leading content such as an icon or image displayed at the start of the card item.
Optional trailing content such as an icon, image, or text displayed at the end of the card item.
Optional helper text displayed below the card item.
Controls whether the label text is displayed in bold. Defaults to false.
Optional custom content displayed at the bottom of the card item across the entire width, below the main row content. Use it when the information cannot be clearly represented by the standard description or helperText parameters.
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.
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
)
}val contentColor = OudsTheme.colorScheme.content.default
OudsCardItem(
label = "City Tour Package",
description = "Guided tour with transport",
onClick = { /* Book tour */ },
indicator = OudsListItemIndicator.Next,
decoration = OudsListItemDecoration.Outlined,
leading = OudsListItemLeading.Content {
Column(
modifier = Modifier
.size(56.dp)
.background(color = OudsTheme.colorScheme.surface.status.info.muted, shape = RoundedCornerShape(8.dp)),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center
) {
Icon(
imageVector = Icons.Outlined.Info,
contentDescription = "Duration",
tint = OudsTheme.colorScheme.content.onStatus.info.muted
)
Text(text = "3h", style = OudsTheme.typography.label.small.strong, color = contentColor)
}
},
trailing = OudsListItemTrailing.Content {
Column(horizontalAlignment = Alignment.End) {
Icon(imageVector = Icons.Outlined.Person, contentDescription = "People", modifier = Modifier.size(20.dp), tint = contentColor)
Text(text = "8/15", style = OudsTheme.typography.label.small.strong, color = contentColor)
}
},
belowTextContent = {
Row(horizontalArrangement = Arrangement.spacedBy(OudsTheme.spaces.fixed.twoExtraSmall)) {
OudsTag(label = "EN", status = OudsTagStatus.Info(), size = OudsTagSize.Small)
OudsTag(label = "FR", status = OudsTagStatus.Info(), size = OudsTagSize.Small)
}
},
bottomContent = {
OudsInlineAlert(
label = "Next departure in 30 minutes",
status = OudsInlineAlertStatus.Info
)
}
)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.Tag(status = OudsTagStatus.Positive(), label = "Available", size = OudsTagSize.Small),
decoration = OudsListItemDecoration.Outlined
)OudsCardItem(
label = "Messages",
description = "Unread notifications",
leading = OudsListItemLeading.Icon(
imageVector = Icons.Outlined.Email,
contentDescription = "Location icon"
),
trailing = OudsListItemTrailing.Badge(count = 5),
decoration = OudsListItemDecoration.Outlined
)OudsCardItem(
label = "Wishlist",
description = "Your favorite destinations",
leading = OudsListItemLeading.Icon(
painter = rememberRainbowHeartPainter(),
contentDescription = "Wishlist icon",
tinted = false
),
decoration = OudsListItemDecoration.Outlined
)TODO update description when available and add 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.
This version of the navigation card item allows to use a custom content in place of the label. Use it when the standard label cannot support the required content structure.
Design
| Name | Navigation Card Item |
| Version | 0.3.0 |
Parameters
Custom label content of the card item used for custom primary content such as: A product-specific text arrangement, a combination of text elements not supported by the standard properties. It must remain non-interactive. Do not place a link, button or control inside it because the complete item already acts as one navigation link.
Modifier applied to the layout of the card item.
Callback invoked when the card item is clicked.
The navigation indicator to display. Defaults to OudsListItemIndicator.Next.
Controls the vertical alignment of the content. Defaults to OudsListItemVerticalAlignment.CenterVertically.
The decoration style of the card. Defaults to OudsListItemDecoration.Background (with divider).
Optional text displayed above the label.
Optional strong accompanying label for the main label, displayed between the labelContent and the description.
Optional text displayed below the labelContent and extraLabel.
Optional leading content such as an icon or image displayed at the start of the card item.
Optional trailing content such as an icon, image, or text displayed at the end of the card item.
Optional helper text displayed below the card item.
Controls whether the label text is displayed in bold. Defaults to false.
Optional custom content displayed at the bottom of the card item across the entire width, below the main row content. Use it when the information cannot be clearly represented by the standard description or helperText parameters.
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.
Optional hoisted MutableInteractionSource for observing and emitting interactions for this card item.
Samples
val contentColor = OudsTheme.colorScheme.content.default
OudsCardItem(
labelContent = {
Row(
modifier = Modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.SpaceBetween,
verticalAlignment = Alignment.CenterVertically
) {
Text(text = "Amsterdam", style = OudsTheme.typography.label.large.strong, color = contentColor)
Column(horizontalAlignment = Alignment.End) {
Text(text = "from", style = OudsTheme.typography.label.small.default, color = contentColor)
Text(text = "€89", style = OudsTheme.typography.label.large.strong, color = contentColor)
}
}
},
onClick = { /* View flights */ },
indicator = OudsListItemIndicator.Next,
decoration = OudsListItemDecoration.Outlined,
description = "Direct flight • 1h 20min"
)