cards.md

layout	title	description
detail	Cards	Cards contain content and actions about a single subject.

---

Page Summary

• Specifications references
• Accessibility
• Variants
  • Vertical image first card
  • Vertical header first card
  • Small card
  • Horizontal card
• Component specific tokens

---

Specifications references

• Design System Manager - Cards
• Material Design - Cards
• Technical documentation soon available

Accessibility

Please follow accessibility criteria for development

Variants

Vertical image first card

This is a full width card containing elements arranged vertically with an image as first element.

Flutter implementation

Soon available

Vertical header first card

This is a full width card containing elements arranged vertically with a header (thumbnail, title & subtitle) as first element.

Flutter implementation

Soon available

Small card

This is a small card which takes the half screen width.

Flutter implementation

You can add an OdsSmallCard in your screen to add a small card:

Soon available

Horizontal card

This is a full screen width card with an image on the side. The image can be displayed on the left or on the right.

Flutter implementation

In your screen you can use OdsHorizontalCard composable:

return OdsHorizontalCard(
  title: "Title",
  image: OdsCardImage(
    imageProvider: NetworkImage(recipe.url),
    contentDescription: 'Picture content description', //Optional
    alignment: Alignment.center, //Optional. Center by default.
    contentScale: BoxFit.cover, //Optional. BoxFit.cover by default.
  ),
  subtitle: "Subtitle", //Optional
  text: "Text", //Optional
  firstButton: OdsOutlinedButton(text: "First button", onClick: () {}), //Optional
  secondButton: OdsButton(text: "Second button", onClick: () {}), //Optional
  imagePosition: OdsHorizontalCardImagePosition.start, //Optional. Start by default.
  divider: false, // Optional. True by default.
  onClick: () {},
);

Component specific tokens

Soon available