diff --git a/contentcuration/contentcuration/frontend/RecommendedResourceCard/components/RecommendedResourceCard.vue b/contentcuration/contentcuration/frontend/RecommendedResourceCard/components/RecommendedResourceCard.vue
index ea6a12d7ee..4052c50a77 100644
--- a/contentcuration/contentcuration/frontend/RecommendedResourceCard/components/RecommendedResourceCard.vue
+++ b/contentcuration/contentcuration/frontend/RecommendedResourceCard/components/RecommendedResourceCard.vue
@@ -1,14 +1,16 @@
 <template>
 
   <KCard
-    title="sample title"
-    :headingLevel="2"
-    :to="sampleRoute"
+    class="recommended-resource-card"
+    :to="to"
+    :title="title"
     layout="horizontal"
-    thumbnailScaleType="cover"
+    :headingLevel="headingLevel"
+    thumbnailScaleType="contain"
     thumbnailDisplay="small"
-    :titleLines="3"
-    thumbnailSrc="https://domf5oio6qrcr.cloudfront.net/medialibrary/11525/0a5ae820-7051-4495-bcca-61bf02897472.jpg"
+    thumbnailAlign="right"
+    :thumbnailSrc="thumbnailSrc"
+    :style="{ margin: '16px 0 16px 0' }"
   >
     <template #aboveTitle>
       <div>
@@ -37,36 +39,41 @@
   </KCard>
 
 </template>
-<script>
 
