diff --git a/src/lib/cards/Card.svelte b/src/lib/cards/Card.svelte
index eec3ba54..150a31dc 100644
--- a/src/lib/cards/Card.svelte
+++ b/src/lib/cards/Card.svelte
@@ -17,16 +17,14 @@
 </script>
 
 <svelte:element this={href ? "a" : "div"} {...restProps} {href} class={base({ className })} role={href ? undefined : "presentation"} {onclick}>
-  {#if img}
+  {#if typeof img === "function"}
+    {@render img({ class: image({ class: imgClass }) })}
+  {:else if img}
     <img class={image({ class: imgClass })} src={img.src} alt={img.alt} />
-    <div class={content({ class: contentClass })}>
-      {@render children()}
-    </div>
-  {:else}
-    <div class={content({ class: contentClass })}>
-      {@render children()}
-    </div>
   {/if}
+  <div class={content({ class: contentClass })}>
+    {@render children()}
+  </div>
 </svelte:element>
 
 <!--
diff --git a/src/lib/cards/index.ts b/src/lib/cards/index.ts
index 6d98fd62..89d2c440 100644
--- a/src/lib/cards/index.ts
+++ b/src/lib/cards/index.ts
@@ -9,10 +9,12 @@ type PaddingType = "sm" | "lg" | "md" | "xl" | "xs" | "none" | undefined;
 type ShadowType = "sm" | "normal" | "lg" | "md" | "xl" | "2xl" | "inner" | undefined;
 type ColorType = "gray" | "primary" | "secondary" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose" | undefined;
 
-type ImgType = {
-  src: string | undefined | null;
-  alt: string | undefined | null;
-};
+type ImgType =
+  | {
+      src: string | undefined | null;
+      alt: string | undefined | null;
+    }
+  | Snippet<[{ class: string }]>;
 
 interface CardProps extends HTMLAttributes<HTMLDivElement> {
   children: Snippet;