From 62d714471521f00bd6875b1aac2b3305c12a2338 Mon Sep 17 00:00:00 2001 From: anle9650 Date: Wed, 27 Dec 2023 18:34:09 -0700 Subject: [PATCH 1/3] Update cards.md --- docs/data/material/components/cards/cards.md | 20 ++++++++++++++++++-- 1 file changed, 18 insertions(+), 2 deletions(-) diff --git a/docs/data/material/components/cards/cards.md b/docs/data/material/components/cards/cards.md index 50a9a2d8af5b81..78fa12e6fd5e84 100644 --- a/docs/data/material/components/cards/cards.md +++ b/docs/data/material/components/cards/cards.md @@ -16,12 +16,28 @@ They should be easy to scan for relevant and actionable information. Elements, l {{"component": "modules/components/ComponentLinkHeader.js"}} -## Basic card +## Introduction -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. +The Material UI Card component includes several complementary utility components to handle various use cases: + +- 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. {{"demo": "BasicCard.js", "bg": true}} +## Basics + +```jsx +import Card from '@mui/material/Card'; +import CardContent from '@mui/material/CardContent'; +``` + +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. + ### Outlined Card Set `variant="outlined"` to render an outlined card. From 5969d62b20a3052d53eba1adcd84e9223b1c1fc0 Mon Sep 17 00:00:00 2001 From: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com> Date: Thu, 4 Jan 2024 17:06:33 -0600 Subject: [PATCH 2/3] Update docs/data/material/components/cards/cards.md Signed-off-by: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com> --- docs/data/material/components/cards/cards.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/docs/data/material/components/cards/cards.md b/docs/data/material/components/cards/cards.md index 78fa12e6fd5e84..3fbf534d2a93f9 100644 --- a/docs/data/material/components/cards/cards.md +++ b/docs/data/material/components/cards/cards.md @@ -36,7 +36,9 @@ import Card from '@mui/material/Card'; import CardContent from '@mui/material/CardContent'; ``` -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. +:::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 From 2d852f067c717427452938bf7a557e6271f2496b Mon Sep 17 00:00:00 2001 From: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com> Date: Thu, 4 Jan 2024 17:09:28 -0600 Subject: [PATCH 3/3] fix intro format --- docs/data/material/components/cards/cards.md | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/docs/data/material/components/cards/cards.md b/docs/data/material/components/cards/cards.md index 3fbf534d2a93f9..310c8699c460b5 100644 --- a/docs/data/material/components/cards/cards.md +++ b/docs/data/material/components/cards/cards.md @@ -10,14 +10,11 @@ materialDesign: https://m2.material.io/components/cards

Cards contain content and actions about a single subject.

-Cards are surfaces that display content and actions on a single topic. - -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. - {{"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: - Card: a surface-level container for grouping related components.