OudsCardItem class

OUDS Card Item Design Guidelines

OUDS Navigation Card Item Design Guidelines

Reference design version : 0.3.0

A card-formatted variant of OudsListItem.

OudsCardItem keeps the rich content model of list item — overline, label, extra label, description, leading and trailing slots — while applying the card decoration defaults. It is ideal for read-only summaries, grouped content and navigable cards with stronger visual emphasis.

The component keeps the default list-item density and always uses the grid margin for its horizontal padding, like an edge-to-edge OudsListItem.

Usage Example

OudsCardItem(
  label: 'Plan 200 Go',
  overline: 'Mobile',
  extraLabel: 'Sans engagement',
  description: '5G en France et en Europe',
  leading: OudsListItemLeadingIcon(Positive()),
)

OudsCardItem(
  label: 'Voir le détail',
  description: 'Ouvre une nouvelle page',
  onTap: () {},
)

OudsCardItem.labelContent(
  labelContent: (context, state) => Text('Custom label content'),
  description: 'Ouvre une nouvelle page',
)

// Card with an image loaded from the network and a custom
// placeholder shown while loading (and if loading fails)
OudsCardItem(
  label: 'Product',
  leading: OudsListItemLeadingImage.provider(
    provider: NetworkImage('https://example.com/photo.jpg'),
    semanticsLabel: 'Product photo',
    placeholder: Image.asset('assets/placeholder.jpg'),
  ),
)