[material-ui][docs] Add docs for complementary Card components (#40346)

docs/data/material/components/cards/cards.md

@@ -10,17 +10,32 @@ materialDesign: https://m2.material.io/components/cards
 
 <p class="description">Cards contain content and actions about a single subject.</p>
 
+{{"component": "modules/components/ComponentLinkHeader.js"}}
+
+## Introduction
+
 Cards are surfaces that display content and actions on a single topic.
+The Material UI Card component includes several complementary utility components to handle various use cases:
 
-They should be easy to scan for relevant and actionable information. Elements, like text and images, should be placed on them in a way that clearly indicates hierarchy.
+- Card: a surface-level container for grouping related components.
+- Card Content: the wrapper for the Card content.
+- Card Header: an optional wrapper for the Card header.
+- Card Media: an optional container for displaying background images and gradient layers behind the Card Content.
+- Card Actions: an optional wrapper that groups a set of buttons.
+- Card Action Area: an optional wrapper that allows users to interact with the specified area of the Card.
 
-{{"component": "modules/components/ComponentLinkHeader.js"}}
+{{"demo": "BasicCard.js", "bg": true}}
 
-## Basic card
+## Basics
 
-Although cards can support multiple actions, UI controls, and an overflow menu, use restraint and remember that cards are entry points to more complex and detailed information.
+```jsx
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+```
 
-{{"demo": "BasicCard.js", "bg": true}}
+:::success
+Although cards can support multiple actions, UI controls, and an overflow menu, use restraint and remember that cards are meant to be entry points to more complex and detailed information.
+:::
 
 ### Outlined Card