From 6addadc9d1b6af178246a3e84667eda76f2730ea Mon Sep 17 00:00:00 2001
From: portikM <maksym.portianoi@konghq.com>
Date: Tue, 31 Oct 2023 14:12:09 -0400
Subject: [PATCH 01/22] chore(sandbox): setup component sandbox [KHCP-8971]

---
 sandbox/components/SandboxNavComponent.vue | 87 +++++++++++++++++++++
 sandbox/pages/SandboxCard.vue              | 40 ++++++++++
 sandbox/router.ts                          | 88 ++++++++++++++++++++++
 3 files changed, 215 insertions(+)
 create mode 100644 sandbox/components/SandboxNavComponent.vue
 create mode 100644 sandbox/pages/SandboxCard.vue
 create mode 100644 sandbox/router.ts

diff --git a/sandbox/components/SandboxNavComponent.vue b/sandbox/components/SandboxNavComponent.vue
new file mode 100644
index 0000000000..99d5d6b83d
--- /dev/null
+++ b/sandbox/components/SandboxNavComponent.vue
@@ -0,0 +1,87 @@
+<template>
+  <ul>
+    <li
+      v-for="link in links"
+      :key="link.name"
+      class="sandbox-link"
+    >
+      <router-link
+        :to="link.to"
+        @click="$emit('router-link-click')"
+      >
+        {{ link.name }}
+      </router-link>
+    </li>
+  </ul>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { RouteLocationRaw } from 'vue-router'
+
+interface SandboxNavItem {
+  name: string
+  to: RouteLocationRaw
+}
+
+defineEmits(['router-link-click'])
+
+const links = computed((): SandboxNavItem[] => (
+  [
+    { name: 'KAlert', to: { name: 'alert' } },
+    { name: 'KButton', to: { name: 'button' } },
+    { name: 'KCard', to: { name: 'card' } },
+    { name: 'KCatalog', to: { name: 'catalog' } },
+    { name: 'KCheckbox', to: { name: 'checkbox' } },
+    { name: 'KDropdown', to: { name: 'dropdown' } },
+    { name: 'KInput', to: { name: 'input' } },
+    { name: 'KLabel', to: { name: 'label' } },
+    { name: 'KMultiselect', to: { name: 'multiselect' } },
+    { name: 'KRadio', to: { name: 'radio' } },
+    { name: 'KTable', to: { name: 'table' } },
+    { name: 'KTabs', to: { name: 'tabs' } },
+  ]
+))
+</script>
+
+<style lang="scss" scoped>
+ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.sandbox-link {
+  margin-bottom: 8px;
+
+  &:last-of-type {
+    margin-bottom: 0;
+  }
+
+  a {
+    background: #eee;
+    border-radius: 4px;
+    color: $kui-color-text-primary;
+    display: flex;
+    font-weight: 500;
+    padding: 8px 16px;
+    text-decoration: none;
+    transition: all .2s ease-in-out;
+
+    &:hover {
+      background: #ccc;
+      color: $kui-color-text-primary-stronger;
+    }
+
+    &.router-link-active {
+      background: $kui-color-background-primary;
+      color: #fff;
+
+      &:hover {
+        background: $kui-color-background-primary;
+        color: #fff;
+      }
+    }
+  }
+}
+</style>
diff --git a/sandbox/pages/SandboxCard.vue b/sandbox/pages/SandboxCard.vue
new file mode 100644
index 0000000000..302b894d2b
--- /dev/null
+++ b/sandbox/pages/SandboxCard.vue
@@ -0,0 +1,40 @@
+<template>
+  <div class="kcard-sandbox">
+    <SandboxTitleComponent
+      title="KCard"
+    >
+      <template #description>
+        <KExternalLink href="https://www.figma.com/file/Yze0SWXl5nKjR0rFdilljK/Components?type=design&node-id=1152%3A19831&mode=dev">
+          Figma
+        </KExternalLink>
+      </template>
+    </SandboxTitleComponent>
+
+    <!-- Props -->
+    <SandboxTitleComponent
+      is-subtitle
+      title="Props"
+    />
+    <SandboxSectionComponent title="title">
+      <KCard title="Card title">
+        Card csontent
+      </KCard>
+    </SandboxSectionComponent>
+  </div>
+</template>
+
+<script setup lang="ts">
+import SandboxTitleComponent from '../components/SandboxTitleComponent.vue'
+import SandboxSectionComponent from '../components/SandboxSectionComponent.vue'
+import { KExternalLink, KCard } from '@/components'
+</script>
+
+<style scoped lang="scss">
+.kcard-sandbox {
+  .vertical-spacing {
+    display: flex;
+    flex-direction: column;
+    gap: $kui-space-50;
+  }
+}
+</style>
diff --git a/sandbox/router.ts b/sandbox/router.ts
new file mode 100644
index 0000000000..03bb629fa8
--- /dev/null
+++ b/sandbox/router.ts
@@ -0,0 +1,88 @@
+import { createRouter, createWebHashHistory } from 'vue-router'
+
+export default createRouter({
+  history: createWebHashHistory(),
+  routes: [
+    {
+      path: '/',
+      name: 'home',
+      alias: '/:pathMatch(.*)*',
+      meta: { title: 'Kongponents Sandbox' },
+      component: () => import('./pages/HomePage.vue'),
+      children: [
+        {
+          path: 'alert',
+          name: 'alert',
+          meta: { title: 'Alert Sandbox' },
+          component: () => import('./pages/SandboxAlert.vue'),
+        },
+        {
+          path: 'button',
+          name: 'button',
+          meta: { title: 'Button Sandbox' },
+          component: () => import('./pages/SandboxButton.vue'),
+        },
+        {
+          path: 'card',
+          name: 'card',
+          meta: { title: 'Card Sandbox' },
+          component: () => import('./pages/SandboxCard.vue'),
+        },
+        {
+          path: 'catalog',
+          name: 'catalog',
+          meta: { title: 'Catalog Sandbox' },
+          component: () => import('./pages/SandboxCatalog.vue'),
+        },
+        {
+          path: 'checkbox',
+          name: 'checkbox',
+          meta: { title: 'Checkbox Sandbox' },
+          component: () => import('./pages/SandboxCheckbox.vue'),
+        },
+        {
+          path: 'dropdown',
+          name: 'dropdown',
+          meta: { title: 'Dropdown Sandbox' },
+          component: () => import('./pages/SandboxDropdown.vue'),
+        },
+        {
+          path: 'input',
+          name: 'input',
+          meta: { title: 'Input Sandbox' },
+          component: () => import('./pages/SandboxInput.vue'),
+        },
+        {
+          path: 'label',
+          name: 'label',
+          meta: { title: 'Label Sandbox' },
+          component: () => import('./pages/SandboxLabel.vue'),
+        },
+        {
+          path: 'multiselect',
+          name: 'multiselect',
+          meta: { title: 'Multiselect Sandbox' },
+          component: () => import('./pages/SandboxMultiselect.vue'),
+        },
+        {
+          path: 'radio',
+          name: 'radio',
+          meta: { title: 'Radio Sandbox' },
+          component: () => import('./pages/SandboxRadio.vue'),
+        },
+        {
+          path: 'table',
+          name: 'table',
+          meta: { title: 'Table Sandbox' },
+          component: () => import('./pages/SandboxTable.vue'),
+        },
+        {
+          path: 'tabs',
+          name: 'tabs',
+          meta: { title: 'Tabs Sandbox' },
+          component: () => import('./pages/SandboxTabs.vue'),
+        },
+      ],
+    },
+  ],
+})

From 5369c37bbbfb18f263a3c203a57622839e0856e2 Mon Sep 17 00:00:00 2001
From: portikM <maksym.portianoi@konghq.com>
Date: Tue, 31 Oct 2023 16:07:04 -0400
Subject: [PATCH 02/22] feat(kcard): reskin component [KHCP-8971]

---
 docs/guide/migrating-to-version-9.md |  35 ++++
 sandbox/pages/SandboxCard.vue        | 102 ++++++++++-
 src/components/KCard/KCard.vue       | 253 ++++++---------------------
 src/styles/_mixins.scss              |   2 +
 src/styles/mixins/_cards.scss        |   9 +
 src/styles/mixins/_typography.scss   |   9 +
 src/types/card.ts                    |   5 -
 src/types/index.ts                   |   1 -
 8 files changed, 199 insertions(+), 217 deletions(-)
 create mode 100644 src/styles/mixins/_cards.scss
 create mode 100644 src/styles/mixins/_typography.scss
 delete mode 100644 src/types/card.ts

diff --git a/docs/guide/migrating-to-version-9.md b/docs/guide/migrating-to-version-9.md
index d3d8293616..ffc6279481 100644
--- a/docs/guide/migrating-to-version-9.md
+++ b/docs/guide/migrating-to-version-9.md
@@ -69,6 +69,41 @@ Kongponents styles are no longer designed to be utilized standalone, separately
 
 ### KCard
 
+#### Structure
+
+* `kong-card` class has been changed to `k-card`
+* `hover` class has been removed
+* `kcard-shadow` class has been removed
+* `k-card-header` class has been changed to `card-header`
+* `has-status` class has been removed
+* `k-card-status-hat` class has been removed
+* `k-card-title` class has been changed to `card-title`
+* `k-card-actions` class has been changed to `card-actions`
+* `k-card-content` class has been changed to `card-content`
+* `k-card-body` class has been removed
+* `k-card-notifications` class has been removed
+
+#### Constants, Types & Interfaces
+
+* `BorderVariantsArray` constant has been removed
+* `BorderVariant` type has been removed
+
+#### Props
+
+* `testMode` prop has been removed
+* `body` prop has been removed. Use `content` prop instead
+* `borderVariant` prop has been removed. KCard has border by default
+* `hasHover` prop has been removed
+* `hasShadow` prop has been removed. KCard does not have shadow by default
+* `status` prop has been removed
+
+#### Slots
+
+* `statusHat` slot has been removed
+* `body` slot has been removed. Use `default` slot instead
+* `notifications` slot has been removed
+
+#### Events
 
 ### KCatalog
 
diff --git a/sandbox/pages/SandboxCard.vue b/sandbox/pages/SandboxCard.vue
index 302b894d2b..c9b9a5c70d 100644
--- a/sandbox/pages/SandboxCard.vue
+++ b/sandbox/pages/SandboxCard.vue
@@ -15,10 +15,86 @@
       is-subtitle
       title="Props"
     />
-    <SandboxSectionComponent title="title">
-      <KCard title="Card title">
-        Card csontent
-      </KCard>
+    <SandboxSectionComponent title="title & content">
+      <KCard
+        content="Card content"
+        title="Card title"
+      />
+    </SandboxSectionComponent>
+
+    <!-- Slots -->
+    <SandboxTitleComponent
+      is-subtitle
+      title="Props"
+    />
+    <SandboxSectionComponent title="title & content & actions & footer">
+      <div>
+        <KCard>
+          <template #title>
+            Card title
+          </template>
+          <template #actions>
+            <KDropdown
+              :items="[
+                { label: 'Home', to: { name: 'home' } },
+                { label: 'KDropdown', to: { name: 'dropdown' } },
+                { label: 'Stay', to: { name: 'card' } }
+              ]"
+            >
+              <KButton
+                appearance="tertiary"
+                class="icon-button"
+                size="small"
+              >
+                <MoreIcon />
+              </KButton>
+            </KDropdown>
+          </template>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt <em>ut labore</em> et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <b>Excepteur sint occaecat cupidatat non proident</b>, sunt in culpa qui officia deserunt mollit anim id est laborum.
+          <template #footer>
+            <div class="horizontal-spacing">
+              <KBadge appearance="success">
+                Published
+              </KBadge>
+              <KBadge>2 versions</KBadge>
+            </div>
+          </template>
+        </KCard>
+      </div>
+      <div class="limit-width">
+        <KCard>
+          <template #title>
+            Example of very long card title that should not be truncated with ellipsis and should wrap to the next line even if it is too long
+          </template>
+          <template #actions>
+            <KDropdown
+              :items="[
+                { label: 'Home', to: { name: 'home' } },
+                { label: 'KDropdown', to: { name: 'dropdown' } },
+                { label: 'Stay', to: { name: 'card' } }
+              ]"
+            >
+              <KButton
+                appearance="tertiary"
+                class="icon-button"
+                size="small"
+              >
+                <MoreIcon />
+              </KButton>
+            </KDropdown>
+          </template>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+          <template #footer>
+            <span class="footer-content">
+              <CheckIcon
+                :color="KUI_COLOR_TEXT_SUCCESS"
+                :size="KUI_ICON_SIZE_40"
+              />
+              Approved
+            </span>
+          </template>
+        </KCard>
+      </div>
     </SandboxSectionComponent>
   </div>
 </template>
@@ -26,15 +102,27 @@
 <script setup lang="ts">
 import SandboxTitleComponent from '../components/SandboxTitleComponent.vue'
 import SandboxSectionComponent from '../components/SandboxSectionComponent.vue'
