Card Transform

The v6 card is more basic and used for creating layouts. Our v7 Card has a more intricate design and is intended for grouping information. For backwards compatibility and an easier uplift experience, the v7 Layout component was created to be a more direct replacement for the v6 Card component.

Converts a v6 Card or CardRounded, component to a v7 Layout component.
Converts a v6 CardActionable components to a v7 CardActionable component (Layout is not applicable since CardActionable is interactable).

Automatic Changes

Renames Card to Layout
Renames CardRounded to Layout
Wraps the children of CardActionable in a div
Removes the accentBarBg prop, which has been deprecated.
Removes the type prop, which has been deprecated.
Removes the showAccentBar prop, which has been deprecated.
Attempts to transform the deprecated theme prop to the className prop. If it cannot, deletes the theme prop.

Manual Changes

A newly designed Card component with additional layout components

If you are interested in using the v7 Card, which makes it even easier to get a beautiful layout, there are now 4 additional layout components that can be used as children of the Card component:

CardMedia is a wrapper for an image or video for the Card
CardLayout is a wrapper for CardContent and CardActions
CardContent is a wrapper for the body of the card, along with slots for an optional icon, title, and subtitle
CardActions is a wrapper for any actions associated with the Card. This should only be used for the Card component and never the CardActionable component, as actions within an actionable card are inaccessible.

For the best experience, we strongly recommend moving the parts of the v6 card into these layout components for v7. See the DLS v7 documentation for more information.