From ebd0fcfadb832f3eac81c73638add692237bd87c Mon Sep 17 00:00:00 2001
From: Louis Escher <66965600+louisescher@users.noreply.github.com>
Date: Tue, 11 Aug 2026 10:05:23 +0200
Subject: [PATCH 1/5] Fix class attribute handling in Card component

---
 packages/studiocms_ui/src/components/Card/Card.astro | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/studiocms_ui/src/components/Card/Card.astro b/packages/studiocms_ui/src/components/Card/Card.astro
index ba9b7d00..ef858a30 100644
--- a/packages/studiocms_ui/src/components/Card/Card.astro
+++ b/packages/studiocms_ui/src/components/Card/Card.astro
@@ -26,7 +26,7 @@ type Props<As extends HTMLTag = 'div'> = Omit<Polymorphic<{ as: As }>, 'as'> & {
 
 const { as: As = 'div', fullWidth, fullHeight, variant = 'default', ...props } = Astro.props;
 ---
-<As class="sui-card" class:list={[fullWidth && "full-w", fullHeight && "full-h", variant]} {...props}>
+<As class:list={[fullWidth && "full-w", fullHeight && "full-h", variant, props.class]} {{...props, class: undefined}} class="sui-card">
   <div class="sui-card-header">
     <slot name="header" />
   </div>

From bb3eb98b0f39c2969472f481ff550596734307a3 Mon Sep 17 00:00:00 2001
From: Louis Escher <66965600+louisescher@users.noreply.github.com>
Date: Tue, 11 Aug 2026 10:08:23 +0200
Subject: [PATCH 2/5] Fix class attribute handling in Card component

---
 .changeset/red-clubs-grab.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/red-clubs-grab.md

diff --git a/.changeset/red-clubs-grab.md b/.changeset/red-clubs-grab.md
new file mode 100644
index 00000000..c941e2e5
--- /dev/null
+++ b/.changeset/red-clubs-grab.md
@@ -0,0 +1,5 @@
+---
+"@studiocms/ui": patch
+---
+
+Fixes custom classes on Cards overriding the default styles

From 9a8f970efad29a5cb88e45bc92d12bd244ee5d52 Mon Sep 17 00:00:00 2001
From: Louis Escher <66965600+louisescher@users.noreply.github.com>
Date: Tue, 11 Aug 2026 10:26:30 +0200
Subject: [PATCH 3/5] Update Card.astro

---
 packages/studiocms_ui/src/components/Card/Card.astro | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/studiocms_ui/src/components/Card/Card.astro b/packages/studiocms_ui/src/components/Card/Card.astro
index ef858a30..e8605b2d 100644
--- a/packages/studiocms_ui/src/components/Card/Card.astro
+++ b/packages/studiocms_ui/src/components/Card/Card.astro
@@ -24,9 +24,9 @@ type Props<As extends HTMLTag = 'div'> = Omit<Polymorphic<{ as: As }>, 'as'> & {
 	variant?: 'default' | 'filled';
 };
 
-const { as: As = 'div', fullWidth, fullHeight, variant = 'default', ...props } = Astro.props;
+const { as: As = 'div', fullWidth, fullHeight, variant = 'default', class, ...props } = Astro.props;
 ---
-<As class:list={[fullWidth && "full-w", fullHeight && "full-h", variant, props.class]} {{...props, class: undefined}} class="sui-card">
+<As class:list={["sui-card", fullWidth && "full-w", fullHeight && "full-h", variant, class]} {...props}>
   <div class="sui-card-header">
     <slot name="header" />
   </div>

From 55f7884c051f2b2de40ad06ce25b4228e212dd25 Mon Sep 17 00:00:00 2001
From: Louis Escher <66965600+louisescher@users.noreply.github.com>
Date: Tue, 11 Aug 2026 10:28:49 +0200
Subject: [PATCH 4/5] Update Card.astro

---
 packages/studiocms_ui/src/components/Card/Card.astro | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/studiocms_ui/src/components/Card/Card.astro b/packages/studiocms_ui/src/components/Card/Card.astro
index e8605b2d..d28ba770 100644
--- a/packages/studiocms_ui/src/components/Card/Card.astro
+++ b/packages/studiocms_ui/src/components/Card/Card.astro
@@ -24,9 +24,9 @@ type Props<As extends HTMLTag = 'div'> = Omit<Polymorphic<{ as: As }>, 'as'> & {
 	variant?: 'default' | 'filled';
 };
 
-const { as: As = 'div', fullWidth, fullHeight, variant = 'default', class, ...props } = Astro.props;
+const { as: As = 'div', fullWidth, fullHeight, variant = 'default', class: className, ...props } = Astro.props;
 ---
-<As class:list={["sui-card", fullWidth && "full-w", fullHeight && "full-h", variant, class]} {...props}>
+<As class:list={["sui-card", fullWidth && "full-w", fullHeight && "full-h", variant, className]} {...props}>
   <div class="sui-card-header">
     <slot name="header" />
   </div>

From 56064674bccd437fcacddeb47e8f3ac36273ec77 Mon Sep 17 00:00:00 2001
From: Louis Escher <louis.escher@seibert.group>
Date: Tue, 11 Aug 2026 10:55:35 +0200
Subject: [PATCH 5/5] fix: Lint

---
 packages/studiocms_ui/src/components/Card/Card.astro | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/studiocms_ui/src/components/Card/Card.astro b/packages/studiocms_ui/src/components/Card/Card.astro
index d28ba770..54e23fb2 100644
--- a/packages/studiocms_ui/src/components/Card/Card.astro
+++ b/packages/studiocms_ui/src/components/Card/Card.astro
@@ -24,7 +24,14 @@ type Props<As extends HTMLTag = 'div'> = Omit<Polymorphic<{ as: As }>, 'as'> & {
 	variant?: 'default' | 'filled';
 };
 
-const { as: As = 'div', fullWidth, fullHeight, variant = 'default', class: className, ...props } = Astro.props;
+const {
+	as: As = 'div',
+	fullWidth,
+	fullHeight,
+	variant = 'default',
+	class: className,
+	...props
+} = Astro.props;
 ---
 <As class:list={["sui-card", fullWidth && "full-w", fullHeight && "full-h", variant, className]} {...props}>
   <div class="sui-card-header">