OudsListItem
Static list item displays non-clickable information in a structured format. They are designed to be stacked within a list, with no spacing between the elements.
A static list item can be used to present read-only information such as contact details, product specifications, or settings values. These items are designed to be stacked within a list, with no spacing between the elements.
Design
| Name | Static List Item |
| Guidelines | unified-design-system.orange.com |
| Version | 0.3.0 |
Parameters
The main label of the list item.
Modifier applied to the layout of the list item.
Controls the vertical alignment of the content. Defaults to OudsListItemVerticalAlignment.CenterVertically.
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 list item.
Optional trailing content such as an icon, image, or text displayed at the end of the list item.
Controls the display of a divider at the bottom of the list item. Defaults to true.
Controls whether the list item has a background color. Defaults to false.
Optional helper text displayed below the list item.
Controls whether the label text is displayed in bold. Defaults to false.
Optional custom content displayed at the bottom of the list 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. Note that no default padding is applied; you must provide your own padding if needed.
Controls the enabled state of the list item. When false, the content is displayed in a disabled state. Defaults to true.
Controls the horizontal layout of the item. When true, the item is designed to span the full width of the screen or container. When false, it is adapted for use within constrained layouts or containers with their own padding. Defaults to true.
Optional hoisted MutableInteractionSource for observing and emitting interactions for this list item.
See also
If you need spaced items displayed in a card format (with background or outlined).
Samples
Column {
OudsListItem(
label = "Name",
description = "John Doe",
leading = OudsListItemLeading.Icon(
imageVector = Icons.Outlined.Person,
contentDescription = "Person icon"
)
)
OudsListItem(
label = "Email",
description = "john.doe@example.com",
leading = OudsListItemLeading.Icon(
imageVector = Icons.Outlined.Email,
contentDescription = "Email icon"
)
)
OudsListItem(
label = "Phone",
description = "+33 6 12 34 56 78",
leading = OudsListItemLeading.Icon(
imageVector = Icons.Outlined.Phone,
contentDescription = "Phone icon"
)
)
}OudsListItem(
label = "John Doe",
description = "john.doe@example.com",
leading = OudsListItemLeading.Content {
Box(
modifier = Modifier
.size(40.dp)
.background(OudsTheme.colorScheme.surface.status.positive.muted, CircleShape),
contentAlignment = Alignment.Center
) {
Icon(
imageVector = Icons.Outlined.Person,
contentDescription = "User",
tint = OudsTheme.colorScheme.content.onStatus.positive.muted
)
}
},
trailing = OudsListItemTrailing.Content {
Icon(
imageVector = Icons.Outlined.CheckCircle,
contentDescription = "Verified",
tint = OudsTheme.colorScheme.content.status.positive
)
},
belowTextContent = {
Row(horizontalArrangement = Arrangement.spacedBy(OudsTheme.spaces.fixed.twoExtraSmall)) {
OudsTag(label = "Admin", status = OudsTagStatus.Positive(), size = OudsTagSize.Small)
OudsTag(label = "Active", status = OudsTagStatus.Info(), size = OudsTagSize.Small)
}
},
bottomContent = {
Text(
text = "Last login: 2 hours ago",
style = OudsTheme.typography.label.small.default,
color = OudsTheme.colorScheme.content.muted
)
}
)OudsListItem(
overline = "Overline text",
label = "Main label",
extraLabel = "Extra label",
description = "This is a description that provides additional context.",
leading = OudsListItemLeading.Icon(
imageVector = Icons.Outlined.Favorite,
contentDescription = "Favorite icon"
),
trailing = OudsListItemTrailing.Text(label = "99+", style = OudsListItemTextStyle.Label),
helperText = "Helper text appears below the item",
boldLabel = true,
background = true,
divider = true
)OudsListItem(
label = "Product name",
description = "Product description with details",
leading = OudsListItemLeading.Image(
painter = CheckerboardPainter,
contentDescription = "Product image",
size = OudsListItemImageSize.Large,
ratio = OudsListItemImageRatio.Square
),
trailing = OudsListItemTrailing.Tag(status = OudsTagStatus.Positive(asset = null), label = "Available", size = OudsTagSize.Small)
)OudsListItem(
label = "Messages",
description = "Unread notifications",
leading = OudsListItemLeading.Icon(
imageVector = Icons.Outlined.Email,
contentDescription = "Messages icon"
),
trailing = OudsListItemTrailing.Badge(count = 5)
)OudsListItem(
label = "Favorites",
description = "View your favorite items",
leading = OudsListItemLeading.Icon(
painter = rememberRainbowHeartPainter(),
contentDescription = "Favorites icon",
tinted = false
)
)Static list item displays non-clickable information in a structured format. They are designed to be stacked within a list, with no spacing between the elements.
A static list item can be used to present read-only information such as contact details, product specifications, or settings values. These items are designed to be stacked within a list, with no spacing between the elements.
This version of the static list 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 List Item |
| Guidelines | unified-design-system.orange.com |
| Version | 0.3.0 |
Parameters
Custom label content of the list item used for custom primary content such as: A product-specific text arrangement, a combination of text elements not supported by the standard properties. Note that no default padding is applied; you must provide your own padding if needed.
Modifier applied to the layout of the list item.
Controls the vertical alignment of the content. Defaults to OudsListItemVerticalAlignment.CenterVertically.
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 list item.
Optional trailing content such as an icon, image, or text displayed at the end of the list item.
Controls the display of a divider at the bottom of the list item. Defaults to true.
Controls whether the list item has a background color. Defaults to false.
Optional helper text displayed below the list item.
Controls whether the label text is displayed in bold. Defaults to false.
Optional custom content displayed at the bottom of the list 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. Note that no default padding is applied; you must provide your own padding if needed.
Controls the enabled state of the list item. When false, the content is displayed in a disabled state. Defaults to true.
Controls the horizontal layout of the item. When true, the item is designed to span the full width of the screen or container. When false, it is adapted for use within constrained layouts or containers with their own padding. Defaults to true.
Optional hoisted MutableInteractionSource for observing and emitting interactions for this list item.
See also
If you need spaced items displayed in a card format (with background or outlined).
Samples
OudsListItem(
labelContent = {
Row(
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.spacedBy(OudsTheme.spaces.fixed.extraSmall)
) {
Text(text = "Premium Account", style = OudsTheme.typography.label.large.strong, color = OudsTheme.colorScheme.content.default)
OudsTag(label = "VIP", status = OudsTagStatus.Warning(), size = OudsTagSize.Small)
}
},
description = "Full access to all features",
leading = OudsListItemLeading.Icon(
imageVector = Icons.Outlined.Star,
contentDescription = "Premium icon"
)
)Navigation list item allows users to navigate to another screen or perform an action. They are designed to be stacked within a list, with no spacing between the elements.
A navigation list item is clickable and typically includes a navigation indicator. It can be used for menu items, settings options, or any interactive list that leads to another destination. The indicator type can be customized to show forward navigation, backward navigation, or external links. These items are designed to be stacked within a list, with no spacing between the elements.
Parameters
The main label of the list item.
Callback invoked when the list item is clicked.
Modifier applied to the layout of the list item.
The navigation indicator to display. Defaults to OudsListItemIndicator.Next.
Controls the vertical alignment of the content. Defaults to OudsListItemVerticalAlignment.CenterVertically.
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 list item.
Optional trailing content such as an icon, image, or text displayed at the end of the list item.
Controls the display of a divider at the bottom of the list item. Defaults to true.
Controls whether the list item has a background color. Defaults to false.
Optional helper text displayed below the list item.
Controls whether the label text is displayed in bold. Defaults to false.
Optional custom content displayed at the bottom of the list 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. Note that no default padding is applied; you must provide your own padding if needed.
Controls the enabled state of the list item. When false, the item is not clickable and content is displayed in a disabled state. Defaults to true.
Controls the horizontal layout of the item. When true, the item is designed to span the full width of the screen or container. When false, it is adapted for use within constrained layouts or containers with their own padding. Defaults to true.
Optional hoisted MutableInteractionSource for observing and emitting interactions for this list item.
See also
If you need spaced items displayed in a card format (with background or outlined).
Design guidelines: unified-design-system.orange.com
Design name: Navigation List Item
Design version: 0.3.0
Samples
Column {
OudsListItem(
label = "Back to previous screen",
onClick = { /* Navigate back */ },
indicator = OudsListItemIndicator.Previous
)
OudsListItem(
label = "Go to next screen",
onClick = { /* Navigate forward */ },
indicator = OudsListItemIndicator.Next
)
OudsListItem(
label = "Open external link",
onClick = { /* Open browser */ },
indicator = OudsListItemIndicator.External
)
}OudsListItem(
label = "Paris Office",
description = "123 Champs-Élysées",
onClick = { /* Navigate */ },
indicator = OudsListItemIndicator.Next,
leading = OudsListItemLeading.Content {
Box(
modifier = Modifier
.size(40.dp)
.background(OudsTheme.colorScheme.surface.status.info.muted, RoundedCornerShape(8.dp)),
contentAlignment = Alignment.Center
) {
Icon(
imageVector = Icons.Outlined.LocationOn,
contentDescription = "Location",
tint = OudsTheme.colorScheme.content.onStatus.info.muted
)
}
},
trailing = OudsListItemTrailing.Content {
Text(text = "2.5 km", style = OudsTheme.typography.label.medium.strong)
},
belowTextContent = {
Row(horizontalArrangement = Arrangement.spacedBy(OudsTheme.spaces.fixed.twoExtraSmall)) {
OudsTag(label = "WiFi", status = OudsTagStatus.Info(), size = OudsTagSize.Small)
OudsTag(label = "Parking", status = OudsTagStatus.Info(), size = OudsTagSize.Small)
}
},
bottomContent = {
Text(
text = "Open Mon-Fri: 9:00 - 18:00",
style = OudsTheme.typography.label.small.default,
color = OudsTheme.colorScheme.content.muted
)
}
)OudsListItem(
overline = "Overline text",
label = "Main label",
extraLabel = "Extra label",
description = "This is a description that provides additional context.",
leading = OudsListItemLeading.Icon(
imageVector = Icons.Outlined.Favorite,
contentDescription = "Favorite icon"
),
trailing = OudsListItemTrailing.Text(label = "99+", style = OudsListItemTextStyle.Label),
helperText = "Helper text appears below the item",
boldLabel = true,
background = true,
divider = true
)OudsListItem(
label = "Product name",
description = "Product description with details",
leading = OudsListItemLeading.Image(
painter = CheckerboardPainter,
contentDescription = "Product image",
size = OudsListItemImageSize.Large,
ratio = OudsListItemImageRatio.Square
),
trailing = OudsListItemTrailing.Tag(status = OudsTagStatus.Positive(asset = null), label = "Available", size = OudsTagSize.Small)
)OudsListItem(
label = "Messages",
description = "Unread notifications",
leading = OudsListItemLeading.Icon(
imageVector = Icons.Outlined.Email,
contentDescription = "Messages icon"
),
trailing = OudsListItemTrailing.Badge(count = 5)
)OudsListItem(
label = "Favorites",
description = "View your favorite items",
leading = OudsListItemLeading.Icon(
painter = rememberRainbowHeartPainter(),
contentDescription = "Favorites icon",
tinted = false
)
)Navigation list item allows users to navigate to another screen or perform an action. They are designed to be stacked within a list, with no spacing between the elements.
A navigation list item is clickable and typically includes a navigation indicator. It can be used for menu items, settings options, or any interactive list that leads to another destination. The indicator type can be customized to show forward navigation, backward navigation, or external links. These items are designed to be stacked within a list, with no spacing between the elements.
This version of the navigation list 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 List Item |
| Guidelines | unified-design-system.orange.com |
| Version | 0.3.0 |
Parameters
Custom label content of the list 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. Note that no default padding is applied; you must provide your own padding if needed.
Callback invoked when the list item is clicked.
Modifier applied to the layout of the list item.
The navigation indicator to display. Defaults to OudsListItemIndicator.Next.
Controls the vertical alignment of the content. Defaults to OudsListItemVerticalAlignment.CenterVertically.
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 list item.
Optional trailing content such as an icon, image, or text displayed at the end of the list item.
Controls the display of a divider at the bottom of the list item. Defaults to true.
Controls whether the list item has a background color. Defaults to false.
Optional helper text displayed below the list item.
Controls whether the label text is displayed in bold. Defaults to false.
Optional custom content displayed at the bottom of the list 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. Note that no default padding is applied; you must provide your own padding if needed.
Controls the enabled state of the list item. When false, the item is not clickable and content is displayed in a disabled state. Defaults to true.
Controls the horizontal layout of the item. When true, the item is designed to span the full width of the screen or container. When false, it is adapted for use within constrained layouts or containers with their own padding. Defaults to true.
Optional hoisted MutableInteractionSource for observing and emitting interactions for this list item.
See also
If you need spaced items displayed in a card format (with background or outlined).
Samples
OudsListItem(
labelContent = {
Column(verticalArrangement = Arrangement.spacedBy(OudsTheme.spaces.fixed.threeExtraSmall)) {
Text(text = "Special Offer", style = OudsTheme.typography.label.large.strong, color = OudsTheme.colorScheme.content.default)
Text(
text = "Save 30% this month",
style = OudsTheme.typography.label.medium.strong,
color = OudsTheme.colorScheme.content.status.positive
)
}
},
onClick = { /* View offer */ },
indicator = OudsListItemIndicator.Next,
description = "Limited time promotion",
leading = OudsListItemLeading.Icon(
imageVector = Icons.Outlined.Favorite,
contentDescription = "Offer icon"
)
)