added Recommended resource card

contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelList.vue

@@ -40,6 +40,18 @@
       </VFlex>
     </VLayout>
 
+    <VLayout row wrap justify-center>
+      <VFlex xs12 sm10 md8 lg6>
+        <VLayout row justify-center>
+          <VFlex xs12>
+            <div>
+              <RecommendedResourceCard />
+            </div>
+          </VFlex>
+        </VLayout>
+      </VFlex>
+    </VLayout>
+
 
   </VContainer>
 
@@ -52,6 +64,7 @@
   import orderBy from 'lodash/orderBy';
   import { RouteNames } from '../../constants';
   import ChannelItem from './ChannelItem';
+  import RecommendedResourceCard from './../KCard/RecommendedResourceCard.vue';
   import LoadingText from 'shared/views/LoadingText';
   import { ChannelListTypes } from 'shared/constants';
 
@@ -65,6 +78,7 @@
     components: {
       ChannelItem,
       LoadingText,
+      RecommendedResourceCard
     },
     props: {
       listType: {

contentcuration/contentcuration/frontend/channelList/views/KCard/RecommendedResourceCard.vue

@@ -0,0 +1,67 @@
+<template>
+  <div>
+    <div class="">
+      <KCard
+        layout="horizontal"
+        thumbnailDisplay="large"
+        thumbnailSrc="https://i.guim.co.uk/img/media/30646649ad38eca6e8ddd6108af6de13e43117a4/475_196_4518_3323/master/4518.jpg?width=1900&dpr=2&s=none"
+        :headingLevel="3"
+        :to="{ }"
+        thumbnailScaleType="contain"
+      >
+        <template #aboveTitle>
+          <p>{{ $tr('className') }}</p>
+        </template>
+
+        <template #footer>
+          <div>
+            <ProgressBar
+              :progressPercent="10"
+              :currentTaskError="false"
+            />
+          </div>
+        </template>
+        <template #belowTitle>
+          <KTextTruncator
+            :text="description"
+            :maxLines="2"
+            class="description-style"
+          />
+        </template>
+        <template #thumbnailPlaceholder>
+          <KImg
+            src="https://via.placeholder.com/200"
+          />
+        </template>
+      </KCard>
+    </div>
+  </div>
+</template>
+
+<script>
+    import ProgressBar from '../../../channelEdit/views/progress/ProgressBar.vue';
+    import KCard from './index.vue';
+    import KImg from './../KImg';
+
+    export default {
+        name:"RecommendedResourceCard",
+        components: { KCard, KImg, ProgressBar },
+        data() {
+            return {
+                description :"It is not meant to be the Rather, it offers a logic that is common to all of them and makes creation logic that is common to all of them and makes creation logic that is common to all of them and makes creation ",
+            }
+        },
+        $trs: {
+           className: 'Class name 2',
+        },
+    }
+</script>
+
+
+<style scoped>
+.description-style{
+    font-size:1.2em;
+    font-weight:bold;
+}
+
+</style>