From 37e82b70fa3dd9aeebc909fb4beb162a29296201 Mon Sep 17 00:00:00 2001
From: Kelsey Jackson <kelseythej@gmail.com>
Date: Wed, 21 May 2025 13:03:11 -0500
Subject: [PATCH] updated card slot from `image` to `media` (#975)

* updated card slot from  to

* missed a wildcard

* updated changelog
---
 docs/docs/components/card.md                  | 41 +++++++++++--------
 .../components/page-samples/documentation.md  |  6 +--
 docs/docs/components/page.md                  |  6 +--
 docs/docs/experimental/themer.md              |  6 +--
 docs/docs/patterns/blog-news/category-list.md | 12 +++---
 docs/docs/patterns/blog-news/newsletter.md    |  2 +-
 docs/docs/patterns/blog-news/post-footer.md   | 12 +++---
 docs/docs/patterns/blog-news/post-list.md     |  8 ++--
 docs/docs/patterns/blog-news/social-share.md  |  2 +-
 .../patterns/ecommerce/category-preview.md    |  6 +--
 docs/docs/patterns/ecommerce/product-list.md  | 16 ++++----
 docs/docs/resources/changelog.md              |  3 +-
 docs/docs/themes/preview/content.njk          |  6 +--
 docs/docs/utilities/frame.md                  |  6 +--
 src/components/card/card.css                  | 16 ++++----
 src/components/card/card.test.ts              | 18 ++++----
 src/components/card/card.ts                   | 12 +++---
 17 files changed, 94 insertions(+), 84 deletions(-)

diff --git a/docs/docs/components/card.md b/docs/docs/components/card.md
index dc607939e..dda37916e 100644
--- a/docs/docs/components/card.md
+++ b/docs/docs/components/card.md
@@ -8,7 +8,7 @@ icon: card
 ```html {.example}
 <wa-card class="card-overview">
   <img
-    slot="image"
+    slot="media"
     src="https://images.unsplash.com/photo-1559209172-0ff8f6d49ff7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
     alt="A kitten sits patiently between a terracotta pot and decorative grasses."
   />
@@ -38,7 +38,7 @@ Basic cards aren't very exciting, but they can display any content you want them
 
 ```html {.example}
 <wa-card class="card-basic">
-  This is just a basic card. No image, no header, and no footer. Just your content.
+  This is just a basic card. No media, no header, and no footer. Just your content.
 </wa-card>
 
 <style>
@@ -96,23 +96,32 @@ If using SSR, you need to also use the `with-footer` attribute to add a footer t
 </style>
 ```
 
-### Images
+### Media
 
-Card images are displayed atop the card and will stretch to fit.
-If using SSR, you need to also use the `with-image` attribute to add an image to the card (if not, it is added automatically).
+Card media is displayed atop the card and will stretch to fit.
+If using SSR, you need to also use the `with-media` attribute to add a media section to the card (if not, it is added automatically).
 
 ```html {.example}
-<wa-card class="card-image">
-  <img
-    slot="image"
-    src="https://images.unsplash.com/photo-1547191783-94d5f8f6d8b1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=80"
-    alt="A kitten walks towards camera on top of pallet."
-  />
-  This is a kitten, but not just any kitten. This kitten likes walking along pallets.
-</wa-card>
+<div class="wa-grid">
+  <wa-card class="card-media">
+    <img
+      slot="media"
+      src="https://images.unsplash.com/photo-1547191783-94d5f8f6d8b1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=80"
+      alt="A kitten walks towards camera on top of pallet."
+    />
+    This is a kitten, but not just any kitten. This kitten likes walking along pallets.
+  </wa-card>
+  <wa-card class="card-media">
+    <video slot="media" controls>
+      <source src="https://uploads.webawesome.com/dog-with-glasses.mp4">
+      <p>Your browser doesn't support HTML video</p>
+    </video>
+    This is a kitten, but not just any kitten. This kitten likes walking along pallets.
+  </wa-card>
+</div>
 
 <style>
-  .card-image {
+  .card-media {
     max-width: 300px;
   }
 </style>
@@ -161,7 +170,7 @@ Use the `appearance` attribute to change the card's visual appearance.
 <div class="wa-grid">
 <wa-card>
   <img
-    slot="image"
+    slot="media"
     src="https://images.unsplash.com/photo-1559209172-0ff8f6d49ff7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
     alt="A kitten sits patiently between a terracotta pot and decorative grasses."
   />
@@ -171,7 +180,7 @@ Use the `appearance` attribute to change the card's visual appearance.
 {% for appearance in ['outlined filled', 'outlined accent', 'plain', 'filled', 'accent'] -%}
 <wa-card appearance="{{ appearance }}">
   <img
-    slot="image"
+    slot="media"
     src="https://images.unsplash.com/photo-1559209172-0ff8f6d49ff7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
     alt="A kitten sits patiently between a terracotta pot and decorative grasses."
   />
diff --git a/docs/docs/components/page-samples/documentation.md b/docs/docs/components/page-samples/documentation.md
index 94196af1c..4a9c8d760 100644
--- a/docs/docs/components/page-samples/documentation.md
+++ b/docs/docs/components/page-samples/documentation.md
@@ -177,7 +177,7 @@ eleventyExcludeFromCollections: true
   <aside slot="aside">
     <h2 class="wa-heading-m">Discover More Birds</h2>
     <wa-card>
-      <div slot="image" class="wa-frame">
+      <div slot="media" class="wa-frame">
         <img src="https://images.unsplash.com/photo-1635254859323-65b78408dcca?q=20" alt="" />
       </div>
       <div class="wa-stack wa-gap-3xs">
@@ -186,7 +186,7 @@ eleventyExcludeFromCollections: true
       </div>
     </wa-card>
     <wa-card>
-      <div slot="image" class="wa-frame">
+      <div slot="media" class="wa-frame">
         <img src="https://images.unsplash.com/photo-1661350356618-f5915c7b6a3c?q=20" alt="" />
       </div>
       <div class="wa-stack wa-gap-3xs">
@@ -195,7 +195,7 @@ eleventyExcludeFromCollections: true
       </div>
     </wa-card>
     <wa-card>
-      <div slot="image" class="wa-frame">
+      <div slot="media" class="wa-frame">
         <img src="https://images.unsplash.com/photo-1660307777355-f08bced145d3?q=20" alt="" />
       </div>
       <div class="wa-stack wa-gap-3xs">
diff --git a/docs/docs/components/page.md b/docs/docs/components/page.md
index a81ad9cbd..e5666fd64 100644
--- a/docs/docs/components/page.md
+++ b/docs/docs/components/page.md
@@ -169,7 +169,7 @@ It can be opened using a button with `[data-toggle-nav]` that appears in the `su
   <aside slot="aside" class="wa-desktop-only">
     <h2 class="wa-heading-m">Discover More Birds</h2>
     <wa-card>
-      <div slot="image" class="wa-frame">
+      <div slot="media" class="wa-frame">
         <img src="https://images.unsplash.com/photo-1635254859323-65b78408dcca?q=20" alt="" />
       </div>
       <div class="wa-stack wa-gap-3xs">
@@ -178,7 +178,7 @@ It can be opened using a button with `[data-toggle-nav]` that appears in the `su
       </div>
     </wa-card>
     <wa-card>
-      <div slot="image" class="wa-frame">
+      <div slot="media" class="wa-frame">
         <img src="https://images.unsplash.com/photo-1661350356618-f5915c7b6a3c?q=20" alt="" />
       </div>
       <div class="wa-stack wa-gap-3xs">
@@ -187,7 +187,7 @@ It can be opened using a button with `[data-toggle-nav]` that appears in the `su
       </div>
     </wa-card>
     <wa-card>
-      <div slot="image" class="wa-frame">
+      <div slot="media" class="wa-frame">
         <img src="https://images.unsplash.com/photo-1660307777355-f08bced145d3?q=20" alt="" />
       </div>
       <div class="wa-stack wa-gap-3xs">
diff --git a/docs/docs/experimental/themer.md b/docs/docs/experimental/themer.md
index 3a5089f0d..6abb14286 100644
--- a/docs/docs/experimental/themer.md
+++ b/docs/docs/experimental/themer.md
@@ -2019,7 +2019,7 @@ hasOutline: false
     <section class="strata products grid-12-col">
       <wa-card class="card-image product-card">
         <wa-badge variant="brand" class="badge-stock">New</wa-badge>
-        <div slot="image" class="landscape-frame">
+        <div slot="media" class="landscape-frame">
           <img id="product-1" src="/assets/images/themer/default/morpheus.jpg" alt="" />
         </div>
         <div class="title-rating">
@@ -2042,7 +2042,7 @@ hasOutline: false
       </wa-card>
       <wa-card class="card-image product-card">
         <wa-badge variant="warning" class="badge-stock">Low Stock</wa-badge>
-        <div slot="image" class="landscape-frame">
+        <div slot="media" class="landscape-frame">
           <img id="product-2" src="/assets/images/themer/default/seraph.jpg" alt="" />
         </div>
         <div class="title-rating">
@@ -2064,7 +2064,7 @@ hasOutline: false
         </div>
       </wa-card>
       <wa-card class="card-image product-card">
-        <div slot="image" class="landscape-frame">
+        <div slot="media" class="landscape-frame">
           <img id="product-3" src="/assets/images/themer/default/keymaker.jpg" alt="" />
         </div>
         <div class="title-rating">
diff --git a/docs/docs/patterns/blog-news/category-list.md b/docs/docs/patterns/blog-news/category-list.md
index 2bd5d3c6d..1019907e3 100644
--- a/docs/docs/patterns/blog-news/category-list.md
+++ b/docs/docs/patterns/blog-news/category-list.md
@@ -21,7 +21,7 @@ tags: blog-news
       <a href="#">
         <wa-card with-image style="height: 100%">
           <img
-            slot="image"
+            slot="media"
             src="https://images.unsplash.com/photo-1560264357-8d9202250f21?q=80&w=3000&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
             alt="Group of customer service reps working on computers in a shared office space"
           />
@@ -34,7 +34,7 @@ tags: blog-news
       <a href="#">
         <wa-card with-image style="height: 100%">
           <img
-            slot="image"
+            slot="media"
             src="https://images.unsplash.com/photo-1531403009284-440f080d1e12?q=80&w=5070&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
             alt="A hand pinching a pin on string, making connections between data on a corkboard"
           />
@@ -47,7 +47,7 @@ tags: blog-news
       <a href="#">
         <wa-card with-image style="height: 100%">
           <img
-            slot="image"
+            slot="media"
             src="https://images.unsplash.com/photo-1561323587-7464f7689886?q=80&w=5070&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
             alt="A chess board with all pieces in starting position"
           />
@@ -69,7 +69,7 @@ tags: blog-news
       <a href="#">
         <wa-card with-image style="height: 100%">
           <img
-            slot="image"
+            slot="media"
             src="https://images.unsplash.com/photo-1493599124325-e628361046af?q=80&w=4470&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
             alt="Viewpoint from the middle of a forest, looking upwards towards the canopy of towering evergreen"
           />
@@ -82,7 +82,7 @@ tags: blog-news
       <a href="#">
         <wa-card with-image style="height: 100%">
           <img
-            slot="image"
+            slot="media"
             src="https://images.unsplash.com/photo-1466629437334-b4f6603563c5?q=80&w=4478&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
             alt="Sunset over a vast grassy field with many prominent wind turbines"
           />
@@ -95,7 +95,7 @@ tags: blog-news
       <a href="#">
         <wa-card with-image style="height: 100%">
           <img
-            slot="image"
+            slot="media"
             src="https://images.unsplash.com/photo-1455849318743-b2233052fcff?q=80&w=4469&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
             alt="Viewpoint of two people side-by-side looking down towards their shoes, PASSION LED US HERE written on the sidewalk"
           />
diff --git a/docs/docs/patterns/blog-news/newsletter.md b/docs/docs/patterns/blog-news/newsletter.md
index 1fde6deda..b5b4bfad9 100644
--- a/docs/docs/patterns/blog-news/newsletter.md
+++ b/docs/docs/patterns/blog-news/newsletter.md
@@ -78,7 +78,7 @@ tags: blog-news
 ```html {.example}
 <wa-card with-image style="max-width: 45ch; margin: 0 auto">
   <img
-    slot="image"
+    slot="media"
     src="https://images.unsplash.com/photo-1595087012935-124877078142?q=80&w=2574&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
     alt="mailbox"
   />
diff --git a/docs/docs/patterns/blog-news/post-footer.md b/docs/docs/patterns/blog-news/post-footer.md
index fede219ed..99c88f282 100644
--- a/docs/docs/patterns/blog-news/post-footer.md
+++ b/docs/docs/patterns/blog-news/post-footer.md
@@ -163,7 +163,7 @@ tags:
       <wa-carousel-item>
         <a href="#" class="wa-link-plain">
           <wa-card with-image>
-            <div class="wa-frame:landscape" slot="image">
+            <div class="wa-frame:landscape" slot="media">
               <img
                 src="https://images.unsplash.com/photo-1490410006060-e1dc82ab0a70?q=80&w=5340&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                 alt="Customer service reps"
@@ -184,7 +184,7 @@ tags:
       <wa-carousel-item>
         <a href="#" class="wa-link-plain">
           <wa-card with-image>
-            <div class="wa-frame:landscape" slot="image">
+            <div class="wa-frame:landscape" slot="media">
               <img
                 src="https://images.unsplash.com/photo-1559757175-0eb30cd8c063?q=80&w=5231&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                 alt="Customer service reps"
@@ -205,7 +205,7 @@ tags:
       <wa-carousel-item>
         <a href="#" class="wa-link-plain">
           <wa-card with-image>
-            <div class="wa-frame:landscape" slot="image">
+            <div class="wa-frame:landscape" slot="media">
               <img
                 src="https://images.unsplash.com/photo-1581464668854-0da56c32393c?q=80&w=5340&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                 alt="Customer service reps"
@@ -226,7 +226,7 @@ tags:
       <wa-carousel-item>
         <a href="#" class="wa-link-plain">
           <wa-card with-image>
-            <div class="wa-frame:landscape" slot="image">
+            <div class="wa-frame:landscape" slot="media">
               <img
                 src="https://images.unsplash.com/photo-1628595351029-c2bf17511435?q=80&w=5232&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                 alt="Customer service reps"
@@ -247,7 +247,7 @@ tags:
       <wa-carousel-item>
         <a href="#" class="wa-link-plain">
           <wa-card with-image>
-            <div class="wa-frame:landscape" slot="image">
+            <div class="wa-frame:landscape" slot="media">
               <img
                 src="https://images.unsplash.com/photo-1576595580361-90a855b84b20?q=80&w=4032&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                 alt="Customer service reps"
@@ -268,7 +268,7 @@ tags:
       <wa-carousel-item>
         <a href="#" class="wa-link-plain">
           <wa-card with-image>
-            <div class="wa-frame:landscape" slot="image">
+            <div class="wa-frame:landscape" slot="media">
               <img
                 src="https://images.unsplash.com/photo-1539541417736-3d44c90da315?q=80&w=5338&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                 alt="Customer service reps"
diff --git a/docs/docs/patterns/blog-news/post-list.md b/docs/docs/patterns/blog-news/post-list.md
index 84953fdf9..c82f60ec2 100644
--- a/docs/docs/patterns/blog-news/post-list.md
+++ b/docs/docs/patterns/blog-news/post-list.md
@@ -158,7 +158,7 @@ tags: blog-news
     <a href="#" class="wa-link-plain">
       <wa-card with-image style="height: 100%">
         <img
-          slot="image"
+          slot="media"
           src="https://images.unsplash.com/photo-1720170060678-7c30a36937cd?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
           alt=""
         />
@@ -183,7 +183,7 @@ tags: blog-news
     <a href="#" class="wa-link-plain">
       <wa-card with-image style="height: 100%">
         <img
-          slot="image"
+          slot="media"
           src="https://images.unsplash.com/photo-1507099985932-87a4520ed1d5?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
           alt=""
         />
@@ -206,7 +206,7 @@ tags: blog-news
     <a href="#" class="wa-link-plain">
       <wa-card with-image style="height: 100%">
         <img
-          slot="image"
+          slot="media"
           src="https://images.unsplash.com/photo-1631775512414-160ae648c209?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
           alt=""
         />
@@ -231,7 +231,7 @@ tags: blog-news
     <a href="#" class="wa-link-plain">
       <wa-card with-image style="height: 100%">
         <img
-          slot="image"
+          slot="media"
           src="https://images.unsplash.com/photo-1591228127791-8e2eaef098d3?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
           alt=""
         />
diff --git a/docs/docs/patterns/blog-news/social-share.md b/docs/docs/patterns/blog-news/social-share.md
index 7be6af334..3aac6bc5a 100644
--- a/docs/docs/patterns/blog-news/social-share.md
+++ b/docs/docs/patterns/blog-news/social-share.md
@@ -75,7 +75,7 @@ tags: blog-news
 ```html {.example}
 <wa-card with-image style="max-width: 45ch; margin: 0 auto;">
   <img
-    slot="image"
+    slot="media"
     src="https://images.unsplash.com/photo-1578269174936-2709b6aeb913?q=80&w=2671&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
     alt="Super special awesome trophy"
   />
diff --git a/docs/docs/patterns/ecommerce/category-preview.md b/docs/docs/patterns/ecommerce/category-preview.md
index bb73a00f6..f36b71315 100644
--- a/docs/docs/patterns/ecommerce/category-preview.md
+++ b/docs/docs/patterns/ecommerce/category-preview.md
@@ -94,7 +94,7 @@ isPro: true
     <a href="" class="wa-link-plain">
       <wa-card style="height: 100%">
         <img
-          slot="image"
+          slot="media"
           src="https://img.fortawesome.com/cfa83f3c/outdoor-3x.jpg"
           alt="Two hikers wearing long canvas pants, weatherproof jackets, and backpacks"
         />
@@ -107,7 +107,7 @@ isPro: true
     <a href="" class="wa-link-plain">
       <wa-card style="height: 100%">
         <img
-          slot="image"
+          slot="media"
           src="https://img.fortawesome.com/cfa83f3c/home.jpg"
           alt="Woman sitting on a couch in a bright home, wearing a thick knit sweater"
         />
@@ -120,7 +120,7 @@ isPro: true
     <a href="" class="wa-link-plain">
       <wa-card style="height: 100%">
         <img
-          slot="image"
+          slot="media"
           src="https://img.fortawesome.com/cfa83f3c/fitness.jpg"
           alt="Athlete training in fitted active wear tee and shorts"
         />
diff --git a/docs/docs/patterns/ecommerce/product-list.md b/docs/docs/patterns/ecommerce/product-list.md
index 2165ac775..65b566535 100644
--- a/docs/docs/patterns/ecommerce/product-list.md
+++ b/docs/docs/patterns/ecommerce/product-list.md
@@ -113,9 +113,9 @@ isPro: true
 <div class="wa-grid" style="--min-column-size: 50ch">
   <div class="wa-grid">
     <a href="" class="wa-link-plain">
-      <wa-card>
+      <wa-card style="height: 100%;">
         <img
-          slot="image"
+          slot="media"
           src="https://images.unsplash.com/photo-1622445272461-c6580cab8755?q=80&w=3387&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
           alt="Man in a relaxed fit, white, crew neck t-shirt (Photography by Mediamodifier)"
         />
@@ -132,9 +132,9 @@ isPro: true
       </wa-card>
     </a>
     <a href="" class="wa-link-plain">
-      <wa-card>
+      <wa-card style="height: 100%;">
         <img
-          slot="image"
+          slot="media"
           src="https://images.unsplash.com/photo-1554568218-0f1715e72254?q=80&w=3387&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
           alt="Woman in a light heather t-shirt printed with sharp black ink (Photograph by Christian Bolt)"
         />
@@ -153,9 +153,9 @@ isPro: true
   </div>
   <div class="wa-grid">
     <a href="" class="wa-link-plain">
-      <wa-card>
+      <wa-card style="height: 100%;">
         <img
-          slot="image"
+          slot="media"
           src="https://images.unsplash.com/photo-1567098260939-5d9cee055592?q=80&w=2832&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
           alt="Man in a black t-shirt printed with many-colored gradients (Photograph by Marcel)"
         />
@@ -172,9 +172,9 @@ isPro: true
       </wa-card>
     </a>
     <a href="" class="wa-link-plain">
-      <wa-card>
+      <wa-card style="height: 100%;">
         <img
-          slot="image"
+          slot="media"
           src="https://images.unsplash.com/photo-1709185727063-c3caae752a64?q=80&w=3387&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
           alt="Woman in a black t-shirt with a bright white logo printed on the pocket (Photograph by SASI)"
         />
diff --git a/docs/docs/resources/changelog.md b/docs/docs/resources/changelog.md
index 09de325a8..7322a1035 100644
--- a/docs/docs/resources/changelog.md
+++ b/docs/docs/resources/changelog.md
@@ -22,7 +22,8 @@ During the alpha period, things might break! We take breaking changes very serio
 ## 3.0.0-alpha.13
 
 - 🚨 BREAKING: Renamed `<image-comparer>` to `<wa-comparison>` and improved compatibility for non-image content
-- 🚨 BREAKING: Added slot detection to `<wa-dialog>` and `<wa-drawer>` so you don't need to specify `with-header` and `with-footer`; headers are on by default now, but you can use the `without-header` attribute to turn them off
+- 🚨 BREAKING:  Added slot detection to `<wa-dialog>` and `<wa-drawer>` so you don't need to specify `with-header` and `with-footer`; headers are on by default now, but you can use the `without-header` attribute to turn them off
+- 🚨 BREAKING:  Renamed the `image` slot to `media` for a more appropriate naming convention
 - Added [a theme builder](/docs/themes/edit/) to create your own themes
 - Added a new Blog & News pattern category
 - Added a new free component: `<wa-scroller>` (#1 of 14 per stretch goals)
diff --git a/docs/docs/themes/preview/content.njk b/docs/docs/themes/preview/content.njk
index 51af3494d..e4ca470da 100644
--- a/docs/docs/themes/preview/content.njk
+++ b/docs/docs/themes/preview/content.njk
@@ -38,7 +38,7 @@ noTheme: true
     <section class="strata products grid-12-col">
       <wa-card class="card-image product-card">
         <wa-badge variant="brand" class="badge-stock">New</wa-badge>
-        <div slot="image" class="landscape-frame">
+        <div slot="media" class="landscape-frame">
           <img id="product-1" src="/assets/images/themer/default/morpheus.jpg" alt="" />
         </div>
         <div class="title-rating">
@@ -61,7 +61,7 @@ noTheme: true
       </wa-card>
       <wa-card class="card-image product-card">
         <wa-badge variant="warning" class="badge-stock">Low Stock</wa-badge>
-        <div slot="image" class="landscape-frame">
+        <div slot="media" class="landscape-frame">
           <img id="product-2" src="/assets/images/themer/default/seraph.jpg" alt="" />
         </div>
         <div class="title-rating">
@@ -83,7 +83,7 @@ noTheme: true
         </div>
       </wa-card>
       <wa-card class="card-image product-card">
-        <div slot="image" class="landscape-frame">
+        <div slot="media" class="landscape-frame">
           <img id="product-3" src="/assets/images/themer/default/keymaker.jpg" alt="" />
         </div>
         <div class="title-rating">
diff --git a/docs/docs/utilities/frame.md b/docs/docs/utilities/frame.md
index 251f202e2..0b93f18ff 100644
--- a/docs/docs/utilities/frame.md
+++ b/docs/docs/utilities/frame.md
@@ -49,7 +49,7 @@ Frames are well-suited for images and image placeholders.
 ```html {.example}
 <div class="wa-grid" style="--min-column-size: 25ch;">
   <wa-card>
-    <div class="wa-frame:landscape" slot="image">
+    <div class="wa-frame:landscape" slot="media">
       <img src="https://images.unsplash.com/photo-1533743983669-94fa5c4338ec?q=20" alt="Grey and white tabby kitten" />
     </div>
     <div class="wa-stack wa-gap-xs">
@@ -80,7 +80,7 @@ Frames are well-suited for images and image placeholders.
     </div>
   </wa-card>
   <wa-card>
-    <div class="wa-frame:landscape" slot="image">
+    <div class="wa-frame:landscape" slot="media">
       <img src="https://images.unsplash.com/photo-1445499348736-29b6cdfc03b9?q=20" alt="Diluted calico kitten" />
     </div>
     <div class="wa-stack wa-gap-xs">
@@ -94,7 +94,7 @@ Frames are well-suited for images and image placeholders.
     </div>
   </wa-card>
   <wa-card>
-    <div class="wa-frame:landscape" slot="image">
+    <div class="wa-frame:landscape" slot="media">
       <img src="https://images.unsplash.com/photo-1517451330947-7809dead78d5?q=20" alt="Short-haired tabby cat" />
     </div>
     <div class="wa-stack wa-gap-xs">
diff --git a/src/components/card/card.css b/src/components/card/card.css
index abb88e521..14d682db6 100644
--- a/src/components/card/card.css
+++ b/src/components/card/card.css
@@ -37,9 +37,9 @@
 }
 
 /* Take care of top and bottom radii */
-.image,
-:host(:not([with-image])) .header,
-:host(:not([with-image], [with-header])) .body {
+.media,
+:host(:not([with-media])) .header,
+:host(:not([with-media], [with-header])) .body {
   border-start-start-radius: var(--inner-border-radius);
   border-start-end-radius: var(--inner-border-radius);
 }
@@ -50,10 +50,10 @@
   border-end-end-radius: var(--inner-border-radius);
 }
 
-.image {
+.media {
   display: flex;
 
-  &::slotted(img) {
+  &::slotted(*) {
     display: block;
     width: 100%;
     border-start-start-radius: inherit !important;
@@ -62,10 +62,10 @@
 }
 
 /* Round all corners for plain appearance */
-:host([appearance='plain']) .image {
+:host([appearance='plain']) .media {
   border-radius: var(--inner-border-radius);
 
-  &::slotted(img) {
+  &::slotted(*) {
     border-radius: inherit !important;
   }
 }
@@ -93,6 +93,6 @@
 
 :host(:not([with-header])) .header,
 :host(:not([with-footer])) .footer,
-:host(:not([with-image])) .image {
+:host(:not([with-media])) .media {
   display: none;
 }
diff --git a/src/components/card/card.test.ts b/src/components/card/card.test.ts
index 85ef490c0..8f3bf6bca 100644
--- a/src/components/card/card.test.ts
+++ b/src/components/card/card.test.ts
@@ -9,16 +9,16 @@ describe('<wa-card>', () => {
       describe('when provided no parameters', () => {
         it('should render the child content provided.', async () => {
           const el = await fixture<WaCard>(html`
-            <wa-card>This is just a basic card. No image, no header, and no footer. Just your content.</wa-card>
+            <wa-card>This is just a basic card. No media, no header, and no footer. Just your content.</wa-card>
           `);
           expect(el.innerText).to.eq(
-            'This is just a basic card. No image, no header, and no footer. Just your content.',
+            'This is just a basic card. No media, no header, and no footer. Just your content.',
           );
         });
 
         it('should pass accessibility tests', async () => {
           const el = await fixture<WaCard>(html`
-            <wa-card>This is just a basic card. No image, no header, and no footer. Just your content.</wa-card>
+            <wa-card>This is just a basic card. No media, no header, and no footer. Just your content.</wa-card>
           `);
           await expect(el).to.be.accessible();
         });
@@ -120,12 +120,12 @@ describe('<wa-card>', () => {
         });
       });
 
-      describe('when provided an element in the slot "image" to render a image', () => {
+      describe('when provided an element in the slot "media" to render a media element', () => {
         it('should pass accessibility tests', async () => {
           const el = await fixture<WaCard>(
             html`<wa-card>
               <img
-                slot="image"
+                slot="media"
                 src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
                 alt="A kitten walks towards camera on top of pallet."
               />
@@ -140,7 +140,7 @@ describe('<wa-card>', () => {
           const el = await fixture<WaCard>(
             html`<wa-card>
               <img
-                slot="image"
+                slot="media"
                 src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
                 alt="A kitten walks towards camera on top of pallet."
               />
@@ -153,18 +153,18 @@ describe('<wa-card>', () => {
           );
         });
 
-        it('accept "image" as an assigned child in the shadow root.', async () => {
+        it('accept "media" as an assigned child in the shadow root.', async () => {
           const el = await fixture<WaCard>(
             html`<wa-card>
               <img
-                slot="image"
+                slot="media"
                 src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
                 alt="A kitten walks towards camera on top of pallet."
               />
               This is a kitten, but not just any kitten. This kitten likes walking along pallets.
             </wa-card>`,
           );
-          const slot = el.shadowRoot!.querySelector<HTMLSlotElement>('slot[name=image]')!;
+          const slot = el.shadowRoot!.querySelector<HTMLSlotElement>('slot[name=media]')!;
           const childNodes = slot.assignedNodes({ flatten: true });
 
           expect(childNodes.length).to.eq(1);
diff --git a/src/components/card/card.ts b/src/components/card/card.ts
index 6bf2693ce..7a7cafb3a 100644
--- a/src/components/card/card.ts
+++ b/src/components/card/card.ts
@@ -15,9 +15,9 @@ import styles from './card.css';
  * @slot - The card's main content.
  * @slot header - An optional header for the card.
  * @slot footer - An optional footer for the card.
- * @slot image - An optional image to render at the start of the card.
+ * @slot media - An optional media section to render at the start of the card.
  *
- * @csspart image - The container that wraps the card's image.
+ * @csspart media - The container that wraps the card's media.
  * @csspart header - The container that wraps the card's header.
  * @csspart body - The container that wraps the card's main content.
  * @csspart footer - The container that wraps the card's footer.
@@ -32,7 +32,7 @@ import styles from './card.css';
 export default class WaCard extends WebAwesomeElement {
   static shadowStyle = [sizeStyles, appearanceStyles, styles];
 
-  private readonly hasSlotController = new HasSlotController(this, 'footer', 'header', 'image');
+  private readonly hasSlotController = new HasSlotController(this, 'footer', 'header', 'media');
 
   /** The component's size. Will be inherited by any descendants with a `size` attribute. */
   @property({ reflect: true, initial: 'medium' }) size: 'small' | 'medium' | 'large' | 'inherit' = 'inherit';
@@ -45,7 +45,7 @@ export default class WaCard extends WebAwesomeElement {
   @property({ attribute: 'with-header', type: Boolean, reflect: true }) withHeader = false;
 
   /** Renders the card with an image. Only needed for SSR, otherwise is automatically added. */
-  @property({ attribute: 'with-image', type: Boolean, reflect: true }) withImage = false;
+  @property({ attribute: 'with-media', type: Boolean, reflect: true }) withMedia = false;
 
   /** Renders the card with a footer. Only needed for SSR, otherwise is automatically added. */
   @property({ attribute: 'with-footer', type: Boolean, reflect: true }) withFooter = false;
@@ -53,13 +53,13 @@ export default class WaCard extends WebAwesomeElement {
   updated() {
     // Enable the respective slots when detected
     if (!this.withHeader && this.hasSlotController.test('header')) this.withHeader = true;
-    if (!this.withImage && this.hasSlotController.test('image')) this.withImage = true;
+    if (!this.withMedia && this.hasSlotController.test('media')) this.withMedia = true;
     if (!this.withFooter && this.hasSlotController.test('footer')) this.withFooter = true;
   }
 
   render() {
     return html`
-      <slot name="image" part="image" class="image"></slot>
+      <slot name="media" part="media" class="media"></slot>
       <slot name="header" part="header" class="header"></slot>
       <slot part="body" class="body"></slot>
       <slot name="footer" part="footer" class="footer"></slot>