From cf52c8a4f89d697deaf57b0e1b0edede76a9575e Mon Sep 17 00:00:00 2001 From: Maharshi Alpesh Date: Wed, 11 Sep 2024 13:58:31 +0530 Subject: [PATCH 1/4] docs(card): adding info regarding the gradient for blurred card --- apps/docs/content/docs/components/card.mdx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/apps/docs/content/docs/components/card.mdx b/apps/docs/content/docs/components/card.mdx index 35ebd17309..37829e2af9 100644 --- a/apps/docs/content/docs/components/card.mdx +++ b/apps/docs/content/docs/components/card.mdx @@ -73,10 +73,12 @@ You can use other NextUI components inside the card to compose a more complex ca ### Blurred Card -You can pass the `isBlurred` prop to the card to blur the card. +You can pass the `isBlurred` prop to the card to blur the card. Card gets blurred properties based on its ancestor element. +**Note**: While trying out the above example, it is required to provide the necessary background to any ancestor element of the Card component to obtain the `blur` effect as seen in the preview. + ### Primary Action If you pass the `isPressable` prop to the card, it will be rendered as a button. From aab5e30ada5398ef3b40d18e64d207b8d46a8c68 Mon Sep 17 00:00:00 2001 From: Maharshi Alpesh Date: Sun, 15 Sep 2024 23:41:31 +0530 Subject: [PATCH 2/4] chore(nit): adding example --- apps/docs/content/docs/components/card.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/docs/content/docs/components/card.mdx b/apps/docs/content/docs/components/card.mdx index 37829e2af9..440ab35b5d 100644 --- a/apps/docs/content/docs/components/card.mdx +++ b/apps/docs/content/docs/components/card.mdx @@ -77,7 +77,7 @@ You can pass the `isBlurred` prop to the card to blur the card. Card gets blurre -**Note**: While trying out the above example, it is required to provide the necessary background to any ancestor element of the Card component to obtain the `blur` effect as seen in the preview. +**Note**: While trying out the above example, it is required to provide the necessary background(eg. adding `bg-gradient-to-tr from-[#FFB457] to-[#FF705B]` classes) to any ancestor element of the Card component to obtain the `blur` effect as seen in the preview. ### Primary Action From 463278a984889f8421054e1bcc9a3f5c61959b3d Mon Sep 17 00:00:00 2001 From: WK Wong Date: Sat, 28 Sep 2024 11:24:00 +0800 Subject: [PATCH 3/4] chore(docs): revise content for card isBlurred example --- apps/docs/content/docs/components/card.mdx | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/apps/docs/content/docs/components/card.mdx b/apps/docs/content/docs/components/card.mdx index 440ab35b5d..cd9629ca4a 100644 --- a/apps/docs/content/docs/components/card.mdx +++ b/apps/docs/content/docs/components/card.mdx @@ -75,9 +75,17 @@ You can use other NextUI components inside the card to compose a more complex ca You can pass the `isBlurred` prop to the card to blur the card. Card gets blurred properties based on its ancestor element. - +> **Note**: To achieve the blur effect as seen in the preview, you need to provide a suitable background to an ancestor element of the Card component. The following example adds a gradient background to a parent div, allowing the Card's blur effect to be visible. + +```jsx +
+ + {/* Card content */} + +
+``` -**Note**: While trying out the above example, it is required to provide the necessary background(eg. adding `bg-gradient-to-tr from-[#FFB457] to-[#FF705B]` classes) to any ancestor element of the Card component to obtain the `blur` effect as seen in the preview. + ### Primary Action From b59f1c2b4f24a40ac184e761d7d52c8ea92603eb Mon Sep 17 00:00:00 2001 From: WK Wong Date: Sat, 28 Sep 2024 11:56:17 +0800 Subject: [PATCH 4/4] chore(docs): revise isBlurred note --- apps/docs/content/docs/components/card.mdx | 10 +--------- 1 file changed, 1 insertion(+), 9 deletions(-) diff --git a/apps/docs/content/docs/components/card.mdx b/apps/docs/content/docs/components/card.mdx index cd9629ca4a..77873bcfb3 100644 --- a/apps/docs/content/docs/components/card.mdx +++ b/apps/docs/content/docs/components/card.mdx @@ -75,15 +75,7 @@ You can use other NextUI components inside the card to compose a more complex ca You can pass the `isBlurred` prop to the card to blur the card. Card gets blurred properties based on its ancestor element. -> **Note**: To achieve the blur effect as seen in the preview, you need to provide a suitable background to an ancestor element of the Card component. The following example adds a gradient background to a parent div, allowing the Card's blur effect to be visible. - -```jsx -
- - {/* Card content */} - -
-``` +> **Note**: To achieve the blur effect as seen in the preview, you need to provide a suitable background (e.g., `bg-gradient-to-tr from-[#FFB457] to-[#FF705B]`) to an ancestor element of the Card component allowing the Card's blur effect to be visible.