-import { KExternalLink, KCard } from '@/components'
+import { KExternalLink, KCard, KBadge, KDropdown, KButton } from '@/components'
+import { MoreIcon, CheckIcon } from '@kong/icons'
+import { KUI_COLOR_TEXT_SUCCESS, KUI_ICON_SIZE_40 } from '@kong/design-tokens'
 </script>
 
 <style scoped lang="scss">
 .kcard-sandbox {
-  .vertical-spacing {
+  .horizontal-spacing {
     display: flex;
-    flex-direction: column;
     gap: $kui-space-50;
   }
+
+  .limit-width {
+    /* stylelint-disable-next-line @kong/design-tokens/use-proper-token */
+    max-width: $kui-breakpoint-mobile;
+  }
+
+  .footer-content {
+    color: $kui-color-text-success;
+    display: flex;
+    gap: $kui-space-30;
+  }
 }
 </style>
diff --git a/src/components/KCard/KCard.vue b/src/components/KCard/KCard.vue
index 7312225f5e..fd62be5efd 100644
--- a/src/components/KCard/KCard.vue
+++ b/src/components/KCard/KCard.vue
@@ -1,247 +1,92 @@
 <template>
-  <section
-    :aria-describedby="contentId || undefined"
-    :aria-label="title ? title : undefined"
-    :aria-labelledby="!title && slots.title ? titleId : undefined"
-    class="kong-card"
-    :class="[borderVariant, {'hover': hasHover, 'kcard-shadow': hasShadow }]"
-  >
+  <section class="k-card">
     <div
-      v-if="showCardHead"
-      class="k-card-header"
-      :class="{ 'has-status': status || slots.statusHat }"
+      v-if="$slots.title || title || $slots.actions"
+      class="card-header"
     >
       <div
-        v-if="status || slots.statusHat"
-        class="k-card-status-hat"
-      >
-        <!-- @slot Use this slot to pass status text above title -->
-        <slot name="statusHat">
-          {{ status }}
-        </slot>
-      </div>
-
-      <div
-        v-if="showCardTitleWithoutStatus"
-        :id="title ? undefined : titleId"
-        class="k-card-title"
+        v-if="$slots.title || title"
+        class="card-title"
       >
         <h4>
-          <!-- @slot Use this slot to pass title content -->
           <slot name="title">
             {{ title }}
           </slot>
         </h4>
       </div>
-
-      <div class="k-card-actions">
-        <!-- @slot Use this slot to pass actions to right side of header -->
+      <div
+        v-if="$slots.actions"
+        class="card-actions"
+      >
         <slot name="actions" />
       </div>
     </div>
-
     <div
-      v-if="showCardTitleWithStatus"
-      :id="title ? undefined : titleId"
-      class="k-card-title"
+      v-if="$slots.default || content"
+      class="card-content"
     >
-      <h4>
-        <!-- @slot Use this slot to pass title content -->
-        <slot name="title">
-          {{ title }}
-        </slot>
-      </h4>
+      <slot><p>{{ content }}</p></slot>
     </div>
-
-    <div class="k-card-content">
-      <div
-        :id="contentId"
-        class="k-card-body"
-      >
-        <!-- @slot Use this slot to pass in body content -->
-        <slot name="body">
-          {{ body }}
-        </slot>
-      </div>
-
-      <div
-        v-if="slots.notifications"
-        class="k-card-notifications"
-      >
-        <slot name="notifications" />
-      </div>
+    <div
+      v-if="$slots.footer"
+      class="card-footer"
+    >
+      <slot name="footer" />
     </div>
   </section>
 </template>
 
-<script lang="ts" setup>
-import { v1 as uuidv1 } from 'uuid'
-import type { BorderVariant } from '@/types'
-import { BorderVariantsArray } from '@/types'
-import type { PropType } from 'vue'
-import { computed, useSlots } from 'vue'
-
-const props = defineProps({
-  /**
-   * Title string if slot not used, also used for aria-label
-   */
+<script setup lang="ts">
+defineProps({
   title: {
     type: String,
     default: '',
   },
-  /**
-   * Pass body string in if slot not used
-   */
-  body: {
+  content: {
     type: String,
     default: '',
   },
-  /**
-   * Set top border or no border. If neither set default will have border<br>
-   * * Options: [borderTop, noBorder]
-   */
-  borderVariant: {
-    type: String as PropType<BorderVariant>,
-    default: 'border',
-    validator: (value: BorderVariant): boolean => BorderVariantsArray.includes(value),
-  },
-  /**
-   * Sets if card has hover state<br>
-   */
-  hasHover: {
-    type: Boolean,
-    default: false,
-  },
-  hasShadow: {
-    type: Boolean,
-    default: false,
-  },
-  /**
-   * Add small status text above the card title
-   */
-  status: {
-    type: String,
-    default: '',
-  },
-  /**
-   * Test mode - for testing only, strips out generated ids
-   */
-  testMode: {
-    type: Boolean,
-    default: false,
-  },
 })
-
-const titleId = computed((): string => props.testMode ? 'test-title-id-1234' : uuidv1())
-
-const contentId = computed((): string => props.testMode ? 'test-content-id-1234' : uuidv1())
-
-const slots = useSlots()
-
-const useStatusHatLayout = computed((): boolean => !!(props.status || !!slots.statusHat))
-
-const showCardHead = computed((): boolean => !!slots.actions || useStatusHatLayout.value ||
-  (!useStatusHatLayout.value && (!!props.title || !!slots.title)))
-
-const showCardTitleWithoutStatus = computed((): boolean => !useStatusHatLayout.value &&
-  (!!props.title || !!slots.title))
-
-const showCardTitleWithStatus = computed((): boolean => useStatusHatLayout.value &&
-  (!!props.title || !!slots.title))
 </script>
 
 <style lang="scss" scoped>
-
-@import '@/styles/tmp-variables';
-
-.kong-card {
-  background-color: var(--kui-color-background, $kui-color-background);
-  border-radius: var(--kui-border-radius-20, $kui-border-radius-20);
-  padding: var(--kui-space-80, $kui-space-80) var(--kui-space-80, $kui-space-80);
-  transition: box-shadow $tmp-animation-timing-2 ease-in-out;
-
-  &.noBorder {
-    border: none;
-  }
-
-  &.border {
-    border: var(--kui-border-width-10, $kui-border-width-10) solid $tmp-color-black-10;
-    box-shadow: none;
-  }
-
-  &.borderTop {
-    border-top: var(--kui-border-width-10, $kui-border-width-10) solid $tmp-color-black-10;
-  }
-
-  &.hover:hover, &.kcard-shadow {
-    box-shadow: 0 4px 8px $tmp-color-black-10;
-  }
-
-  .k-card-header {
-    align-items: center;
-    display: flex !important;
-    margin-bottom: var(--kui-space-50, $kui-space-50) !important;
-
-    &.has-status {
-      align-items: flex-start;
+.k-card {
+  @include cardDefaults;
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--kui-space-70, $kui-space-70);
+
+  .card-header {
+    align-items: flex-start;
+    display: inline-flex;
+    gap: var(--kui-space-50, $kui-space-50);
+    justify-content: space-between;
+
+    .card-title {
+      h4 {
+        color: var(--kui-color-text, $kui-color-text);
+        font-size: var(--kui-font-size-50, $kui-font-size-50);
+        font-weight: var(--kui-font-weight-bold, $kui-font-weight-bold);
+        letter-spacing: var(--kui-letter-spacing-minus-30, $kui-letter-spacing-minus-30);
+        line-height: var(--kui-line-height-40, $kui-line-height-40);
+        margin: 0; // reset default browser margin
+      }
     }
   }
 
-  .k-card-status-hat {
-    align-items: center;
-    color: var(--kui-color-text-neutral-stronger, $kui-color-text-neutral-stronger);
-    display: flex;
-    font-size: var(--kui-font-size-20, $kui-font-size-20);
-  }
-
-  .k-card-title {
-    margin-bottom: var(--kui-space-50, $kui-space-50) !important;
-    max-width: 80%;
+  .card-content {
+    @include bodyText;
 
-    h4 {
-      @include truncate;
+    p {
+      @include bodyText;
 
-      color: var(--kui-color-text, $kui-color-text);
-      font-size: var(--kui-font-size-60, $kui-font-size-60);
-      font-weight: var(--kui-font-weight-semibold, $kui-font-weight-semibold);
-      margin: var(--kui-space-0, $kui-space-0);
-      padding: var(--kui-space-0, $kui-space-0);
+      margin: 0; // reset default browser margin
     }
   }
 
-  .k-card-actions  {
-    margin-left: var(--kui-space-auto, $kui-space-auto);
-  }
-
-  .k-card-body {
-    color: var(--kui-color-text-neutral-stronger, $kui-color-text-neutral-stronger);
-    font-size: var(--kui-font-size-20, $kui-font-size-20);
-    line-height: var(--kui-line-height-20, $kui-line-height-20);
-    width: 100%;
-  }
-
-  .k-card-content {
-    display: flex !important;
-
-    .k-table td, table td, :deep(.k-table) td {
-      font-size: var(--kui-font-size-40, $kui-font-size-40);
-      line-height: var(--kui-line-height-40, $kui-line-height-40);
-    }
-  }
-
-  .k-card-notifications {
-    margin-left: var(--kui-space-50, $kui-space-50) !important;
-    margin-top: var(--kui-space-auto, $kui-space-auto);
-  }
-}
-</style>
-
-<style lang="scss">
-.kong-card {
-  .k-card-header {
-    .k-button {
-      min-height: 38px;
-    }
+  .card-footer {
+    @include bodyText;
   }
 }
 </style>
diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss
index 5976a9e59e..d865ef4732 100644
--- a/src/styles/_mixins.scss
+++ b/src/styles/_mixins.scss
@@ -1,6 +1,8 @@
 @import "@/styles/mixins/inputs";
 @import "@/styles/mixins/labels";
 @import "@/styles/mixins/input-select";
+@import "@/styles/mixins/cards";
+@import "@/styles/mixins/typography";
 
 @import "@/styles/tmp-variables";
 
diff --git a/src/styles/mixins/_cards.scss b/src/styles/mixins/_cards.scss
new file mode 100644
index 0000000000..04afb4bc4c
--- /dev/null
+++ b/src/styles/mixins/_cards.scss
@@ -0,0 +1,9 @@
+/* Cards mixins */
+
+@mixin cardDefaults {
+  background-color: var(--kui-color-background, $kui-color-background);
+  border: var(--kui-border-width-10, $kui-border-width-10) solid var(--kui-color-border, $kui-color-border);
+  border-radius: var(--kui-border-radius-30, $kui-border-radius-30);
+  font-family: var(--kui-font-family-text, $kui-font-family-text);
+  padding: var(--kui-space-70, $kui-space-70);
+}
diff --git a/src/styles/mixins/_typography.scss b/src/styles/mixins/_typography.scss
new file mode 100644
index 0000000000..deb42a3596
--- /dev/null
+++ b/src/styles/mixins/_typography.scss
@@ -0,0 +1,9 @@
+/* Common typography-related mixins */
+
+@mixin bodyText {
+  color: var(--kui-color-text, $kui-color-text);
+  font-family: var(--kui-font-family-text, $kui-font-family-text);
+  font-size: var(--kui-font-size-30, $kui-font-size-30);
+  font-weight: var(--kui-font-weight-regular, $kui-font-weight-regular);
+  line-height: var(--kui-line-height-30, $kui-line-height-30);
+}
diff --git a/src/types/card.ts b/src/types/card.ts
deleted file mode 100644
index 80718bbde7..0000000000
--- a/src/types/card.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import type { AnyElementOf } from '@/types/utils'
-
-export const BorderVariantsArray = ['borderTop', 'noBorder', 'border'] as const
-
-export type BorderVariant = AnyElementOf<typeof BorderVariantsArray>
diff --git a/src/types/index.ts b/src/types/index.ts
index bd735db74b..edba0e1223 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -3,7 +3,6 @@ export * from './alert'
 export * from './badge'
 export * from './breadcrumbs'
 export * from './button'
-export * from './card'
 export * from './catalog'
 export * from './code-block'
 export * from './collapse'

From f11bfff761ac1c9036d2ebbad5f5fed72815357c Mon Sep 17 00:00:00 2001
From: portikM <maksym.portianoi@konghq.com>
Date: Tue, 31 Oct 2023 16:20:20 -0400
Subject: [PATCH 03/22] test(kcard): update component tests [KHCP-8971]

---
 src/components/KCard/KCard.cy.ts | 97 ++++++++++----------------------
 1 file changed, 29 insertions(+), 68 deletions(-)

diff --git a/src/components/KCard/KCard.cy.ts b/src/components/KCard/KCard.cy.ts
index e46d8c6831..dd4f74ea4e 100644
--- a/src/components/KCard/KCard.cy.ts
+++ b/src/components/KCard/KCard.cy.ts
@@ -1,92 +1,53 @@
 import { mount } from 'cypress/vue'
 import KCard from '@/components/KCard/KCard.vue'
-import { h } from 'vue'
 
-/**
- * ALL TESTS MUST USE testMode: true
- * We generate unique IDs for reference by aria properties. Test mode strips these out
- * allowing for successful snapshot verification.
- * props: {
- *   testMode: true
- * }
- */
 describe('KCard', () => {
-  it('renders slots when passed', () => {
-    const cardStatusHat = 'Card Status Hat'
-    const cardTitle = 'Card Title'
-    const cardActions = 'Card Actions'
-    const cardBody = 'Card Body'
-    const cardNotifications = 'Card Notifications'
+  it('does not render any content when no props or slots are passed', () => {
+    mount(KCard)
 
-    mount(KCard, {
-      props: {
-        testMode: true,
-      },
-      slots: {
-        statusHat: () => h('span', {}, cardStatusHat),
-        title: () => h('span', {}, cardTitle),
-        actions: () => h('span', {}, cardActions),
-        body: () => h('span', {}, cardBody),
-        notifications: () => h('span', {}, cardNotifications),
-      },
-    })
-
-    cy.get('.k-card-status-hat').should('contain.text', cardStatusHat)
-    cy.get('.k-card-title').should('contain.text', cardTitle)
-    cy.get('.k-card-actions').should('contain.text', cardActions)
-    cy.get('.k-card-body').should('contain.text', cardBody)
-    cy.get('.k-card-notifications').should('contain.text', cardNotifications)
+    cy.get('.k-card').should('be.visible')
+    cy.get('.k-card').find('card-header').should('not.exist')
+    cy.get('.k-card').find('card-content').should('not.exist')
+    cy.get('.k-card').find('card-footer').should('not.exist')
   })
 
-  it('renders proper content when using props', () => {
-    const cardStatus = 'Card Status'
-    const cardTitle = 'Card Title'
-    const cardBody = 'Card Body'
+  it('renders title and content slots when passed', () => {
+    const titleProp = 'Title prop'
+    const contentProp = 'Content prop'
 
     mount(KCard, {
       props: {
-        testMode: true,
-        status: cardStatus,
-        title: cardTitle,
-        body: cardBody,
+        title: titleProp,
+        content: contentProp,
       },
     })
 
-    cy.get('.k-card-status-hat').should('have.text', cardStatus)
-    cy.get('.k-card-title').should('have.text', cardTitle)
-    cy.get('.k-card-body').should('have.text', cardBody)
+    cy.get('.k-card').find('.card-title').should('contain', titleProp)
+    cy.get('.k-card').find('.card-content').should('contain', contentProp)
   })
 
-  it('has border class when passed', () => {
-    mount(KCard, {
-      props: {
-        testMode: true,
-        hasBorder: true,
-      },
-    })
-
-    cy.get('.kong-card').should('have.class', 'border')
-  })
+  it('renders slots when passed', () => {
+    const titleProp = 'Test title'
+    const contentProp = 'Test content'
+    const titleText = 'I am the title'
+    const contentText = 'I am the content'
 
-  it('has hover class when passed', () => {
     mount(KCard, {
       props: {
-        testMode: true,
-        hasHover: true,
+        title: titleProp,
+        content: contentProp,
       },
-    })
-
-    cy.get('.kong-card').should('have.class', 'hover')
-  })
-
-  it('has shadow class when passed', () => {
-    mount(KCard, {
-      props: {
-        testMode: true,
-        hasShadow: true,
+      slots: {
+        title: `<span data-testid="card-title">${titleText}</span>`,
+        actions: '<span data-testid="card-actions">Card actions</span>',
+        default: `<span data-testid="card-content">${contentText}</span>`,
+        footer: '<span data-testid="card-footer">Card footer</span>',
       },
     })
 
-    cy.get('.kong-card').should('have.class', 'kcard-shadow')
+    cy.get('.k-card').find('.card-title').get('[data-testid="card-title"]').should('contain', titleText)
+    cy.get('.k-card').get('[data-testid="card-actions"]').should('be.visible')
+    cy.get('.k-card').find('.card-content').get('[data-testid="card-content"]').should('contain', contentText)
+    cy.get('.k-card').get('[data-testid="card-footer"]').should('be.visible')
   })
 })

From 92c59269b58f5a7f5f73bbf73b25d78ae8e9dcf6 Mon Sep 17 00:00:00 2001
From: portikM <maksym.portianoi@konghq.com>
Date: Tue, 31 Oct 2023 17:09:00 -0400
Subject: [PATCH 04/22] fix(kcard): deprecate body slot instead of removing
 [KHCP-8971]

---
 docs/components/collapse.md              |  8 ++++----
 docs/guide/migrating-to-version-9.md     |  2 +-
 sandbox/pages/SandboxCard.vue            | 19 +++++++++++++++++++
 src/components/KCard/KCard.vue           | 20 ++++++++++++++++++--
 src/components/KCatalog/KCatalogItem.vue | 14 +++++---------
 src/components/KSlideout/KSlideout.vue   |  6 ++----
 6 files changed, 49 insertions(+), 20 deletions(-)

diff --git a/docs/components/collapse.md b/docs/components/collapse.md
index d26d7fa182..1b8aaa52a8 100644
--- a/docs/components/collapse.md
+++ b/docs/components/collapse.md
@@ -166,9 +166,9 @@ To set the default state (collapsed or expanded) without binding to v-model you
         </div>
       </template>
       <template #visible-content>
-        <KCard body="I am content that is always visible" />
+        <KCard content="I am content that is always visible" />
       </template>
-      <KCard body="I am only visible when expanded" />
+      <KCard content="I am only visible when expanded" />
     </KCollapse>
   </template>
 </KCard>
@@ -182,10 +182,10 @@ To set the default state (collapsed or expanded) without binding to v-model you
     </div>
   </template>
   <template #visible-content>
-    <KCard body="I am content that is always visible" />
+    <KCard content="I am content that is always visible" />
   </template>
 
-  <KCard body="I am only visible when expanded" />
+  <KCard content="I am only visible when expanded" />
 </KCollapse>
 ```
 
diff --git a/docs/guide/migrating-to-version-9.md b/docs/guide/migrating-to-version-9.md
index ffc6279481..749775be21 100644
--- a/docs/guide/migrating-to-version-9.md
+++ b/docs/guide/migrating-to-version-9.md
@@ -100,7 +100,7 @@ Kongponents styles are no longer designed to be utilized standalone, separately
 #### Slots
 
 * `statusHat` slot has been removed
-* `body` slot has been removed. Use `default` slot instead
+* `body` slot has been deprecated in favor of `default` slot
 * `notifications` slot has been removed
 
 #### Events
diff --git a/sandbox/pages/SandboxCard.vue b/sandbox/pages/SandboxCard.vue
index c9b9a5c70d..d00bda22ed 100644
--- a/sandbox/pages/SandboxCard.vue
+++ b/sandbox/pages/SandboxCard.vue
@@ -96,6 +96,25 @@
         </KCard>
       </div>
     </SandboxSectionComponent>
+
+    <!-- Legacy -->
+    <SandboxTitleComponent
+      is-subtitle
+      title="Legacy"
+    />
+    <SandboxSectionComponent title="body slot (deprecated)">
+      <KCard>
+        When both `default` and `body` slots are present, `default` slot will be used.
+        <template #body>
+          And `body` slot will be ignored.
+        </template>
+      </KCard>
+      <KCard>
+        <template #body>
+          But when only the `body` slot is present, it will be treated as `default`.
+        </template>
+      </KCard>
+    </SandboxSectionComponent>
   </div>
 </template>
 
diff --git a/src/components/KCard/KCard.vue b/src/components/KCard/KCard.vue
index fd62be5efd..11d6516f51 100644
--- a/src/components/KCard/KCard.vue
+++ b/src/components/KCard/KCard.vue
@@ -22,10 +22,12 @@
       </div>
     </div>
     <div
-      v-if="$slots.default || content"
+      v-if="$slots.default || $slots.body || content"
       class="card-content"
     >
-      <slot><p>{{ content }}</p></slot>
+      <slot :name="contentSlotName">
+        <p>{{ content }}</p>
+      </slot>
     </div>
     <div
       v-if="$slots.footer"
@@ -37,6 +39,8 @@
 </template>
 
 <script setup lang="ts">
+import { useSlots, computed } from 'vue'
+
 defineProps({
   title: {
     type: String,
@@ -47,6 +51,18 @@ defineProps({
     default: '',
   },
 })
+
+const slots = useSlots()
+
+const contentSlotName = computed((): 'body' | 'default' => { // TODO: remove this when body slot is removed
+  if (slots.body && !slots.default) {
+    console.warn('KCard: `body` slot has been deprecated in favor of `default` slot. See the migration guide for more details: https://alpha--kongponents.netlify.app/guide/migrating-to-version-9.html#kcard')
+
+    return 'body'
+  }
+
+  return 'default'
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/KCatalog/KCatalogItem.vue b/src/components/KCatalog/KCatalogItem.vue
index f3c21feb20..52f31464b1 100644
--- a/src/components/KCatalog/KCatalogItem.vue
+++ b/src/components/KCatalog/KCatalogItem.vue
@@ -2,10 +2,8 @@
   <KCard
     class="k-card-catalog-item"
     :data-testid="item && item.title ? `${item.title.replace(/[^0-9a-z]/gi, '-')}-catalog-item` : 'catalog-item'"
-    has-hover
     role="button"
     tabindex="0"
-    :test-mode="!!testMode || undefined"
     @click="($event: any) => handleCardClick($event, item)"
   >
     <template #title>
@@ -18,13 +16,11 @@
       <slot name="cardActions" />
     </template>
 
-    <template #body>
-      <div :class="{ 'multi-line-truncate': truncate }">
-        <slot name="cardBody">
-          {{ item ? item.description : '' }}
-        </slot>
-      </div>
-    </template>
+    <div :class="{ 'multi-line-truncate': truncate }">
+      <slot name="cardBody">
+        {{ item ? item.description : '' }}
+      </slot>
+    </div>
   </KCard>
 </template>
 
diff --git a/src/components/KSlideout/KSlideout.vue b/src/components/KSlideout/KSlideout.vue
index 2cefa03d12..5d09bddf0c 100644
--- a/src/components/KSlideout/KSlideout.vue
+++ b/src/components/KSlideout/KSlideout.vue
@@ -55,10 +55,8 @@
         </button>
 
         <div class="content">
-          <KCard border-variant="noBorder">
-            <template #body>
-              <slot />
-            </template>
+          <KCard>
+            <slot />
           </KCard>
         </div>
       </div>

From 09dc8a2e0527e73d9d0bf7c605792d6a1b5737bf Mon Sep 17 00:00:00 2001
From: portikM <maksym.portianoi@konghq.com>
Date: Tue, 31 Oct 2023 17:32:14 -0400
Subject: [PATCH 05/22] test(kcatalog): fix component tests [KHCP-8971]

---
 src/components/KCatalog/KCatalog.cy.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/KCatalog/KCatalog.cy.ts b/src/components/KCatalog/KCatalog.cy.ts
index 685ff9fc99..52d4b3d066 100644
--- a/src/components/KCatalog/KCatalog.cy.ts
+++ b/src/components/KCatalog/KCatalog.cy.ts
@@ -130,8 +130,8 @@ describe('KCatalog', () => {
         },
       })
 
-      cy.get('.k-card-title').should('contain', slotHeader)
-      cy.get('.k-card-body').should('contain', slotBody)
+      cy.get('.card-title').should('contain', slotHeader)
+      cy.get('.card-content').should('contain', slotBody)
     })
 
     it('renders slots when passed (with empty)', () => {

From f5cac37b67d2088875b275ea1a0ad0b24c7025fa Mon Sep 17 00:00:00 2001
From: portikM <maksym.portianoi@konghq.com>
Date: Tue, 31 Oct 2023 17:53:54 -0400
Subject: [PATCH 06/22] docs(kcard): update component docs [KHCP-8971]

---
 docs/components/card.md | 356 +++++++++++++++-------------------------
 1 file changed, 130 insertions(+), 226 deletions(-)

diff --git a/docs/components/card.md b/docs/components/card.md
index 224371b44e..d1774a004a 100644
--- a/docs/components/card.md
+++ b/docs/components/card.md
@@ -1,275 +1,179 @@
 # Card
 
-**KCard** is meant to highlight content in grids or group relative information together.
+KCard is a styled container that organizes together related content and actions.
 
-<KCard title="Card Title" body="Body Content"/>
-
-```html
-<KCard title="Card Title" body="Body Content"/>
-```
-
-## Props
-
-### title
-
-String to be used in the title slot.
-
-<KCard title="Title">
-  <template v-slot:body>
-    I am the body.
+<KCard>
+  <template #title>
+    Card Title
   </template>
-</KCard>
-
-```html
-<KCard title="Title">
-  <template v-slot:body>
-    I am the body.
+  <template #actions>
+    <KDropdown
+      :items="[
+        { label: 'Props', to: { path: '/components/card#props' } },
+        { label: 'Slots', to: { path: '/components/card#slots' } }
+      ]"
+    >
+      <KButton
+        appearance="tertiary"
+        class="icon-button"
+        size="small"
+      >
+        <MoreIcon />
+      </KButton>
+    </KDropdown>
   </template>
-</KCard>
-```
-
-If the title is omitted, then KCard acts as a generic Box element.
-
-<KCard>
-  <template v-slot:body>
-    I am a box. I have padding and a border. Useful for composing other components
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip excommodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nupariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit aid est laborum.
+  <template #footer>
+    <div class="horizontal-spacing">
+      <KBadge appearance="success">
+        Published
+      </KBadge>
+      <KBadge>2 versions</KBadge>
+    </div>
   </template>
 </KCard>
 
 ```html
 <KCard>
-  <template v-slot:body>
-    I am a box. I have padding and a border. Useful for composing other components
+  <template #title>
+    Card Title
   </template>
-</KCard>
-```
-
-Example composing `KCard` with other Kongponents to make another component:
-
-<KCard :hasHover="true">
-  <template v-slot:body>
-    <KAlert alert-message="Welcome to Kong!" />
-    <div>
-      <div style="display: flex; justify-content: space-between; align-items: center;">
-        <h2>Kong Enterprise Edition</h2>
-        <KButton appearance="secondary" to="https://docs.konghq.com/enterprise" target="_blank">
-          Docs
-        </KButton>
-      </div>
-      <div>
-        <p>Kong Enterprise adds features, functionality, and performance to Kong. This documentation doesn’t cover the general practices that are common to both Kong and Kong Enterprise—learn the basics in Kong documentation.</p>
-      </div>
-    </div>
+  <template #actions>
+    <KDropdown
+      :items="[
+        { label: 'Props', to: { path: '/components/card#props' } },
+        { label: 'Slots', to: { path: '/components/card#slots' } }
+      ]"
+    >
+      <KButton
+        appearance="tertiary"
+        icon
+        size="small"
+      >
+        <MoreIcon />
+      </KButton>
+    </KDropdown>
   </template>
-</KCard>
-
-```html
-<KCard :hasHover="true">
-  <template v-slot:body>
-    <KAlert alert-message="Welcome to Kong!" />
-    <div>
-      <div>
-        <h2>Kong Enterprise Edition</h2>
-        <KButton appearance="secondary" to="https://docs.konghq.com/enterprise" target="_blank">
-          Docs
-        </KButton>
-      </div>
-      <div>
-        <p>Kong Enterprise adds features, functionality, and performance to Kong. This documentation doesn’t cover the general practices that are common to both Kong and Kong Enterprise—learn the basics in Kong documentation.</p>
-      </div>
+  Lorem ipsum dolor sit amet ...
+  <template #footer>
+    <div class="horizontal-spacing">
+      <KBadge appearance="success">
+        Published
+      </KBadge>
+      <KBadge>2 versions</KBadge>
     </div>
   </template>
 </KCard>
 ```
 
-### status
-
-String to be used in the `statusHat` slot.
-
-<KCard status="My status" title="My title" body="My body" />
-
-```html
-<KCard status="My status" title="My title" body="My body" />
-```
-
-### body
-
-String to be used in the body slot.
-
-<KCard body="I am the body."/>
-
-```html
-<KCard body="I am the body."/>
-```
-
-### borderVariant
-
-Sets top border or no border. If neither set default will have border
-
-- `borderTop`
-- `noBorder`
-
-<div class="borderless-cards">
-  <KCard title="Card without border" body="Body Content" border-variant="noBorder"/>
-
-  <KCard title="Card with top border" body="Body Content" border-variant="borderTop"/>
-</div>
-
-```html
-<KCard title="Card without border" body="Body Content" border-variant="noBorder"/>
-
-<KCard title="Card with top border" body="Body Content" border-variant="borderTop"/>
-```
+## Props
 
-### hasHover
+### title
 
-Set if card should have shadow state (shadow) on hover
+String to be used as a title. Can also be [slotted](#slots).
 
-<KCard title="hasHover" body="This card only has a shadow on hover" has-hover />
+### content
 
-```html
-<KCard title="hasHover" body="This card only has a shadow on hover" has-hover />
-```
+String to be used as content. Can also be [slotted](#default).
 
-### hasShadow
+<KCard
+  content="Card content"
+  title="Card Title"
+/>
 
-Set if the card should always have shadow state (shadow)
+## Slots
 
-<KCard title="hasShadow" body="This card always has a shadow" has-shadow />
+### title
 
-```html
-<KCard title="hasShadow" body="This card always has a shadow" has-shadow />
-```
+Content to be rendered in the title of the card. For example refer to [`footer` slot](#footer).
 
-## Using flex box
+:::warning NOTE
+To preserve a valid HTML structure, avoid slotting in block-level elements such as a `div` into the `title` slot as it will be rendered inside a `h4` element.
+:::
 
-Cards can be arranged with flex box.
+### actions
 
-<div class="card-flex-container">
-  <KCard
-    title="Left"
-    body="This card only has a title"
-  />
-  <KCard
-    title="Center"
-    body="This card always has a icon button"
-  >
-    <template v-slot:actions>
-      <KButton size="small" appearance="secondary">
-        <KIcon
-          icon="gearFilled"
-          size="16"
-          view-box="0 0 16 16"
-        />
-      </KButton>
-    </template>
-  </KCard>
-  <KCard
-    title="Right"
-    body="This card always has a button"
-  >
-    <template v-slot:actions>
-      <KButton size="small" appearance="secondary">View All</KButton>
-    </template>
-  </KCard>
-</div>
+Located next to card title, this slot serves for slotting in any action elements. For example refer to [`footer` slot](#footer).
 
-```html
-<KCard title="Left" body="This card only has a title" />
-<KCard title="Center" body="This card always has a icon button">
-  <template v-slot:actions>
-    <KButton>
-      <KIcon
-        icon="gearFilled"
-        size="16"
-        view-box="0 0 16 16"
-      />
-    </KButton>
-  </template>
-</KCard>
-<KCard title="Right" body="This card always has a button">
-  <template v-slot:actions>
-    <KButton>View All</KButton>
-  </template>
-</KCard>
+### default
 
-<style lang="scss">
-.card-flex-container {
-  display: flex;
-  flex-direction: row;
-  gap: 4px;
-}
-</style>
-```
+Content of the card. If present, takes precedence over the `content` prop. For example refer to [`footer` slot](#footer). 
 
-## Slots
+### footer
 
-- `statusHat` - Small text directly above the title
-- `title`
-- `body`
-- `actions` - Right side of the header section. Used for links, buttons, etc
-- `notifications` - Right side of the body section. Used for badges, icons, etc
+Bottom drawer of the card. Helpful for providing information of lesser importance.
 
-&nbsp;
 <KCard>
-  <template v-slot:statusHat>
-    <KIcon
-      icon="check"
-      class="horizontal-spacing"
-      color="#07A88D"
-      size="24"
-    />
-      Approved
+  <template #title>
+    Example of very long card title that should not be truncated with ellipsis and should wrap to the next line even if it is too long
   </template>
-  <template v-slot:title>Look Mah!</template>
-  <template v-slot:actions><a href="#">View All</a></template>
-  <template v-slot:body>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nec justo libero. Nullam accumsan quis ipsum vitae tempus. Integer non pharetra orci. Suspendisse potenti.</template>
-  <template v-slot:notifications>
-    <KIcon
-      icon="profile"
-      color="#7F01FE"
-      size="44" />
+  <template #actions>
+    <KDropdown
+      :items="[
+        { label: 'Props', to: { path: '/components/card#props' } },
+        { label: 'Slots', to: { path: '/components/card#slots' } }
+      ]"
+    >
+      <KButton
+        appearance="tertiary"
+        class="icon-button"
+        size="small"
+      >
+        <MoreIcon />
+      </KButton>
+    </KDropdown>
+  </template>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip excommodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nupariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit aid est laborum.
+  <template #footer>
+    <div class="horizontal-spacing">
+      <KBadge appearance="success">
+        Published
+      </KBadge>
+      <KBadge>2 versions</KBadge>
+    </div>
   </template>
 </KCard>
 
 ```html
 <KCard>
-  <template v-slot:statusHat>
-    <KIcon
-      icon="check"
-      color="#07A88D"
-      size="24" />
-      Approved
+  <template #title>
+    Example of very long card title that should not be truncated with ellipsis and should wrap to the next line even if it is too long
   </template>
-  <template v-slot:title>Look Mah!</template>
-  <template v-slot:actions><a href="#">View All</a></template>
-  <template v-slot:body>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nec justo libero. Nullam accumsan quis ipsum vitae tempus. Integer non pharetra orci. Suspendisse potenti.</template>
-  <template v-slot:notifications>
-    <KIcon
-      icon="profile"
-      color="#7F01FE"
-      size="44" />
+  <template #actions>
+    <KDropdown
+      :items="[
+        { label: 'Props', to: { path: '/components/card#props' } },
+        { label: 'Slots', to: { path: '/components/card#slots' } }
+      ]"
+    >
+      <KButton
+        appearance="tertiary"
+        icon
+        size="small"
+      >
+        <MoreIcon />
+      </KButton>
+    </KDropdown>
+  </template>
+  Lorem ipsum dolor sit amet ...
+  <template #footer>
+    <div class="horizontal-spacing">
+      <KBadge appearance="success">
+        Published
+      </KBadge>
+      <KBadge>2 versions</KBadge>
+    </div>
   </template>
 </KCard>
 ```
 
-<style lang="scss">
-.borderless-cards {
-  padding: 16px;
-  background: rgba(27,31,35,0.05);
-  border-radius: 3px;
-  .kong-card {
-    background: #fff;
-  }
-}
+<script setup lang="ts">
+import { MoreIcon } from '@kong/icons'
+</script>
 
+<style lang="scss" scoped>
 .horizontal-spacing {
-  margin-right: $kui-space-40;
-}
-
-.card-flex-container {
   display: flex;
-  flex-direction: row;
-  gap: $kui-space-40;
+  gap: $kui-space-50;
 }
-</style>
+</style>
\ No newline at end of file

From c93204fdc89a1e57a6fb5eacba0e733e297bf525 Mon Sep 17 00:00:00 2001
From: portikM <maksym.portianoi@konghq.com>
Date: Tue, 31 Oct 2023 19:17:09 -0400
Subject: [PATCH 07/22] fix(kcard): deprecate body prop instead of removing
 [KHCP-8971]

---
 docs/guide/migrating-to-version-9.md |  2 +-
 sandbox/pages/SandboxCard.vue        |  3 +++
 src/components/KCard/KCard.vue       | 20 +++++++++++++++++---
 src/components/KLabel/KLabel.vue     |  2 +-
 4 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/docs/guide/migrating-to-version-9.md b/docs/guide/migrating-to-version-9.md
index 749775be21..3ce0a44514 100644
--- a/docs/guide/migrating-to-version-9.md
+++ b/docs/guide/migrating-to-version-9.md
@@ -91,7 +91,7 @@ Kongponents styles are no longer designed to be utilized standalone, separately
 #### Props
 
 * `testMode` prop has been removed
-* `body` prop has been removed. Use `content` prop instead
+* `body` prop has been deprecated in favor of `content` prop
 * `borderVariant` prop has been removed. KCard has border by default
 * `hasHover` prop has been removed
 * `hasShadow` prop has been removed. KCard does not have shadow by default
diff --git a/sandbox/pages/SandboxCard.vue b/sandbox/pages/SandboxCard.vue
index d00bda22ed..9bb15a4de2 100644
--- a/sandbox/pages/SandboxCard.vue
+++ b/sandbox/pages/SandboxCard.vue
@@ -115,6 +115,9 @@
         </template>
       </KCard>
     </SandboxSectionComponent>
+    <SandboxSectionComponent title="body prop (deprecated)">
+      <KCard body="`body` prop is deprecated but is backwards compatible." />
+    </SandboxSectionComponent>
   </div>
 </template>
 
diff --git a/src/components/KCard/KCard.vue b/src/components/KCard/KCard.vue
index 11d6516f51..7720d2652b 100644
--- a/src/components/KCard/KCard.vue
+++ b/src/components/KCard/KCard.vue
@@ -22,11 +22,11 @@
       </div>
     </div>
     <div
-      v-if="$slots.default || $slots.body || content"
+      v-if="$slots.default || $slots.body || content || body"
       class="card-content"
     >
       <slot :name="contentSlotName">
-        <p>{{ content }}</p>
+        <p>{{ content || body }}</p>
       </slot>
     </div>
     <div
@@ -50,11 +50,25 @@ defineProps({
     type: String,
     default: '',
   },
+  /**
+   * @deprecated in favor of `content` prop
+   */
+  body: {
+    type: String,
+    default: '',
+    validator: (value: string) => {
+      if (value) {
+        console.warn('KCard: `body` prop has been deprecated in favor of `content` prop. See the migration guide for more details: https://alpha--kongponents.netlify.app/guide/migrating-to-version-9.html#kcard')
+      }
+
+      return true
+    },
+  },
 })
 
 const slots = useSlots()
 
-const contentSlotName = computed((): 'body' | 'default' => { // TODO: remove this when body slot is removed
+const contentSlotName = computed((): 'body' | 'default' => { // TODO: remove this when @deprecated `body` slot is removed
   if (slots.body && !slots.default) {
     console.warn('KCard: `body` slot has been deprecated in favor of `default` slot. See the migration guide for more details: https://alpha--kongponents.netlify.app/guide/migrating-to-version-9.html#kcard')
 
diff --git a/src/components/KLabel/KLabel.vue b/src/components/KLabel/KLabel.vue
index dee596443f..988f40a024 100644
--- a/src/components/KLabel/KLabel.vue
+++ b/src/components/KLabel/KLabel.vue
@@ -16,7 +16,7 @@
         tabindex="0"
       />
       <template #content>
-        <slot name="tooltip">{{ help || info }}</slot>
+        <slot name="tooltip">{{ info || help }}</slot>
       </template>
     </KTooltip>
   </label>

From a94b0577b987431c09a5c742c5b778b2bad76bf1 Mon Sep 17 00:00:00 2001
From: portikM <maksym.portianoi@konghq.com>
Date: Wed, 1 Nov 2023 10:35:08 -0400
Subject: [PATCH 08/22] fix(kcard): address PR feedback [KHCP-8971]

---
 docs/components/card.md              | 51 +++++++++++++-------
 docs/components/collapse.md          | 16 +++++--
 docs/guide/migrating-to-version-9.md |  2 +-
 sandbox/pages/SandboxCard.vue        |  9 ++--
 src/components/KCard/KCard.vue       | 70 +++++++++++++---------------
 5 files changed, 84 insertions(+), 64 deletions(-)

diff --git a/docs/components/card.md b/docs/components/card.md
index d1774a004a..d61ace9db0 100644
--- a/docs/components/card.md
+++ b/docs/components/card.md
@@ -72,32 +72,51 @@ KCard is a styled container that organizes together related content and actions.
 
 String to be used as a title. Can also be [slotted](#slots).
 
-### content
+<KCard title="Card Title" />
 
-String to be used as content. Can also be [slotted](#default).
-
-<KCard
-  content="Card content"
-  title="Card Title"
-/>
+```html
+<KCard title="Card Title" />
+```
 
 ## Slots
 
-### title
+### default
 
-Content to be rendered in the title of the card. For example refer to [`footer` slot](#footer).
+Content of the card.
 
-:::warning NOTE
-To preserve a valid HTML structure, avoid slotting in block-level elements such as a `div` into the `title` slot as it will be rendered inside a `h4` element.
-:::
+<KCard>
+  KCard with only default slot content is a container that neatly envelops your content.
+</KCard>
 
-### actions
+```html
+<KCard>
+  KCard with only default slot content is a container that neatly envelops your content.
+</KCard>
+```
 
-Located next to card title, this slot serves for slotting in any action elements. For example refer to [`footer` slot](#footer).
+### title
 
-### default
+Content to be rendered in the title of the card.
+
+<KCard>
+  <template #title>
+    Card Title
+  </template>
+  When you include a title and content in a KCard, it takes on the appearance of a presentable container for conveying information.
+</KCard>
+
+```html
+<KCard>
+  <template #title>
+    Card Title
+  </template>
+  When you include a title and content in a KCard, it takes on the appearance of a presentable container for conveying information.
+</KCard>
+```
+
+### actions
 
-Content of the card. If present, takes precedence over the `content` prop. For example refer to [`footer` slot](#footer). 
+Located next to card title, this slot serves for slotting in any action elements. See the example below.
 
 ### footer
 
diff --git a/docs/components/collapse.md b/docs/components/collapse.md
index 1b8aaa52a8..335aa3855e 100644
--- a/docs/components/collapse.md
+++ b/docs/components/collapse.md
@@ -166,9 +166,13 @@ To set the default state (collapsed or expanded) without binding to v-model you
         </div>
       </template>
       <template #visible-content>
-        <KCard content="I am content that is always visible" />
+        <KCard>
+          I am content that is always visible
+        </KCard>
       </template>
-      <KCard content="I am only visible when expanded" />
+      <KCard>
+        I am only visible when expanded
+      </KCard>
     </KCollapse>
   </template>
 </KCard>
@@ -182,10 +186,14 @@ To set the default state (collapsed or expanded) without binding to v-model you
     </div>
   </template>
   <template #visible-content>
-    <KCard content="I am content that is always visible" />
+    <KCard>
+      I am content that is always visible
+    </KCard>
   </template>
 
-  <KCard content="I am only visible when expanded" />
+  <KCard>
+    I am only visible when expanded
+  </KCard>
 </KCollapse>
 ```
 
diff --git a/docs/guide/migrating-to-version-9.md b/docs/guide/migrating-to-version-9.md
index 3ce0a44514..698166055e 100644
--- a/docs/guide/migrating-to-version-9.md
+++ b/docs/guide/migrating-to-version-9.md
@@ -91,7 +91,7 @@ Kongponents styles are no longer designed to be utilized standalone, separately
 #### Props
 
 * `testMode` prop has been removed
-* `body` prop has been deprecated in favor of `content` prop
+* `body` prop has been deprecated. Use `default` slot instead
 * `borderVariant` prop has been removed. KCard has border by default
 * `hasHover` prop has been removed
 * `hasShadow` prop has been removed. KCard does not have shadow by default
diff --git a/sandbox/pages/SandboxCard.vue b/sandbox/pages/SandboxCard.vue
index 9bb15a4de2..94cf9faf0c 100644
--- a/sandbox/pages/SandboxCard.vue
+++ b/sandbox/pages/SandboxCard.vue
@@ -15,11 +15,10 @@
       is-subtitle
       title="Props"
     />
-    <SandboxSectionComponent title="title & content">
-      <KCard
-        content="Card content"
-        title="Card title"
-      />
+    <SandboxSectionComponent title="title">
+      <KCard title="Card title">
+        Card content slot
+      </KCard>
     </SandboxSectionComponent>
 
     <!-- Slots -->
diff --git a/src/components/KCard/KCard.vue b/src/components/KCard/KCard.vue
index 7720d2652b..8d7deae515 100644
--- a/src/components/KCard/KCard.vue
+++ b/src/components/KCard/KCard.vue
@@ -1,18 +1,16 @@
 <template>
-  <section class="k-card">
+  <div class="k-card">
     <div
-      v-if="$slots.title || title || $slots.actions"
+      v-if="showCardHeader"
       class="card-header"
     >
       <div
         v-if="$slots.title || title"
         class="card-title"
       >
-        <h4>
-          <slot name="title">
-            {{ title }}
-          </slot>
-        </h4>
+        <slot name="title">
+          {{ title }}
+        </slot>
       </div>
       <div
         v-if="$slots.actions"
@@ -22,11 +20,15 @@
       </div>
     </div>
     <div
-      v-if="$slots.default || $slots.body || content || body"
+      v-if="showCardBody"
       class="card-content"
     >
-      <slot :name="contentSlotName">
-        <p>{{ content || body }}</p>
+      <slot v-if="$slots.default" />
+      <slot
+        v-else-if="!$slots.default && ($slots.body || body)"
+        name="body"
+      >
+        {{ body }}
       </slot>
     </div>
     <div
@@ -35,21 +37,17 @@
     >
       <slot name="footer" />
     </div>
-  </section>
+  </div>
 </template>
 
 <script setup lang="ts">
-import { useSlots, computed } from 'vue'
+import { useSlots, computed, onMounted } from 'vue'
 
-defineProps({
+const props = defineProps({
   title: {
     type: String,
     default: '',
   },
-  content: {
-    type: String,
-    default: '',
-  },
   /**
    * @deprecated in favor of `content` prop
    */
@@ -58,7 +56,7 @@ defineProps({
     default: '',
     validator: (value: string) => {
       if (value) {
-        console.warn('KCard: `body` prop has been deprecated in favor of `content` prop. See the migration guide for more details: https://alpha--kongponents.netlify.app/guide/migrating-to-version-9.html#kcard')
+        console.warn('KCard: `body` prop has been deprecated. Please use `default` slot instead. See the migration guide for more details: https://alpha--kongponents.netlify.app/guide/migrating-to-version-9.html#kcard')
       }
 
       return true
@@ -68,14 +66,19 @@ defineProps({
 
 const slots = useSlots()
 
-const contentSlotName = computed((): 'body' | 'default' => { // TODO: remove this when @deprecated `body` slot is removed
-  if (slots.body && !slots.default) {
-    console.warn('KCard: `body` slot has been deprecated in favor of `default` slot. See the migration guide for more details: https://alpha--kongponents.netlify.app/guide/migrating-to-version-9.html#kcard')
+const showCardHeader = computed((): boolean => {
+  return !!(slots.title || props.title || slots.actions)
+})
 
-    return 'body'
-  }
+const showCardBody = computed((): boolean => {
+  return !!(slots.default || slots.body || props.body)
+})
 
-  return 'default'
+onMounted(() => {
+  if (slots.body) {
+    // TODO: remove this when @deprecated `body` slot is removed
+    console.warn('KCard: `body` slot has been deprecated in favor of `default` slot. See the migration guide for more details: https://alpha--kongponents.netlify.app/guide/migrating-to-version-9.html#kcard')
+  }
 })
 </script>
 
@@ -94,25 +97,16 @@ const contentSlotName = computed((): 'body' | 'default' => { // TODO: remove thi
     justify-content: space-between;
 
     .card-title {
-      h4 {
-        color: var(--kui-color-text, $kui-color-text);
-        font-size: var(--kui-font-size-50, $kui-font-size-50);
-        font-weight: var(--kui-font-weight-bold, $kui-font-weight-bold);
-        letter-spacing: var(--kui-letter-spacing-minus-30, $kui-letter-spacing-minus-30);
-        line-height: var(--kui-line-height-40, $kui-line-height-40);
-        margin: 0; // reset default browser margin
-      }
+      color: var(--kui-color-text, $kui-color-text);
+      font-size: var(--kui-font-size-50, $kui-font-size-50);
+      font-weight: var(--kui-font-weight-bold, $kui-font-weight-bold);
+      letter-spacing: var(--kui-letter-spacing-minus-30, $kui-letter-spacing-minus-30);
+      line-height: var(--kui-line-height-40, $kui-line-height-40);
     }
   }
 
   .card-content {
     @include bodyText;
-
-    p {
-      @include bodyText;
-
-      margin: 0; // reset default browser margin
-    }
   }
 
   .card-footer {

From e5b901b6cba6fa42d6e1d96898a8f881d99ed68b Mon Sep 17 00:00:00 2001
From: Maksym Portianoi <maksym.portianoi@konghq.com>
Date: Wed, 1 Nov 2023 10:37:03 -0400
Subject: [PATCH 09/22] fix(kcard): address PR feedback [KHCP-8971]

Co-authored-by: Adam DeHaven <2229946+adamdehaven@users.noreply.github.com>
---
 docs/components/card.md              | 2 +-
 docs/guide/migrating-to-version-9.md | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/docs/components/card.md b/docs/components/card.md
index d61ace9db0..4171ebf8f2 100644
--- a/docs/components/card.md
+++ b/docs/components/card.md
@@ -1,6 +1,6 @@
 # Card
 
-KCard is a styled container that organizes together related content and actions.
+KCard is a styled container that organizes related content and actions.
 
 <KCard>
   <template #title>
diff --git a/docs/guide/migrating-to-version-9.md b/docs/guide/migrating-to-version-9.md
index 698166055e..9b7e03382e 100644
--- a/docs/guide/migrating-to-version-9.md
+++ b/docs/guide/migrating-to-version-9.md
@@ -92,9 +92,9 @@ Kongponents styles are no longer designed to be utilized standalone, separately
 
 * `testMode` prop has been removed
 * `body` prop has been deprecated. Use `default` slot instead
-* `borderVariant` prop has been removed. KCard has border by default
+* `borderVariant` prop has been removed. KCard has a border by default
 * `hasHover` prop has been removed
-* `hasShadow` prop has been removed. KCard does not have shadow by default
+* `hasShadow` prop has been removed. KCard does not have a box-shadow by default
 * `status` prop has been removed
 
 #### Slots

From 5de65ea70e7b0d23c9a9d5309d246cde7a2e9393 Mon Sep 17 00:00:00 2001
From: portikM <maksym.portianoi@konghq.com>
Date: Wed, 1 Nov 2023 10:50:03 -0400
Subject: [PATCH 10/22] test(kcard): fix component tests [KHCP-8971]

---
 src/components/KCard/KCard.cy.ts | 16 +++++-----------
 1 file changed, 5 insertions(+), 11 deletions(-)

diff --git a/src/components/KCard/KCard.cy.ts b/src/components/KCard/KCard.cy.ts
index dd4f74ea4e..e35206d6c9 100644
--- a/src/components/KCard/KCard.cy.ts
+++ b/src/components/KCard/KCard.cy.ts
@@ -11,43 +11,37 @@ describe('KCard', () => {
     cy.get('.k-card').find('card-footer').should('not.exist')
   })
 
-  it('renders title and content slots when passed', () => {
+  it('renders title prop when passed', () => {
     const titleProp = 'Title prop'
-    const contentProp = 'Content prop'
 
     mount(KCard, {
       props: {
         title: titleProp,
-        content: contentProp,
       },
     })
 
     cy.get('.k-card').find('.card-title').should('contain', titleProp)
-    cy.get('.k-card').find('.card-content').should('contain', contentProp)
   })
 
   it('renders slots when passed', () => {
     const titleProp = 'Test title'
-    const contentProp = 'Test content'
     const titleText = 'I am the title'
-    const contentText = 'I am the content'
 
     mount(KCard, {
       props: {
         title: titleProp,
-        content: contentProp,
       },
       slots: {
         title: `<span data-testid="card-title">${titleText}</span>`,
         actions: '<span data-testid="card-actions">Card actions</span>',
-        default: `<span data-testid="card-content">${contentText}</span>`,
+        default: '<span data-testid="card-content">Card content</span>',
         footer: '<span data-testid="card-footer">Card footer</span>',
       },
     })
 
     cy.get('.k-card').find('.card-title').get('[data-testid="card-title"]').should('contain', titleText)
-    cy.get('.k-card').get('[data-testid="card-actions"]').should('be.visible')
-    cy.get('.k-card').find('.card-content').get('[data-testid="card-content"]').should('contain', contentText)
-    cy.get('.k-card').get('[data-testid="card-footer"]').should('be.visible')
+    cy.get('.k-card').find('.card-actions').get('[data-testid="card-actions"]').should('be.visible')
+    cy.get('.k-card').find('.card-content').get('[data-testid="card-content"]').should('be.visible')
+    cy.get('.k-card').find('.card-footer').get('[data-testid="card-footer"]').should('be.visible')
   })
 })

From d12fab5554efb5df405cc52e13ce40636cf61764 Mon Sep 17 00:00:00 2001
From: portikM <maksym.portianoi@konghq.com>
Date: Wed, 1 Nov 2023 12:25:45 -0400
Subject: [PATCH 11/22] fix(kcard): address PR feedback [KHCP-8971]

---
 docs/components/card.md              | 49 ++++++++++------------------
 docs/guide/migrating-to-version-9.md | 32 +++++++++---------
 sandbox/pages/SandboxCard.vue        | 22 +++++--------
 src/components/KCard/KCard.cy.ts     |  2 +-
 src/components/KCard/KCard.vue       | 13 +++++++-
 5 files changed, 54 insertions(+), 64 deletions(-)

diff --git a/docs/components/card.md b/docs/components/card.md
index 4171ebf8f2..85e8e16684 100644
--- a/docs/components/card.md
+++ b/docs/components/card.md
@@ -24,12 +24,10 @@ KCard is a styled container that organizes related content and actions.
   </template>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip excommodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nupariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit aid est laborum.
   <template #footer>
-    <div class="horizontal-spacing">
-      <KBadge appearance="success">
-        Published
-      </KBadge>
-      <KBadge>2 versions</KBadge>
-    </div>
+    <KBadge appearance="success">
+      Published
+    </KBadge>
+    <KBadge>2 versions</KBadge>
   </template>
 </KCard>
 
@@ -56,12 +54,10 @@ KCard is a styled container that organizes related content and actions.
   </template>
   Lorem ipsum dolor sit amet ...
   <template #footer>
-    <div class="horizontal-spacing">
-      <KBadge appearance="success">
-        Published
-      </KBadge>
-      <KBadge>2 versions</KBadge>
-    </div>
+    <KBadge appearance="success">
+      Published
+    </KBadge>
+    <KBadge>2 versions</KBadge>
   </template>
 </KCard>
 ```
@@ -144,12 +140,10 @@ Bottom drawer of the card. Helpful for providing information of lesser importanc
   </template>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip excommodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nupariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit aid est laborum.
   <template #footer>
-    <div class="horizontal-spacing">
-      <KBadge appearance="success">
-        Published
-      </KBadge>
-      <KBadge>2 versions</KBadge>
-    </div>
+    <KBadge appearance="success">
+      Published
+    </KBadge>
+    <KBadge>2 versions</KBadge>
   </template>
 </KCard>
 
@@ -176,23 +170,14 @@ Bottom drawer of the card. Helpful for providing information of lesser importanc
   </template>
   Lorem ipsum dolor sit amet ...
   <template #footer>
-    <div class="horizontal-spacing">
-      <KBadge appearance="success">
-        Published
-      </KBadge>
-      <KBadge>2 versions</KBadge>
-    </div>
+    <KBadge appearance="success">
+      Published
+    </KBadge>
+    <KBadge>2 versions</KBadge>
   </template>
 </KCard>
 ```
 
 <script setup lang="ts">
 import { MoreIcon } from '@kong/icons'
-</script>
-
-<style lang="scss" scoped>
-.horizontal-spacing {
-  display: flex;
-  gap: $kui-space-50;
-}
-</style>
\ No newline at end of file
+</script>
\ No newline at end of file
diff --git a/docs/guide/migrating-to-version-9.md b/docs/guide/migrating-to-version-9.md
index 9b7e03382e..caa927baff 100644
--- a/docs/guide/migrating-to-version-9.md
+++ b/docs/guide/migrating-to-version-9.md
@@ -69,6 +69,21 @@ Kongponents styles are no longer designed to be utilized standalone, separately
 
 ### KCard
 
+#### Props
+
+* `testMode` prop has been removed
+* `body` prop has been deprecated. Use `default` slot instead
+* `borderVariant` prop has been removed. KCard has a border by default
+* `hasHover` prop has been removed
+* `hasShadow` prop has been removed. KCard does not have a box-shadow by default
+* `status` prop has been removed
+
+#### Slots
+
+* `statusHat` slot has been removed
+* `body` slot has been deprecated in favor of `default` slot
+* `notifications` slot has been removed
+
 #### Structure
 
 * `kong-card` class has been changed to `k-card`
@@ -88,23 +103,6 @@ Kongponents styles are no longer designed to be utilized standalone, separately
 * `BorderVariantsArray` constant has been removed
 * `BorderVariant` type has been removed
 
-#### Props
-
-* `testMode` prop has been removed
-* `body` prop has been deprecated. Use `default` slot instead
-* `borderVariant` prop has been removed. KCard has a border by default
-* `hasHover` prop has been removed
-* `hasShadow` prop has been removed. KCard does not have a box-shadow by default
-* `status` prop has been removed
-
-#### Slots
-
-* `statusHat` slot has been removed
-* `body` slot has been deprecated in favor of `default` slot
-* `notifications` slot has been removed
-
-#### Events
-
 ### KCatalog
 
 
diff --git a/sandbox/pages/SandboxCard.vue b/sandbox/pages/SandboxCard.vue
index 94cf9faf0c..db89993b30 100644
--- a/sandbox/pages/SandboxCard.vue
+++ b/sandbox/pages/SandboxCard.vue
@@ -51,12 +51,10 @@
           </template>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt <em>ut labore</em> et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <b>Excepteur sint occaecat cupidatat non proident</b>, sunt in culpa qui officia deserunt mollit anim id est laborum.
           <template #footer>
-            <div class="horizontal-spacing">
-              <KBadge appearance="success">
-                Published
-              </KBadge>
-              <KBadge>2 versions</KBadge>
-            </div>
+            <KBadge appearance="success">
+              Published
+            </KBadge>
+            <KBadge>2 versions</KBadge>
           </template>
         </KCard>
       </div>
@@ -84,13 +82,11 @@
           </template>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
           <template #footer>
-            <span class="footer-content">
-              <CheckIcon
-                :color="KUI_COLOR_TEXT_SUCCESS"
-                :size="KUI_ICON_SIZE_40"
-              />
-              Approved
-            </span>
+            <CheckIcon
+              :color="KUI_COLOR_TEXT_SUCCESS"
+              :size="KUI_ICON_SIZE_40"
+            />
+            Approved
           </template>
         </KCard>
       </div>
diff --git a/src/components/KCard/KCard.cy.ts b/src/components/KCard/KCard.cy.ts
index e35206d6c9..63f05f9aef 100644
--- a/src/components/KCard/KCard.cy.ts
+++ b/src/components/KCard/KCard.cy.ts
@@ -2,7 +2,7 @@ import { mount } from 'cypress/vue'
 import KCard from '@/components/KCard/KCard.vue'
 
 describe('KCard', () => {
-  it('does not render any content when no props or slots are passed', () => {
+  it('renders empty card element when no props or slots are passed', () => {
     mount(KCard)
 
     cy.get('.k-card').should('be.visible')
diff --git a/src/components/KCard/KCard.vue b/src/components/KCard/KCard.vue
index 8d7deae515..d6d0ee1f60 100644
--- a/src/components/KCard/KCard.vue
+++ b/src/components/KCard/KCard.vue
@@ -23,7 +23,10 @@
       v-if="showCardBody"
       class="card-content"
     >
-      <slot v-if="$slots.default" />
+      <slot
+        v-if="$slots.default"
+        name="default"
+      />
       <slot
         v-else-if="!$slots.default && ($slots.body || body)"
         name="body"
@@ -103,6 +106,11 @@ onMounted(() => {
       letter-spacing: var(--kui-letter-spacing-minus-30, $kui-letter-spacing-minus-30);
       line-height: var(--kui-line-height-40, $kui-line-height-40);
     }
+
+    .card-actions {
+      display: flex;
+      gap: var(--kui-space-30, $kui-space-30);
+    }
   }
 
   .card-content {
@@ -111,6 +119,9 @@ onMounted(() => {
 
   .card-footer {
     @include bodyText;
+
+    display: flex;
+    gap: var(--kui-space-30, $kui-space-30);
   }
 }
 </style>

From 60ef18bdb7fcd33c678ed459895ab7f4f042874a Mon Sep 17 00:00:00 2001
From: portikM <maksym.portianoi@konghq.com>
Date: Mon, 6 Nov 2023 11:48:15 -0500
Subject: [PATCH 12/22] chore(sandbox): rebase [KHCP-8971]

---
 sandbox/index.ts                 |   1 +
 sandbox/pages/SandboxCard.vue    | 221 ++++++++++++++++---------------
 sandbox/router/sandbox-routes.ts |   6 +
 3 files changed, 120 insertions(+), 108 deletions(-)

diff --git a/sandbox/index.ts b/sandbox/index.ts
index 12e1cbf022..990ca86b20 100644
--- a/sandbox/index.ts
+++ b/sandbox/index.ts
@@ -18,6 +18,7 @@ app.component('SandboxLayout', SandboxLayout)
 const sandboxAppLinks: SandboxNavigationItem[] = ([
   { name: 'KAlert', to: { name: 'alert' } },
   { name: 'KButton', to: { name: 'button' } },
+  { name: 'KCard', to: { name: 'card' } },
   { name: 'KCatalog', to: { name: 'catalog' } },
   { name: 'KCheckbox', to: { name: 'checkbox' } },
   { name: 'KDropdown', to: { name: 'dropdown' } },
diff --git a/sandbox/pages/SandboxCard.vue b/sandbox/pages/SandboxCard.vue
index db89993b30..2245c1f19a 100644
--- a/sandbox/pages/SandboxCard.vue
+++ b/sandbox/pages/SandboxCard.vue
@@ -1,125 +1,130 @@
 <template>
-  <div class="kcard-sandbox">
-    <SandboxTitleComponent
-      title="KCard"
-    >
-      <template #description>
-        <KExternalLink href="https://www.figma.com/file/Yze0SWXl5nKjR0rFdilljK/Components?type=design&node-id=1152%3A19831&mode=dev">
-          Figma
-        </KExternalLink>
-      </template>
-    </SandboxTitleComponent>
+  <SandboxLayout
+    :links="inject('app-links', [])"
+    title="KButton"
+  >
+    <div class="kcard-sandbox">
+      <SandboxTitleComponent
+        title="KCard"
+      >
+        <template #description>
+          <KExternalLink href="https://www.figma.com/file/Yze0SWXl5nKjR0rFdilljK/Components?type=design&node-id=1152%3A19831&mode=dev">
+            Figma
+          </KExternalLink>
+        </template>
+      </SandboxTitleComponent>
 
-    <!-- Props -->
-    <SandboxTitleComponent
-      is-subtitle
-      title="Props"
-    />
-    <SandboxSectionComponent title="title">
-      <KCard title="Card title">
-        Card content slot
-      </KCard>
-    </SandboxSectionComponent>
+      <!-- Props -->
+      <SandboxTitleComponent
+        is-subtitle
+        title="Props"
+      />
+      <SandboxSectionComponent title="title">
+        <KCard title="Card title">
+          Card content slot
+        </KCard>
+      </SandboxSectionComponent>
 
-    <!-- Slots -->
-    <SandboxTitleComponent
-      is-subtitle
-      title="Props"
-    />
-    <SandboxSectionComponent title="title & content & actions & footer">
-      <div>
-        <KCard>
-          <template #title>
-            Card title
-          </template>
-          <template #actions>
-            <KDropdown
-              :items="[
-                { label: 'Home', to: { name: 'home' } },
-                { label: 'KDropdown', to: { name: 'dropdown' } },
-                { label: 'Stay', to: { name: 'card' } }
-              ]"
-            >
-              <KButton
-                appearance="tertiary"
-                class="icon-button"
-                size="small"
+      <!-- Slots -->
+      <SandboxTitleComponent
+        is-subtitle
+        title="Props"
+      />
+      <SandboxSectionComponent title="title & content & actions & footer">
+        <div>
+          <KCard>
+            <template #title>
+              Card title
+            </template>
+            <template #actions>
+              <KDropdown
+                :items="[
+                  { label: 'Home', to: { name: 'home' } },
+                  { label: 'KDropdown', to: { name: 'dropdown' } },
+                  { label: 'Stay', to: { name: 'card' } }
+                ]"
               >
-                <MoreIcon />
-              </KButton>
-            </KDropdown>
-          </template>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt <em>ut labore</em> et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <b>Excepteur sint occaecat cupidatat non proident</b>, sunt in culpa qui officia deserunt mollit anim id est laborum.
-          <template #footer>
-            <KBadge appearance="success">
-              Published
-            </KBadge>
-            <KBadge>2 versions</KBadge>
+                <KButton
+                  appearance="tertiary"
+                  class="icon-button"
+                  size="small"
+                >
+                  <MoreIcon />
+                </KButton>
+              </KDropdown>
+            </template>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt <em>ut labore</em> et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <b>Excepteur sint occaecat cupidatat non proident</b>, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            <template #footer>
+              <KBadge appearance="success">
+                Published
+              </KBadge>
+              <KBadge>2 versions</KBadge>
+            </template>
+          </KCard>
+        </div>
+        <div class="limit-width">
+          <KCard>
+            <template #title>
+              Example of very long card title that should not be truncated with ellipsis and should wrap to the next line even if it is too long
+            </template>
+            <template #actions>
+              <KDropdown
+                :items="[
+                  { label: 'Home', to: { name: 'home' } },
+                  { label: 'KDropdown', to: { name: 'dropdown' } },
+                  { label: 'Stay', to: { name: 'card' } }
+                ]"
+              >
+                <KButton
+                  appearance="tertiary"
+                  class="icon-button"
+                  size="small"
+                >
+                  <MoreIcon />
+                </KButton>
+              </KDropdown>
+            </template>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            <template #footer>
+              <CheckIcon
+                :color="KUI_COLOR_TEXT_SUCCESS"
+                :size="KUI_ICON_SIZE_40"
+              />
+              Approved
+            </template>
+          </KCard>
+        </div>
+      </SandboxSectionComponent>
+
+      <!-- Legacy -->
+      <SandboxTitleComponent
+        is-subtitle
+        title="Legacy"
+      />
+      <SandboxSectionComponent title="body slot (deprecated)">
+        <KCard>
+          When both `default` and `body` slots are present, `default` slot will be used.
+          <template #body>
+            And `body` slot will be ignored.
           </template>
         </KCard>
-      </div>
-      <div class="limit-width">
         <KCard>
-          <template #title>
-            Example of very long card title that should not be truncated with ellipsis and should wrap to the next line even if it is too long
-          </template>
-          <template #actions>
-            <KDropdown
-              :items="[
-                { label: 'Home', to: { name: 'home' } },
-                { label: 'KDropdown', to: { name: 'dropdown' } },
-                { label: 'Stay', to: { name: 'card' } }
-              ]"
-            >
-              <KButton
-                appearance="tertiary"
-                class="icon-button"
-                size="small"
-              >
-                <MoreIcon />
-              </KButton>
-            </KDropdown>
-          </template>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-          <template #footer>
-            <CheckIcon
-              :color="KUI_COLOR_TEXT_SUCCESS"
-              :size="KUI_ICON_SIZE_40"
-            />
-            Approved
+          <template #body>
+            But when only the `body` slot is present, it will be treated as `default`.
           </template>
         </KCard>
-      </div>
-    </SandboxSectionComponent>
-
-    <!-- Legacy -->
-    <SandboxTitleComponent
-      is-subtitle
-      title="Legacy"
-    />
-    <SandboxSectionComponent title="body slot (deprecated)">
-      <KCard>
-        When both `default` and `body` slots are present, `default` slot will be used.
-        <template #body>
-          And `body` slot will be ignored.
-        </template>
-      </KCard>
-      <KCard>
-        <template #body>
-          But when only the `body` slot is present, it will be treated as `default`.
-        </template>
-      </KCard>
-    </SandboxSectionComponent>
-    <SandboxSectionComponent title="body prop (deprecated)">
-      <KCard body="`body` prop is deprecated but is backwards compatible." />
-    </SandboxSectionComponent>
-  </div>
+      </SandboxSectionComponent>
+      <SandboxSectionComponent title="body prop (deprecated)">
+        <KCard body="`body` prop is deprecated but is backwards compatible." />
+      </SandboxSectionComponent>
+    </div>
+  </SandboxLayout>
 </template>
 
 <script setup lang="ts">
+import { inject } from 'vue'
 import SandboxTitleComponent from '../components/SandboxTitleComponent.vue'
 import SandboxSectionComponent from '../components/SandboxSectionComponent.vue'
-import { KExternalLink, KCard, KBadge, KDropdown, KButton } from '@/components'
 import { MoreIcon, CheckIcon } from '@kong/icons'
 import { KUI_COLOR_TEXT_SUCCESS, KUI_ICON_SIZE_40 } from '@kong/design-tokens'
 </script>
diff --git a/sandbox/router/sandbox-routes.ts b/sandbox/router/sandbox-routes.ts
index 4aa3c7bc3f..90b122c03b 100644
--- a/sandbox/router/sandbox-routes.ts
+++ b/sandbox/router/sandbox-routes.ts
@@ -20,6 +20,12 @@ const componentRoutes: RouteRecordRaw[] = [
     meta: { title: 'Button Sandbox' },
     component: () => import('../pages/SandboxButton.vue'),
   },
+  {
+    path: 'card',
+    name: 'card',
+    meta: { title: 'Card Sandbox' },
+    component: () => import('../pages/SandboxCard.vue'),
+  },
   {
     path: '/catalog',
     name: 'catalog',

From 3bb80ff85ec4a514f31253730a9f1fe9b983ac5b Mon Sep 17 00:00:00 2001
From: portikM <maksym.portianoi@konghq.com>
Date: Mon, 6 Nov 2023 12:12:03 -0500
Subject: [PATCH 13/22] fix(sandbox): rebase [KHCP-8971]

---
 sandbox/components/SandboxNavComponent.vue | 87 ---------------------
 sandbox/router.ts                          | 88 ----------------------
 sandbox/router/sandbox-routes.ts           |  2 +-
 3 files changed, 1 insertion(+), 176 deletions(-)
 delete mode 100644 sandbox/components/SandboxNavComponent.vue
 delete mode 100644 sandbox/router.ts

diff --git a/sandbox/components/SandboxNavComponent.vue b/sandbox/components/SandboxNavComponent.vue
deleted file mode 100644
index 99d5d6b83d..0000000000
--- a/sandbox/components/SandboxNavComponent.vue
+++ /dev/null
@@ -1,87 +0,0 @@
-<template>
-  <ul>
-    <li
-      v-for="link in links"
-      :key="link.name"
-      class="sandbox-link"
-    >
-      <router-link
-        :to="link.to"
-        @click="$emit('router-link-click')"
-      >
-        {{ link.name }}
-      </router-link>
-    </li>
-  </ul>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-import type { RouteLocationRaw } from 'vue-router'
-
-interface SandboxNavItem {
-  name: string
-  to: RouteLocationRaw
-}
-
-defineEmits(['router-link-click'])
-
-const links = computed((): SandboxNavItem[] => (
-  [
-    { name: 'KAlert', to: { name: 'alert' } },
-    { name: 'KButton', to: { name: 'button' } },
-    { name: 'KCard', to: { name: 'card' } },
-    { name: 'KCatalog', to: { name: 'catalog' } },
-    { name: 'KCheckbox', to: { name: 'checkbox' } },
-    { name: 'KDropdown', to: { name: 'dropdown' } },
-    { name: 'KInput', to: { name: 'input' } },
-    { name: 'KLabel', to: { name: 'label' } },
-    { name: 'KMultiselect', to: { name: 'multiselect' } },
-    { name: 'KRadio', to: { name: 'radio' } },
-    { name: 'KTable', to: { name: 'table' } },
-    { name: 'KTabs', to: { name: 'tabs' } },
-  ]
-))
-</script>
-
-<style lang="scss" scoped>
-ul {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-.sandbox-link {
-  margin-bottom: 8px;
-
-  &:last-of-type {
-    margin-bottom: 0;
-  }
-
-  a {
-    background: #eee;
-    border-radius: 4px;
-    color: $kui-color-text-primary;
-    display: flex;
-    font-weight: 500;
-    padding: 8px 16px;
-    text-decoration: none;
-    transition: all .2s ease-in-out;
-
-    &:hover {
-      background: #ccc;
-      color: $kui-color-text-primary-stronger;
-    }
-
-    &.router-link-active {
-      background: $kui-color-background-primary;
-      color: #fff;
-
-      &:hover {
-        background: $kui-color-background-primary;
-        color: #fff;
-      }
-    }
-  }
-}
-</style>
diff --git a/sandbox/router.ts b/sandbox/router.ts
deleted file mode 100644
index 03bb629fa8..0000000000
--- a/sandbox/router.ts
+++ /dev/null
@@ -1,88 +0,0 @@
-import { createRouter, createWebHashHistory } from 'vue-router'
-
-export default createRouter({
-  history: createWebHashHistory(),
-  routes: [
-    {
-      path: '/',
-      name: 'home',
-      alias: '/:pathMatch(.*)*',
-      meta: { title: 'Kongponents Sandbox' },
-      component: () => import('./pages/HomePage.vue'),
-      children: [
-        {
-          path: 'alert',
-          name: 'alert',
-          meta: { title: 'Alert Sandbox' },
-          component: () => import('./pages/SandboxAlert.vue'),
-        },
-        {
-          path: 'button',
-          name: 'button',
-          meta: { title: 'Button Sandbox' },
-          component: () => import('./pages/SandboxButton.vue'),
-        },
-        {
-          path: 'card',
-          name: 'card',
-          meta: { title: 'Card Sandbox' },
-          component: () => import('./pages/SandboxCard.vue'),
-        },
-        {
-          path: 'catalog',
-          name: 'catalog',
-          meta: { title: 'Catalog Sandbox' },
-          component: () => import('./pages/SandboxCatalog.vue'),
-        },
-        {
-          path: 'checkbox',
-          name: 'checkbox',
-          meta: { title: 'Checkbox Sandbox' },
-          component: () => import('./pages/SandboxCheckbox.vue'),
-        },
-        {
-          path: 'dropdown',
-          name: 'dropdown',
-          meta: { title: 'Dropdown Sandbox' },
-          component: () => import('./pages/SandboxDropdown.vue'),
-        },
-        {
-          path: 'input',
-          name: 'input',
-          meta: { title: 'Input Sandbox' },
-          component: () => import('./pages/SandboxInput.vue'),
-        },
-        {
-          path: 'label',
-          name: 'label',
-          meta: { title: 'Label Sandbox' },
-          component: () => import('./pages/SandboxLabel.vue'),
-        },
-        {
-          path: 'multiselect',
-          name: 'multiselect',
-          meta: { title: 'Multiselect Sandbox' },
-          component: () => import('./pages/SandboxMultiselect.vue'),
-        },
-        {
-          path: 'radio',
-          name: 'radio',
-          meta: { title: 'Radio Sandbox' },
-          component: () => import('./pages/SandboxRadio.vue'),
-        },
-        {
-          path: 'table',
-          name: 'table',
-          meta: { title: 'Table Sandbox' },
-          component: () => import('./pages/SandboxTable.vue'),
-        },
-        {
-          path: 'tabs',
-          name: 'tabs',
-          meta: { title: 'Tabs Sandbox' },
-          component: () => import('./pages/SandboxTabs.vue'),
-        },
-      ],
-    },
-  ],
-})
diff --git a/sandbox/router/sandbox-routes.ts b/sandbox/router/sandbox-routes.ts
index 90b122c03b..341788abf5 100644
--- a/sandbox/router/sandbox-routes.ts
+++ b/sandbox/router/sandbox-routes.ts
@@ -21,7 +21,7 @@ const componentRoutes: RouteRecordRaw[] = [
     component: () => import('../pages/SandboxButton.vue'),
   },
   {
-    path: 'card',
+    path: '/card',
     name: 'card',
     meta: { title: 'Card Sandbox' },
     component: () => import('../pages/SandboxCard.vue'),

From 70f0e98d10ea735b953814878bf1ea8068f849eb Mon Sep 17 00:00:00 2001
From: Maksym Portianoi <maksym.portianoi@konghq.com>
Date: Thu, 30 Nov 2023 11:36:24 -0500
Subject: [PATCH 14/22] fix: address PR feedback

Co-authored-by: Adam DeHaven <2229946+adamdehaven@users.noreply.github.com>
---
 docs/components/card.md       | 4 ++--
 sandbox/pages/SandboxCard.vue | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/docs/components/card.md b/docs/components/card.md
index 85e8e16684..d8f1d50a2d 100644
--- a/docs/components/card.md
+++ b/docs/components/card.md
@@ -112,11 +112,11 @@ Content to be rendered in the title of the card.
 
 ### actions
 
-Located next to card title, this slot serves for slotting in any action elements. See the example below.
+Located to the right of the card title, the `actions` slot allows for slotting in any action elements. See the example below.
 
 ### footer
 
-Bottom drawer of the card. Helpful for providing information of lesser importance.
+Bottom drawer of the card. Useful for providing contextual information.
 
 <KCard>
   <template #title>
diff --git a/sandbox/pages/SandboxCard.vue b/sandbox/pages/SandboxCard.vue
index 2245c1f19a..e741c39807 100644
--- a/sandbox/pages/SandboxCard.vue
+++ b/sandbox/pages/SandboxCard.vue
@@ -1,7 +1,7 @@
 <template>
   <SandboxLayout
     :links="inject('app-links', [])"
-    title="KButton"
+    title="KCard"
   >
     <div class="kcard-sandbox">
       <SandboxTitleComponent

From 9caeccc74c6f2218ef41c1a2887235c0cb1285c5 Mon Sep 17 00:00:00 2001
From: portikM <maksym.portianoi@konghq.com>
Date: Thu, 30 Nov 2023 11:37:04 -0500
Subject: [PATCH 15/22] fix(kcard): address PR feedback [KHCP-8971]

---
 docs/guide/migrating-to-version-9.md   |  4 +--
 sandbox/pages/SandboxCard.vue          | 22 --------------
 src/components/KCard/KCard.vue         | 40 ++------------------------
 src/components/KSlideout/KSlideout.vue |  3 +-
 4 files changed, 7 insertions(+), 62 deletions(-)

diff --git a/docs/guide/migrating-to-version-9.md b/docs/guide/migrating-to-version-9.md
index caa927baff..043e47492e 100644
--- a/docs/guide/migrating-to-version-9.md
+++ b/docs/guide/migrating-to-version-9.md
@@ -72,7 +72,7 @@ Kongponents styles are no longer designed to be utilized standalone, separately
 #### Props
 
 * `testMode` prop has been removed
-* `body` prop has been deprecated. Use `default` slot instead
+* `body` prop has been removed. Use `default` slot instead
 * `borderVariant` prop has been removed. KCard has a border by default
 * `hasHover` prop has been removed
 * `hasShadow` prop has been removed. KCard does not have a box-shadow by default
@@ -81,7 +81,7 @@ Kongponents styles are no longer designed to be utilized standalone, separately
 #### Slots
 
 * `statusHat` slot has been removed
-* `body` slot has been deprecated in favor of `default` slot
+* `body` slot has been removed. Use the `default` slot instead
 * `notifications` slot has been removed
 
 #### Structure
diff --git a/sandbox/pages/SandboxCard.vue b/sandbox/pages/SandboxCard.vue
index e741c39807..00c683b6b8 100644
--- a/sandbox/pages/SandboxCard.vue
+++ b/sandbox/pages/SandboxCard.vue
@@ -95,28 +95,6 @@
           </KCard>
         </div>
       </SandboxSectionComponent>
-
-      <!-- Legacy -->
-      <SandboxTitleComponent
-        is-subtitle
-        title="Legacy"
-      />
-      <SandboxSectionComponent title="body slot (deprecated)">
-        <KCard>
-          When both `default` and `body` slots are present, `default` slot will be used.
-          <template #body>
-            And `body` slot will be ignored.
-          </template>
-        </KCard>
-        <KCard>
-          <template #body>
-            But when only the `body` slot is present, it will be treated as `default`.
-          </template>
-        </KCard>
-      </SandboxSectionComponent>
-      <SandboxSectionComponent title="body prop (deprecated)">
-        <KCard body="`body` prop is deprecated but is backwards compatible." />
-      </SandboxSectionComponent>
     </div>
   </SandboxLayout>
 </template>
diff --git a/src/components/KCard/KCard.vue b/src/components/KCard/KCard.vue
index d6d0ee1f60..d1884a0fff 100644
--- a/src/components/KCard/KCard.vue
+++ b/src/components/KCard/KCard.vue
@@ -20,19 +20,10 @@
       </div>
     </div>
     <div
-      v-if="showCardBody"
+      v-if="$slots.default"
       class="card-content"
     >
-      <slot
-        v-if="$slots.default"
-        name="default"
-      />
-      <slot
-        v-else-if="!$slots.default && ($slots.body || body)"
-        name="body"
-      >
-        {{ body }}
-      </slot>
+      <slot name="default" />
     </div>
     <div
       v-if="$slots.footer"
@@ -44,27 +35,13 @@
 </template>
 
 <script setup lang="ts">
-import { useSlots, computed, onMounted } from 'vue'
+import { useSlots, computed } from 'vue'
 
 const props = defineProps({
   title: {
     type: String,
     default: '',
   },
-  /**
-   * @deprecated in favor of `content` prop
-   */
-  body: {
-    type: String,
-    default: '',
-    validator: (value: string) => {
-      if (value) {
-        console.warn('KCard: `body` prop has been deprecated. Please use `default` slot instead. See the migration guide for more details: https://alpha--kongponents.netlify.app/guide/migrating-to-version-9.html#kcard')
-      }
-
-      return true
-    },
-  },
 })
 
 const slots = useSlots()
@@ -72,17 +49,6 @@ const slots = useSlots()
 const showCardHeader = computed((): boolean => {
   return !!(slots.title || props.title || slots.actions)
 })
-
-const showCardBody = computed((): boolean => {
-  return !!(slots.default || slots.body || props.body)
-})
-
-onMounted(() => {
-  if (slots.body) {
-    // TODO: remove this when @deprecated `body` slot is removed
-    console.warn('KCard: `body` slot has been deprecated in favor of `default` slot. See the migration guide for more details: https://alpha--kongponents.netlify.app/guide/migrating-to-version-9.html#kcard')
-  }
-})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/KSlideout/KSlideout.vue b/src/components/KSlideout/KSlideout.vue
index 5d09bddf0c..10cf7ec33b 100644
--- a/src/components/KSlideout/KSlideout.vue
+++ b/src/components/KSlideout/KSlideout.vue
@@ -160,7 +160,8 @@ const offsetTopValue = computed((): string => {
 @import '@/styles/tmp-variables';
 
 .k-slideout {
-  :deep(.kong-card) {
+  :deep(.k-card) {
+    border: none;
     padding: var(--kui-space-110, $kui-space-110) var(--kui-space-90, $kui-space-90);
   }
 

From a257ce7a484300ba81651d23368f8c2dbf11cfe1 Mon Sep 17 00:00:00 2001
From: portikM <maksym.portianoi@konghq.com>
Date: Thu, 30 Nov 2023 11:52:52 -0500
Subject: [PATCH 16/22] fix(mixins): address PR feedback [KHCP-8971]

---
 src/styles/_mixins.scss            | 1 -
 src/styles/mixins/_cards.scss      | 8 ++++++++
 src/styles/mixins/_typography.scss | 9 ---------
 3 files changed, 8 insertions(+), 10 deletions(-)
 delete mode 100644 src/styles/mixins/_typography.scss

diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss
index d865ef4732..c8523307e8 100644
--- a/src/styles/_mixins.scss
+++ b/src/styles/_mixins.scss
@@ -2,7 +2,6 @@
 @import "@/styles/mixins/labels";
 @import "@/styles/mixins/input-select";
 @import "@/styles/mixins/cards";
-@import "@/styles/mixins/typography";
 
 @import "@/styles/tmp-variables";
 
diff --git a/src/styles/mixins/_cards.scss b/src/styles/mixins/_cards.scss
index 04afb4bc4c..b8b521f4a8 100644
--- a/src/styles/mixins/_cards.scss
+++ b/src/styles/mixins/_cards.scss
@@ -7,3 +7,11 @@
   font-family: var(--kui-font-family-text, $kui-font-family-text);
   padding: var(--kui-space-70, $kui-space-70);
 }
+
+@mixin bodyText {
+  color: var(--kui-color-text, $kui-color-text);
+  font-family: var(--kui-font-family-text, $kui-font-family-text);
+  font-size: var(--kui-font-size-30, $kui-font-size-30);
+  font-weight: var(--kui-font-weight-regular, $kui-font-weight-regular);
+  line-height: var(--kui-line-height-30, $kui-line-height-30);
+}
diff --git a/src/styles/mixins/_typography.scss b/src/styles/mixins/_typography.scss
deleted file mode 100644
index deb42a3596..0000000000
--- a/src/styles/mixins/_typography.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-/* Common typography-related mixins */
-
-@mixin bodyText {
-  color: var(--kui-color-text, $kui-color-text);
-  font-family: var(--kui-font-family-text, $kui-font-family-text);
-  font-size: var(--kui-font-size-30, $kui-font-size-30);
-  font-weight: var(--kui-font-weight-regular, $kui-font-weight-regular);
-  line-height: var(--kui-line-height-30, $kui-line-height-30);
-}

From ae86f685031dceb8c4744ff4631c422ea07ea562 Mon Sep 17 00:00:00 2001
From: portikM <maksym.portianoi@konghq.com>
Date: Fri, 1 Dec 2023 10:49:34 -0500
Subject: [PATCH 17/22] fix(kcard): card content full height [KHCP-8971]

---
 src/components/KCard/KCard.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/KCard/KCard.vue b/src/components/KCard/KCard.vue
index d1884a0fff..c7879005da 100644
--- a/src/components/KCard/KCard.vue
+++ b/src/components/KCard/KCard.vue
@@ -81,6 +81,8 @@ const showCardHeader = computed((): boolean => {
 
   .card-content {
     @include bodyText;
+
+    height: 100%;
   }
 
   .card-footer {

From 26905eedece3067e7a92c20f8edf90ceccebfe29 Mon Sep 17 00:00:00 2001
From: portikM <maksym.portianoi@konghq.com>
Date: Fri, 1 Dec 2023 10:51:13 -0500
Subject: [PATCH 18/22] fix(kcard): card content display [KHCP-8971]

---
 src/components/KCard/KCard.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/KCard/KCard.vue b/src/components/KCard/KCard.vue
index c7879005da..1559b7a05e 100644
--- a/src/components/KCard/KCard.vue
+++ b/src/components/KCard/KCard.vue
@@ -82,6 +82,8 @@ const showCardHeader = computed((): boolean => {
   .card-content {
     @include bodyText;
 
+    display: flex;
+    flex-direction: column;
     height: 100%;
   }
 

From 7401a9aa43f8cccda2739016880f03ddd450deb1 Mon Sep 17 00:00:00 2001
From: portikM <maksym.portianoi@konghq.com>
Date: Mon, 4 Dec 2023 10:04:36 -0500
Subject: [PATCH 19/22] fix(kcard): card actions alignment [KHCP-8971]

---
 src/components/KCard/KCard.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/KCard/KCard.vue b/src/components/KCard/KCard.vue
index 1559b7a05e..d0af9e6b7a 100644
--- a/src/components/KCard/KCard.vue
+++ b/src/components/KCard/KCard.vue
@@ -76,6 +76,7 @@ const showCardHeader = computed((): boolean => {
     .card-actions {
       display: flex;
       gap: var(--kui-space-30, $kui-space-30);
+      margin-left: var(--kui-space-auto, $kui-space-auto);
     }
   }
 

From c2d6cd58f50ba143b0e2382dda2780e47b780209 Mon Sep 17 00:00:00 2001
From: portikM <maksym.portianoi@konghq.com>
Date: Mon, 4 Dec 2023 10:06:27 -0500
Subject: [PATCH 20/22] fix(sandbox): minor fix [KHCP-8971]

---
 sandbox/pages/SandboxCard.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/sandbox/pages/SandboxCard.vue b/sandbox/pages/SandboxCard.vue
index 00c683b6b8..42c3daaac2 100644
--- a/sandbox/pages/SandboxCard.vue
+++ b/sandbox/pages/SandboxCard.vue
@@ -53,7 +53,7 @@
                 </KButton>
               </KDropdown>
             </template>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt <em>ut labore</em> et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <b>Excepteur sint occaecat cupidatat non proident</b>, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt <em>ut labore</em> et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <b>Excepteur sint occaecat cupidatat non proident</b>, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
             <template #footer>
               <KBadge appearance="success">
                 Published

From 2b166a2df52dc99d95f14c7cad686cce7c32cb25 Mon Sep 17 00:00:00 2001
From: portikM <maksym.portianoi@konghq.com>
Date: Mon, 4 Dec 2023 14:22:38 -0500
Subject: [PATCH 21/22] fix(kslideout): fix kcard style overrides [KHCP-8971]

---
 src/components/KSlideout/KSlideout.vue | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/KSlideout/KSlideout.vue b/src/components/KSlideout/KSlideout.vue
index 10cf7ec33b..c7f1f0dde7 100644
--- a/src/components/KSlideout/KSlideout.vue
+++ b/src/components/KSlideout/KSlideout.vue
@@ -55,7 +55,7 @@
         </button>
 
         <div class="content">
-          <KCard>
+          <KCard class="content-card">
             <slot />
           </KCard>
         </div>
@@ -160,11 +160,6 @@ const offsetTopValue = computed((): string => {
 @import '@/styles/tmp-variables';
 
 .k-slideout {
-  :deep(.k-card) {
-    border: none;
-    padding: var(--kui-space-110, $kui-space-110) var(--kui-space-90, $kui-space-90);
-  }
-
   .k-slideout-header-content {
     display: flex;
     .k-slideout-before-title,
@@ -243,6 +238,11 @@ const offsetTopValue = computed((): string => {
       &::-webkit-scrollbar {
         display: none;
       }
+
+      .content-card {
+        border: none;
+        padding: var(--kui-space-110, $kui-space-110) var(--kui-space-90, $kui-space-90);
+      }
     }
   }
 }

From b4c8a7bc815860915cacf0cc12cf185ad8c6cd5f Mon Sep 17 00:00:00 2001
From: portikM <maksym.portianoi@konghq.com>
Date: Mon, 4 Dec 2023 14:31:20 -0500
Subject: [PATCH 22/22] fix(kslideout): fix style overrides [KHCP-8971]

---
 src/components/KSlideout/KSlideout.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/KSlideout/KSlideout.vue b/src/components/KSlideout/KSlideout.vue
index c7f1f0dde7..07067b81b0 100644
--- a/src/components/KSlideout/KSlideout.vue
+++ b/src/components/KSlideout/KSlideout.vue
@@ -241,7 +241,6 @@ const offsetTopValue = computed((): string => {
 
       .content-card {
         border: none;
-        padding: var(--kui-space-110, $kui-space-110) var(--kui-space-90, $kui-space-90);
       }
     }
   }