diff --git a/docs-site/src/pages/pattern-lab/_patterns/10-visual-styles/20-information-density/_info-density.twig b/docs-site/src/pages/pattern-lab/_patterns/10-visual-styles/20-information-density/_info-density.twig
index 17064c76bf..1557856ee8 100644
--- a/docs-site/src/pages/pattern-lab/_patterns/10-visual-styles/20-information-density/_info-density.twig
+++ b/docs-site/src/pages/pattern-lab/_patterns/10-visual-styles/20-information-density/_info-density.twig
@@ -132,14 +132,21 @@
       } only %}
     {% endset %}
     {% set card %}
+      {% set image %}
+        {% include '@bolt-elements-image/image.twig' with {
+          attributes: {
+            alt: '/alt text',
+            src: '/images/placeholders/landscape-16x9-mountains.jpg',
+            loading: 'lazy',
+
+          },
+        } only %}
+      {% endset %}
       {% include "@bolt-components-card-replacement/card-replacement.twig" with {
         border_radius: "large",
         height: "auto",
         media: {
-          image: {
-            src: "/images/content/promos/promo-16x9-forrester.jpg",
-            alt: "Image alt.",
-          },
+          image: image,
         },
         body: {
           eyebrow: "Whitepaper",
@@ -260,14 +267,21 @@
   } only %}
 
   {% set content %}
+    {% set image %}
+      {% include '@bolt-elements-image/image.twig' with {
+        attributes: {
+          alt: 'alt text',
+          src: '/images/placeholders/landscape-16x9-mountains.jpg',
+          loading: 'lazy',
+
+        },
+      } only %}
+    {% endset %}
     {% set card_1 %}
       {% include "@bolt-components-card-replacement/card-replacement.twig" with {
         border_radius: "large",
         media: {
-          image: {
-            src: "/images/placeholders/landscape-16x9-mountains.jpg",
-            alt: "Image alt.",
-          },
+          image: image,
         },
         body: {
           eyebrow: "Lorem Ipsum",
@@ -287,10 +301,7 @@
       {% include "@bolt-components-card-replacement/card-replacement.twig" with {
         border_radius: "large",
         media: {
-          image: {
-            src: "/images/placeholders/landscape-16x9-mountains.jpg",
-            alt: "Image alt.",
-          },
+          image: image,
         },
         body: {
           eyebrow: "In Pellentesque",
@@ -309,10 +320,7 @@
       {% include "@bolt-components-card-replacement/card-replacement.twig" with {
         border_radius: "large",
         media: {
-          image: {
-            src: "/images/placeholders/landscape-16x9-mountains.jpg",
-            alt: "Image alt.",
-          },
+          image: image,
         },
         body: {
           eyebrow: "Proin Quis Tortor",
diff --git a/docs-site/src/pages/pattern-lab/_patterns/40-components/band/55-band-collection.twig b/docs-site/src/pages/pattern-lab/_patterns/40-components/band/55-band-collection.twig
index 67f3676d73..21a0f7b0ca 100644
--- a/docs-site/src/pages/pattern-lab/_patterns/40-components/band/55-band-collection.twig
+++ b/docs-site/src/pages/pattern-lab/_patterns/40-components/band/55-band-collection.twig
@@ -1,12 +1,18 @@
 {% set content %}
+  {% set image %}
+    {% include '@bolt-elements-image/image.twig' with {
+      attributes: {
+        alt: 'alt text',
+        src: '/images/placeholders/landscape-16x9-mountains.jpg',
+        loading: 'lazy',
+
+      },
+    } only %}
+  {% endset %}
   {% set card_1 %}
     {% include '@bolt-components-card-replacement/card-replacement.twig' with {
       media: {
-        image: {
-          src: '/images/placeholders/landscape-16x9-mountains.jpg',
-          alt: 'Image description',
-          lazyload: false,
-        },
+        image: image,
       },
       body: {
         headline: 'Collection 1',
@@ -22,11 +28,7 @@
   {% set card_2 %}
     {% include '@bolt-components-card-replacement/card-replacement.twig' with {
       media: {
-        image: {
-          src: '/images/placeholders/landscape-16x9-mountains.jpg',
-          alt: 'Image description',
-          lazyload: false,
-        },
+        image: image,
       },
       body: {
         headline: 'Collection 2',
@@ -42,11 +44,7 @@
   {% set card_3 %}
     {% include '@bolt-components-card-replacement/card-replacement.twig' with {
       media: {
-        image: {
-          src: '/images/placeholders/landscape-16x9-mountains.jpg',
-          alt: 'Image description',
-          lazyload: false,
-        },
+        image: image,
       },
       body: {
         headline: 'Collection 3',
diff --git a/docs-site/src/pages/pattern-lab/_patterns/40-components/card/00-card-replacement-docs.twig b/docs-site/src/pages/pattern-lab/_patterns/40-components/card/00-card-replacement-docs.twig
index 2f2162e5bf..9c4e9df375 100644
--- a/docs-site/src/pages/pattern-lab/_patterns/40-components/card/00-card-replacement-docs.twig
+++ b/docs-site/src/pages/pattern-lab/_patterns/40-components/card/00-card-replacement-docs.twig
@@ -1,12 +1,19 @@
 {% set usage %}
 {% verbatim %}
 // Standard card-replacement
-{% include '@bolt-components-card-replacement/card-replacement.twig' with {
-  media: {
-    image: {
+{% set image %}
+  {% include '@bolt-elements-image/image.twig' with {
+    attributes: {
+      alt: 'alt text',
       src: '/images/placeholders/landscape-16x9-mountains.jpg',
-      alt: 'Image alt.',
+      loading: 'lazy',
+
     },
+  } only %}
+{% endset %}
+{% include '@bolt-components-card-replacement/card-replacement.twig' with {
+  media: {
+    image: image,
   },
   body: {
     eyebrow: 'This is an eyebrow',
diff --git a/docs-site/src/pages/pattern-lab/_patterns/40-components/card/05-card.twig b/docs-site/src/pages/pattern-lab/_patterns/40-components/card/05-card.twig
index a2fc750099..9b2bb4f11c 100644
--- a/docs-site/src/pages/pattern-lab/_patterns/40-components/card/05-card.twig
+++ b/docs-site/src/pages/pattern-lab/_patterns/40-components/card/05-card.twig
@@ -1,9 +1,14 @@
-{% include '@bolt-components-card-replacement/card-replacement.twig' with {
-  media: {
-    image: {
+{% set image %}
+  {% include '@bolt-elements-image/image.twig' with {
+    attributes: {
+      alt: 'Image alt text',
       src: '/images/placeholders/landscape-16x9-mountains.jpg',
-      alt: 'Image alt.',
     },
+  } only %}
+{% endset %}
+{% include '@bolt-components-card-replacement/card-replacement.twig' with {
+  media: {
+    image: image,
   },
   body: {
     eyebrow: 'This is an eyebrow',
diff --git a/docs-site/src/pages/pattern-lab/_patterns/40-components/card/06-card-horizontal.twig b/docs-site/src/pages/pattern-lab/_patterns/40-components/card/06-card-horizontal.twig
index a924e06313..4fe66e9a79 100644
--- a/docs-site/src/pages/pattern-lab/_patterns/40-components/card/06-card-horizontal.twig
+++ b/docs-site/src/pages/pattern-lab/_patterns/40-components/card/06-card-horizontal.twig
@@ -13,24 +13,59 @@
 }{% endverbatim %}
 {% endset %}
 
+{% set image_element_usage %}{% verbatim %}
+  {% set image %}
+  {% include '@bolt-elements-image/image.twig' with {
+    background: true,
+    attributes: {
+      alt: 'Image alt text',
+      src: 'path/image.jpg',
+    },
+  } only %}
+{% endset %}
+{% include '@bolt-components-card-replacement/card-replacement.twig' with {
+  horizontal: true,
+  height: 'auto',
+  media: {
+    image: image,
+  },
+  ...
+} only %}
+{% endverbatim %}
+{% endset %}
+
 {% set customBodyDemo %}{% verbatim %}body: {
   content: customContentWithGrid,
 }{% endverbatim %}
 {% endset %}
 
+{% set image %}
+  {% include '@bolt-elements-image/image.twig' with {
+    background: true,
+    attributes: {
+      alt: 'Image alt text',
+      src: '/images/placeholders/landscape-16x9-mountains.jpg',
+    },
+  } only %}
+{% endset %}
+
 {% set card %}
   <bolt-text headline>
     Default horizontal card
   </bolt-text>
+  <bolt-text>
+    When creating a horizontal card by setting the <code>horizontal</code> prop to <code>true</code> remember to set <code>height</code> prop to <code>auto</code>. The image you pass for card media should also have its <code>background</code> prop set to <code>true</code> in order to allow the image to be cropped and display properly.
+  </bolt-text>
+  {% include '@bolt-components-code-snippet/code-snippet.twig' with {
+    content: image_element_usage,
+    lang: 'twig',
+    mode: 'dark',
+  } only %}
   {% include '@bolt-components-card-replacement/card-replacement.twig' with {
     horizontal: true,
     height: 'auto',
     media: {
-      image: {
-        src: '/images/placeholders/landscape-16x9-mountains.jpg',
-        alt: 'Image alt.',
-        placeholder_color: '#afcde6',
-      },
+      image: image
     },
     body: {
       eyebrow: 'This is an eyebrow',
@@ -78,11 +113,7 @@
           horizontal: true,
           height: 'auto',
           media: {
-            image: {
-              src: '/images/placeholders/landscape-16x9-mountains.jpg',
-              alt: 'Image alt.',
-              placeholder_color: '#afcde6',
-            },
+            image: image,
             attributes: {
               style: 'min-width:' ~ width,
             }
@@ -196,4 +227,4 @@
       } only %}
     </bolt-grid-item>
   {% endfor %}
-</bolt-grid>>
+</bolt-grid>
diff --git a/docs-site/src/pages/pattern-lab/_patterns/40-components/card/10-card-button-variations.twig b/docs-site/src/pages/pattern-lab/_patterns/40-components/card/10-card-button-variations.twig
index 6461233352..e720dd9859 100644
--- a/docs-site/src/pages/pattern-lab/_patterns/40-components/card/10-card-button-variations.twig
+++ b/docs-site/src/pages/pattern-lab/_patterns/40-components/card/10-card-button-variations.twig
@@ -1,10 +1,16 @@
+{% set image %}
+  {% include '@bolt-elements-image/image.twig' with {
+    attributes: {
+      alt: 'Image alt text',
+      src: '/images/placeholders/landscape-16x9-mountains.jpg',
+    },
+  } only %}
+{% endset %}
+
 {% set card_1 %}
   {% include '@bolt-components-card-replacement/card-replacement.twig' with {
     media: {
-      image: {
-        src: '/images/placeholders/landscape-16x9-mountains.jpg',
-        alt: 'Image alt.',
-      },
+      image: image,
     },
     body: {
       eyebrow: 'This is an eyebrow',
@@ -23,10 +29,7 @@
 {% set card_2 %}
   {% include '@bolt-components-card-replacement/card-replacement.twig' with {
     media: {
-      image: {
-        src: '/images/placeholders/landscape-16x9-mountains.jpg',
-        alt: 'Image alt.',
-      },
+      image: image,
     },
     body: {
       eyebrow: 'This is an eyebrow',
@@ -46,10 +49,7 @@
 {% set card_3 %}
   {% include '@bolt-components-card-replacement/card-replacement.twig' with {
     media: {
-      image: {
-        src: '/images/placeholders/landscape-16x9-mountains.jpg',
-        alt: 'Image alt.',
-      },
+      image: image,
     },
     body: {
       eyebrow: 'This is an eyebrow',
@@ -69,10 +69,7 @@
 {% set card_4 %}
   {% include '@bolt-components-card-replacement/card-replacement.twig' with {
     media: {
-      image: {
-        src: '/images/placeholders/landscape-16x9-mountains.jpg',
-        alt: 'Image alt.',
-      },
+      image: image,
     },
     body: {
       eyebrow: 'This is an eyebrow',
diff --git a/docs-site/src/pages/pattern-lab/_patterns/40-components/card/15-card-replacement-with-two-buttons.twig b/docs-site/src/pages/pattern-lab/_patterns/40-components/card/15-card-replacement-with-two-buttons.twig
index ae2ff5baca..240e2e2c84 100644
--- a/docs-site/src/pages/pattern-lab/_patterns/40-components/card/15-card-replacement-with-two-buttons.twig
+++ b/docs-site/src/pages/pattern-lab/_patterns/40-components/card/15-card-replacement-with-two-buttons.twig
@@ -1,11 +1,16 @@
+{% set image %}
+  {% include '@bolt-elements-image/image.twig' with {
+    attributes: {
+      alt: 'Image alt text',
+      src: '/images/placeholders/landscape-16x9-mountains.jpg',
+    },
+  } only %}
+{% endset %}
 
 {% set card %}
   {% include '@bolt-components-card-replacement/card-replacement.twig' with {
     media: {
-      image: {
-        src: '/images/placeholders/landscape-16x9-mountains.jpg',
-        alt: 'Image alt.',
-      },
+      image: image,
     },
     body: {
       eyebrow: 'This is an eyebrow',
diff --git a/docs-site/src/pages/pattern-lab/_patterns/40-components/card/25-card-replacement-height-variations.twig b/docs-site/src/pages/pattern-lab/_patterns/40-components/card/25-card-replacement-height-variations.twig
index 58ae72deea..91dc0ccdf2 100644
--- a/docs-site/src/pages/pattern-lab/_patterns/40-components/card/25-card-replacement-height-variations.twig
+++ b/docs-site/src/pages/pattern-lab/_patterns/40-components/card/25-card-replacement-height-variations.twig
@@ -1,5 +1,12 @@
 {% set schema = bolt.data.components['@bolt-components-card-replacement'].schema %}
-
+{% set image %}
+  {% include '@bolt-elements-image/image.twig' with {
+    attributes: {
+      alt: 'Image alt text',
+      src: '/images/placeholders/landscape-16x9-mountains.jpg',
+    },
+  } only %}
+{% endset %}
 <bolt-grid gutter="medium" row-gutter="medium">
   {% for height in schema.properties.height.enum %}
     {% if height == 'full' %}
@@ -11,10 +18,7 @@
       {% include '@bolt-components-card-replacement/card-replacement.twig' with {
         height: height,
         media: {
-          image: {
-            src: '/images/placeholders/landscape-16x9-mountains.jpg',
-            alt: 'Image alt.',
-          },
+          image: image,
         },
         body: {
           headline: 'This card has ' ~ height ~ ' height. ' ~ more_text,
@@ -41,10 +45,7 @@
     {% include '@bolt-components-card-replacement/card-replacement.twig' with {
       height: 'full',
       media: {
-        image: {
-          src: '/images/placeholders/landscape-16x9-mountains.jpg',
-          alt: 'Image alt.',
-        },
+        image: image,
       },
       body: {
         headline: 'This card also has full height.',
diff --git a/docs-site/src/pages/pattern-lab/_patterns/40-components/card/30-card-replacement-link-variations.twig b/docs-site/src/pages/pattern-lab/_patterns/40-components/card/30-card-replacement-link-variations.twig
index ab55cfea6e..4bc9391cfa 100644
--- a/docs-site/src/pages/pattern-lab/_patterns/40-components/card/30-card-replacement-link-variations.twig
+++ b/docs-site/src/pages/pattern-lab/_patterns/40-components/card/30-card-replacement-link-variations.twig
@@ -4,14 +4,18 @@
     href: 'https://yahoo.com'
   }
 } only %}{% endspaceless %}{% endset %}
-
+{% set image %}
+  {% include '@bolt-elements-image/image.twig' with {
+    attributes: {
+      alt: 'Image alt text',
+      src: '/images/placeholders/landscape-16x9-mountains.jpg',
+    },
+  } only %}
+{% endset %}
 {% set card_1 %}
   {% include '@bolt-components-card-replacement/card-replacement.twig' with {
     media: {
-      image: {
-        src: '/images/placeholders/landscape-16x9-mountains.jpg',
-        alt: 'Image alt.',
-      },
+      image: image,
     },
     body: {
       headline: 'No link',
@@ -33,10 +37,7 @@
       text: 'Go to google.com'
     },
     media: {
-      image: {
-        src: '/images/placeholders/landscape-16x9-mountains.jpg',
-        alt: 'Image alt.',
-      },
+      image: image,
     },
     body: {
       headline: 'With link',
diff --git a/docs-site/src/pages/pattern-lab/_patterns/40-components/card/40-card-replacement-with-freeform-content.twig b/docs-site/src/pages/pattern-lab/_patterns/40-components/card/40-card-replacement-with-freeform-content.twig
index 02a4964bbe..df99bcf5ae 100644
--- a/docs-site/src/pages/pattern-lab/_patterns/40-components/card/40-card-replacement-with-freeform-content.twig
+++ b/docs-site/src/pages/pattern-lab/_patterns/40-components/card/40-card-replacement-with-freeform-content.twig
@@ -126,12 +126,17 @@
         ]
       }
     } only %}
-    {% include '@bolt-components-card-replacement/_card-replacement-media.twig' with {
-      media: {
-        image: {
+    {% set image %}
+      {% include '@bolt-elements-image/image.twig' with {
+        attributes: {
+          alt: 'Image alt text',
           src: '/images/placeholders/landscape-16x9-mountains.jpg',
-          alt: 'Image alt.',
         },
+      } only %}
+    {% endset %}
+    {% include '@bolt-components-card-replacement/_card-replacement-media.twig' with {
+      media: {
+        image: image,
       }
     } %}
   {% endset %}
diff --git a/docs-site/src/pages/pattern-lab/_patterns/40-components/card/45-card-replacement-with-text-group.twig b/docs-site/src/pages/pattern-lab/_patterns/40-components/card/45-card-replacement-with-text-group.twig
index 1e08b0a9da..80197b9b8f 100644
--- a/docs-site/src/pages/pattern-lab/_patterns/40-components/card/45-card-replacement-with-text-group.twig
+++ b/docs-site/src/pages/pattern-lab/_patterns/40-components/card/45-card-replacement-with-text-group.twig
@@ -71,14 +71,18 @@
     content: block_list,
   } only %}
 {% endset %}
-
+{% set image %}
+  {% include '@bolt-elements-image/image.twig' with {
+    attributes: {
+      alt: 'Image alt text',
+      src: '/images/placeholders/landscape-16x9-mountains.jpg',
+    },
+  } only %}
+{% endset %}
 {% set card_2 %}
   {% include '@bolt-components-card-replacement/card-replacement.twig' with {
     media: {
-      image: {
-        src: '/images/placeholders/landscape-16x9-mountains.jpg',
-        alt: 'Image alt.',
-      },
+      image: image,
     },
     height: 'auto',
     body: {
diff --git a/docs-site/src/pages/pattern-lab/_patterns/40-components/card/50-card-replacement-border-radius.twig b/docs-site/src/pages/pattern-lab/_patterns/40-components/card/50-card-replacement-border-radius.twig
index 8c5faf056c..60a2d60e8b 100644
--- a/docs-site/src/pages/pattern-lab/_patterns/40-components/card/50-card-replacement-border-radius.twig
+++ b/docs-site/src/pages/pattern-lab/_patterns/40-components/card/50-card-replacement-border-radius.twig
@@ -1,13 +1,17 @@
 
+{% set image %}
+  {% include '@bolt-elements-image/image.twig' with {
+    attributes: {
+      alt: 'Image alt text',
+      src: '/images/placeholders/landscape-16x9-mountains.jpg',
+    },
+  } only %}
+{% endset %}
 {% set card_1 %}
   {% include '@bolt-components-card-replacement/card-replacement.twig' with {
     border_radius: 'large',
     media: {
-      image: {
-        src: '/images/placeholders/landscape-16x9-mountains.jpg',
-        alt: 'Image alt.',
-        placeholder_color: '#afcde6',
-      },
+      image: image,
     },
     body: {
       headline: 'This card has large border radius',
@@ -21,17 +25,21 @@
     ],
   } only %}
 {% endset %}
-
+{% set image %}
+  {% include '@bolt-elements-image/image.twig' with {
+    background: true,
+    attributes: {
+      alt: 'Image alt text',
+      src: '/images/placeholders/landscape-16x9-mountains.jpg',
+    },
+  } only %}
+{% endset %}
 {% set card_2 %}
   {% include '@bolt-components-card-replacement/card-replacement.twig' with {
     border_radius: 'large',
     horizontal: true,
     media: {
-      image: {
-        src: '/images/placeholders/landscape-16x9-mountains.jpg',
-        alt: 'Image alt.',
-        placeholder_color: '#afcde6',
-      },
+      image: image,
     },
     body: {
       headline: 'This card has large border radius',
diff --git a/docs-site/src/pages/pattern-lab/_patterns/40-components/card/55-card-replacement-spacing.twig b/docs-site/src/pages/pattern-lab/_patterns/40-components/card/55-card-replacement-spacing.twig
index 20d268afb2..7519abb156 100644
--- a/docs-site/src/pages/pattern-lab/_patterns/40-components/card/55-card-replacement-spacing.twig
+++ b/docs-site/src/pages/pattern-lab/_patterns/40-components/card/55-card-replacement-spacing.twig
@@ -1,16 +1,19 @@
 {% set schema = bolt.data.components['@bolt-components-card-replacement'].schema %}
-
+{% set image %}
+  {% include '@bolt-elements-image/image.twig' with {
+    attributes: {
+      alt: 'Image alt text',
+      src: '/images/placeholders/landscape-16x9-mountains.jpg',
+    },
+  } only %}
+{% endset %}
 <bolt-grid gutter="medium" row-gutter="medium">
   {% for spacing in schema.properties.spacing.enum %}
     {% set card %}
       {% include '@bolt-components-card-replacement/card-replacement.twig' with {
         spacing: spacing,
         media: {
-          image: {
-            src: '/images/placeholders/landscape-16x9-mountains.jpg',
-            alt: 'Image alt.',
-            placeholder_color: '#afcde6',
-          },
+          image: image,
         },
         body: {
           headline: 'This card has ' ~ spacing ~ ' spacing',
diff --git a/docs-site/src/pages/pattern-lab/_patterns/40-components/card/999-card-replacement-with-web-component.twig b/docs-site/src/pages/pattern-lab/_patterns/40-components/card/999-card-replacement-with-web-component.twig
index b3fb0058bd..b85414f088 100644
--- a/docs-site/src/pages/pattern-lab/_patterns/40-components/card/999-card-replacement-with-web-component.twig
+++ b/docs-site/src/pages/pattern-lab/_patterns/40-components/card/999-card-replacement-with-web-component.twig
@@ -16,7 +16,7 @@
 
 {% macro image() %}
   <bolt-card-replacement-media>
-    <bolt-image src="/images/placeholders/landscape-16x9-mountains.jpg" alt="card-replacement media."></bolt-image>
+    <img src="/images/placeholders/landscape-16x9-mountains.jpg" alt="card-replacement-media." class="e-bolt-image">
   </bolt-card-replacement-media>
 {% endmacro %}
 
diff --git a/docs-site/src/pages/pattern-lab/_patterns/40-components/carousel/25-carousel-basic-variations.twig b/docs-site/src/pages/pattern-lab/_patterns/40-components/carousel/25-carousel-basic-variations.twig
index 02bed3415a..631c55ee8d 100644
--- a/docs-site/src/pages/pattern-lab/_patterns/40-components/carousel/25-carousel-basic-variations.twig
+++ b/docs-site/src/pages/pattern-lab/_patterns/40-components/carousel/25-carousel-basic-variations.twig
@@ -137,13 +137,18 @@
 {% endset %}
 
 {% set card_slide_1 %}
-  {% include '@bolt-components-card-replacement/card-replacement.twig' with {
-    media: {
-      image: {
+  {% set image %}
+    {% include '@bolt-elements-image/image.twig' with {
+      attributes: {
         src: '/images/placeholders/landscape-16x9-mountains.jpg',
-        alt: 'Image',
-        lazyload: false,
+        alt: "Image alt.",
+        loading: 'lazy'
       },
+    } only %}
+  {% endset %}
+  {% include '@bolt-components-card-replacement/card-replacement.twig' with {
+    media: {
+      image: image,
     },
     body: {
       eyebrow: 'Slide 1',
@@ -158,13 +163,18 @@
   } only %}
 {% endset %}
 {% set card_slide_2 %}
-  {% include '@bolt-components-card-replacement/card-replacement.twig' with {
-    media: {
-      image: {
+  {% set image %}
+    {% include '@bolt-elements-image/image.twig' with {
+      attributes: {
         src: '/images/placeholders/landscape-16x9-mountains.jpg',
-        alt: 'Image',
-        lazyload: false,
+        alt: "Image alt.",
+        loading: 'lazy'
       },
+    } only %}
+  {% endset %}
+  {% include '@bolt-components-card-replacement/card-replacement.twig' with {
+    media: {
+      image: image,
     },
     body: {
       eyebrow: 'Slide 2',
@@ -181,11 +191,7 @@
 {% set card_slide_3 %}
   {% include '@bolt-components-card-replacement/card-replacement.twig' with {
     media: {
-      image: {
-        src: '/images/placeholders/landscape-16x9-mountains.jpg',
-        alt: 'Image',
-        lazyload: false,
-      },
+      image: image,
     },
     body: {
       eyebrow: 'Slide 3',
@@ -200,13 +206,18 @@
   } only %}
 {% endset %}
 {% set card_slide_4 %}
-  {% include '@bolt-components-card-replacement/card-replacement.twig' with {
-    media: {
-      image: {
+  {% set image %}
+    {% include '@bolt-elements-image/image.twig' with {
+      attributes: {
         src: '/images/placeholders/landscape-16x9-mountains.jpg',
-        alt: 'Image',
-        lazyload: false,
+        alt: "Image alt.",
+        loading: 'lazy'
       },
+    } only %}
+  {% endset %}
+  {% include '@bolt-components-card-replacement/card-replacement.twig' with {
+    media: {
+      image: image,
     },
     body: {
       eyebrow: 'Slide 4',
diff --git a/docs-site/src/pages/pattern-lab/_patterns/40-components/carousel/_archive/example-content/_carousel-slide-content.twig b/docs-site/src/pages/pattern-lab/_patterns/40-components/carousel/_archive/example-content/_carousel-slide-content.twig
index 9ca12ce220..7f3d52d9a2 100644
--- a/docs-site/src/pages/pattern-lab/_patterns/40-components/carousel/_archive/example-content/_carousel-slide-content.twig
+++ b/docs-site/src/pages/pattern-lab/_patterns/40-components/carousel/_archive/example-content/_carousel-slide-content.twig
@@ -1,10 +1,16 @@
+{% set image %}
+  {% include '@bolt-elements-image/image.twig' with {
+    attributes: {
+      alt: 'alt text',
+      src: '/images/placeholders/landscape-16x9-mountains.jpg',
+      loading: 'lazy',
+
+    },
+  } only %}
+{% endset %}
 {% include '@bolt-components-card-replacement/card-replacement.twig' with {
   media: {
-    image: {
-      src: "/images/placeholders/landscape-16x9-mountains.jpg",
-      lazyload: false,
-      alt: "Anthem Video"
-    },
+    image: image,
   },
   body: {
     headline: 'Anthem: Service Desktop',
diff --git a/docs-site/src/pages/pattern-lab/_patterns/40-components/modal/_wip-modal-content-variations.twig b/docs-site/src/pages/pattern-lab/_patterns/40-components/modal/_wip-modal-content-variations.twig
index e47835233b..9807fbfe3c 100644
--- a/docs-site/src/pages/pattern-lab/_patterns/40-components/modal/_wip-modal-content-variations.twig
+++ b/docs-site/src/pages/pattern-lab/_patterns/40-components/modal/_wip-modal-content-variations.twig
@@ -121,13 +121,19 @@
   {% set card_band_content %}
     <bolt-grid gutter="small" row-gutter="small">
       <bolt-grid-item column-start="1" column-span="12 4@small">
-        {% include '@bolt-components-card-replacement/card-replacement.twig' with {
-          media: {
-            image: {
+        {% set image %}
+          {% include '@bolt-elements-image/image.twig' with {
+            attributes: {
+              alt: 'alt text',
               src: '/images/placeholders/landscape-16x9-mountains.jpg',
-              alt: 'Image alt.',
-              lazyload: false,
+              loading: 'lazy',
+
             },
+          } only %}
+        {% endset %}
+        {% include '@bolt-components-card-replacement/card-replacement.twig' with {
+          media: {
+            image: image,
           },
           body: {
             headline: 'Collection 1',
@@ -143,11 +149,7 @@
       <bolt-grid-item column-start="1 5@small" column-span="12 4@small">
         {% include '@bolt-components-card-replacement/card-replacement.twig' with {
           media: {
-            image: {
-              src: '/images/placeholders/landscape-16x9-mountains.jpg',
-              alt: 'Image alt.',
-              lazyload: false,
-            },
+            image: image,
           },
           body: {
             headline: 'Collection 2',
@@ -163,11 +165,7 @@
       <bolt-grid-item column-start="1 9@small" column-span="12 4@small">
         {% include '@bolt-components-card-replacement/card-replacement.twig' with {
           media: {
-            image: {
-              src: '/images/placeholders/landscape-16x9-mountains.jpg',
-              alt: 'Image alt.',
-              lazyload: false,
-            },
+            image: image,
           },
           body: {
             headline: 'Collection 3',
diff --git a/docs-site/src/pages/pattern-lab/_patterns/40-components/page-header/-page-header-example-main-site-anonymous.twig b/docs-site/src/pages/pattern-lab/_patterns/40-components/page-header/-page-header-example-main-site-anonymous.twig
index ad25116c14..bbfb9b2e12 100644
--- a/docs-site/src/pages/pattern-lab/_patterns/40-components/page-header/-page-header-example-main-site-anonymous.twig
+++ b/docs-site/src/pages/pattern-lab/_patterns/40-components/page-header/-page-header-example-main-site-anonymous.twig
@@ -467,6 +467,16 @@
   } only %}
 
   {% set card %}
+    {% set image %}
+      {% include '@bolt-elements-image/image.twig' with {
+        attributes: {
+          alt: 'alt text',
+          src: '/images/placeholders/landscape-16x9-mountains.jpg',
+          loading: 'lazy',
+
+        },
+      } only %}
+    {% endset %}
     {% set card_body_content %}
       {% include '@bolt-components-headline/headline.twig' with {
         text: 'Placeholder Card',
@@ -484,10 +494,7 @@
         text: 'Go to google.com'
       },
       media: {
-        image: {
-          src: '/images/placeholders/landscape-16x9-mountains.jpg',
-          alt: 'Image alt.',
-        },
+        image: image,
       },
       body: {
         content: card_body_content,
diff --git a/docs-site/src/pages/pattern-lab/_patterns/40-components/page-header/-page-header-example-main-site-with-subnav.twig b/docs-site/src/pages/pattern-lab/_patterns/40-components/page-header/-page-header-example-main-site-with-subnav.twig
index 7cf1742361..dead67a787 100644
--- a/docs-site/src/pages/pattern-lab/_patterns/40-components/page-header/-page-header-example-main-site-with-subnav.twig
+++ b/docs-site/src/pages/pattern-lab/_patterns/40-components/page-header/-page-header-example-main-site-with-subnav.twig
@@ -462,6 +462,16 @@
   } only %}
 
   {% set card %}
+    {% set image %}
+      {% include '@bolt-elements-image/image.twig' with {
+        attributes: {
+          alt: 'alt text',
+          src: '/images/placeholders/landscape-16x9-mountains.jpg',
+          loading: 'lazy',
+
+        },
+      } only %}
+    {% endset %}
     {% set card_body_content %}
       {% include '@bolt-components-headline/headline.twig' with {
         text: 'Placeholder Card',
@@ -479,10 +489,7 @@
         text: 'Go to google.com'
       },
       media: {
-        image: {
-          src: '/images/placeholders/landscape-16x9-mountains.jpg',
-          alt: 'Image alt.',
-        },
+        image: image,
       },
       body: {
         content: card_body_content,
diff --git a/docs-site/src/pages/pattern-lab/_patterns/40-components/page-header/_demo-main-site-page-header.twig b/docs-site/src/pages/pattern-lab/_patterns/40-components/page-header/_demo-main-site-page-header.twig
index 29f51d455a..5469c79793 100644
--- a/docs-site/src/pages/pattern-lab/_patterns/40-components/page-header/_demo-main-site-page-header.twig
+++ b/docs-site/src/pages/pattern-lab/_patterns/40-components/page-header/_demo-main-site-page-header.twig
@@ -464,6 +464,16 @@
   } only %}
 
   {% set card %}
+    {% set image %}
+      {% include '@bolt-elements-image/image.twig' with {
+        attributes: {
+          alt: 'alt text',
+          src: '/images/placeholders/landscape-16x9-mountains.jpg',
+          loading: 'lazy',
+
+        },
+      } only %}
+    {% endset %}
     {% set card_body_content %}
       {% include '@bolt-components-headline/headline.twig' with {
         text: 'Placeholder Card',
@@ -481,10 +491,7 @@
         text: 'Go to pega.com'
       },
       media: {
-        image: {
-          src: '/images/placeholders/landscape-16x9-mountains.jpg',
-          alt: 'Image alt.',
-        },
+        image: image,
       },
       body: {
         content: card_body_content,
diff --git a/docs-site/src/pages/pattern-lab/_patterns/60-experiments/micro-journeys/combos/-95-in-page-example.twig b/docs-site/src/pages/pattern-lab/_patterns/60-experiments/micro-journeys/combos/-95-in-page-example.twig
index aee855caab..73d4ffd9c2 100644
--- a/docs-site/src/pages/pattern-lab/_patterns/60-experiments/micro-journeys/combos/-95-in-page-example.twig
+++ b/docs-site/src/pages/pattern-lab/_patterns/60-experiments/micro-journeys/combos/-95-in-page-example.twig
@@ -303,7 +303,16 @@
     theme: 'light'
   } only %}
 
+    {% set image %}
+      {% include '@bolt-elements-image/image.twig' with {
+        attributes: {
+          alt: '/alt text',
+          src: '/images/placeholders/500x500.jpg',
+          loading: 'lazy',
 
+        },
+      } only %}
+    {% endset %}
     {% embed '@pl/_band--collection.twig' with {
       theme: 'dark',
       size: 'medium',
@@ -311,10 +320,7 @@
         {
           pattern: 'card',
           media: {
-            image: {
-              src: '/images/content/promos/promo-16x9-anthem.jpg',
-              placeholder_color: '#8d9598'
-            },
+            image: image,
           },
           body: {
             eyebrow: 'Article',
@@ -335,10 +341,7 @@
         {
           pattern: 'card',
           media: {
-            image: {
-              src: '/images/content/promos/promo-16x9-anthem.jpg',
-              placeholder_color: '#8d9598'
-            },
+            image: image,
           },
           body: {
             eyebrow: 'Article',
@@ -356,10 +359,7 @@
         {
           pattern: 'card',
           media: {
-            image: {
-              src: '/images/content/promos/promo-16x9-anthem.jpg',
-              placeholder_color: '#8d9598'
-            },
+            image: image,
           },
           body: {
             eyebrow: 'Article',
@@ -730,7 +730,7 @@
           author: {
             image: {
               src: '/images/placeholders/500x500.jpg',
-              lazyload: true
+              loading: 'lazy'
             },
             name: 'Jessica Cuthbertson',
             title: 'CEO, RBS'
diff --git a/docs-site/src/pages/pattern-lab/_patterns/999-archive/blog/blog-homepage.twig b/docs-site/src/pages/pattern-lab/_patterns/999-archive/blog/blog-homepage.twig
index 0d3cbf8a2b..9399dfb1a8 100644
--- a/docs-site/src/pages/pattern-lab/_patterns/999-archive/blog/blog-homepage.twig
+++ b/docs-site/src/pages/pattern-lab/_patterns/999-archive/blog/blog-homepage.twig
@@ -522,13 +522,20 @@
 
     {% set main_content %}
       {% set card_1 %}
+        {% set image %}
+          {% include '@bolt-elements-image/image.twig' with {
+            attributes: {
+              alt: 'alt text',
+              src: '/images/content/promos/promo-blog-1.jpg',
+              loading: 'lazy',
+
+            },
+          } only %}
+        {% endset %}
         {% embed '@bolt-components-card-replacement/card-replacement.twig' with {
           theme: 'xlight',
           media: {
-            image: {
-              src: '/images/content/promos/promo-blog-1.jpg',
-              alt: '',
-            },
+            image: image,
           },
           actions: [
             {
@@ -553,13 +560,20 @@
         {% endembed %}
       {% endset %}
       {% set card_2 %}
+        {% set image %}
+          {% include '@bolt-elements-image/image.twig' with {
+            attributes: {
+              alt: 'alt text',
+              src: '/images/content/promos/promo-blog-2.jpg',
+              loading: 'lazy',
+
+            },
+          } only %}
+        {% endset %}
         {% embed '@bolt-components-card-replacement/card-replacement.twig' with {
           theme: 'xlight',
           media: {
-            image: {
-              src: '/images/content/promos/promo-blog-2.jpg',
-              alt: '',
-            },
+            image: image,
           },
           actions: [
             {
@@ -584,13 +598,20 @@
         {% endembed %}
       {% endset %}
       {% set card_3 %}
+        {% set image %}
+          {% include '@bolt-elements-image/image.twig' with {
+            attributes: {
+              alt: 'alt text',
+              src: '/images/content/promos/promo-blog-3.jpg',
+              loading: 'lazy',
+
+            },
+          } only %}
+        {% endset %}
         {% embed '@bolt-components-card-replacement/card-replacement.twig' with {
           theme: 'xlight',
           media: {
-            image: {
-              src: '/images/content/promos/promo-blog-3.jpg',
-              alt: '',
-            },
+            image: image,
           },
           actions: [
             {
@@ -615,13 +636,19 @@
         {% endembed %}
       {% endset %}
       {% set card_4 %}
+        {% set image %}
+          {% include '@bolt-elements-image/image.twig' with {
+            attributes: {
+              alt: 'alt text',
+              src: '/images/content/promos/promo-16x9-ai.jpg',
+              loading: 'lazy',
+            },
+          } only %}
+        {% endset %}
         {% include '@bolt-components-card-replacement/card-replacement.twig' with {
           theme: 'xlight',
           media: {
-            image: {
-              src: '/images/content/promos/promo-16x9-ai.jpg',
-              alt: '',
-            },
+            image: image
           },
           body: {
             eyebrow: 'Kate Fowler',
@@ -636,13 +663,19 @@
         } only %}
       {% endset %}
       {% set card_5 %}
+        {% set image %}
+          {% include '@bolt-elements-image/image.twig' with {
+            attributes: {
+              alt: 'alt text',
+              src: '/images/content/promos/promo-16x9-ai.jpg',
+              loading: 'lazy',
+            },
+          } only %}
+        {% endset %}
         {% include '@bolt-components-card-replacement/card-replacement.twig' with {
           theme: 'xlight',
           media: {
-            image: {
-              src: '/images/content/promos/promo-16x9-ai.jpg',
-              alt: '',
-            },
+            image: image,
           },
           body: {
             eyebrow: 'Anthony Abdulla',
@@ -657,13 +690,19 @@
         } only %}
       {% endset %}
       {% set card_6 %}
+        {% set image %}
+          {% include '@bolt-elements-image/image.twig' with {
+            attributes: {
+              alt: 'alt text',
+              src: '/images/content/promos/promo-16x9-ai.jpg',
+              loading: 'lazy',
+            },
+          } only %}
+        {% endset %}
         {% include '@bolt-components-card-replacement/card-replacement.twig' with {
           theme: 'xlight',
           media: {
-            image: {
-              src: '/images/content/promos/promo-16x9-ai.jpg',
-              alt: '',
-            },
+            image: image,
           },
           body: {
             eyebrow: 'Baruch Sachs and Leanne Russell',
diff --git a/docs-site/src/pages/pattern-lab/_patterns/999-archive/careers/careers-homepage.twig b/docs-site/src/pages/pattern-lab/_patterns/999-archive/careers/careers-homepage.twig
index 69cc2ccacc..5c847ddf2d 100644
--- a/docs-site/src/pages/pattern-lab/_patterns/999-archive/careers/careers-homepage.twig
+++ b/docs-site/src/pages/pattern-lab/_patterns/999-archive/careers/careers-homepage.twig
@@ -374,13 +374,18 @@
     } only %}
 
     {% set card_1 %}
-      {% include '@bolt-components-card-replacement/card-replacement.twig' with {
-        media: {
-          image: {
+      {% set image %}
+        {% include '@bolt-elements-image/image.twig' with {
+          attributes: {
+            alt: 'alt text',
             src: '/images/content/promos/promo-16x9-anthem.jpg',
-            alt: 'Anthem Video',
-            lazyload: false,
+            loading: 'lazy',
           },
+        } only %}
+      {% endset %}
+      {% include '@bolt-components-card-replacement/card-replacement.twig' with {
+        media: {
+          image: image,
         },
         body: {
           eyebrow: 'Eyebrow',
@@ -396,13 +401,18 @@
     {% endset %}
 
     {% set card_2 %}
-      {% include '@bolt-components-card-replacement/card-replacement.twig' with {
-        media: {
-          image: {
+      {% set image %}
+        {% include '@bolt-elements-image/image.twig' with {
+          attributes: {
+            alt: 'alt text',
             src: '/images/content/promos/promo-16x9-anthem.jpg',
-            alt: 'Anthem Video',
-            lazyload: false,
+            loading: 'lazy',
           },
+        } only %}
+      {% endset %}
+      {% include '@bolt-components-card-replacement/card-replacement.twig' with {
+        media: {
+          image: image,
         },
         body: {
           headline: 'Anthem debuts its next-generation service desktop, driving frictionless customer experiences.',
diff --git a/docs-site/src/pages/pattern-lab/_patterns/999-archive/content-hub/sticky-navbar.twig b/docs-site/src/pages/pattern-lab/_patterns/999-archive/content-hub/sticky-navbar.twig
index ebfdd1797f..537854c4a8 100644
--- a/docs-site/src/pages/pattern-lab/_patterns/999-archive/content-hub/sticky-navbar.twig
+++ b/docs-site/src/pages/pattern-lab/_patterns/999-archive/content-hub/sticky-navbar.twig
@@ -167,12 +167,17 @@
     {% endset %}
 
     {% set card %}
-      {% include '@bolt-components-card-replacement/card-replacement.twig' with {
-        media: {
-          image: {
+      {% set image %}
+        {% include '@bolt-elements-image/image.twig' with {
+          attributes: {
             src: '/images/content/backgrounds/background-short-1.jpg',
             alt: 'Anthem Video',
           },
+        } only %}
+      {% endset %}
+      {% include '@bolt-components-card-replacement/card-replacement.twig' with {
+        media: {
+          image: image,
         },
         body: {
           eyebrow: 'Whitepaper',
@@ -235,12 +240,17 @@
     {% endset %}
 
     {% set card %}
-      {% include '@bolt-components-card-replacement/card-replacement.twig' with {
-        media: {
-          image: {
+      {% set image %}
+        {% include '@bolt-elements-image/image.twig' with {
+          attributes: {
             src: '/images/content/backgrounds/background-tall-2.jpg',
             alt: 'Anthem Video',
           },
+        } only %}
+      {% endset %}
+      {% include '@bolt-components-card-replacement/card-replacement.twig' with {
+        media: {
+          image: image,
         },
         body: {
           eyebrow: 'Whitepaper',
@@ -301,12 +311,17 @@
       <p>Leveraging productivity bots that simplify the employee experience injects instant ROI into your business. In just two to three weeks you'll turn all your service agents, back-office workers, or front-line sellers into productivity ninjas. They’ll be happier. You’ll be happier. And your customers will be happier.</p>
     {% endset %}
     {% set card %}
-      {% include '@bolt-components-card-replacement/card-replacement.twig' with {
-        media: {
-          image: {
+      {% set image %}
+        {% include '@bolt-elements-image/image.twig' with {
+          attributes: {
             src: '/images/content/backgrounds/background-tall-3.jpg',
             alt: 'Anthem Video',
           },
+        } only %}
+      {% endset %}
+      {% include '@bolt-components-card-replacement/card-replacement.twig' with {
+        media: {
+          image: image,
         },
         body: {
           eyebrow: 'Whitepaper',
@@ -368,12 +383,17 @@
       <p>Because once you know the details, you can act. And that makes all the difference.</p>
     {% endset %}
     {% set card %}
-        {% include '@bolt-components-card-replacement/card-replacement.twig' with {
-        media: {
-          image: {
+      {% set image %}
+        {% include '@bolt-elements-image/image.twig' with {
+          attributes: {
             src: '/images/content/backgrounds/background-tall-2.jpg',
             alt: 'Anthem Video',
           },
+        } only %}
+      {% endset %}
+        {% include '@bolt-components-card-replacement/card-replacement.twig' with {
+        media: {
+          image: image,
         },
         body: {
           eyebrow: 'Whitepaper',
@@ -433,12 +453,17 @@
       <p>Leveraging productivity bots that simplify the employee experience injects instant ROI into your business. In just two to three weeks you'll turn all your service agents, back-office workers, or front-line sellers into productivity ninjas. They’ll be happier. You’ll be happier. And your customers will be happier.</p>
     {% endset %}
     {% set card %}
-      {% include '@bolt-components-card-replacement/card-replacement.twig' with {
-        media: {
-          image: {
+      {% set image %}
+        {% include '@bolt-elements-image/image.twig' with {
+          attributes: {
             src: '/images/content/backgrounds/background-tall-3.jpg',
             alt: 'Anthem Video',
           },
+        } only %}
+      {% endset %}
+      {% include '@bolt-components-card-replacement/card-replacement.twig' with {
+        media: {
+          image: image,
         },
         body: {
           eyebrow: 'Whitepaper',
@@ -498,12 +523,17 @@
       <p>Capabilities such as auto self-documentation ensure an audit trail is maintained of all activities so compliance risk is minimized and required reporting is streamlined and automated.</p>
     {% endset %}
     {% set card %}
-      {% include '@bolt-components-card-replacement/card-replacement.twig' with {
-        media: {
-          image: {
+      {% set image %}
+        {% include '@bolt-elements-image/image.twig' with {
+          attributes: {
             src: '/images/content/backgrounds/background-tall-2.jpg',
             alt: 'Anthem Video',
           },
+        } only %}
+      {% endset %}
+      {% include '@bolt-components-card-replacement/card-replacement.twig' with {
+        media: {
+          image: image,
         },
         body: {
           eyebrow: 'Whitepaper',
diff --git a/docs-site/src/pages/pattern-lab/_patterns/999-archive/events/event-detail.twig b/docs-site/src/pages/pattern-lab/_patterns/999-archive/events/event-detail.twig
index 2019d87e66..888186c2a9 100644
--- a/docs-site/src/pages/pattern-lab/_patterns/999-archive/events/event-detail.twig
+++ b/docs-site/src/pages/pattern-lab/_patterns/999-archive/events/event-detail.twig
@@ -495,6 +495,27 @@
 {# End Speakers section #}
 
 {# Start 2017 Highlights section #}
+  {% set image_1 %}
+    {% include '@bolt-elements-image/image.twig' with {
+      attributes: {
+        src: '/images/placeholders/1200x660.jpg',
+      },
+    } only %}
+  {% endset %}
+  {% set image_2 %}
+    {% include '@bolt-elements-image/image.twig' with {
+      attributes: {
+        src: '/images/content/promos/promo-16x9-anthem.jpg',
+      },
+    } only %}
+  {% endset %}
+  {% set image_3 %}
+    {% include '@bolt-elements-image/image.twig' with {
+      attributes: {
+        src: '/images/content/promos/promo-16x9-ai.jpg',
+      },
+    } only %}
+  {% endset %}
   {% embed '@pl/_band--collection.twig' with {
   theme: 'xlight',
   size: 'large',
@@ -502,13 +523,11 @@
     {
       pattern: 'card',
       media: {
-        image: {
-            src: '/images/placeholders/1200x660.jpg'
-          },
+        image: image_1,
       },
       body: {
         eyebrow: 'Article',
-        headline: 'Headline #2',
+        headline: 'Headline #1',
         paragraph: 'Simplify and automate to reduce costs and improve agility.',
       },
       actions: [
@@ -522,9 +541,7 @@
     {
       pattern: 'card',
       media: {
-        image: {
-          src: '/images/content/promos/promo-16x9-anthem.jpg'
-        },
+        image: image_2,
       },
       body: {
         eyebrow: 'Article',
@@ -542,9 +559,7 @@
     {
       pattern: 'card',
       media: {
-        image: {
-          src: '/images/content/promos/promo-16x9-ai.jpg'
-        },
+        image: image_3,
       },
       body: {
         eyebrow: 'Article',
@@ -614,13 +629,11 @@
     {
       pattern: 'card',
       media: {
-        image: {
-            src: '/images/placeholders/1200x660.jpg'
-          },
+        image: image_1,
       },
       body: {
         eyebrow: 'Article',
-        headline: 'Headline #2',
+        headline: 'Headline #1',
         paragraph: 'Simplify and automate to reduce costs and improve agility.',
       },
       actions: [
@@ -634,9 +647,7 @@
     {
       pattern: 'card',
       media: {
-        image: {
-          src: '/images/content/promos/promo-16x9-anthem.jpg'
-        },
+        image: image_2,
       },
       body: {
         eyebrow: 'Article',
@@ -654,9 +665,7 @@
     {
       pattern: 'card',
       media: {
-        image: {
-          src: '/images/content/promos/promo-16x9-ai.jpg'
-        },
+        image: image_3,
       },
       body: {
         eyebrow: 'Article',
diff --git a/docs-site/src/pages/pattern-lab/_patterns/999-archive/homepage/homepage-japanese.twig b/docs-site/src/pages/pattern-lab/_patterns/999-archive/homepage/homepage-japanese.twig
index 4851b8b739..3f9bed2304 100644
--- a/docs-site/src/pages/pattern-lab/_patterns/999-archive/homepage/homepage-japanese.twig
+++ b/docs-site/src/pages/pattern-lab/_patterns/999-archive/homepage/homepage-japanese.twig
@@ -271,7 +271,27 @@
     {% endblock %}
   {% endembed %}
 
-
+  {% set image_1 %}
+    {% include '@bolt-elements-image/image.twig' with {
+      attributes: {
+        src: '/images/content/promos/promo-16x9-forrester.jpg',
+      },
+    } only %}
+  {% endset %}
+  {% set image_2 %}
+    {% include '@bolt-elements-image/image.twig' with {
+      attributes: {
+        src: '/images/content/promos/promo-16x9-anthem.jpg',
+      },
+    } only %}
+  {% endset %}
+  {% set image_3 %}
+    {% include '@bolt-elements-image/image.twig' with {
+      attributes: {
+        src: '/images/content/promos/promo-16x9-ai.jpg',
+      },
+    } only %}
+  {% endset %}
   {% embed '@pl/_band--collection.twig' with {
     theme: 'xlight',
     size: 'large',
@@ -279,9 +299,7 @@
       {
         pattern: 'card',
         media: {
-          image: {
-            src: '/images/content/promos/promo-16x9-forrester.jpg'
-          },
+          image: image_1,
         },
         body: {
           headline: 'iBPMSでの2017MAGIC QUADRANT',
@@ -298,9 +316,7 @@
       {
         pattern: 'card',
         media: {
-          image: {
-            src: '/images/content/promos/promo-16x9-anthem.jpg'
-          },
+          image: image_2,
         },
         body: {
           headline: 'Robotics and AI Are Changing the World of Work',
@@ -317,9 +333,7 @@
       {
         pattern: 'card',
         media: {
-          image: {
-            src: '/images/content/promos/promo-16x9-ai.jpg'
-          },
+          image: image_3,
         },
         body: {
           headline: 'トランサヴィア：エンドツーエンドのカスタマージャーニー',
diff --git a/docs-site/src/pages/pattern-lab/_patterns/999-archive/homepage/homepage.twig b/docs-site/src/pages/pattern-lab/_patterns/999-archive/homepage/homepage.twig
index b288c06ac5..2a25f8b9c3 100644
--- a/docs-site/src/pages/pattern-lab/_patterns/999-archive/homepage/homepage.twig
+++ b/docs-site/src/pages/pattern-lab/_patterns/999-archive/homepage/homepage.twig
@@ -151,8 +151,27 @@
     {% endblock %}
   {% endembed %}
 
-
-
+  {% set image_1 %}
+    {% include '@bolt-elements-image/image.twig' with {
+      attributes: {
+        src: '/images/content/promos/promo-16x9-forrester.jpg',
+      },
+    } only %}
+  {% endset %}
+  {% set image_2 %}
+    {% include '@bolt-elements-image/image.twig' with {
+      attributes: {
+        src: '/images/content/promos/promo-16x9-anthem.jpg',
+      },
+    } only %}
+  {% endset %}
+  {% set image_3 %}
+    {% include '@bolt-elements-image/image.twig' with {
+      attributes: {
+        src: '/images/content/promos/promo-16x9-ai.jpg',
+      },
+    } only %}
+  {% endset %}
   {% embed '@pl/_band--collection.twig' with {
     theme: 'light',
     size: 'medium',
@@ -160,9 +179,7 @@
       {
         pattern: 'card',
         media: {
-          image: {
-            src: '/images/content/promos/promo-16x9-forrester.jpg'
-          },
+          image: image_1,
         },
         body: {
           eyebrow:  'Article',
@@ -180,9 +197,7 @@
       {
         pattern: 'card',
         media: {
-          image: {
-            src: '/images/content/promos/promo-16x9-anthem.jpg'
-          },
+          image: image_2,
         },
         body: {
           eyebrow: 'Article',
@@ -205,9 +220,7 @@
       {
         pattern: 'card',
         media: {
-          image: {
-            src: '/images/content/promos/promo-16x9-ai.jpg'
-          },
+          image: image_3,
         },
         body: {
           eyebrow: 'Article',
diff --git a/docs-site/src/pages/pattern-lab/_patterns/999-archive/partners/partners-search.twig b/docs-site/src/pages/pattern-lab/_patterns/999-archive/partners/partners-search.twig
index bf9edcbf58..c5aeb91c55 100644
--- a/docs-site/src/pages/pattern-lab/_patterns/999-archive/partners/partners-search.twig
+++ b/docs-site/src/pages/pattern-lab/_patterns/999-archive/partners/partners-search.twig
@@ -339,13 +339,17 @@
           <bolt-grid gutter="medium" row-gutter="medium">
             {% for i in 1..12 %}
               {% set card %}
+                {% set image %}
+                  {% include '@bolt-elements-image/image.twig' with {
+                    attributes: {
+                      src: '/images/placeholders/landscape-16x9-mountains.jpg',
+                    },
+                  } only %}
+                {% endset %}
                 {% include '@bolt-components-card-replacement/card-replacement.twig' with {
                   theme: 'xlight',
                   media: {
-                    image: {
-                      src: '/images/placeholders/landscape-16x9-mountains.jpg',
-                      alt: 'Image alt.',
-                    },
+                    image: image,
                   },
                   body: {
                     eyebrow: 'Systems Integrator',
diff --git a/docs-site/src/pages/pattern-lab/_patterns/999-archive/press-and-media/news-landing.twig b/docs-site/src/pages/pattern-lab/_patterns/999-archive/press-and-media/news-landing.twig
index 37a539f1b1..1174a43d52 100644
--- a/docs-site/src/pages/pattern-lab/_patterns/999-archive/press-and-media/news-landing.twig
+++ b/docs-site/src/pages/pattern-lab/_patterns/999-archive/press-and-media/news-landing.twig
@@ -312,7 +312,27 @@
       {{ parent() }}
     {% endblock band_content %}
   {% endembed %}
-
+  {% set image_1 %}
+    {% include '@bolt-elements-image/image.twig' with {
+      attributes: {
+        src: '/images/placeholders/1200x660.jpg',
+      },
+    } only %}
+  {% endset %}
+  {% set image_2 %}
+    {% include '@bolt-elements-image/image.twig' with {
+      attributes: {
+        src: '/images/content/promos/promo-16x9-anthem.jpg',
+      },
+    } only %}
+  {% endset %}
+  {% set image_3 %}
+    {% include '@bolt-elements-image/image.twig' with {
+      attributes: {
+        src: '/images/content/promos/promo-16x9-ai.jpg',
+      },
+    } only %}
+  {% endset %}
   {# Featured Resources #}
   {% embed '@pl/_band--collection.twig' with {
   theme: 'dark',
@@ -321,9 +341,7 @@
     {
       pattern: 'card',
       media: {
-        image: {
-          src: '/images/placeholders/1200x660.jpg'
-        },
+        image: image_1,
       },
       body: {
         headline: 'First resource',
@@ -339,9 +357,7 @@
     {
       pattern: 'card',
       media: {
-        image: {
-          src: '/images/content/promos/promo-16x9-anthem.jpg'
-        },
+        image: image_2,
       },
       body: {
         eyebrow: 'Optional resource type',
@@ -364,9 +380,7 @@
     {
       pattern: 'card',
       media: {
-        image: {
-          src: '/images/content/promos/promo-16x9-ai.jpg'
-        },
+        image: image_3,
       },
       body: {
         headline: 'Third resource',
diff --git a/docs-site/src/pages/pattern-lab/_patterns/999-archive/product-pages/_product-t3-extra-videos.twig b/docs-site/src/pages/pattern-lab/_patterns/999-archive/product-pages/_product-t3-extra-videos.twig
index 9bf5821124..d5d5116a8c 100644
--- a/docs-site/src/pages/pattern-lab/_patterns/999-archive/product-pages/_product-t3-extra-videos.twig
+++ b/docs-site/src/pages/pattern-lab/_patterns/999-archive/product-pages/_product-t3-extra-videos.twig
@@ -860,7 +860,13 @@
   {% endblock %}
 {% endembed %}
 
-
+  {% set image %}
+    {% include '@bolt-elements-image/image.twig' with {
+      attributes: {
+        src: '/images/content/promos/promo-16x9-anthem.jpg',
+      },
+    } only %}
+  {% endset %}
 
 {% embed '@pl/_band--collection.twig' with {
   theme: 'xlight',
@@ -869,9 +875,7 @@
     {
       pattern: 'card',
       media: {
-        image: {
-          src: '/images/content/promos/promo-16x9-anthem.jpg'
-        },
+        image: image,
       },
       body: {
         eyebrow: 'Article',
@@ -892,9 +896,7 @@
     {
       pattern: 'card',
       media: {
-        image: {
-          src: '/images/content/promos/promo-16x9-anthem.jpg'
-        },
+        image: image,
       },
       body: {
         eyebrow: 'Article',
@@ -912,9 +914,7 @@
     {
       pattern: 'card',
       media: {
-        image: {
-          src: '/images/content/promos/promo-16x9-anthem.jpg'
-        },
+        image: image,
       },
       body: {
         eyebrow: 'Article',
diff --git a/docs-site/src/pages/pattern-lab/_patterns/999-archive/product-pages/_product-t3.twig b/docs-site/src/pages/pattern-lab/_patterns/999-archive/product-pages/_product-t3.twig
index 547a0abafb..6b519ea6b3 100644
--- a/docs-site/src/pages/pattern-lab/_patterns/999-archive/product-pages/_product-t3.twig
+++ b/docs-site/src/pages/pattern-lab/_patterns/999-archive/product-pages/_product-t3.twig
@@ -863,7 +863,13 @@
   {% endblock %}
 {% endembed %}
 
-
+{% set image %}
+  {% include '@bolt-elements-image/image.twig' with {
+    attributes: {
+      src: '/images/content/promos/promo-16x9-anthem.jpg',
+    },
+  } only %}
+{% endset %}
 
 {% embed '@pl/_band--collection.twig' with {
   theme: 'xlight',
@@ -872,9 +878,7 @@
     {
       pattern: 'card',
       media: {
-        image: {
-          src: '/images/content/promos/promo-16x9-anthem.jpg'
-        },
+        image: image,
       },
       body: {
         eyebrow: 'Article',
@@ -895,9 +899,7 @@
     {
       pattern: 'card',
       media: {
-        image: {
-          src: '/images/content/promos/promo-16x9-anthem.jpg'
-        },
+        image: image,
       },
       body: {
         eyebrow: 'Article',
@@ -915,9 +917,7 @@
     {
       pattern: 'card',
       media: {
-        image: {
-          src: '/images/content/promos/promo-16x9-anthem.jpg'
-        },
+        image: image,
       },
       body: {
         eyebrow: 'Article',
diff --git a/docs-site/src/pages/pattern-lab/_patterns/999-archive/product-pages/product-landing.twig b/docs-site/src/pages/pattern-lab/_patterns/999-archive/product-pages/product-landing.twig
index 57d88ecf2e..05cc2febed 100644
--- a/docs-site/src/pages/pattern-lab/_patterns/999-archive/product-pages/product-landing.twig
+++ b/docs-site/src/pages/pattern-lab/_patterns/999-archive/product-pages/product-landing.twig
@@ -354,7 +354,14 @@
   {% endblock %}
 {% endembed %}
 
-
+  {% set image %}
+    {% include '@bolt-elements-image/image.twig' with {
+      attributes: {
+        src: '/images/content/promos/promo-16x9-anthem.jpg',
+        loading: 'lazy'
+      },
+    } only %}
+  {% endset %}
 
 {% embed '@pl/_band--collection.twig' with {
   theme: 'light',
@@ -363,10 +370,7 @@
     {
       pattern: 'card',
       media: {
-        image: {
-          src: '/images/content/promos/promo-16x9-anthem.jpg',
-          lazyload: true
-        },
+        image: image,
       },
       body: {
         eyebrow: 'Article',
@@ -388,10 +392,7 @@
     {
       pattern: 'card',
       media: {
-        image: {
-          src: '/images/content/promos/promo-16x9-anthem.jpg',
-          lazyload: true
-        },
+        image: image,
       },
       body: {
         eyebrow: 'Article',
@@ -409,10 +410,7 @@
     {
       pattern: 'card',
       media: {
-        image: {
-          src: '/images/content/promos/promo-16x9-anthem.jpg',
-          lazyload: true
-        },
+        image: image,
       },
       body: {
         eyebrow: 'Article',
diff --git a/docs-site/src/pages/pattern-lab/_patterns/999-archive/product-pages/product-t2.twig b/docs-site/src/pages/pattern-lab/_patterns/999-archive/product-pages/product-t2.twig
index ba28505931..75895a114f 100644
--- a/docs-site/src/pages/pattern-lab/_patterns/999-archive/product-pages/product-t2.twig
+++ b/docs-site/src/pages/pattern-lab/_patterns/999-archive/product-pages/product-t2.twig
@@ -633,7 +633,14 @@
   {% endblock %}
 {% endembed %}
 
-
+{% set image %}
+  {% include '@bolt-elements-image/image.twig' with {
+    attributes: {
+      src: '/images/content/promos/promo-16x9-anthem.jpg',
+      loading: 'lazy'
+    },
+  } only %}
+{% endset %}
 
 {% embed '@pl/_band--collection.twig' with {
   theme: 'xlight',
@@ -642,10 +649,7 @@
     {
       pattern: 'card',
       media: {
-        image: {
-          src: '/images/content/promos/promo-16x9-anthem.jpg',
-          placeholder_color: '#8d9598'
-        },
+        image: image,
       },
       body: {
         eyebrow: 'Article',
@@ -666,10 +670,7 @@
     {
       pattern: 'card',
       media: {
-        image: {
-          src: '/images/content/promos/promo-16x9-anthem.jpg',
-          placeholder_color: '#8d9598'
-        },
+        image: image,
       },
       body: {
         eyebrow: 'Article',
@@ -687,10 +688,7 @@
     {
       pattern: 'card',
       media: {
-        image: {
-          src: '/images/content/promos/promo-16x9-anthem.jpg',
-          placeholder_color: '#8d9598'
-        },
+        image: image,
       },
       body: {
         eyebrow: 'Article',
diff --git a/docs-site/src/pages/pattern-lab/_patterns/999-archive/product-pages/product-t4.twig b/docs-site/src/pages/pattern-lab/_patterns/999-archive/product-pages/product-t4.twig
index 4992b95d55..e3faad2427 100644
--- a/docs-site/src/pages/pattern-lab/_patterns/999-archive/product-pages/product-t4.twig
+++ b/docs-site/src/pages/pattern-lab/_patterns/999-archive/product-pages/product-t4.twig
@@ -1086,7 +1086,14 @@
   {% endblock %}
 {% endembed %}
 
-
+{% set image %}
+  {% include '@bolt-elements-image/image.twig' with {
+    attributes: {
+      src: '/images/content/promos/promo-16x9-anthem.jpg',
+      loading: 'lazy'
+    },
+  } only %}
+{% endset %}
 
 {% embed '@pl/_band--collection.twig' with {
   theme: 'xlight',
@@ -1095,9 +1102,7 @@
     {
       pattern: 'card',
       media: {
-        image: {
-          src: '/images/content/promos/promo-16x9-anthem.jpg'
-        },
+        image: image,
       },
       body: {
         eyebrow: 'Article',
@@ -1118,9 +1123,7 @@
     {
       pattern: 'card',
       media: {
-        image: {
-          src: '/images/content/promos/promo-16x9-anthem.jpg'
-        },
+        image: image,
       },
       body: {
         eyebrow: 'Article',
@@ -1138,9 +1141,7 @@
     {
       pattern: 'card',
       media: {
-        image: {
-          src: '/images/content/promos/promo-16x9-anthem.jpg'
-        },
+        image: image,
       },
       body: {
         eyebrow: 'Article',
diff --git a/docs-site/src/pages/pattern-lab/_patterns/999-tests/card/05-card.twig b/docs-site/src/pages/pattern-lab/_patterns/999-tests/card/05-card.twig
index a4c374f67d..a5dc0ecf9a 100644
--- a/docs-site/src/pages/pattern-lab/_patterns/999-tests/card/05-card.twig
+++ b/docs-site/src/pages/pattern-lab/_patterns/999-tests/card/05-card.twig
@@ -1,10 +1,15 @@
 {# Test adding attributes, should only apply to outer element #}
-{% include "@bolt-components-card-replacement/card-replacement.twig" with {
-  media: {
-    image: {
-      src: "/images/placeholders/landscape-16x9-mountains.jpg",
+{% set image %}
+  {% include '@bolt-elements-image/image.twig' with {
+    attributes: {
+      src: '/images/placeholders/landscape-16x9-mountains.jpg',
       alt: "Image alt.",
     },
+  } only %}
+{% endset %}
+{% include "@bolt-components-card-replacement/card-replacement.twig" with {
+  media: {
+    image: image,
   },
   body: {
     eyebrow: "This is an eyebrow",
diff --git a/docs-site/src/pages/pattern-lab/_patterns/999-tests/card/10-card-links-and-buttons.twig b/docs-site/src/pages/pattern-lab/_patterns/999-tests/card/10-card-links-and-buttons.twig
index d56765c607..05f64364c9 100644
--- a/docs-site/src/pages/pattern-lab/_patterns/999-tests/card/10-card-links-and-buttons.twig
+++ b/docs-site/src/pages/pattern-lab/_patterns/999-tests/card/10-card-links-and-buttons.twig
@@ -30,12 +30,17 @@
 } only %}
 
 {% set card %}
-  {% include "@bolt-components-card-replacement/card-replacement.twig" with {
-    media: {
-      image: {
-        src: "/images/placeholders/landscape-16x9-mountains.jpg",
+  {% set image %}
+    {% include '@bolt-elements-image/image.twig' with {
+      attributes: {
+        src: '/images/placeholders/landscape-16x9-mountains.jpg',
         alt: "Image alt.",
       },
+    } only %}
+  {% endset %}
+  {% include "@bolt-components-card-replacement/card-replacement.twig" with {
+    media: {
+      image: image,
     },
     body: {
       headline: "No link",
diff --git a/docs-site/src/pages/pattern-lab/_patterns/999-tests/dialog/30-dialog-from-card.twig b/docs-site/src/pages/pattern-lab/_patterns/999-tests/dialog/30-dialog-from-card.twig
index 61978c57cd..32898cb2a2 100644
--- a/docs-site/src/pages/pattern-lab/_patterns/999-tests/dialog/30-dialog-from-card.twig
+++ b/docs-site/src/pages/pattern-lab/_patterns/999-tests/dialog/30-dialog-from-card.twig
@@ -81,16 +81,20 @@
       },
     } only %}
   {% endset %}
-
-  {% include '@bolt-components-card-replacement/card-replacement.twig' with {
-    media: {
-      image: {
+  {% set image %}
+    {% include '@bolt-elements-image/image.twig' with {
+      attributes: {
         src: '/images/placeholders/landscape-16x9-mountains.jpg',
-        alt: 'Image alt.',
+        alt: "Image alt.",
       },
+    } only %}
+  {% endset %}
+  {% include '@bolt-components-card-replacement/card-replacement.twig' with {
+    media: {
+      image: image,
     },
     body: {
       content: card_content,
     },
   } only %}
-</div>
\ No newline at end of file
+</div>
diff --git a/docs-site/src/pages/pattern-lab/_patterns/999-tests/trigger/00-trigger-card-modal.twig b/docs-site/src/pages/pattern-lab/_patterns/999-tests/trigger/00-trigger-card-modal.twig
index dfda7db6ab..206379c04d 100644
--- a/docs-site/src/pages/pattern-lab/_patterns/999-tests/trigger/00-trigger-card-modal.twig
+++ b/docs-site/src/pages/pattern-lab/_patterns/999-tests/trigger/00-trigger-card-modal.twig
@@ -1,11 +1,16 @@
 {% set main_content %}
   {% set card %}
+  {% set image %}
+    {% include '@bolt-elements-image/image.twig' with {
+      attributes: {
+        src: '/images/placeholders/landscape-16x9-mountains.jpg',
+        alt: "Image alt.",
+      },
+    } only %}
+  {% endset %}
     {% include "@bolt-components-card-replacement/card-replacement.twig" with {
       media: {
-        image: {
-          src: "/images/placeholders/landscape-16x9-mountains.jpg",
-          alt: "Image alt.",
-        },
+        image: image,
       },
       body: {
         headline: "Card Example",
@@ -20,10 +25,7 @@
   {% set card_with_buttons %}
     {% include "@bolt-components-card-replacement/card-replacement.twig" with {
       media: {
-        image: {
-          src: "/images/placeholders/landscape-16x9-mountains.jpg",
-          alt: "Image alt.",
-        },
+        image: image,
       },
       body: {
         headline: "Card Example (DUE TO THE NESTED BUTTON THIS WILL BE BROKEN)",
@@ -115,10 +117,7 @@
       <h2>Existing Card With Modal Button Only</h2>
       {% include "@bolt-components-card-replacement/card-replacement.twig" with {
         media: {
-          image: {
-            src: "/images/placeholders/landscape-16x9-mountains.jpg",
-            alt: "Image alt.",
-          },
+          image: image,
         },
         body: {
           headline: "Card Example with Button Only",
diff --git a/packages/components/bolt-card-replacement/card-replacement.schema.js b/packages/components/bolt-card-replacement/card-replacement.schema.js
index e66087a6b7..e760a0dcdb 100644
--- a/packages/components/bolt-card-replacement/card-replacement.schema.js
+++ b/packages/components/bolt-card-replacement/card-replacement.schema.js
@@ -71,7 +71,8 @@ module.exports = {
       properties: {
         image: {
           type: 'object',
-          ref: 'image',
+          description:
+            '<a href="/pattern-lab/?p=viewall-elements-image" target="_blank" rel="noopener" class="e-bolt-text-link">Refer to the Image Element schema options</a>',
         },
         video: {
           type: 'object',
diff --git a/packages/components/bolt-card-replacement/src/card-replacement-media/_card-replacement-media.twig b/packages/components/bolt-card-replacement/src/card-replacement-media/_card-replacement-media.twig
index c0f1ffdfe7..ae6beafe5e 100644
--- a/packages/components/bolt-card-replacement/src/card-replacement-media/_card-replacement-media.twig
+++ b/packages/components/bolt-card-replacement/src/card-replacement-media/_card-replacement-media.twig
@@ -4,13 +4,6 @@
 
 {% set attributes = create_attribute(media.attributes|default({})) %}
 
-{% if horizontal and _card_replacement_image %}
-  {% set _card_replacement_image = _card_replacement_image|merge({
-    ratio: false,
-    cover: true,
-  }) %}
-{% endif %}
-
 {% if _card_replacement_media_content %}
   {{ _card_replacement_media_content }}
 {% else %}
@@ -18,8 +11,20 @@
     <bolt-card-replacement-media {{ attributes }}>
       <ssr-keep for="bolt-card-replacement-media" class="c-bolt-card_replacement__media">
         {% if _card_replacement_image %}
-          {% include '@bolt-components-image/image.twig' with _card_replacement_image only %}
+          {# DEPRECATED. Pass a renderable image for media.image instead of structured data.  #}
+          {% if _card_replacement_image is iterable and  _card_replacement_image.src %}
+            {% if horizontal and _card_replacement_image %}
+              {% set _card_replacement_image = _card_replacement_image|merge({
+                ratio: false,
+                cover: true,
+              }) %}
+            {% endif %}
+            {% include '@bolt-components-image/image.twig' with _card_replacement_image only %}
+          {% else %}
+            {{ _card_replacement_image }}
+          {% endif %}
         {% elseif block('media') is defined %}
+          {# DEPRECATED. Pass a renderable image for media.image instead of using a twig block.  #}
           {{ block('media') }}
         {% endif %}
       </ssr-keep>