-  import KCard from './../../channelList/views/KCard/index.vue';
+
+<script>
 
   export default {
     name: 'RecommendedResourceCard',
-    components: {
-      KCard,
-    },
-    computed: {
-      sampleRoute() {
-        return {
-          path: '/starred',
-        };
+    props: {
+      to: {
+        type: Object,
+        required: true,
+      },
+      title: {
+        type: String,
+        default: null,
+      },
+      headingLevel: {
+        type: Number,
+        required: true,
+      },
+      thumbnailSrc: {
+        type: String,
+        default: null,
       },
     },
   };
 
 </script>
-<style>
-.bellow-title-style {
-  font-weight: 1000;
-}
-.align-right-style{
-    display: flex;
-    justify-content: flex-end;
-}
-.card-icon-size{
-    font-size: 20px;
-    margin-left:1em;
-}
 
+
+<style>
+  .align-right-style{
+      display: flex;
+      justify-content: flex-end;
+  }
+  .recommended-resource-card {
+    max-width:400px
+  }
 </style>
diff --git a/contentcuration/contentcuration/frontend/channelList/views/KCard/BaseCard.vue b/contentcuration/contentcuration/frontend/channelList/views/KCard/BaseCard.vue
deleted file mode 100644
index 6da5340975..0000000000
--- a/contentcuration/contentcuration/frontend/channelList/views/KCard/BaseCard.vue
+++ /dev/null
@@ -1,122 +0,0 @@
-<template>
-
-  <li
-    :class="['remove-list-style card',$computedClass(coreOutlineFocus)]"
-    tabindex="0"
-    data-focus="true"
-    @focus="cardFocus"
-    @hover="cardHover"
-    @click="cardClick()"
-  >
-    <component
-      :is="headerLevel"
-    >
-      <router-link
-        tabindex="-1"
-        :to="to"
-      >
-        <KTextTruncator
-          v-if="title !== null"
-          :text="title"
-          :maxLines="titleLines"
-          class="spacing"
-        />
-      </router-link>
-    </component>
-    <slot name="default"></slot>
-  </li>
-
-</template>
-
-
-<script>
-
-  export default {
-    name: 'BaseCard',
-    props: {
-      title: {
-        type: String,
-        required: false,
-        default: null,
-      },
-      headingLevel: {
-        type: Number,
-        required: true,
-        validator(value) {
-          if (!value) {
-            console.error('Error: Prop headingLevel is required and can not be empty.');
-            return false;
-          }
-          return true;
-        },
-      },
-      titleLines: {
-        type: Number,
-        required: false,
-        default: 2,
-      },
-      to: {
-        type: Object,
-        required: true,
-      },
-    },
-    computed: {
-      headerLevel() {
-        return 'h' + this.headingLevel;
-      },
-      coreOutlineFocus() {
-        return {
-          ':focus': {
-            ...this.$coreOutline,
-          },
-        };
-      },
-    },
-    methods: {
-      cardFocus(e) {
-        this.$emit('focus', e);
-      },
-      cardHover(e) {
-        this.$emit('hover', e);
-      },
-      cardClick() {
-        this.$router.push(this.to);
-      },
-    },
-  };
-
-</script>
-
-
-<style lang="scss" scoped>
-
-  @import '~kolibri-design-system/lib/styles/definitions';
-
-  .card {
-    @extend %dropshadow-2dp;
-
-    position: relative;
-    display: block;
-    text-align: left;
-    text-decoration: none;
-    cursor: pointer;
-    border-radius: 0.5em;
-    outline-offset: -1px;
-    transition: border-color $core-time ease;
-
-    &:hover,
-    &:focus {
-      @extend %dropshadow-8dp;
-    }
-  }
-
-  .remove-list-style {
-    list-style-type: none;
-  }
-
-  .spacing {
-    padding: 1em;
-    color: black;
-  }
-
-</style>
diff --git a/contentcuration/contentcuration/frontend/channelList/views/KCard/definitions.scss b/contentcuration/contentcuration/frontend/channelList/views/KCard/definitions.scss
deleted file mode 100644
index cd0ed13fea..0000000000
--- a/contentcuration/contentcuration/frontend/channelList/views/KCard/definitions.scss
+++ /dev/null
@@ -1,158 +0,0 @@
-$radius: 4px;
-$core-time: 0.25s;
-
-// Use this mixin in select containers where the content is likely going to be
-// very large and mobile users may benefit from a smooth touch scroll experience.
-%momentum-scroll {
-  -webkit-overflow-scrolling: touch;
-}
-
-/*
-  Use of this mixin can help prompt the browser to use the GPU for certain DOM elements.
-  This can help with certain CSS animations and other transitions.
-
-  For details, see https://www.smashingmagazine.com/2016/12/gpu-animation-doing-it-right/
-*/
-%enable-gpu-acceleration {
-  transform: translateZ(0);
-  backface-visibility: hidden;
-  perspective: 10000px;
-}
-
-// Accelerate and decelerate easing functions from
-// from https://material.io/design/motion/speed.html#easing.
-%md-standard-func {
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-%md-accelerate-func {
-  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
-}
-
-%md-decelerate-func {
-  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
-}
-
-/*
-  Mixin for font-family to ensure that the full fonts are not referenced until they've
-  been loaded using the FontFaceObserver in Kolibri's setupAndLoadFonts.js file.
-
-  Even though partials are loaded immediately, we need the 'partial-fonts-loaded' class
-  for CSS specificity purposes.
-
-  TODO:
-  Add support for standard online-based loading mechanisms, such as would be used
-  in Studio. In particular, this would need to be swapped out for the Google font API:
-  https://developers.google.com/fonts/docs/getting_started
-*/
-@mixin font-family-noto {
-  .partial-fonts-loaded & {
-    font-family: 'noto-subset', 'noto-common', sans-serif;
-  }
-
-  .full-fonts-loaded & {
-    // Continue to include the common and subset font subsets since they may contain
-    // glyphs not available in the language's default font.
-    font-family: 'noto-full', 'noto-subset', 'noto-common', sans-serif;
-  }
-}
-
-// dropshadows from Angular Material via https://stackoverflow.com/a/39199702
-
-%dropshadow-1dp {
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14),
-    0 2px 1px -1px rgba(0, 0, 0, 0.12);
-}
-
-%dropshadow-2dp {
-  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),
-    0 3px 1px -2px rgba(0, 0, 0, 0.12);
-}
-%dropshadow-3dp {
-  box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.2), 0 3px 4px 0 rgba(0, 0, 0, 0.14),
-    0 3px 3px -2px rgba(0, 0, 0, 0.12);
-}
-%dropshadow-4dp {
-  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14),
-    0 1px 10px 0 rgba(0, 0, 0, 0.12);
-}
-%dropshadow-5dp {
-  box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 5px 8px 0 rgba(0, 0, 0, 0.14),
-    0 1px 14px 0 rgba(0, 0, 0, 0.12);
-}
-%dropshadow-6dp {
-  box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14),
-    0 1px 18px 0 rgba(0, 0, 0, 0.12);
-}
-%dropshadow-7dp {
-  box-shadow: 0 4px 5px -2px rgba(0, 0, 0, 0.2), 0 7px 10px 1px rgba(0, 0, 0, 0.14),
-    0 2px 16px 1px rgba(0, 0, 0, 0.12);
-}
-%dropshadow-8dp {
-  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14),
-    0 3px 14px 2px rgba(0, 0, 0, 0.12);
-}
-%dropshadow-9dp {
-  box-shadow: 0 5px 6px -3px rgba(0, 0, 0, 0.2), 0 9px 12px 1px rgba(0, 0, 0, 0.14),
-    0 3px 16px 2px rgba(0, 0, 0, 0.12);
-}
-%dropshadow-10dp {
-  box-shadow: 0 6px 6px -3px rgba(0, 0, 0, 0.2), 0 10px 14px 1px rgba(0, 0, 0, 0.14),
-    0 4px 18px 3px rgba(0, 0, 0, 0.12);
-}
-%dropshadow-11dp {
-  box-shadow: 0 6px 7px -4px rgba(0, 0, 0, 0.2), 0 11px 15px 1px rgba(0, 0, 0, 0.14),
-    0 4px 20px 3px rgba(0, 0, 0, 0.12);
-}
-%dropshadow-12dp {
-  box-shadow: 0 7px 8px -4px rgba(0, 0, 0, 0.2), 0 12px 17px 2px rgba(0, 0, 0, 0.14),
-    0 5px 22px 4px rgba(0, 0, 0, 0.12);
-}
-%dropshadow-13dp {
-  box-shadow: 0 7px 8px -4px rgba(0, 0, 0, 0.2), 0 13px 19px 2px rgba(0, 0, 0, 0.14),
-    0 5px 24px 4px rgba(0, 0, 0, 0.12);
-}
-%dropshadow-14dp {
-  box-shadow: 0 7px 9px -4px rgba(0, 0, 0, 0.2), 0 14px 21px 2px rgba(0, 0, 0, 0.14),
-    0 5px 26px 4px rgba(0, 0, 0, 0.12);
-}
-%dropshadow-15dp {
-  box-shadow: 0 8px 9px -5px rgba(0, 0, 0, 0.2), 0 15px 22px 2px rgba(0, 0, 0, 0.14),
-    0 6px 28px 5px rgba(0, 0, 0, 0.12);
-}
-%dropshadow-16dp {
-  box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.2), 0 16px 24px 2px rgba(0, 0, 0, 0.14),
-    0 6px 30px 5px rgba(0, 0, 0, 0.12);
-}
-%dropshadow-17dp {
-  box-shadow: 0 8px 11px -5px rgba(0, 0, 0, 0.2), 0 17px 26px 2px rgba(0, 0, 0, 0.14),
-    0 6px 32px 5px rgba(0, 0, 0, 0.12);
-}
-%dropshadow-18dp {
-  box-shadow: 0 9px 11px -5px rgba(0, 0, 0, 0.2), 0 18px 28px 2px rgba(0, 0, 0, 0.14),
-    0 7px 34px 6px rgba(0, 0, 0, 0.12);
-}
-%dropshadow-19dp {
-  box-shadow: 0 9px 12px -6px rgba(0, 0, 0, 0.2), 0 19px 29px 2px rgba(0, 0, 0, 0.14),
-    0 7px 36px 6px rgba(0, 0, 0, 0.12);
-}
-%dropshadow-20dp {
-  box-shadow: 0 10px 13px -6px rgba(0, 0, 0, 0.2), 0 20px 31px 3px rgba(0, 0, 0, 0.14),
-    0 8px 38px 7px rgba(0, 0, 0, 0.12);
-}
-%dropshadow-21dp {
-  box-shadow: 0 10px 13px -6px rgba(0, 0, 0, 0.2), 0 21px 33px 3px rgba(0, 0, 0, 0.14),
-    0 8px 40px 7px rgba(0, 0, 0, 0.12);
-}
-%dropshadow-22dp {
-  box-shadow: 0 10px 14px -6px rgba(0, 0, 0, 0.2), 0 22px 35px 3px rgba(0, 0, 0, 0.14),
-    0 8px 42px 7px rgba(0, 0, 0, 0.12);
-}
-%dropshadow-23dp {
-  box-shadow: 0 11px 14px -7px rgba(0, 0, 0, 0.2), 0 23px 36px 3px rgba(0, 0, 0, 0.14),
-    0 9px 44px 8px rgba(0, 0, 0, 0.12);
-}
-%dropshadow-24dp {
-  box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14),
-    0 9px 46px 8px rgba(0, 0, 0, 0.12);
-}
diff --git a/contentcuration/contentcuration/frontend/channelList/views/KCard/index.vue b/contentcuration/contentcuration/frontend/channelList/views/KCard/index.vue
deleted file mode 100644
index 8195813908..0000000000
--- a/contentcuration/contentcuration/frontend/channelList/views/KCard/index.vue
+++ /dev/null
@@ -1,219 +0,0 @@
-<template>
-
-  <BaseCard
-    :title="title"
-    :headingLevel="headingLevel"
-    :titleLines="titleLines"
-    :to="to"
-  >
-    <div>
-      <KImg
-        v-if="layout === 'vertical' && thumbnailDisplay !== 'none'"
-        :src="thumbnailSrc"
-        :height="300"
-        :width="500"
-        :isDecorative="true"
-        :style="KImgVerticalSmallStyle"
-      />
-      <slot v-if="!thumbnailSrc" name="thumbnailPlaceholder"></slot>
-
-      <div class="horizontal-layout-style">
-
-        <KImg
-          v-if="layout === 'horizontal' && thumbnailDisplay === 'large'"
-          :src="thumbnailSrc"
-          :height="300"
-          :width="600"
-          :isDecorative="true"
-        />
-        <slot v-if="!thumbnailSrc" name="thumbnailPlaceholder"></slot>
-
-        <div>
-          <div
-            v-if="thumbnailDisplay === 'none'"
-            class="spacing"
-          >
-            <!-- @slot Places content to be placed above the title.. -->
-            <slot name="aboveTitle"></slot>
-            <!-- @slot for the title content -->
-            <slot name="title"></slot>
-            <!-- @slot  Places content below the title.. -->
-            <slot name="belowTitle"></slot>
-          </div>
-          <KGrid
-            v-else
-          >
-            <KGridItem
-              :layout12="{ span: isVerticalLayout ? 12 : 6 }"
-              :layout8="{ span: isVerticalLayout ? 8 : 4 }"
-              :layout4="{ span: 4 }"
-            >
-              <div
-                class="spacing"
-                :style="textColor"
-              >
-                <!-- @slot Places content to be placed above the title.. -->
-                <slot name="aboveTitle"></slot>
-                <!-- @slot for the title content -->
-                <slot name="title"></slot>
-                <!-- @slot  Places content below the title.. -->
-                <slot name="belowTitle"></slot>
-              </div>
-            </KGridItem>
-
-            <KGridItem
-              v-if="layout === 'horizontal'"
-              :layout12="{ span: 6 }"
-              :layout8="{ span: 4 }"
-              :layout4="{ span: 4 }"
-            >
-              <KImg
-                v-if="thumbnailDisplay === 'small'"
-                :src="thumbnailSrc"
-                :height="300"
-                :width="300"
-                :isDecorative="true"
-                :appearanceOverrides="{
-                  scaleType: thumbnailScaleType,
-                }"
-                style="border-radius:20px;"
-              />
-              <slot v-if="!thumbnailSrc" name="thumbnailPlaceholder"></slot>
-
-            </KGridItem>
-          </KGrid>
-
-          <div class="spacing">
-            <slot name="footer"></slot>
-          </div>
-        </div>
-      </div>
-    </div>
-  </BaseCard>
-
-</template>
-
-
-<script>
-
-  import KImg from '../KImg';
-  import BaseCard from './BaseCard.vue';
-
-  export default {
-    name: 'KCard',
-    components: { BaseCard, KImg },
-    props: {
-      title: {
-        type: String,
-        required: false,
-        default: null,
-      },
-      /**
-       * Sets the HTML heading level (h1, h2, etc.) for the title.
-       */
-      headingLevel: {
-        type: Number,
-        required: true,
-      },
-      /**
-       * The number of lines to display for the title. Defaults to 2.
-       */
-      titleLines: {
-        type: Number,
-        required: true,
-        default: 2,
-      },
-      /**
-       * An object containing the route definition for the link. Required.
-       */
-      to: {
-        type: Object,
-        required: true,
-      },
-      /**
-       * The layout style of the hero banner. Required and cannot be empty.
-       *
-       * @validator
-       * @param {String} value - The layout value.
-       * @returns {Boolean} - True if the value is not empty, false otherwise.
-       */
-      layout: {
-        type: String,
-        required: true,
-        validator(value) {
-          if (!value) {
-            console.error('Error: Prop layout is required and can not be empty.');
-            return false;
-          }
-          return true;
-        },
-      },
-      /**
-       * Controls the display of the thumbnail image.
-       * Options: 'none' (default), 'block', or 'inline'.
-       */
-      thumbnailDisplay: {
-        type: String,
-        required: false,
-        default: 'none',
-      },
-      /**
-       * Set the source URL of the thumbnail image.
-       */
-      thumbnailSrc: {
-        type: String,
-        required: false,
-        default: null,
-      },
-      /**
-       * sets the scale type for the thumbnail image.
-       *  Options: 'centerInside' (default), 'cover', or 'contain'.
-       */
-      thumbnailScaleType: {
-        type: String,
-        required: false,
-        default: 'centerInside',
-      },
-    },
-    computed: {
-      KImgVerticalSmallStyle() {
-        if (this.thumbnailDisplay === 'small') {
-          return {
-            padding: '2em',
-          };
-        } else {
-          return {
-            padding: '0em',
-          };
-        }
-      },
-      isVerticalLayout() {
-        return (
-          this.layout === 'vertical' ||
-          (this.layout === 'horizontal' && this.thumbnailDisplay === 'large')
-        );
-      },
-      textColor() {
-        return {
-          color: this.$themeTokens.text,
-        };
-      },
-    },
-  };
-
-</script>
-
-
-<style scoped>
-
-  .spacing{
-    padding: 1em;
-  }
-  .footer{
-    margin-top: auto;
-  }
-
-  .horizontal-layout-style{
-    display: flex;
-  }
-</style>
diff --git a/contentcuration/contentcuration/frontend/channelList/views/KImg/index.vue b/contentcuration/contentcuration/frontend/channelList/views/KImg/index.vue
deleted file mode 100644
index 59bc31b629..0000000000
--- a/contentcuration/contentcuration/frontend/channelList/views/KImg/index.vue
+++ /dev/null
@@ -1,404 +0,0 @@
-<template>
-
-  <span :style="rootContainerStyles">
-    <span :style="ratioContainerStyles">
-      <img
-        :src="src"
-        :alt="alternativeText"
-        :style="imgStyles"
-        @error="onError"
-      >
-      <span
-        v-if="$slots.placeholder"
-        :style="{ position: 'absolute', top: '0', right: '0', left: '0', bottom: '0', zIndex: '0' }"
-      >
-        <!-- @slot Places content to the placeholder area. -->
-        <slot name="placeholder"></slot>
-      </span>
-
-      <span
-        v-if="$slots.topLeft"
-        :style="{ position: 'absolute', top: '0',left: '0', zIndex: '2' }"
-      >
-        <!-- @slot Places content on top of an image, to its top left corner. -->
-        <slot name="topLeft"></slot>
-      </span>
-      <span
-        v-if="$slots.topRight"
-        :style="{ position: 'absolute', top: '0', right: '0', zIndex: '2' }"
-      >
-        <!-- @slot Places content on top of an image, to its top right corner. -->
-        <slot name="topRight"></slot>
-      </span>
-      <span
-        v-if="$slots.bottomLeft"
-        :style="{ position: 'absolute', bottom: '0', left: '0', zIndex: '2' }"
-      >
-        <!-- @slot Places content on top of an image, to its bottom left corner. -->
-        <slot name="bottomLeft"></slot>
-      </span>
-      <span
-        v-if="$slots.bottomRight"
-        :style="{ position: 'absolute', bottom: '0', right: '0', zIndex: '2' }"
-      >
-        <!-- @slot Places content on top of an image, to its bottom right corner. -->
-        <slot name="bottomRight"></slot>
-      </span>
-
-    </span>
-  </span>
-
-</template>
-
-
-<script>
-
-  const ScaleTypes = {
-    CENTER_INSIDE: 'centerInside',
-    CONTAIN: 'contain',
-    FIT_XY: 'fitXY',
-  };
-  const RATIO_REGEX = /^(\d+):(\d+)$/;
-
-  function isValidScaleType(value) {
-    return value && Object.values(ScaleTypes).includes(value);
-  }
-
-  /**
-   * Extract x and y from an aspect ratio x:y
-   *
-   * @param {String} value aspect ratio in "x:y" format
-   * @returns {Object} { x, y }
-   */
-  function extractAspectRatio(value) {
-    const match = value.match(RATIO_REGEX);
-    return { x: match[1], y: match[2] };
-  }
-
-  /**
-   * @returns {Boolean} Returns true if value satisfies "x:y"
-   *                    format where x and y are numbers
-   */
-  function isValidAspectRatio(value) {
-    return RATIO_REGEX.test(value);
-  }
-
-  /**
-   * Displays an image and provides additional functionality
-   * to manipulate it such as setting an aspect ratio,
-   * scaling, and more.
-   */
-  export default {
-    name: 'KImg',
-    props: {
-      /**
-       * Sets the image path
-       */
-      src: {
-        type: String,
-        default: null,
-      },
-      /**
-       * Alternative text for the image. Required unless `isDecorative` is true.
-       */
-      altText: {
-        type: String,
-        default: null,
-      },
-      /**
-       * Sets the image as decorative.
-       */
-      isDecorative: {
-        type: Boolean,
-        default: false,
-      },
-      /**
-       * Sets the height of the image container
-       */
-      height: {
-        type: [Number, String],
-        default: null,
-      },
-      /**
-       * Sets the width of the image container
-       */
-      width: {
-        type: [Number, String],
-        default: null,
-      },
-      /**
-       * Sets the maximum height of the image container
-       */
-      maxHeight: {
-        type: [Number, String],
-        default: null,
-      },
-      /**
-       * Sets the minimum height of the image container
-       */
-      minHeight: {
-        type: [Number, String],
-        default: null,
-      },
-      /**
-       * Sets the maximum width of the image container
-       */
-      maxWidth: {
-        type: [Number, String],
-        default: null,
-      },
-      /**
-       * 	Sets the minimum width of the image container
-       */
-      minWidth: {
-        type: [Number, String],
-        default: null,
-      },
-      /**
-       * Sets the ratio of the width(w) to the height(h)
-       * of the image container. The required format is `w:h`.
-       */
-      aspectRatio: {
-        type: String,
-        default: null,
-        validator: isValidAspectRatio,
-      },
-      /**
-       * Specifies how an image should be scaled within the container.
-       * Can be one of  `'centerInside'`, `'contain'`, or `'fitXY'`.
-       */
-      scaleType: {
-        type: String,
-        default: 'centerInside', // needs to be duplicated rather than using ScaleTypes.CENTER_INSIDE, otherwise it doesn't render correctly in the auto-generated Props documentation
-        validator: isValidScaleType,
-      },
-      /**
-       * A color to be displayed instead or behind an image.
-       * It creates a background area which respects the dimensions
-       * set on the image container.
-       *
-       * It can serve as (1) a color of the area surrounding an image when
-       * it's letterboxed, (2) a placeholder area displayed
-       * over the whole container when an image source is not provided,
-       * (3) a progressive loading experience as the colored background
-       * is displayed while an image is loading.
-       *
-       * Its default value is `$themePalette.grey.v_200`.
-       */
-      backgroundColor: {
-        type: String,
-        required: false,
-        default: null,
-      },
-      /**
-       * The border radius of the image container or the placeholder area
-       */
-      borderRadius: {
-        type: String,
-        required: false,
-        default: null,
-      },
-      /**
-       * A dynamic style object that overrides the default styles
-       */
-      appearanceOverrides: {
-        type: Object,
-        default: () => ({}),
-      },
-    },
-    computed: {
-      ratio() {
-        return extractAspectRatio(this.aspectRatio);
-      },
-      alternativeText() {
-        return this.isDecorative ? '' : this.altText;
-      },
-      baseStyles() {
-        const backgroundColor = this.backgroundColor
-          ? this.backgroundColor
-          : this.$themePalette.grey.v_200;
-        const borderRadius = this.borderRadius ? this.borderRadius : 0;
-
-        return {
-          rootContainer: {
-            display: 'block',
-            position: 'relative',
-            backgroundColor,
-            borderRadius,
-            overflow: 'hidden',
-            height: this.validateAndFormatUnits(this.height),
-            width: this.validateAndFormatUnits(this.width),
-            maxHeight: this.validateAndFormatUnits(this.maxHeight),
-            minHeight: this.validateAndFormatUnits(this.minHeight),
-            maxWidth: this.validateAndFormatUnits(this.maxWidth),
-            minWidth: this.validateAndFormatUnits(this.minWidth),
-          },
-          ratioContainer: {
-            display: 'block',
-          },
-          img: {
-            display: 'block',
-            position: 'relative',
-            zIndex: '1',
-          },
-        };
-      },
-      /**
-       * Returns all styles related to the logic
-       * that controls how the image scales within
-       * the image container
-       */
-      scaleStyles() {
-        const scaleKind = isValidScaleType(this.scaleType) ? this.scaleType : ScaleTypes.CONTAIN;
-        const scaleStyles = {
-          [ScaleTypes.CONTAIN]: {
-            rootContainer: {},
-            ratioContainer: {
-              height: '100%',
-              width: '100%',
-            },
-            img: {
-              objectFit: 'contain',
-              height: '100%',
-              width: '100%',
-            },
-          },
-          [ScaleTypes.FIT_XY]: {
-            rootContainer: {},
-            ratioContainer: {
-              height: '100%',
-              width: '100%',
-            },
-            img: {
-              width: '100%',
-              height: '100%',
-            },
-          },
-          [ScaleTypes.CENTER_INSIDE]: {
-            rootContainer: {
-              display: 'flex',
-              justifyContent: 'center',
-              alignItems: 'center',
-            },
-            ratioContainer: {},
-            img: {
-              maxWidth: '100%',
-              maxHeight: '100%',
-            },
-          },
-        };
-        return scaleStyles[scaleKind];
-      },
-      /**
-       * Returns all styles related to the logic
-       * that controls the image ratio
-       */
-      ratioStyles() {
-        if (!this.aspectRatio) {
-          return {
-            rootContainer: {},
-            ratioContainer: {},
-            img: {},
-          };
-        }
-        // https://www.sitepoint.com/maintain-image-aspect-ratios-responsive-web-design/
-        const paddingTopInPercent = (this.ratio.y / this.ratio.x) * 100;
-        return {
-          rootContainer: {},
-          ratioContainer: {
-            position: 'relative',
-            display: 'block',
-            height: 0,
-            width: '100%',
-            padding: `${paddingTopInPercent}% 0 0`,
-          },
-          img: {
-            position: 'absolute',
-            display: 'block',
-            maxWidth: '100%',
-            maxHeight: '100%',
-            margin: 'auto',
-            top: 0,
-            right: 0,
-            bottom: 0,
-            left: 0,
-            zIndex: 2,
-          },
-        };
-      },
-      rootContainerStyles() {
-        // order matters
-        return {
-          ...this.baseStyles.rootContainer,
-          ...this.scaleStyles.rootContainer,
-          ...this.ratioStyles.rootContainer,
-          ...this.appearanceOverrides,
-        };
-      },
-      ratioContainerStyles() {
-        // order matters
-        return {
-          ...this.baseStyles.ratioContainer,
-          ...this.scaleStyles.ratioContainer,
-          ...this.ratioStyles.ratioContainer,
-        };
-      },
-      imgStyles() {
-        // order matters
-        return {
-          ...this.baseStyles.img,
-          ...this.scaleStyles.img,
-          ...this.ratioStyles.img,
-        };
-      },
-    },
-    created() {
-      if (!this.isDecorative && !this.altText) {
-        throw new Error('Missing required prop - provide altText or indicate isDecorative');
-      }
-    },
-    methods: {
-      validateAndFormatUnits(propValue) {
-        if (propValue) {
-          if (!isNaN(propValue)) {
-            return `${propValue}px`;
-          } else {
-            // split numbers apart from units
-            const [, ...arr] = propValue.match(/(\d*\.?\d+)([a-zA-Z | %]*)/);
-            const validUnits = [
-              '%',
-              'cm',
-              'em',
-              'ex',
-              'ch',
-              'in',
-              'lh',
-              'mm',
-              'px',
-              'rem',
-              'rlh',
-              'vh',
-              'vw',
-            ];
-
-            // if made up of valid numbers and valid units
-            if (!isNaN(arr[0]) && validUnits.includes(arr[1])) {
-              return propValue;
-            }
-          }
-        }
-      },
-      onError(event) {
-        /**
-         * Emitted when the image fails to load. The DOM event that
-         * triggered the error is available in the payload.
-         */
-        this.$emit('error', event);
-      },
-    },
-  };
-
-</script>
-
-
-<style scoped></style>
\ No newline at end of file