diff --git a/docs/pages/playground.vue b/docs/pages/playground.vue
index dc02d415d..4daf89e40 100644
--- a/docs/pages/playground.vue
+++ b/docs/pages/playground.vue
@@ -1,29 +1,1372 @@
 <template>
 
-  <!--
-    Playground: A private page for components development
-    *****************************************************
-    Place a component you're working on here and see it
-    live on http://localhost:4000/playground
-
-    Please do not commit your local updates of this file.
-  -->
-  <div style="padding: 24px">
-    <!-- 
-      Example: Uncomment lines bellow, change something
-      in lib/KBreadcrumbs.vue and see the updates reflected
-      on this page
-    -->
-    <!-- <KBreadcrumbs
-      :items="[
-        { text: 'Global Digital Library', link: { path: '#' } },
-        { text: 'English', link: { path: '#' } },
-        { text: 'Level 2 ', link: { path: '#' } },
-      ]"
-    /> -->
-
-    <!-- Play around with your component here: -->
+  <div>
+    <h3>Vertical layout with large thumbnail</h3>
 
+    <ul class="vertical-cards">
+      <KCard
+        class="card"
+        :to="{ name: '/' }"
+        :headingLevel="2"
+        layout="vertical"
+        thumbnailDisplay="large"
+        :thumbnailSrc="require('../assets/hummingbird CC BY-SA 4.0.jpg')"
+        title="This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title"
+      >
+        <template #aboveTitle>
+          <KGrid>
+
+            <KGridItem
+              :layout12="{ span: 8 }"
+              :layout8="{ span: 6 }"
+            >
+              <span><KIcon icon="readSolid" :style="{ 'font-size': '14px' }" /></span>
+              <span
+                :style="{ 'color': $themePalette.grey.v_400,
+                          'font-size': '12px' }"
+              >Rutrum pellentesque utrum...</span>
+            </KGridItem>
+
+            <KGridItem
+              :layout12="{ span: 4 }"
+              :layout8="{ span: 2 }"
+            >
+              <div style="float:right">
+                <KIcon icon="infoOutline" class="icon-size" />
+              </div>
+            </KGridItem>
+          </KGrid>
+        </template>
+        <template #belowTitle>
+          <span>Below title below title below title below title below title below title below title below title below title below title below title below title below title</span>
+        </template>
+
+        <template #footer>
+          <div>
+            <div class="footer-top-header">
+              <span>
+                <KIcon icon="createShaded" class="icon-size" />
+                Practice
+              </span>
+              <span
+                :style="{ 'background-color': $themePalette.grey.v_100,'padding': '2px' }"
+              >
+                Short Activity
+              </span>
+            </div>
+
+            <KGrid>
+              <KGridItem
+                :layout12="{ span: 8 }"
+                :layout8="{ span: 6 }"
+              >
+                <progress
+                  value="20"
+                  max="100"
+                  style="height:0.5em;width:100%"
+                ></progress>
+              </KGridItem>
+              <KGridItem
+                :layout12="{ span: 4 }"
+                :layout8="{ span: 2 }"
+              >
+                <div class="" style="float:right;">
+                  <KIcon icon="schedule" class="icon-size" />
+                  <KIcon icon="download" class="icon-size" />
+                </div>
+              </KGridItem>
+            </KGrid>
+          </div>
+        </template>
+      </KCard>
+
+      <KCard
+        class="card"
+        :to="{ name: '/' }"
+        :headingLevel="2"
+        layout="vertical"
+        thumbnailDisplay="large"
+        :thumbnailSrc="require('../assets/hummingbird CC BY-SA 4.0.jpg')"
+      >
+        <template #title>
+          <KTextTruncator
+            text="This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title"
+            :maxLines="3"
+          />
+        </template>
+        <template #footer>
+          <div>
+            <div class="footer-top-header">
+              <span>
+                <KIcon icon="createShaded" class="icon-size" />
+                Practice
+              </span>
+              <span
+                :style="{ 'background-color': $themePalette.grey.v_100,'padding': '2px' }"
+              >
+                Short Activity
+              </span>
+            </div>
+
+            <KGrid>
+              <KGridItem
+                :layout12="{ span: 8 }"
+                :layout8="{ span: 6 }"
+              >
+                <progress
+                  value="20"
+                  max="100"
+                  style="height:0.5em;width:100%"
+                ></progress>
+              </KGridItem>
+              <KGridItem
+                :layout12="{ span: 4 }"
+                :layout8="{ span: 2 }"
+              >
+                <div class="" style="float:right;">
+                  <KIcon icon="schedule" class="icon-size" />
+                  <KIcon icon="download" class="icon-size" />
+                </div>
+              </KGridItem>
+            </KGrid>
+          </div>
+        </template>
+      </KCard>
+
+      <KCard
+        class="card"
+        :to="{ name: '/' }"
+        :headingLevel="2"
+        layout="vertical"
+        thumbnailDisplay="large"
+        :thumbnailSrc="require('../assets/hummingbird CC BY-SA 4.0.jpg')"
+        title="This is a sample resource title"
+      >
+        <template #belowTitle>
+          <span>Below title below title below title below title below title below title below title below title below title below title below title below title below title</span>
+        </template>
+
+        <template #footer>
+          <div>
+            <div class="footer-top-header">
+              <span>
+                <KIcon icon="createShaded" class="icon-size" />
+                Practice
+              </span>
+              <span
+                :style="{ 'background-color': $themePalette.grey.v_100,'padding': '2px' }"
+              >
+                Short Activity
+              </span>
+            </div>
+
+            <KGrid>
+              <KGridItem
+                :layout12="{ span: 8 }"
+                :layout8="{ span: 6 }"
+              >
+                <progress
+                  value="20"
+                  max="100"
+                  style="height:0.5em;width:100%"
+                ></progress>
+              </KGridItem>
+              <KGridItem
+                :layout12="{ span: 4 }"
+                :layout8="{ span: 2 }"
+              >
+                <div class="" style="float:right;">
+                  <KIcon icon="schedule" class="icon-size" />
+                  <KIcon icon="download" class="icon-size" />
+                </div>
+              </KGridItem>
+            </KGrid>
+          </div>
+        </template>
+      </KCard>
+
+      <KCard
+        class="card"
+        :to="{ name: '/' }"
+        :headingLevel="2"
+        layout="vertical"
+        thumbnailDisplay="large"
+        thumbnailSrc=""
+        title="This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title"
+      >
+        <template #thumbnailPlaceholder>
+          <span :style="{ display: 'flex', height: '100%', justifyContent: 'center', alignItems: 'center' }">
+            <KIcon icon="readSolid" :style="{ fontSize: '40px' }" />
+          </span>
+        </template>
+        <template #aboveTitle>
+          <KGrid>
+
+            <KGridItem
+              :layout12="{ span: 8 }"
+              :layout8="{ span: 6 }"
+            >
+              <span><KIcon icon="readSolid" :style="{ 'font-size': '14px' }" /></span>
+              <span
+                :style="{ 'color': $themePalette.grey.v_400,
+                          'font-size': '12px' }"
+              >Rutrum pellentesque utrum...</span>
+            </KGridItem>
+
+            <KGridItem
+              :layout12="{ span: 4 }"
+              :layout8="{ span: 2 }"
+            >
+              <div style="float:right">
+                <KIcon icon="infoOutline" class="icon-size" />
+              </div>
+            </KGridItem>
+          </KGrid>
+        </template>
+        <template #belowTitle>
+          <span>Below title below title below title below title below title below title below title below title below title below title below title below title below title</span>
+        </template>
+      </KCard>
+    </ul>
+
+    <h3>Vertical layout with small thumbnail</h3>
+    <ul class="vertical-cards">
+      <KCard
+        class="card"
+        :to="{ name: '/' }"
+        :headingLevel="2"
+        layout="vertical"
+        thumbnailDisplay="small"
+        :thumbnailSrc="require('../assets/hummingbird CC BY-SA 4.0.jpg')"
+        title="This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title"
+      >
+        <template #aboveTitle>
+          <KGrid>
+
+            <KGridItem
+              :layout12="{ span: 8 }"
+              :layout8="{ span: 6 }"
+            >
+              <span><KIcon icon="readSolid" :style="{ 'font-size': '14px' }" /></span>
+              <span
+                :style="{ 'color': $themePalette.grey.v_400,
+                          'font-size': '12px' }"
+              >Rutrum pellentesque utrum...</span>
+            </KGridItem>
+
+            <KGridItem
+              :layout12="{ span: 4 }"
+              :layout8="{ span: 2 }"
+            >
+              <div style="float:right">
+                <KIcon icon="infoOutline" class="icon-size" />
+              </div>
+            </KGridItem>
+          </KGrid>
+        </template>
+        <template #belowTitle>
+          <span>Below title below title below title below title below title below title below title below title below title below title below title below title below title</span>
+        </template>
+
+        <template #footer>
+          <div>
+            <div class="footer-top-header">
+              <span>
+                <KIcon icon="createShaded" class="icon-size" />
+                Practice
+              </span>
+              <span
+                :style="{ 'background-color': $themePalette.grey.v_100,'padding': '2px' }"
+              >
+                Short Activity
+              </span>
+            </div>
+
+            <KGrid>
+              <KGridItem
+                :layout12="{ span: 8 }"
+                :layout8="{ span: 6 }"
+              >
+                <progress
+                  value="20"
+                  max="100"
+                  style="height:0.5em;width:100%"
+                ></progress>
+              </KGridItem>
+              <KGridItem
+                :layout12="{ span: 4 }"
+                :layout8="{ span: 2 }"
+              >
+                <div class="" style="float:right;">
+                  <KIcon icon="schedule" class="icon-size" />
+                  <KIcon icon="download" class="icon-size" />
+                </div>
+              </KGridItem>
+            </KGrid>
+          </div>
+        </template>
+      </KCard>
+
+      <KCard
+        class="card"
+        :to="{ name: '/' }"
+        :headingLevel="2"
+        layout="vertical"
+        thumbnailDisplay="small"
+        :thumbnailSrc="require('../assets/hummingbird CC BY-SA 4.0.jpg')"
+      >
+        <template #title>
+          <KTextTruncator
+            text="This is a sample resource title that goes to three lines and truncates at the end of the three lines This is a sample title that goes"
+            :maxLines="3"
+          />
+        </template>
+        <template #footer>
+          <div>
+            <div class="footer-top-header">
+              <span>
+                <KIcon icon="createShaded" class="icon-size" />
+                Practice
+              </span>
+              <span
+                :style="{ 'background-color': $themePalette.grey.v_100,'padding': '2px' }"
+              >
+                Short Activity
+              </span>
+            </div>
+
+            <KGrid>
+              <KGridItem
+                :layout12="{ span: 8 }"
+                :layout8="{ span: 6 }"
+              >
+                <progress
+                  value="20"
+                  max="100"
+                  style="height:0.5em;width:100%"
+                ></progress>
+              </KGridItem>
+              <KGridItem
+                :layout12="{ span: 4 }"
+                :layout8="{ span: 2 }"
+              >
+                <div class="" style="float:right;">
+                  <KIcon icon="schedule" class="icon-size" />
+                  <KIcon icon="download" class="icon-size" />
+                </div>
+              </KGridItem>
+            </KGrid>
+          </div>
+        </template>
+      </KCard>
+
+      <KCard
+        class="card"
+        :to="{ name: '/' }"
+        :headingLevel="2"
+        layout="vertical"
+        thumbnailDisplay="small"
+        :thumbnailSrc="require('../assets/hummingbird CC BY-SA 4.0.jpg')"
+        title="This is a sample resource title"
+      >
+        <template #belowTitle>
+          <span>Below title below title below title below title below title below title below title below title below title below title below title below title below title</span>
+        </template>
+
+        <template #footer>
+          <div>
+            <div class="footer-top-header">
+              <span>
+                <KIcon icon="createShaded" class="icon-size" />
+                Practice
+              </span>
+              <span
+                :style="{ 'background-color': $themePalette.grey.v_100,'padding': '2px' }"
+              >
+                Short Activity
+              </span>
+            </div>
+
+            <KGrid>
+              <KGridItem
+                :layout12="{ span: 8 }"
+                :layout8="{ span: 6 }"
+              >
+                <progress
+                  value="20"
+                  max="100"
+                  style="height:0.5em;width:100%"
+                ></progress>
+              </KGridItem>
+              <KGridItem
+                :layout12="{ span: 4 }"
+                :layout8="{ span: 2 }"
+              >
+                <div class="" style="float:right;">
+                  <KIcon icon="schedule" class="icon-size" />
+                  <KIcon icon="download" class="icon-size" />
+                </div>
+              </KGridItem>
+            </KGrid>
+          </div>
+        </template>
+      </KCard>
+
+      <KCard
+        class="card"
+        :to="{ name: '/' }"
+        :headingLevel="2"
+        layout="vertical"
+        thumbnailDisplay="small"
+        title="This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title"
+      >
+        <template #thumbnailPlaceholder>
+          <span :style="{ display: 'flex', height: '100%', justifyContent: 'center', alignItems: 'center' }">
+            <KIcon icon="readSolid" :style="{ fontSize: '40px' }" />
+          </span>
+        </template>
+        <template #aboveTitle>
+          <KGrid>
+
+            <KGridItem
+              :layout12="{ span: 8 }"
+              :layout8="{ span: 6 }"
+            >
+              <span><KIcon icon="readSolid" :style="{ 'font-size': '14px' }" /></span>
+              <span
+                :style="{ 'color': $themePalette.grey.v_400,
+                          'font-size': '12px' }"
+              >Rutrum pellentesque utrum...</span>
+            </KGridItem>
+
+            <KGridItem
+              :layout12="{ span: 4 }"
+              :layout8="{ span: 2 }"
+            >
+              <div style="float:right">
+                <KIcon icon="infoOutline" class="icon-size" />
+              </div>
+            </KGridItem>
+          </KGrid>
+        </template>
+        <template #belowTitle>
+          <span>Below title below title below title below title below title below title below title below title below title below title below title below title below title</span>
+        </template>
+      </KCard>
+    </ul>
+
+    <h3>Horizontal layout with large thumbnail on the left</h3>
+    <ul class="horizontal-cards">
+      <KCard
+        class="card"
+        :to="{ name: '/' }"
+        :headingLevel="2"
+        layout="horizontal"
+        thumbnailDisplay="large"
+        :thumbnailSrc="require('../assets/hummingbird CC BY-SA 4.0.jpg')"
+        title="This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title"
+      >
+        <template #aboveTitle>
+          <KGrid>
+            <KGridItem
+              :layout12="{ span: 8 }"
+              :layout8="{ span: 6 }"
+            >
+              <span><KIcon icon="readSolid" :style="{ 'font-size': '14px' }" /></span>
+              <span
+                :style="{ 'color': $themePalette.grey.v_400,
+                          'font-size': '12px' }"
+              >Rutrum pellentesque utrum...</span>
+            </KGridItem>
+
+            <KGridItem
+              :layout12="{ span: 4 }"
+              :layout8="{ span: 2 }"
+            >
+              <div style="float:right">
+                <KIcon icon="infoOutline" class="icon-size" />
+              </div>
+            </KGridItem>
+          </KGrid>
+        </template>
+        <template #belowTitle>
+          <span>Below title below title below title below title below title below title below title below title below title below title below title below title below title</span>
+        </template>
+
+        <template #footer>
+          <div>
+            <div class="footer-top-header">
+              <span>
+                <KIcon icon="createShaded" class="icon-size" />
+                Practice
+              </span>
+              <span
+                :style="{ 'background-color': $themePalette.grey.v_100,'padding': '2px' }"
+              >
+                Short Activity
+              </span>
+            </div>
+
+            <KGrid>
+              <KGridItem
+                :layout12="{ span: 8 }"
+                :layout8="{ span: 6 }"
+              >
+                <progress
+                  value="20"
+                  max="100"
+                  style="height:0.5em;width:100%"
+                ></progress>
+              </KGridItem>
+              <KGridItem
+                :layout12="{ span: 4 }"
+                :layout8="{ span: 2 }"
+              >
+                <div class="" style="float:right;">
+                  <KIcon icon="schedule" class="icon-size" />
+                  <KIcon icon="download" class="icon-size" />
+                </div>
+              </KGridItem>
+            </KGrid>
+          </div>
+        </template>
+      </KCard>
+
+      <KCard
+        class="card"
+        :to="{ name: '/' }"
+        :headingLevel="2"
+        layout="horizontal"
+        thumbnailDisplay="large"
+        :thumbnailSrc="require('../assets/hummingbird CC BY-SA 4.0.jpg')"
+      >
+        <template #title>
+          <KTextTruncator
+            text="This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title"
+            :maxLines="3"
+          />
+        </template>
+        <template #footer>
+          <div>
+            <div class="footer-top-header">
+              <span>
+                <KIcon icon="createShaded" class="icon-size" />
+                Practice
+              </span>
+              <span
+                :style="{ 'background-color': $themePalette.grey.v_100,'padding': '2px' }"
+              >
+                Short Activity
+              </span>
+            </div>
+
+            <KGrid>
+              <KGridItem
+                :layout12="{ span: 8 }"
+                :layout8="{ span: 6 }"
+              >
+                <progress
+                  value="20"
+                  max="100"
+                  style="height:0.5em;width:100%"
+                ></progress>
+              </KGridItem>
+              <KGridItem
+                :layout12="{ span: 4 }"
+                :layout8="{ span: 2 }"
+              >
+                <div class="" style="float:right;">
+                  <KIcon icon="schedule" class="icon-size" />
+                  <KIcon icon="download" class="icon-size" />
+                </div>
+              </KGridItem>
+            </KGrid>
+          </div>
+        </template>
+      </KCard>
+
+      <KCard
+        class="card"
+        :to="{ name: '/' }"
+        :headingLevel="2"
+        layout="horizontal"
+        thumbnailDisplay="large"
+        :thumbnailSrc="require('../assets/hummingbird CC BY-SA 4.0.jpg')"
+        title="This is a sample resource title"
+      >
+        <template #belowTitle>
+          <span>Below title below title below title below title below title below title below title below title below title below title below title below title below title</span>
+        </template>
+
+        <template #footer>
+          <div>
+            <div class="footer-top-header">
+              <span>
+                <KIcon icon="createShaded" class="icon-size" />
+                Practice
+              </span>
+              <span
+                :style="{ 'background-color': $themePalette.grey.v_100,'padding': '2px' }"
+              >
+                Short Activity
+              </span>
+            </div>
+
+            <KGrid>
+              <KGridItem
+                :layout12="{ span: 8 }"
+                :layout8="{ span: 6 }"
+              >
+                <progress
+                  value="20"
+                  max="100"
+                  style="height:0.5em;width:100%"
+                ></progress>
+              </KGridItem>
+              <KGridItem
+                :layout12="{ span: 4 }"
+                :layout8="{ span: 2 }"
+              >
+                <div class="" style="float:right;">
+                  <KIcon icon="schedule" class="icon-size" />
+                  <KIcon icon="download" class="icon-size" />
+                </div>
+              </KGridItem>
+            </KGrid>
+          </div>
+        </template>
+      </KCard>
+
+      <KCard
+        class="card"
+        :to="{ name: '/' }"
+        :headingLevel="2"
+        layout="horizontal"
+        thumbnailDisplay="large"
+        title="This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title"
+      >
+        <template #thumbnailPlaceholder>
+          <span :style="{ display: 'flex', height: '100%', justifyContent: 'center', alignItems: 'center' }">
+            <KIcon icon="readSolid" :style="{ fontSize: '40px' }" />
+          </span>
+        </template>
+        <template #aboveTitle>
+          <KGrid>
+
+            <KGridItem
+              :layout12="{ span: 8 }"
+              :layout8="{ span: 6 }"
+            >
+              <span><KIcon icon="readSolid" :style="{ 'font-size': '14px' }" /></span>
+              <span
+                :style="{ 'color': $themePalette.grey.v_400,
+                          'font-size': '12px' }"
+              >Rutrum pellentesque utrum...</span>
+            </KGridItem>
+
+            <KGridItem
+              :layout12="{ span: 4 }"
+              :layout8="{ span: 2 }"
+            >
+              <div style="float:right">
+                <KIcon icon="infoOutline" class="icon-size" />
+              </div>
+            </KGridItem>
+          </KGrid>
+        </template>
+        <template #belowTitle>
+          <span>Below title below title below title below title below title below title below title below title below title below title below title below title below title</span>
+        </template>
+      </KCard>
+    </ul>
+
+    <h3>Horizontal layout with large thumbnail on the right</h3>
+    <ul class="horizontal-cards">
+      <KCard
+        class="card"
+        :to="{ name: '/' }"
+        :headingLevel="2"
+        layout="horizontal"
+        thumbnailDisplay="large"
+        thumbnailAlign="right"
+        :thumbnailSrc="require('../assets/hummingbird CC BY-SA 4.0.jpg')"
+        title="This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title"
+      >
+        <template #aboveTitle>
+          <KGrid>
+            <KGridItem
+              :layout12="{ span: 8 }"
+              :layout8="{ span: 6 }"
+            >
+              <span><KIcon icon="readSolid" :style="{ 'font-size': '14px' }" /></span>
+              <span
+                :style="{ 'color': $themePalette.grey.v_400,
+                          'font-size': '12px' }"
+              >Rutrum pellentesque utrum...</span>
+            </KGridItem>
+
+            <KGridItem
+              :layout12="{ span: 4 }"
+              :layout8="{ span: 2 }"
+            >
+              <div style="float:right">
+                <KIcon icon="infoOutline" class="icon-size" />
+              </div>
+            </KGridItem>
+          </KGrid>
+        </template>
+        <template #belowTitle>
+          <span>Below title below title below title below title below title below title below title below title below title below title below title below title below title</span>
+        </template>
+
+        <template #footer>
+          <div>
+            <div class="footer-top-header">
+              <span>
+                <KIcon icon="createShaded" class="icon-size" />
+                Practice
+              </span>
+              <span
+                :style="{ 'background-color': $themePalette.grey.v_100,'padding': '2px' }"
+              >
+                Short Activity
+              </span>
+            </div>
+
+            <KGrid>
+              <KGridItem
+                :layout12="{ span: 8 }"
+                :layout8="{ span: 6 }"
+              >
+                <progress
+                  value="20"
+                  max="100"
+                  style="height:0.5em;width:100%"
+                ></progress>
+              </KGridItem>
+              <KGridItem
+                :layout12="{ span: 4 }"
+                :layout8="{ span: 2 }"
+              >
+                <div class="" style="float:right;">
+                  <KIcon icon="schedule" class="icon-size" />
+                  <KIcon icon="download" class="icon-size" />
+                </div>
+              </KGridItem>
+            </KGrid>
+          </div>
+        </template>
+      </KCard>
+
+      <KCard
+        class="card"
+        :to="{ name: '/' }"
+        :headingLevel="2"
+        layout="horizontal"
+        thumbnailDisplay="large"
+        thumbnailAlign="right"
+        :thumbnailSrc="require('../assets/hummingbird CC BY-SA 4.0.jpg')"
+      >
+        <template #title>
+          <KTextTruncator
+            text="This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title"
+            :maxLines="3"
+          />
+        </template>
+        <template #footer>
+          <div>
+            <div class="footer-top-header">
+              <span>
+                <KIcon icon="createShaded" class="icon-size" />
+                Practice
+              </span>
+              <span
+                :style="{ 'background-color': $themePalette.grey.v_100,'padding': '2px' }"
+              >
+                Short Activity
+              </span>
+            </div>
+
+            <KGrid>
+              <KGridItem
+                :layout12="{ span: 8 }"
+                :layout8="{ span: 6 }"
+              >
+                <progress
+                  value="20"
+                  max="100"
+                  style="height:0.5em;width:100%"
+                ></progress>
+              </KGridItem>
+              <KGridItem
+                :layout12="{ span: 4 }"
+                :layout8="{ span: 2 }"
+              >
+                <div class="" style="float:right;">
+                  <KIcon icon="schedule" class="icon-size" />
+                  <KIcon icon="download" class="icon-size" />
+                </div>
+              </KGridItem>
+            </KGrid>
+          </div>
+        </template>
+      </KCard>
+
+      <KCard
+        class="card"
+        :to="{ name: '/' }"
+        :headingLevel="2"
+        layout="horizontal"
+        thumbnailDisplay="large"
+        thumbnailAlign="right"
+        :thumbnailSrc="require('../assets/hummingbird CC BY-SA 4.0.jpg')"
+        title="This is a sample resource title"
+      >
+        <template #belowTitle>
+          <span>Below title below title below title below title below title below title below title below title below title below title below title below title below title</span>
+        </template>
+
+        <template #footer>
+          <div>
+            <div class="footer-top-header">
+              <span>
+                <KIcon icon="createShaded" class="icon-size" />
+                Practice
+              </span>
+              <span
+                :style="{ 'background-color': $themePalette.grey.v_100,'padding': '2px' }"
+              >
+                Short Activity
+              </span>
+            </div>
+
+            <KGrid>
+              <KGridItem
+                :layout12="{ span: 8 }"
+                :layout8="{ span: 6 }"
+              >
+                <progress
+                  value="20"
+                  max="100"
+                  style="height:0.5em;width:100%"
+                ></progress>
+              </KGridItem>
+              <KGridItem
+                :layout12="{ span: 4 }"
+                :layout8="{ span: 2 }"
+              >
+                <div class="" style="float:right;">
+                  <KIcon icon="schedule" class="icon-size" />
+                  <KIcon icon="download" class="icon-size" />
+                </div>
+              </KGridItem>
+            </KGrid>
+          </div>
+        </template>
+      </KCard>
+
+      <KCard
+        class="card"
+        :to="{ name: '/' }"
+        :headingLevel="2"
+        layout="horizontal"
+        thumbnailDisplay="large"
+        thumbnailAlign="right"
+        title="This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title"
+      >
+        <template #thumbnailPlaceholder>
+          <span :style="{ display: 'flex', height: '100%', justifyContent: 'center', alignItems: 'center' }">
+            <KIcon icon="readSolid" :style="{ fontSize: '40px' }" />
+          </span>
+        </template>
+        <template #aboveTitle>
+          <KGrid>
+
+            <KGridItem
+              :layout12="{ span: 8 }"
+              :layout8="{ span: 6 }"
+            >
+              <span><KIcon icon="readSolid" :style="{ 'font-size': '14px' }" /></span>
+              <span
+                :style="{ 'color': $themePalette.grey.v_400,
+                          'font-size': '12px' }"
+              >Rutrum pellentesque utrum...</span>
+            </KGridItem>
+
+            <KGridItem
+              :layout12="{ span: 4 }"
+              :layout8="{ span: 2 }"
+            >
+              <div style="float:right">
+                <KIcon icon="infoOutline" class="icon-size" />
+              </div>
+            </KGridItem>
+          </KGrid>
+        </template>
+        <template #belowTitle>
+          <span>Below title below title below title below title below title below title below title below title below title below title below title below title below title</span>
+        </template>
+      </KCard>
+    </ul>
+
+    <h3>Horizontal layout with small thumbnail on the left</h3>
+
+    <ul class="horizontal-cards-smaller">
+      <KCard
+        class="card"
+        :to="{ name: '/' }"
+        :headingLevel="2"
+        layout="horizontal"
+        thumbnailDisplay="small"
+        :thumbnailSrc="require('../assets/hummingbird CC BY-SA 4.0.jpg')"
+        title="This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title"
+      >
+        <template #aboveTitle>
+          <KGrid>
+
+            <KGridItem
+              :layout12="{ span: 8 }"
+              :layout8="{ span: 6 }"
+            >
+              <span><KIcon icon="readSolid" :style="{ 'font-size': '14px' }" /></span>
+              <span
+                :style="{ 'color': $themePalette.grey.v_400,
+                          'font-size': '12px' }"
+              >Rutrum pellentesque utrum...</span>
+            </KGridItem>
+
+            <KGridItem
+              :layout12="{ span: 4 }"
+              :layout8="{ span: 2 }"
+            >
+              <div style="float:right">
+                <KIcon icon="infoOutline" class="icon-size" />
+              </div>
+            </KGridItem>
+          </KGrid>
+        </template>
+        <template #belowTitle>
+          <span>Below title below title below title below title below title below title below title below title below title below title below title below title below title</span>
+        </template>
+
+        <template #footer>
+          <div>
+            <div class="footer-top-header">
+              <span>
+                <KIcon icon="createShaded" class="icon-size" />
+                Practice
+              </span>
+              <span
+                :style="{ 'background-color': $themePalette.grey.v_100,'padding': '2px' }"
+              >
+                Short Activity
+              </span>
+            </div>
+
+            <KGrid>
+              <KGridItem
+                :layout12="{ span: 8 }"
+                :layout8="{ span: 6 }"
+              >
+                <progress
+                  value="20"
+                  max="100"
+                  style="height:0.5em;width:100%"
+                ></progress>
+              </KGridItem>
+              <KGridItem
+                :layout12="{ span: 4 }"
+                :layout8="{ span: 2 }"
+              >
+                <div class="" style="float:right;">
+                  <KIcon icon="schedule" class="icon-size" />
+                  <KIcon icon="download" class="icon-size" />
+                </div>
+              </KGridItem>
+            </KGrid>
+          </div>
+        </template>
+      </KCard>
+
+      <KCard
+        class="card"
+        :to="{ name: '/' }"
+        :headingLevel="2"
+        layout="horizontal"
+        thumbnailDisplay="small"
+        :thumbnailSrc="require('../assets/hummingbird CC BY-SA 4.0.jpg')"
+      >
+        <template #title>
+          <KTextTruncator
+            text="This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title"
+            :maxLines="2"
+          />
+        </template>
+        <template #footer>
+          <div>
+            <div class="footer-top-header">
+              <span>
+                <KIcon icon="createShaded" class="icon-size" />
+                Practice
+              </span>
+              <span
+                :style="{ 'background-color': $themePalette.grey.v_100,'padding': '2px' }"
+              >
+                Short Activity
+              </span>
+            </div>
+
+            <KGrid>
+              <KGridItem
+                :layout12="{ span: 8 }"
+                :layout8="{ span: 6 }"
+              >
+                <progress
+                  value="20"
+                  max="100"
+                  style="height:0.5em;width:100%"
+                ></progress>
+              </KGridItem>
+              <KGridItem
+                :layout12="{ span: 4 }"
+                :layout8="{ span: 2 }"
+              >
+                <div class="" style="float:right;">
+                  <KIcon icon="schedule" class="icon-size" />
+                  <KIcon icon="download" class="icon-size" />
+                </div>
+              </KGridItem>
+            </KGrid>
+          </div>
+        </template>
+      </KCard>
+
+      <KCard
+        class="card"
+        :to="{ name: '/' }"
+        :headingLevel="2"
+        layout="horizontal"
+        thumbnailDisplay="small"
+        :thumbnailSrc="require('../assets/hummingbird CC BY-SA 4.0.jpg')"
+        title="This is a sample resource title"
+      >
+        <template #belowTitle>
+          <span>Below title below title below title below title below title below title below title below title below title below title below title below title below title</span>
+        </template>
+
+        <template #footer>
+          <div>
+            <div class="footer-top-header">
+              <span>
+                <KIcon icon="createShaded" class="icon-size" />
+                Practice
+              </span>
+              <span
+                :style="{ 'background-color': $themePalette.grey.v_100,'padding': '2px' }"
+              >
+                Short Activity
+              </span>
+            </div>
+
+            <KGrid>
+              <KGridItem
+                :layout12="{ span: 8 }"
+                :layout8="{ span: 6 }"
+              >
+                <progress
+                  value="20"
+                  max="100"
+                  style="height:0.5em;width:100%"
+                ></progress>
+              </KGridItem>
+              <KGridItem
+                :layout12="{ span: 4 }"
+                :layout8="{ span: 2 }"
+              >
+                <div class="" style="float:right;">
+                  <KIcon icon="schedule" class="icon-size" />
+                  <KIcon icon="download" class="icon-size" />
+                </div>
+              </KGridItem>
+            </KGrid>
+          </div>
+        </template>
+      </KCard>
+
+      <KCard
+        class="card"
+        :to="{ name: '/' }"
+        :headingLevel="2"
+        layout="horizontal"
+        thumbnailDisplay="small"
+        title="This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title"
+      >
+        <template #thumbnailPlaceholder>
+          <span :style="{ display: 'flex', height: '100%', justifyContent: 'center', alignItems: 'center' }">
+            <KIcon icon="readSolid" :style="{ fontSize: '40px' }" />
+          </span>
+        </template>
+        <template #aboveTitle>
+          <KGrid>
+
+            <KGridItem
+              :layout12="{ span: 8 }"
+              :layout8="{ span: 6 }"
+            >
+              <span><KIcon icon="readSolid" :style="{ 'font-size': '14px' }" /></span>
+              <span
+                :style="{ 'color': $themePalette.grey.v_400,
+                          'font-size': '12px' }"
+              >Rutrum pellentesque utrum...</span>
+            </KGridItem>
+
+            <KGridItem
+              :layout12="{ span: 4 }"
+              :layout8="{ span: 2 }"
+            >
+              <div style="float:right">
+                <KIcon icon="infoOutline" class="icon-size" />
+              </div>
+            </KGridItem>
+          </KGrid>
+        </template>
+        <template #belowTitle>
+          <span>Below title below title below title below title below title below title below title below title below title below title below title below title below title</span>
+        </template>
+      </KCard>
+    </ul>
+
+
+    <h3>Horizontal layout with small thumbnail on the right</h3>
+
+    <ul class="horizontal-cards-smaller">
+      <KCard
+        class="card"
+        :to="{ name: '/' }"
+        :headingLevel="2"
+        layout="horizontal"
+        thumbnailDisplay="small"
+        thumbnailAlign="right"
+        :thumbnailSrc="require('../assets/hummingbird CC BY-SA 4.0.jpg')"
+        title="This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title"
+      >
+        <template #aboveTitle>
+          <KGrid>
+
+            <KGridItem
+              :layout12="{ span: 8 }"
+              :layout8="{ span: 6 }"
+            >
+              <span><KIcon icon="readSolid" :style="{ 'font-size': '14px' }" /></span>
+              <span
+                :style="{ 'color': $themePalette.grey.v_400,
+                          'font-size': '12px' }"
+              >Rutrum pellentesque utrum...</span>
+            </KGridItem>
+
+            <KGridItem
+              :layout12="{ span: 4 }"
+              :layout8="{ span: 2 }"
+            >
+              <div style="float:right">
+                <KIcon icon="infoOutline" class="icon-size" />
+              </div>
+            </KGridItem>
+          </KGrid>
+        </template>
+        <template #belowTitle>
+          <span>Below title below title below title below title below title below title below title below title below title below title below title below title below title</span>
+        </template>
+
+        <template #footer>
+          <div>
+            <div class="footer-top-header">
+              <span>
+                <KIcon icon="createShaded" class="icon-size" />
+                Practice
+              </span>
+              <span
+                :style="{ 'background-color': $themePalette.grey.v_100,'padding': '2px' }"
+              >
+                Short Activity
+              </span>
+            </div>
+
+            <KGrid>
+              <KGridItem
+                :layout12="{ span: 8 }"
+                :layout8="{ span: 6 }"
+              >
+                <progress
+                  value="20"
+                  max="100"
+                  style="height:0.5em;width:100%"
+                ></progress>
+              </KGridItem>
+              <KGridItem
+                :layout12="{ span: 4 }"
+                :layout8="{ span: 2 }"
+              >
+                <div class="" style="float:right;">
+                  <KIcon icon="schedule" class="icon-size" />
+                  <KIcon icon="download" class="icon-size" />
+                </div>
+              </KGridItem>
+            </KGrid>
+          </div>
+        </template>
+      </KCard>
+
+      <KCard
+        class="card"
+        :to="{ name: '/' }"
+        :headingLevel="2"
+        layout="horizontal"
+        thumbnailDisplay="small"
+        thumbnailAlign="right"
+        :thumbnailSrc="require('../assets/hummingbird CC BY-SA 4.0.jpg')"
+      >
+        <template #title>
+          <KTextTruncator
+            text="This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title"
+            :maxLines="2"
+          />
+        </template>
+        <template #footer>
+          <div>
+            <div class="footer-top-header">
+              <span>
+                <KIcon icon="createShaded" class="icon-size" />
+                Practice
+              </span>
+              <span
+                :style="{ 'background-color': $themePalette.grey.v_100,'padding': '2px' }"
+              >
+                Short Activity
+              </span>
+            </div>
+
+            <KGrid>
+              <KGridItem
+                :layout12="{ span: 8 }"
+                :layout8="{ span: 6 }"
+              >
+                <progress
+                  value="20"
+                  max="100"
+                  style="height:0.5em;width:100%"
+                ></progress>
+              </KGridItem>
+              <KGridItem
+                :layout12="{ span: 4 }"
+                :layout8="{ span: 2 }"
+              >
+                <div class="" style="float:right;">
+                  <KIcon icon="schedule" class="icon-size" />
+                  <KIcon icon="download" class="icon-size" />
+                </div>
+              </KGridItem>
+            </KGrid>
+          </div>
+        </template>
+      </KCard>
+
+      <KCard
+        class="card"
+        :to="{ name: '/' }"
+        :headingLevel="2"
+        layout="horizontal"
+        thumbnailDisplay="small"
+        thumbnailAlign="right"
+        :thumbnailSrc="require('../assets/hummingbird CC BY-SA 4.0.jpg')"
+        title="This is a sample resource title"
+      >
+        <template #belowTitle>
+          <span>Below title below title below title below title below title below title below title below title below title below title below title below title below title</span>
+        </template>
+
+        <template #footer>
+          <div>
+            <div class="footer-top-header">
+              <span>
+                <KIcon icon="createShaded" class="icon-size" />
+                Practice
+              </span>
+              <span
+                :style="{ 'background-color': $themePalette.grey.v_100,'padding': '2px' }"
+              >
+                Short Activity
+              </span>
+            </div>
+
+            <KGrid>
+              <KGridItem
+                :layout12="{ span: 8 }"
+                :layout8="{ span: 6 }"
+              >
+                <progress
+                  value="20"
+                  max="100"
+                  style="height:0.5em;width:100%"
+                ></progress>
+              </KGridItem>
+              <KGridItem
+                :layout12="{ span: 4 }"
+                :layout8="{ span: 2 }"
+              >
+                <div class="" style="float:right;">
+                  <KIcon icon="schedule" class="icon-size" />
+                  <KIcon icon="download" class="icon-size" />
+                </div>
+              </KGridItem>
+            </KGrid>
+          </div>
+        </template>
+      </KCard>
+
+      <KCard
+        class="card"
+        :to="{ name: '/' }"
+        :headingLevel="2"
+        layout="horizontal"
+        thumbnailDisplay="small"
+        thumbnailAlign="right"
+        title="This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title"
+      >
+        <template #thumbnailPlaceholder>
+          <span :style="{ display: 'flex', height: '100%', justifyContent: 'center', alignItems: 'center' }">
+            <KIcon icon="readSolid" :style="{ fontSize: '40px' }" />
+          </span>
+        </template>
+        <template #aboveTitle>
+          <KGrid>
+
+            <KGridItem
+              :layout12="{ span: 8 }"
+              :layout8="{ span: 6 }"
+            >
+              <span><KIcon icon="readSolid" :style="{ 'font-size': '14px' }" /></span>
+              <span
+                :style="{ 'color': $themePalette.grey.v_400,
+                          'font-size': '12px' }"
+              >Rutrum pellentesque utrum...</span>
+            </KGridItem>
+
+            <KGridItem
+              :layout12="{ span: 4 }"
+              :layout8="{ span: 2 }"
+            >
+              <div style="float:right">
+                <KIcon icon="infoOutline" class="icon-size" />
+              </div>
+            </KGridItem>
+          </KGrid>
+        </template>
+        <template #belowTitle>
+          <span>Below title below title below title below title below title below title below title below title below title below title below title below title below title</span>
+        </template>
+      </KCard>
+    </ul>
   </div>
 
 </template>
