OudsCard class

OUDS Content Card Container design guidelines

Reference design version : 1.0.0

A Content Container Card groups related information within a single surface. The card itself is not interactive, but it can contain independently interactive elements, such as buttons and links. Its content is customizable through a slot, allowing designers to adapt the internal layout without changing the behavior of the container.

Corner rounding is shared with content cards through OudsThemeConfigModel(card: OudsCardConfig(rounded: true), child: ...).

The following parameters are available:

• style: Style of the card among OudsCardStyle values, filled by default.
• enabled: Controls the enabled state of the card. When false, the OUDS components inside will be in disabled state..
• backgroundColor: Background for filled and elevated cards; transparent when omitted.
• divider: Whether to draw a bottom divider. Only applies to filled cards.
• skeleton: A placeholder displayed instead of the card while content is loading.
• child: Content with independently accessible actions and caller-defined padding.

OudsCard(
  semanticsLabel: 'Manage your mobile plan',
  style: OudsCardStyle.outlined,
  child: Column(
    mainAxisSize: MainAxisSize.min,
    children: [
      Text('200 GB plan'),
      OudsLink(label: 'View plan', onPressed: () {}),
      OudsLink(label: 'Manage options', onPressed: () {}),
    ],
  ),
)