From de5e43ed1d6f66217362d257e19090dfa50d97ea Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Sepulchre?= <sepulchreclement.dic@gmail.com>
Date: Mon, 2 Sep 2024 14:48:04 +0200
Subject: [PATCH] Update glasscard.md

---
 .../controls/layout/glasscard.md              | 68 ++++++++++++++++---
 1 file changed, 57 insertions(+), 11 deletions(-)

diff --git a/docs/docs/documentation/controls/layout/glasscard.md b/docs/docs/documentation/controls/layout/glasscard.md
index 0cc9d7d9d..60456331c 100644
--- a/docs/docs/documentation/controls/layout/glasscard.md
+++ b/docs/docs/documentation/controls/layout/glasscard.md
@@ -2,32 +2,78 @@
 
 A simple Card control that can present any control inside.
 
-You can adjust whether the `GlassCard` is opaque or not and with or without interactive effects.
+### Dark Theme
 
-## Show
+<img src="https://sleekshot.app/api/download/GfUS8bUZT6TQ"/>
 
-- Normal
+### Light Theme
 
-<img src="/controls/layout/glasscard-1.webp" height="300px" width="300px"/>
+<img src="https://sleekshot.app/api/download/M1xlZe6nmF72"/>
 
-- Opaque
 
-<img src="/controls/layout/glasscard-2.webp" height="300px" width="300px"/>
+```xml
+<GlassCard>
+    <!-- Content -->
+</GlassCard>
+```
 
-- Interactive
 
-<img src="/controls/layout/glasscard-3.webp" height="300px" width="300px"/>
+## Alternative Style
+
+### Primary
+
+<img src="https://sleekshot.app/api/download/DC48QzG5R1XT"/>
 
-## Example
 
 ```xml
-<GlassCard>
+<GlassCard Classes="Primary">
     <!-- Content -->
 </GlassCard>
 ```
 
+### Accent
+
+<img src="https://sleekshot.app/api/download/cclRRlzglCB8"/>
+
+
+```xml
+<GlassCard Classes="Accent">
+    <!-- Content -->
+</GlassCard>
+```
+
+### Opaque
+
+<img src="https://sleekshot.app/api/download/MW4zpqNj9FLK"/>
+
+
+```xml
+<GlassCard IsOpaque="True">
+    <!-- Content -->
+</GlassCard>
+```
+
+### Interactive
+
+![interactive](https://github.com/user-attachments/assets/0a1ba6ac-b3e0-4eb6-ad7e-f782820a0506)
+
+
+```xml
+<GlassCard IsInteractive="True">
+    <!-- Content -->
+</GlassCard>
+```
+
+## Animations
+
+GlassCard are animated with CompositionAnimations by the property IsAnimated set to 'True' by default. Opacity changes and Size changes of the GlassCard are automatically animated.
+
+![animated](https://github.com/user-attachments/assets/b38d4ec2-067a-443c-ac20-65a2f6302920)
+
+
+
 ## See Also
 
 [Demo: SukiUI.Demo/Features/ControlsLibrary/CardsView.axaml](https://github.com/kikipoulet/SukiUI/blob/main/SukiUI.Demo/Features/ControlsLibrary/CardsView.axaml)
 
-[API: Controls/GlassMorphism/GlassCard.axaml.cs](https://github.com/kikipoulet/SukiUI/blob/main/SukiUI/Controls/GlassMorphism/GlassCard.axaml.cs)
\ No newline at end of file
+[API: Controls/GlassMorphism/GlassCard.axaml.cs](https://github.com/kikipoulet/SukiUI/blob/main/SukiUI/Controls/GlassMorphism/GlassCard.axaml.cs)