updated card slot from image to media (#975)

* updated card slot from to * missed a wildcard * updated changelog
2026-01-12 12:09:26 +00:00 · 2025-05-21 13:03:11 -05:00
parent 39d1b82634
commit 37e82b70fa
17 changed files with 94 additions and 84 deletions
--- 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."
  />
--- 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">
--- 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">
--- 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">
--- 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"
          />
--- 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"
  />
--- 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"
--- 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=""
        />
--- 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"
  />
--- 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"
        />
--- 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)"
        />
--- 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)
--- 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">
--- 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">