diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/Components/Card/Examples/CardShadowExample.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/Components/Card/Examples/CardShadowExample.razor
index 96b95fae20..1f33a25c65 100644
--- a/examples/Demo/FluentUI.Demo.Client/Documentation/Components/Card/Examples/CardShadowExample.razor
+++ b/examples/Demo/FluentUI.Demo.Client/Documentation/Components/Card/Examples/CardShadowExample.razor
@@ -16,6 +16,10 @@
Large shadow
+
+ No shadow
+
+
@code
diff --git a/src/Core/Components/Card/FluentCard.razor.css b/src/Core/Components/Card/FluentCard.razor.css
index 8132bed851..812fc97df6 100644
--- a/src/Core/Components/Card/FluentCard.razor.css
+++ b/src/Core/Components/Card/FluentCard.razor.css
@@ -30,6 +30,10 @@
}
/* Shadow */
+ .fluent-card[shadow="none"] {
+ box-shadow: none;
+ }
+
.fluent-card[shadow="small"] {
box-shadow: var(--shadow2);
}
diff --git a/src/Core/Enums/CardShadow.cs b/src/Core/Enums/CardShadow.cs
index b706f63bf3..f8c68d6525 100644
--- a/src/Core/Enums/CardShadow.cs
+++ b/src/Core/Enums/CardShadow.cs
@@ -34,4 +34,10 @@ public enum CardShadow
///
[Description("large")]
Large,
+
+ ///
+ /// There is no shadow below the card.
+ ///
+ [Description("none")]
+ None,
}
diff --git a/tests/Core/Components/Card/FluentCardTests.razor b/tests/Core/Components/Card/FluentCardTests.razor
index 76459762e1..e797ac1ac1 100644
--- a/tests/Core/Components/Card/FluentCardTests.razor
+++ b/tests/Core/Components/Card/FluentCardTests.razor
@@ -38,6 +38,7 @@
[InlineData(CardShadow.Small, "shadow='small'")]
[InlineData(CardShadow.Medium, "shadow='medium'")]
[InlineData(CardShadow.Large, "shadow='large'")]
+ [InlineData(CardShadow.None, "shadow='none'")]
[InlineData((CardShadow)999, "")]
public void FluentCard_Shadow(CardShadow shadow, string expectedAttribute)
{