@@ -32,10 +1375,10 @@
 <script>
 
   /*
-    Playground is a Vue component too,
-    so you can also use `data`, `methods`, etc.
-    as usual if helpful
-  */
+      Playground is a Vue component too,
+      so you can also use `data`, `methods`, etc.
+      as usual if helpful
+    */
   export default {
     name: 'Playground',
     data() {
@@ -44,4 +1387,61 @@
     methods: {},
   };
 
-</script>
\ No newline at end of file
+</script>
+
+
+<style scoped lang="scss">
+
+  ul {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    row-gap: 20px;
+    column-gap: 20px;
+    margin-bottom: 50px;
+    list-style-type: none;
+  }
+
+  h3 {
+    margin-left: 30px;
+  }
+
+  .vertical-cards {
+    .card {
+      max-width: 350px;
+    }
+  }
+
+  .horizontal-cards {
+    .card {
+      max-width: 650px;
+    }
+  }
+
+  .horizontal-cards-smaller {
+    .card {
+      max-width: 400px;
+    }
+  }
+
+  .footer-top-header {
+    display: flex;
+    order: 1;
+    margin-top: 0.5em;
+    font-size: 14px;
+  }
+
+  .footer-top-header span {
+    margin-right: 30px;
+  }
+
+  .icon-size {
+    font-size: 20px;
+  }
+
+  .icon {
+    margin-left: 300px;
+    font-size: 20px;
+  }
+
+</style>
diff --git a/lib/KCard/BaseCard.vue b/lib/KCard/BaseCard.vue
deleted file mode 100644
index 43c35764f..000000000
--- a/lib/KCard/BaseCard.vue
+++ /dev/null
@@ -1,206 +0,0 @@
-<template>
-
-  <!-- see trackInputModality  for [data-focus=true] -->
-  <li
-    :class="['base-card', $computedClass(coreOutlineFocus)]"
-    tabindex="0"
-    data-focus="true"
-    :style="{ backgroundColor: $themeTokens.surface }"
-    @focus="onCardFocus"
-    @mouseenter="onCardHover"
-    @mousedown="onMouseDown"
-    @mouseup="onMouseUp"
-    @keyup.enter="onEnter"
-  >
-    <component
-      :is="headingElement"
-      v-if="title || $slots.title"
-      :style="headingStyles"
-    >
-      <!--
-        Prevent router-link click event by setting empty event=""
-        (technique used by Vue community because
-        the usual ways don't work for router-link).
-        This is because <li> is supposed to take care of it.
-        Furthemore, together with 'draggable' disabled, it ensures
-        that text selection works on the title text.
-        See the custom click implementation in 'onMouseUp'. 
-      -->
-      <router-link
-        tabindex="-1"
-        :to="to"
-        draggable="false"
-        event=""
-      >
-        <span
-          class="base-card-title"
-          :style="{ color: $themeTokens.text }"
-        >
-          <slot 
-            v-if="$slots.title"
-            name="title"
-          ></slot>
-          <KTextTruncator
-            v-else
-            :text="title"
-            :maxLines="titleLines"
-          />
-        </span>
-      </router-link>
-    </component>
-
-    <slot name="default"></slot>
-  </li>
-
-</template>
-
-
-<script>
-
-  /* 
-    BaseCard is a base building block for KCard. Its main purpose
-    is to ensure that no matter of how we change KCard styles, slots,
-    layouts, etc. we never break basic a11y-related markup criteria.
-
-    Long story short, all cards need to have the following HTML output 
-    (even though the title may not be the first element visually).
-
-    <li>
-      <h[2-6]>
-        <a href="/resource">Resource title</a>
-      </h[2-6]>
-
-      all other content
-    </li> 
-
-    BaseCard protect this structure by the way it places its default slot
-    as well as some validation logic. It also takes care of properly showing
-    the focus ring and related.
-
-    See the specification and https://inclusive-components.design/cards/
-    for more details.
-  */
-  export default {
-    name: 'BaseCard',
-
-    props: {
-      to: {
-        type: Object,
-        required: true,
-      },
-      title: {
-        type: String,
-        required: false,
-        default: null,
-      },
-      titleLines: {
-        type: Number,
-        required: false,
-        default: 2,
-      },
-      headingLevel: {
-        type: Number,
-        required: true,
-        validator(value) {
-          if (value <= 6 && value >= 2) {
-            return true;
-          } else {
-            console.error(`[KCard] 'headingLevel' must be between 2 and 6.`);
-            return false;
-          }
-        },
-      },
-      headingStyles: {
-        required: false,
-        type: Object,
-        default: () => {},
-      },
-    },
-    data() {
-      return {
-        mouseDownTime: 0,
-      };
-    },
-    computed: {
-      coreOutlineFocus() {
-        return {
-          ':focus': {
-            ...this.$coreOutline,
-          },
-        };
-      },
-      headingElement() {
-        return this.headingLevel ? 'h' + this.headingLevel : undefined;
-      },
-    },
-    mounted() {
-      if (!this.$slots.title && !this.title) {
-        console.error(`[KCard] provide title via 'title' slot or prop`);
-      }
-    },
-    methods: {
-      navigate() {
-        this.$router.push(this.to);
-      },
-      onCardFocus(e) {
-        this.$emit('focus', e);
-      },
-      onCardHover(e) {
-        this.$emit('hover', e);
-      },
-      onEnter() {
-        this.navigate();
-      },
-      onMouseDown() {
-        this.mouseDownTime = new Date().getTime();
-      },
-      onMouseUp() {
-        const mouseUpTime = new Date().getTime();
-        // Make textual content selectable within the whole clickable card area.
-        //
-        // Calculate the time difference between the mouse button press and release.
-        // If the time difference is greater than or equal to 200 milliseconds,
-        // it means that the mouse button was pressed and held for a longer time,
-        // which is not typically interpreted as a click event. Do not navigate
-        // in such case.
-        if (mouseUpTime - this.mouseDownTime < 200) {
-          this.navigate();
-        } else {
-          return;
-        }
-      },
-    },
-  };
-
-</script>
-
-
-<style lang="scss" scoped>
-
-  @import '../styles/definitions';
-
-  .base-card {
-    @extend %dropshadow-2dp;
-
-    position: relative;
-    text-align: left;
-    text-decoration: none;
-    list-style-type: none;
-    cursor: pointer;
-    border-radius: 0.5em;
-    outline-offset: -1px;
-    transition: box-shadow $core-time ease;
-
-    &:hover,
-    &:focus {
-      @extend %dropshadow-6dp;
-    }
-  }
-
-  .base-card-title {
-    font-size: 16px;
-    font-weight: 600;
-    line-height: 1.5;
-  }
-
-</style>
\ No newline at end of file
diff --git a/lib/KCard/__tests__/KCard.spec.js b/lib/KCard/__tests__/KCard.spec.js
index 6a72dd20c..f4c92c0dc 100644
--- a/lib/KCard/__tests__/KCard.spec.js
+++ b/lib/KCard/__tests__/KCard.spec.js
@@ -13,14 +13,22 @@ function makeWrapper({ propsData = {}, slots = {} } = {}) {
   return mount(KCard, { router, propsData, slots, localVue });
 }
 
-/* checks the expected card markup:
-<li>
-  <h[2-6]>
-    <a href="/some-link">Test Title</a>
-  </h[2-6]>
-
-  all other content
-</li> */
+/*
+  Checks the expected card markup:
+
+  <li>
+    <div>
+      <h[2-6]>
+        <a href="/some-link">Test Title</a>
+      </h[2-6]>
+    </div>
+
+    all other content
+  </li>
+  
+  "li > h[2-6] > a > title text" structure that comes before
+  all other content is crucial to ensure accessibility.
+*/
 function checkExpectedCardMarkup({ wrapper, headingLevel, title }) {
   const firstElement = wrapper.find(':first-child');
   expect(firstElement.exists()).toBe(true);
@@ -28,13 +36,17 @@ function checkExpectedCardMarkup({ wrapper, headingLevel, title }) {
 
   const secondElement = wrapper.find('li > :first-child');
   expect(secondElement.exists()).toBe(true);
-  expect(secondElement.element.tagName.toLowerCase()).toBe(`h${headingLevel}`);
+  expect(secondElement.element.tagName.toLowerCase()).toBe('div');
 
-  const thirdElement = wrapper.find(`h${headingLevel} > :first-child`);
-  expect(thirdElement.element.tagName.toLowerCase()).toBe('a');
+  const thirdElement = wrapper.find('li > div > :first-child');
   expect(thirdElement.exists()).toBe(true);
+  expect(thirdElement.element.tagName.toLowerCase()).toBe(`h${headingLevel}`);
 
-  const linkText = thirdElement.text();
+  const fourthElement = wrapper.find(`li > div > h${headingLevel} > :first-child`);
+  expect(fourthElement.element.tagName.toLowerCase()).toBe('a');
+  expect(fourthElement.exists()).toBe(true);
+
+  const linkText = fourthElement.text();
   expect(linkText).toBe(title);
 }
 
@@ -72,7 +84,7 @@ describe('KCard', () => {
 
     await wrapper.find('li').trigger('mousedown');
     await new Promise(resolve => setTimeout(resolve, 500));
-    await wrapper.find('li').trigger('mouseup');
+    await wrapper.find('li').trigger('click');
     expect(wrapper.vm.$router.currentRoute.path).not.toBe('/some-link');
   });
 
@@ -83,7 +95,7 @@ describe('KCard', () => {
 
     await wrapper.find('li').trigger('mousedown');
     await new Promise(resolve => setTimeout(resolve, 100));
-    await wrapper.find('li').trigger('mouseup');
+    await wrapper.find('li').trigger('click');
 
     expect(wrapper.vm.$router.currentRoute.path).toBe('/some-link');
   });
diff --git a/lib/KCard/index.vue b/lib/KCard/index.vue
index 21270058d..a1ed4558e 100644
--- a/lib/KCard/index.vue
+++ b/lib/KCard/index.vue
@@ -1,20 +1,63 @@
 <template>
 
-  <BaseCard
-    :to="to"
-    :title="title"
-    :headingLevel="headingLevel"
-    :titleLines="titleLines"
-    :class="['k-card', rootClass, thumbnailAlignClass]"
-    :headingStyles="headingStyles"
+  <!-- see trackInputModality  for [data-focus=true] -->
+  <!--
+    do not use @onmouseup but rather @click
+    to allow for @click.stop on buttons and similar
+    rendered within a card via its slots -->
+  <li
+    tabindex="0"
+    data-focus="true"
+    :class="['k-card', $computedClass(coreOutlineFocus)]"
+    @focus="onFocus"
+    @mouseenter="onHover"
+    @mousedown="onMouseDown"
+    @click="onClick"
+    @keyup.enter="onEnter"
   >
-    <template v-if="$slots.title" #title>
-      <!-- @slot Optional slot section containing the title contents, should not contain a heading element. -->
-      <slot name="title"></slot>
-    </template>
-    <template #default>
+    <div
+      :class="['card-area', layoutClass, thumbnailAlignClass]"
+      :style="{ backgroundColor: $themeTokens.surface }"
+    >
+      <component
+        :is="headingElement"
+        v-if="title || $slots.title"
+        class="heading"
+        :style="{ color: $themeTokens.text }"
+      >
+        <!--
+          `event=""` prevents router-link click event
+          (technique used by Vue community because
+          the usual ways don't work for router-link).
+          This is to
+            - (1) prevent double navigation (the wrapping
+                  <li> is supposed to take care of navigation)
+            - (2) together with the `draggable` disabled, 
+                  ensures that text selection works on
+                  the title text (see the feature for allowing
+                  selecting card's content in `onClick`)
+        -->
+        <router-link
+          event=""
+          tabindex="-1"
+          :to="to"
+          draggable="false"
+        >
+          <!-- @slot Optional slot section containing the title contents, should not contain a heading element. -->
+          <slot 
+            v-if="$slots.title"
+            name="title"
+          ></slot>
+          <KTextTruncator
+            v-else
+            :text="title"
+            :maxLines="titleLines"
+          />
+        </router-link>
+      </component>
+
       <div
-        v-if="thumbnailDisplay !== Thumbnail_Displays.NONE"
+        v-if="thumbnailDisplay !== ThumbnailDisplays.NONE"
         class="thumbnail"
       >
         <!-- 
@@ -68,28 +111,26 @@
         <!-- @slot Places content to the footer area. -->
         <slot name="footer"></slot>
       </div>
-    </template>
-  </BaseCard>
+    </div>
+  </li>
 
 </template>
 
 
 <script>
 
-  import BaseCard from './BaseCard.vue';
-
   const Layouts = {
     HORIZONTAL: 'horizontal',
     VERTICAL: 'vertical',
   };
 
-  const Thumbnail_Displays = {
+  const ThumbnailDisplays = {
     NONE: 'none',
     SMALL: 'small',
     LARGE: 'large',
   };
 
-  const thumbnailAlignOptions = {
+  const ThumbnailAlignOptions = {
     LEFT: 'left',
     RIGHT: 'right',
   };
@@ -109,38 +150,53 @@
 
   export default {
     name: 'KCard',
-    components: { BaseCard },
     props: {
       /**
-       * Sets card title if provided. The title should be
-       * unique and descriptive to aid searching through list of links.
+       * A regular Vue route object that defines
+       * where the card click should navigate.
        */
-      title: {
-        type: String,
-        required: false,
-        default: null,
+      to: {
+        type: Object,
+        required: true,
       },
       /**
-       * Sets the HTML heading level in range (h2 - h6) for the title .
+       * Sets the HTML heading level in range (h2 - h6) for the title.
+       * Ensure that the heading level is correct within a particular
+       * context of a page where cards are displayed.
        */
       headingLevel: {
         type: Number,
         required: true,
+        validator(value) {
+          if (value <= 6 && value >= 2) {
+            return true;
+          } else {
+            console.error(`[KCard] 'headingLevel' must be between 2 and 6.`);
+            return false;
+          }
+        },
       },
       /**
-       * An object containing the route definition for the link.
-       * Required and cannot be empty.
+       * Sets card title if provided. The title should be
+       * unique within a grid and descriptive to aid screenreader
+       * navigation.
        */
-      to: {
-        type: Object,
-        required: true,
+      title: {
+        type: String,
+        required: false,
+        default: null,
+      },
+      /**
+       * Truncates title to this number of lines.
+       */
+      titleLines: {
+        type: Number,
+        required: false,
+        default: 2,
       },
       /**
-       * Controls card orientation. Required and cannot be empty.
-       * Expected Options: 'horizontal' (default) or 'vertical'.
-       *
-       * @param {String} value - The layout value.
-       * @returns {Boolean} - True if the value is not empty, false otherwise.
+       * Controls content orientation.
+       * Options: `'horizontal'`, `'vertical'`.
        */
       layout: {
         type: String,
@@ -149,20 +205,16 @@
       },
       /**
        * Controls how the thumbnail appears in the card.
-       * Expected Options: 'none' (default), 'small', or 'large'.
+       * Options: `'none'`, `'small'`, or `'large'`.
        * */
       thumbnailDisplay: {
         type: String,
         default: 'none',
-        validator: cardValidator(Thumbnail_Displays, 'thumbnailDisplay'),
+        validator: cardValidator(ThumbnailDisplays, 'thumbnailDisplay'),
       },
       /**
-       * Sets the thumbnail path.
-       * Defaults to null if not provided.
-       *
-       * @type {String}
-       * @default null
-       * */
+       * Sets the thumbnail source path.
+       **/
       thumbnailSrc: {
         type: String,
         required: false,
@@ -170,63 +222,47 @@
       },
       /**
        * Specifies how the thumbnail scales in the card.
-       * Options: 'centerInside', 'contain', 'fitXY'.
-       * @type {String}
-       * @default 'centerInside'
+       * Options: `'centerInside'`, `'contain'`, `'fitXY'`.
        */
       thumbnailScaleType: {
         type: String,
         default: 'centerInside',
       },
       /**
-       * Controls the alignment of the thumbnail area in horizontal layouts.
-       * Only applies to horizontal layouts with 'small' or 'large' thumbnail display.
-       * Ignored in other layouts.
-       * @type {String}
-       * @values 'left', 'right'
-       * @default 'left'
+       * Controls the alignment of the thumbnail area
+       * in horizontal layouts. with `'small'` or `'large'` thumbnails
+       * Options: `'left'`, `'right'`
        */
       thumbnailAlign: {
         type: String,
         default: 'left',
-        validator: cardValidator(thumbnailAlignOptions, 'thumbnailAlign'),
+        validator: cardValidator(ThumbnailAlignOptions, 'thumbnailAlign'),
       },
       /**
-       * Specifies the number of lines allowed for the title before truncation occurs.
-       * @type {number}
-       * @default 2
-       */
-      titleLines: {
-        type: Number,
-        required: false,
-        default: 2,
-      },
-
-      /**
-       * When true, preserves the space for the aboveTitle slot even when it's empty.
-       * When false, removes the space entirely if the slot is empty.
-       * @type {Boolean}
-       * @default false
+       * If `aboveTitle` slot is empty, this controls whether
+       * its space is preserved or not. Typically used to achieve
+       * consistent vertical alignment of information when there
+       * are multiple cards on the same grid row.
        */
       preserveAboveTitle: {
         type: Boolean,
         default: false,
       },
       /**
-       * When true, preserves the space for the belowTitle slot even when it's empty.
-       * When false, removes the space entirely if the slot is empty.
-       * @type {Boolean}
-       * @default false
+       * If `belowTitle` slot is empty, this controls whether
+       * its space is preserved or not. Typically used to achieve
+       * consistent vertical alignment of information when there
+       * are multiple cards on the same grid row.
        */
       preserveBelowTitle: {
         type: Boolean,
         default: false,
       },
       /**
-       * When true, preserves the space for the footer slot even when it's empty.
-       * When false, removes the space entirely if the slot is empty.
-       * @type {Boolean}
-       * @default false
+       * If `footer` slot is empty, this controls whether
+       * its space is preserved or not. Typically used to achieve
+       * consistent vertical alignment of information when there
+       * are multiple cards on the same grid row.
        */
       preserveFooter: {
         type: Boolean,
@@ -235,19 +271,27 @@
     },
     data() {
       return {
-        Thumbnail_Displays,
+        mouseDownTime: 0,
+        ThumbnailDisplays,
       };
     },
     computed: {
-      rootClass() {
-        return this.stylesAndClasses.rootClass;
+      coreOutlineFocus() {
+        return {
+          ':focus': {
+            ...this.$coreOutline,
+          },
+        };
+      },
+      headingElement() {
+        return this.headingLevel ? 'h' + this.headingLevel : undefined;
+      },
+      layoutClass() {
+        return this.stylesAndClasses.layoutClass;
       },
       thumbnailAspectRatio() {
         return this.stylesAndClasses.thumbnailAspectRatio;
       },
-      headingStyles() {
-        return this.stylesAndClasses.headingStyles;
-      },
       thumbnailStyles() {
         return this.stylesAndClasses.thumbnailStyles;
       },
@@ -255,33 +299,24 @@
         return this.stylesAndClasses.thumbnailAlignClass;
       },
       /*
-            Returns dynamic classes and few style-like data that CSS was cumbersome/impossible to use for ,or are in need of using theme, grouped by all possible combinations of layouts.
-
-            New styles and classes are meant to be added to this single-source-of-truth object so
-            that we can easily locate all styling being applied to a particular layout
+        A source-of-truth that organizes styles and classes by layout combinations
+        to aid understanding of what is applied exactly to each layout.
 
-            Could be further simplified by using solely dynamic styles, but that would have detrimental effects on our auto RTL machinery and we would need to take care manually of more places. 
-          */
+        Alongside other configurations, contains dynamic styles that <style>
+        can't handle. Whenever possible, prioritize using <style> over dynamic styles
+        since our RTL framework can't pick dynamic styles. Make sure to use 'isRtl'
+        when adding dynamic styles related to alignment.
+      */
       stylesAndClasses() {
-        /* In px. Needs to be the same as $spacer variable in styles part */
-        const SPACER = 24;
-
-        const headingCommonStyles = {
-          order: 3,
-          margin: `${SPACER}px ${SPACER}px ${SPACER / 2}px ${SPACER}px`,
-        };
         const thumbnailCommonStyles = {
           width: '100%',
           height: '100%',
         };
         if (this.layout === 'vertical' && this.thumbnailDisplay === 'large') {
           return {
-            rootClass: 'vertical-with-large-thumbnail',
+            layoutClass: 'vertical-with-large-thumbnail',
             thumbnailAlignClass: undefined,
             thumbnailAspectRatio: undefined,
-            headingStyles: {
-              ...headingCommonStyles,
-            },
             thumbnailStyles: {
               ...thumbnailCommonStyles,
               borderRadius: '8px 8px 0 0',
@@ -290,12 +325,9 @@
         }
         if (this.layout === 'vertical' && this.thumbnailDisplay === 'small') {
           return {
-            rootClass: 'vertical-with-small-thumbnail',
+            layoutClass: 'vertical-with-small-thumbnail',
             thumbnailAlignClass: undefined,
             thumbnailAspectRatio: undefined,
-            headingStyles: {
-              ...headingCommonStyles,
-            },
             thumbnailStyles: {
               ...thumbnailCommonStyles,
               borderRadius: '4px',
@@ -304,12 +336,9 @@
         }
         if (this.layout === 'vertical' && this.thumbnailDisplay === 'none') {
           return {
-            rootClass: undefined,
+            layoutClass: undefined,
             thumbnailAlignClass: undefined,
             thumbnailAspectRatio: undefined,
-            headingStyles: {
-              ...headingCommonStyles,
-            },
             thumbnailStyles: {
               ...thumbnailCommonStyles,
             },
@@ -318,13 +347,9 @@
 
         if (this.layout === 'horizontal' && this.thumbnailDisplay === 'large') {
           return {
-            rootClass: 'horizontal-with-large-thumbnail',
+            layoutClass: 'horizontal-with-large-thumbnail',
             thumbnailAlignClass: `thumbnail-align-${this.thumbnailAlign}`,
             thumbnailAspectRatio: undefined,
-            headingStyles: {
-              ...headingCommonStyles,
-              width: `calc(60% - ${SPACER * 2}px)`, // same as slots width defined in styles
-            },
             thumbnailStyles: {
               ...thumbnailCommonStyles,
               borderRadius: this.thumbnailAlign === 'right' ? '0 8px 8px 0' : '8px 0 0 8px',
@@ -333,13 +358,9 @@
         }
         if (this.layout === 'horizontal' && this.thumbnailDisplay === 'small') {
           return {
-            rootClass: 'horizontal-with-small-thumbnail',
+            layoutClass: 'horizontal-with-small-thumbnail',
             thumbnailAlignClass: `thumbnail-align-${this.thumbnailAlign}`,
             thumbnailAspectRatio: '1:1',
-            headingStyles: {
-              ...headingCommonStyles,
-              width: `calc(70% - ${SPACER * 3}px)` /* same as slots width defined in styles */,
-            },
             thumbnailStyles: {
               ...thumbnailCommonStyles,
               borderRadius: '8px',
@@ -348,17 +369,51 @@
         }
         if (this.layout === 'horizontal' && this.thumbnailDisplay === 'none') {
           return {
-            rootClass: undefined,
+            layoutClass: undefined,
             thumbnailAlignClass: undefined,
             thumbnailAspectRatio: undefined,
-            headingStyles: {
-              ...headingCommonStyles,
-            },
           };
         }
         return {};
       },
     },
+    mounted() {
+      if (!this.$slots.title && !this.title) {
+        console.error(`[KCard] provide title via 'title' slot or prop`);
+      }
+    },
+    methods: {
+      navigate() {
+        this.$router.push(this.to);
+      },
+      onFocus(e) {
+        this.$emit('focus', e);
+      },
+      onHover(e) {
+        this.$emit('hover', e);
+      },
+      onEnter() {
+        this.navigate();
+      },
+      onMouseDown() {
+        this.mouseDownTime = new Date().getTime();
+      },
+      onClick() {
+        const mouseUpTime = new Date().getTime();
+        // Make textual content selectable within the whole clickable card area.
+        //
+        // Calculate the time difference between the mouse button press and release.
+        // If the time difference is greater than or equal to 200 milliseconds,
+        // it means that the mouse button was pressed and held for a longer time,
+        // which is not typically interpreted as a click event. Do not navigate
+        // in such case.
+        if (mouseUpTime - this.mouseDownTime < 200) {
+          this.navigate();
+        } else {
+          return;
+        }
+      },
+    },
   };
 
 </script>
@@ -366,24 +421,54 @@
 
 <style lang="scss" scoped>
 
-  /* Needs to be the same as SPACER constant in JavaScript part */
-  $spacer: 24px;
+  @import '../styles/definitions';
 
-  /*
-        Just couple of comments that are referenced from several places:
-        - (1) Intentionally fixed. Cards on the same row of a grid should have the same overall height and their sections too should have the same height so that information is placed consistently. As documented, consumers need to ensure that contents provided via slots fits well or is truncated.
-        - (2) Solves issues with fixed height in a flex item
-      */
+  $spacer: 16px;
 
   /************* Common styles **************/
 
   .k-card {
+    display: block;
+    padding: 0;
+    margin: 0;
+    list-style-type: none;
+  }
+
+  .card-area {
+    @extend %dropshadow-2dp;
+
     position: relative; /* basis for absolute positioning of thumbnail images */
     display: flex;
     flex-direction: column;
     flex-wrap: nowrap;
     width: 100%;
+    height: auto;
     font-size: 12px;
+    text-align: left;
+    text-decoration: none;
+    list-style-type: none;
+    cursor: pointer;
+    border-radius: 0.5em;
+    outline-offset: -1px;
+    transition: box-shadow $core-time ease;
+
+    &:hover,
+    &:focus {
+      @extend %dropshadow-6dp;
+    }
+  }
+
+  .heading {
+    order: 3;
+    margin: $spacer $spacer calc(#{$spacer} / 2) $spacer;
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 1.5;
+
+    a {
+      color: inherit;
+      text-decoration: none;
+    }
   }
 
   .thumbnail {
@@ -393,25 +478,17 @@
 
   .above-title {
     order: 2;
-    height: 24px; /* (1) */
-    min-height: 24px; /* (2) */
     margin: $spacer $spacer 0;
-    overflow: hidden; /* (1) */
   }
 
   .below-title {
     order: 4;
-    min-height: 26px; /* (2) */
     margin: 0 $spacer 0 $spacer;
-    overflow: hidden; /* (1) */
   }
 
   .footer {
     order: 5;
-    height: 58px; /* (1) */
-    min-height: 58px; /* (2) */
     margin: auto $spacer $spacer;
-    overflow: hidden; /* (1) */
   }
 
   .thumbnail-placeholder {
@@ -426,11 +503,9 @@
   /************* Layout-specific styles *************/
 
   .vertical-with-large-thumbnail {
-    height: auto; /* (1) */
-
     .thumbnail {
       height: 45%;
-      min-height: 45%; /* (2) */
+      min-height: 45%;
     }
   }
 
@@ -443,24 +518,24 @@
       margin: $spacer $spacer 0;
     }
   }
-  .horizontal-with-large-thumbnail {
-    position: relative;
-    height: 240px; /* (1) */
 
+  .horizontal-with-large-thumbnail {
     .thumbnail {
       position: absolute;
       width: 40%;
       height: 100%;
     }
 
+    .heading,
     .above-title,
     .below-title,
     .footer {
-      width: calc(60% - 2 * #{$spacer}); /* same as heading width defined in script */
+      width: calc(60% - 2 * #{$spacer});
     }
 
     &.thumbnail-align-left {
       align-items: flex-end;
+
       .thumbnail {
         left: 0;
       }
@@ -474,6 +549,7 @@
 
     &.thumbnail-align-right {
       align-items: flex-start;
+
       .thumbnail {
         right: 0;
       }
@@ -487,18 +563,18 @@
   }
 
   .horizontal-with-small-thumbnail {
-    height: 220px; /* (1) */
-
     .thumbnail {
       position: absolute;
       top: $spacer;
-      width: 30%; /* square dimension achieved via KImgs's aspect-ratio 1:1 */
-      min-width: 80px;
+      width: 35%; /* square dimension achieved via KImgs's aspect-ratio 1:1 */
+      min-width: 100px;
+      max-width: 120px;
     }
 
+    .heading,
     .above-title,
     .below-title {
-      width: calc(70% - 3 * #{$spacer}); /* same as heading width defined in script */
+      width: calc(70% - 3 * #{$spacer});
     }
 
     .footer {
@@ -507,6 +583,7 @@
 
     &.thumbnail-align-left {
       align-items: flex-end;
+
       .thumbnail {
         left: $spacer;
       }
@@ -514,6 +591,7 @@
 
     &.thumbnail-align-right {
       align-items: flex-start;
+
       .thumbnail {
         right: $spacer;
       }