From f0d317088390dd36a5a4818eefdce57c8cd4cb8c Mon Sep 17 00:00:00 2001 From: "Kaishan (Sam) Ding" Date: Wed, 2 Oct 2024 10:09:30 -0700 Subject: [PATCH 1/2] add demo for image card --- content/components/cards.mdx | 8 ++++++++ images/card-with-image.png | Bin 0 -> 9186 bytes 2 files changed, 8 insertions(+) create mode 100644 images/card-with-image.png diff --git a/content/components/cards.mdx b/content/components/cards.mdx index ead439273..5f549dbbe 100644 --- a/content/components/cards.mdx +++ b/content/components/cards.mdx @@ -28,6 +28,14 @@ Add a `horizontal` property to a card to make it horizontally displayed. Here is an example of a horizontal card +### Image Card + +Add an `img` property to a card to display an image on the top of the card. + + + Here is an example of a card with an image + + ## Props diff --git a/images/card-with-image.png b/images/card-with-image.png new file mode 100644 index 0000000000000000000000000000000000000000..e9e46782790f38a55c22b1298d2249b55c06feca GIT binary patch literal 9186 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 literal 0 HcmV?d00001 From 5d1d3704b325606f7b203e5acb1862722e116290 Mon Sep 17 00:00:00 2001 From: "Kaishan (Sam) Ding" Date: Wed, 2 Oct 2024 15:24:06 -0700 Subject: [PATCH 2/2] add codes in request example --- content/components/cards.mdx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/content/components/cards.mdx b/content/components/cards.mdx index 5f549dbbe..6323af9de 100644 --- a/content/components/cards.mdx +++ b/content/components/cards.mdx @@ -18,6 +18,12 @@ icon: "rectangle" ``` +```jsx Image Card Example + + Here is an example of a card with an image + +``` + ### Horizontal Card