OudsSmallCardItem class

OUDS Card Item Design Guidelines

Reference design version : 0.3.0

A compact card-formatted variant of OudsCardItem.

Compared to OudsCardItem, this variant omits overline and extraLabel and reuses the restricted leading / trailing model from OudsSmallListItem, while applying the card decoration defaults.

It always uses the grid margin for its horizontal padding, like an edge-to-edge OudsSmallListItem.

• leading accepts OudsSmallListItemLeadingIcon or OudsSmallListItemLeadingImage.
• trailing accepts OudsSmallListItemTrailingIcon, OudsSmallListItemTrailingImage, OudsSmallListItemTrailingText, OudsSmallListItemTrailingBadge or OudsSmallListItemTrailingTag.

Usage Example

OudsSmallCardItem(
  label: 'Messagerie',
  description: '3 notifications',
  leading: OudsSmallListItemLeadingIcon(Info()),
)

OudsSmallCardItem(
  label: 'Paiement',
  trailing: OudsSmallListItemTrailingText('99€'),
  onTap: () {},
)

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