diff --git a/docs/components/card.md b/docs/components/card.md
index 2cc0adde58..88eae87be9 100644
--- a/docs/components/card.md
+++ b/docs/components/card.md
@@ -79,15 +79,11 @@ String to be used as a title. Can also be [slotted](#slots).
 HTML element you want title to be rendered as. Defaults to `div`.
 
 Accepted values are:
-* `div`
-* `span`
-* `a`
-* `h1`
-* `h2`
-* `h3`
-* `h4`
-* `h5`
-* `h6`
+<ul>
+  <li v-for="tag in HeaderTags" :key="`${tag}-header-tag`">
+    <code>{{ tag }}</code>
+  </li>
+</ul>
 
 <KCard title-tag="h4" title="Card Title H4 Heading" />
 
@@ -201,4 +197,5 @@ Bottom drawer of the card. Useful for providing contextual information.
 
 <script setup lang="ts">
 import { MoreIcon } from '@kong/icons'
+import { HeaderTags } from '@/types'
 </script>
\ No newline at end of file
diff --git a/docs/components/collapse.md b/docs/components/collapse.md
index c65f45963f..6ef76159ba 100644
--- a/docs/components/collapse.md
+++ b/docs/components/collapse.md
@@ -1,61 +1,64 @@
 # Collapse
 
-**KCollapse** - A collapsible section.
+KCollapse is a collapsible section of content.
 
 <KCollapse trigger-label="View more info">
-  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
+  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.
 </KCollapse>
 
 ```html
 <KCollapse trigger-label="View more info">
-  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
+  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.
 </KCollapse>
 ```
 
 ## Props
 
-::: tip NOTE
-  We have wrapped the following all of the following examples in a `KCard` to better show the boundaries of the component. We have included the `KCard` code in the code snippet for the example directly below, but omitted it from following examples to simplify the code snippets.
-:::
-
 ### title
 
 Use this prop to apply a title to the collapsible section.
 
-<KCard>
-  <template #default>
-    <KCollapse title="Look Mah!" trigger-label="View more info">
-      Can you see me now?
-    </KCollapse>
-  </template>
-</KCard>
+<KCollapse title="Section title" trigger-label="View more info">
+  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.
+</KCollapse>
 
 ```html
-<KCard>
-  <template #default>
-    <KCollapse title="Look Mah!" trigger-label="View more info">
-      Can you see me now?
-    </KCollapse>
-  </template>
-</KCard>
+<KCollapse title="Section title" trigger-label="View more info">
+  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.
+</KCollapse>
 ```
 
+### titleTag
+
+Provide the HTML element tag name you want the title to be rendered inside. Defaults to `div`.
+
+Accepted values are:
+<ul>
+  <li v-for="tag in HeaderTags" :key="`${tag}-header-tag`">
+    <code>{{ tag }}</code>
+  </li>
+</ul>
+
 ### triggerAlignment
 
 You can customize the alignment of the trigger. `leading` or `trailing` (default) alignment is supported.
 If a `title` is specified, the trigger will be inline with `trailing` alignment, or displayed beneath the `title` with `leading` alignment.
 
-<KCard>
-  <template #default>
-    <KCollapse title="Look Mah!" trigger-label="What?" trigger-alignment="leading">
-      Can you see me now?
-    </KCollapse>
-  </template>
-</KCard>
+<KCollapse 
+  trigger-alignment="leading" 
+  title="Section title" 
+  trigger-label="View more info"
+>
+  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.
+</KCollapse>
 
 ```html
-<KCollapse title="Look Mah!" trigger-label="What?" trigger-alignment="leading">
-  Can you see me now?
+<KCollapse 
+  trigger-alignment="leading" 
+  title="Section title" 
+  trigger-label="View more info"
+>
+  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.
 </KCollapse>
 ```
 
@@ -63,33 +66,25 @@ If a `title` is specified, the trigger will be inline with `trailing` alignment,
 
 Use this prop to customize the content to that will toggle the collapsed state of the component. The label will be displayed to the right of a caret that indicates the state of the hidden content.
 
-<KCard>
-  <template #default>
-    <KCollapse trigger-label="I am the trigger">
-      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
-    </KCollapse>
-  </template>
-</KCard>
+<KCollapse trigger-label="Reveal more info">
+  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.
+</KCollapse>
 
 ```html
-<KCollapse trigger-label="I am the trigger">
-  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
+<KCollapse trigger-label="Reveal more info">
+  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.
 </KCollapse>
 ```
 
 If no label is provided, only a caret will be displayed.
 
-<KCard>
-  <template #default>
-    <KCollapse>
-      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
-    </KCollapse>
-  </template>
-</KCard>
+<KCollapse>
+  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.
+</KCollapse>
 
 ```html
 <KCollapse>
-  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
+  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.
 </KCollapse>
 ```
 
@@ -97,161 +92,147 @@ If no label is provided, only a caret will be displayed.
 
 KCollapse can be controlled with `v-model`.
 
-<div class="collapse-wrapper">
-  <div>
-    <KLabel>Is Collapsed:&nbsp;</KLabel>
-    {{ myIsCollapsed }}
-  </div>
-  <KButton @click="myIsCollapsed = !myIsCollapsed">Another trigger</KButton>
-</div>
-<KCard>
-  <template #default>
-    <KCollapse trigger-label="View more info" v-model="myIsCollapsed">
-      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
-    </KCollapse>
-  </template>
-</KCard>
-
-```html
-<div class="collapse-wrapper">
-  <div>
-    <KLabel>Is Collapsed:&nbsp;</KLabel>
-    {{ myIsCollapsed }}
+<KCollapse trigger-label="View more info" v-model="vModelCollapsed">
+  <div class="vertical-container">
+    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.
+    <div>
+      <KButton @click="vModelCollapsed = true">Collapse</KButton>
+    </div>
   </div>
-  <KButton @click="myIsCollapsed = !myIsCollapsed">Another trigger</KButton>
-</div>
-
-<KCollapse trigger-label="View more info" v-model="myIsCollapsed">
-  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
 </KCollapse>
+
+```vue
+<template>
+  <KCollapse v-model="isCollapsed" trigger-label="View more info">
+    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.
+    
+    <KButton @click="isCollapsed = true">Collapse</KButton>
+  </KCollapse>
+</template>
+
+<script setup lang="ts">
+const isCollapsed = ref<boolean>(true)
+</script>
 ```
 
 ### modelValue
 
 To set the default state (collapsed or expanded) without binding to v-model you can use the `modelValue` prop.
 
-<KCard>
-  <template #default>
-    <KCollapse title="Look Mah!" :model-value="false">
-      I am expanded by default
-    </KCollapse>
-  </template>
-</KCard>
+<KCollapse :model-value="false" trigger-label="View more info">
+  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.
+</KCollapse>
 
 ```html
-<KCollapse title="Look Mah!" :model-value="false">
-  I am expanded by default
+<KCollapse :model-value="false" trigger-label="View more info">
+  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.
 </KCollapse>
 ```
 
 ## Slots
 
-- `default` - Content to be hidden or shown when clicking the trigger
-- `visible-content` - Content displayed above the collapsible content that is always visible
-- `trigger-content` - Contents of the trigger link anchor; click handling is built-in
-- `trigger` - Completely control the trigger, including managing click events
-  - `isCollapsed` boolean and `toggle` function available as slot params
+### default
 
-::: tip NOTE
-  You may utilize the `trigger-content` slot (to control the anchor text) or the `trigger` slot (to control the content of the entire trigger), but not both; if utilizing the `trigger` slot the `trigger-content` slot will not render.
-:::
+Content to be hidden or shown when clicking the trigger.
+
+### visible-content
 
-<KCard>
-  <template #default>
-    <KCollapse title="Look Mah!">
-      <template #trigger-content>
-        <div class="trigger-wrapper">
-          <KIcon icon="help" color="currentColor" :size="KUI_ICON_SIZE_30" class="icon-style" />
-          Toggle
-        </div>
-      </template>
-      <template #visible-content>
-        <KCard>
-          I am content that is always visible
-        </KCard>
-      </template>
-      <KCard>
-        I am only visible when expanded
-      </KCard>
-    </KCollapse>
+Content displayed above the collapsible content that is always visible.
+
+<KCollapse title="Section title" trigger-label="View more info">
+  <template #visible-content>
+    This content is always visible.
   </template>
-</KCard>
+
+  This is hidden content. 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.
+</KCollapse>
 
 ```html
-<KCollapse title="Look Mah!">
-  <template #trigger-content>
-    <div class="trigger-wrapper">
-      <KIcon icon="help" class="icon-style" />
-      Toggle
-    </div>
-  </template>
+<KCollapse title="Section title" trigger-label="View more info">
   <template #visible-content>
-    <KCard>
-      I am content that is always visible
-    </KCard>
+    This content is always visible.
   </template>
 
-  <KCard>
-    I am only visible when expanded
-  </KCard>
+  This is the hidden content. 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.
 </KCollapse>
 ```
 
-If you want complete control of the trigger content and events, you can use the `trigger` slot.
-We provide the `isCollapsed` Vue 'ref' and the `toggle()` function as slot props.
-
-<KCard>
-  <template #default>
-    <KCollapse title="Look Mah!">
-      <template #trigger="{ isCollapsed, toggle }">
-        <KButton @click="toggle()">{{ isCollapsed ? 'Click to expand' : 'Click to collapse' }}</KButton>
-      </template>
-      Can you see me now?
-    </KCollapse>
+### trigger-content
+
+Contents of the trigger link anchor; click handling is built-in.
+
+<KCollapse>
+  <template #trigger-content>
+    Custom trigger content
   </template>
-</KCard>
+
+  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.
+</KCollapse>
 
 ```html
-<KCollapse title="Look Mah!">
+<KCollapse>
+  <template #trigger-content>
+    Custom trigger content
+  </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.
+</KCollapse>
+```
+
+### trigger
+
+Completely control the trigger, including managing click events. Slot props:
+
+- `isCollapsed` - boolean that reflects current state of collapse component
+- `toggle` - function to toggle collapse state
+
+::: tip NOTE
+You may utilize the `trigger-content` slot (to control the anchor text) or the `trigger` slot (to control the content of the entire trigger), but not both; when `trigger` slot is used, the `trigger-content` slot will not render.
+:::
+
+<KCollapse>
   <template #trigger="{ isCollapsed, toggle }">
     <KButton @click="toggle()">
-      {{ isCollapsed ? 'Click to expand' : 'Click to collapse' }}
+      {{ isCollapsed ? 'Expand' : 'Collapse' }}
     </KButton>
   </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.
+</KCollapse>
 
-  Can you see me now?
+```html
+<KCollapse>
+  <template #trigger="{ isCollapsed, toggle }">
+    <KButton @click="toggle()">
+      {{ isCollapsed ? 'Expand' : 'Collapse' }}
+    </KButton>
+  </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.
 </KCollapse>
 ```
 
 ## Events
 
-- `@toggled` - Emitted when the trigger is clicked
-- `@update:modelValue` - Emitted when the `modelValue` is changed
+### toggle
 
-<script lang="ts">
-import { defineComponent } from 'vue'
-import { KUI_ICON_SIZE_30 } from '@kong/design-tokens'
+Emitted when the trigger is clicked.
 
-export default defineComponent({
-  data() {
-    return {
-      myIsCollapsed: true
-    }
-  },
-})
-</script>
+### update:modelValue
 
-<style lang="scss" scoped>
-.collapse-wrapper {
-  margin-bottom: $kui-space-50 !important;
-}
+Emitted when the `modelValue` is changed.
 
-.icon-style {
-  margin-right: $kui-space-40 !important;
-  color: $kui-color-text-primary;
-}
+<script setup lang="ts">
+import { ref } from 'vue'
+import { HeaderTags } from '@/types'
+
+const vModelCollapsed = ref<boolean>(true)
+</script>
 
-.trigger-wrapper {
-  display: flex !important;
+<style lang="scss" scoped>
+.vertical-container {
+  display: flex;
+  flex-direction: column;
+  gap: $kui-space-50;
 }
 </style>
diff --git a/docs/guide/migrating-to-version-9.md b/docs/guide/migrating-to-version-9.md
index 9afa3eb958..33c235ec83 100644
--- a/docs/guide/migrating-to-version-9.md
+++ b/docs/guide/migrating-to-version-9.md
@@ -258,6 +258,21 @@ Kongponents styles are no longer designed to be utilized standalone, separately
 
 ### KCollapse
 
+#### Events
+
+* `toggled` event was renamed to `toggle`
+
+#### Structure
+
+* `k-collapse-heading` class has been replaced with `collapse-heading`
+* `k-collapse-title` class and `data-testid` attribute has been replaced with `collapse-title`
+* `k-collapse-trigger` class has been replaced with `collapse-trigger` 
+* `k-collapse-trigger-content` class and `data-testid` attribute has been replaced with `collapse-trigger-content`
+* `k-collapse-trigger-label` class and `data-testid` attribute has been replaced with `collapse-trigger-label`
+* `k-collapse-trigger-chevron` class has been replaced with `collapse-trigger-icon`
+* `k-collapse-trigger-icon` class and `data-testid` attribute has been replaced with `collapse-trigger-icon`
+* `k-collapse-visible-content` class and `data-testid` attribute has been replaced with `collapse-visible-content`
+* `k-collapse-hidden-content` class and `data-testid` attribute has been replaced with `collapse-hidden-content`
 
 ### KDateTimePicker
 
diff --git a/sandbox/index.ts b/sandbox/index.ts
index 27ad2ea069..8a1277906b 100644
--- a/sandbox/index.ts
+++ b/sandbox/index.ts
@@ -23,6 +23,7 @@ const sandboxAppLinks: SandboxNavigationItem[] = ([
   { name: 'KCatalog', to: { name: 'catalog' } },
   { name: 'KCheckbox', to: { name: 'checkbox' } },
   { name: 'KCodeBlock', to: { name: 'codeblock' } },
+  { name: 'KCollapse', to: { name: 'collapse' } },
   { name: 'KCopy', to: { name: 'copy' } },
   { name: 'KDateTimePicker', to: { name: 'datetimepicker' } },
   { name: 'KDropdown', to: { name: 'dropdown' } },
diff --git a/sandbox/pages/SandboxCollapse.vue b/sandbox/pages/SandboxCollapse.vue
new file mode 100644
index 0000000000..cd0e76585b
--- /dev/null
+++ b/sandbox/pages/SandboxCollapse.vue
@@ -0,0 +1,82 @@
+<template>
+  <SandboxLayout
+    :links="inject('app-links', [])"
+    title="KPagination"
+  >
+    <div class="kpagination-sandbox">
+      <!-- Figma -->
+      <SandboxTitleComponent
+        is-subtitle
+        title="Figma"
+      />
+      <KExternalLink href="https://www.figma.com/file/Yze0SWXl5nKjR0rFdilljK/Components?type=design&node-id=2020%3A11254&mode=dev&t=z4m6LiZVAeHHwxSH-1">
+        Figma
+      </KExternalLink>
+
+      <!-- Props -->
+      <SandboxTitleComponent
+        is-subtitle
+        title="Props"
+      />
+      <SandboxSectionComponent title="KCollapse title">
+        <KCollapse title="KCollapse title">
+          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.
+        </KCollapse>
+      </SandboxSectionComponent>
+      <SandboxSectionComponent title="triggerAlignment">
+        <KCollapse
+          title="KCollapse title"
+          trigger-alignment="leading"
+          trigger-label="Trigger label"
+        >
+          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.
+        </KCollapse>
+      </SandboxSectionComponent>
+      <SandboxSectionComponent title="triggerLabel">
+        <KCollapse
+          trigger-label="Trigger label"
+        >
+          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.
+        </KCollapse>
+      </SandboxSectionComponent>
+
+      <!-- Slots -->
+      <SandboxTitleComponent
+        is-subtitle
+        title="Slots"
+      />
+      <SandboxSectionComponent title="visible-content">
+        <KCollapse title="KCollapse title">
+          <template #visible-content>
+            This is the visible content
+          </template>
+          This is the hidden content
+        </KCollapse>
+      </SandboxSectionComponent>
+      <SandboxSectionComponent title="trigger-content">
+        <KCollapse>
+          <template #trigger-content>
+            Custom trigger content
+          </template>
+          This is the hidden content
+        </KCollapse>
+      </SandboxSectionComponent>
+      <SandboxSectionComponent title="trigger">
+        <KCollapse>
+          <template #trigger="{ isCollapsed, toggle }">
+            <KButton @click="toggle()">
+              {{ isCollapsed ? 'Expand' : 'Collapse' }}
+            </KButton>
+          </template>
+          This is the hidden content
+        </KCollapse>
+      </SandboxSectionComponent>
+    </div>
+  </SandboxLayout>
+</template>
+
+<script setup lang="ts">
+import { inject } from 'vue'
+import SandboxTitleComponent from '../components/SandboxTitleComponent.vue'
+import SandboxSectionComponent from '../components/SandboxSectionComponent.vue'
+</script>
diff --git a/sandbox/router/sandbox-routes.ts b/sandbox/router/sandbox-routes.ts
index 00d3451fe2..167d04b0c7 100644
--- a/sandbox/router/sandbox-routes.ts
+++ b/sandbox/router/sandbox-routes.ts
@@ -56,6 +56,12 @@ const componentRoutes: RouteRecordRaw[] = [
     meta: { title: 'Code Block Sandbox' },
     component: () => import('../pages/SandboxCodeBlock.vue'),
   },
+  {
+    path: '/collapse',
+    name: 'collapse',
+    meta: { title: 'Collapse Sandbox' },
+    component: () => import('../pages/SandboxCollapse.vue'),
+  },
   {
     path: '/copy',
     name: 'copy',
diff --git a/src/components/KCollapse/KCollapse.cy.ts b/src/components/KCollapse/KCollapse.cy.ts
index 7e75d5bda2..4bde2a5e11 100644
--- a/src/components/KCollapse/KCollapse.cy.ts
+++ b/src/components/KCollapse/KCollapse.cy.ts
@@ -18,9 +18,9 @@ describe('KCollapse', () => {
       },
     })
 
-    cy.getTestId('k-collapse-title').should('exist')
-    cy.getTestId('k-collapse-title').should('contain.text', title)
-    cy.getTestId('k-collapse-trigger-label').should('contain.text', triggerLabel)
+    cy.getTestId('collapse-title').should('exist')
+    cy.getTestId('collapse-title').should('contain.text', title)
+    cy.getTestId('collapse-trigger-label').should('contain.text', triggerLabel)
   })
 
   it('displays a caret for trigger if no label provided', () => {
@@ -32,7 +32,7 @@ describe('KCollapse', () => {
       },
     })
 
-    cy.getTestId('k-collapse-trigger-icon').should('exist')
+    cy.getTestId('collapse-trigger-icon').should('exist')
   })
 
   it('allows using leading trigger alignment', () => {
@@ -49,8 +49,8 @@ describe('KCollapse', () => {
       },
     })
 
-    cy.getTestId('k-collapse-trigger-label').should('contain.text', triggerLabel)
-    cy.get('.k-collapse-heading').should('not.have.class', 'has-trailing-trigger')
+    cy.getTestId('collapse-trigger-label').should('contain.text', triggerLabel)
+    cy.get('.collapse-heading').should('not.have.class', 'has-trailing-trigger')
   })
 
   it('correctly shows and hides content with trigger click', () => {
@@ -66,12 +66,12 @@ describe('KCollapse', () => {
       },
     })
 
-    cy.getTestId('k-collapse-trigger-label').should('contain.text', triggerLabel)
+    cy.getTestId('collapse-trigger-label').should('contain.text', triggerLabel)
     // hidden by default
-    cy.getTestId('k-collapse-hidden-content').should('not.be.visible')
+    cy.getTestId('collapse-hidden-content').should('not.be.visible')
     // visible when clicked
-    cy.getTestId('k-collapse-trigger-label').click()
-    cy.getTestId('k-collapse-hidden-content').should('be.visible')
+    cy.getTestId('collapse-trigger-label').click()
+    cy.getTestId('collapse-hidden-content').should('be.visible')
   })
 
   it('allows content to be expanded by default', () => {
@@ -86,13 +86,13 @@ describe('KCollapse', () => {
       },
     })
 
-    cy.getTestId('k-collapse-trigger-content').should('exist')
+    cy.getTestId('collapse-trigger-content').should('exist')
     // visible by default
-    cy.getTestId('k-collapse-hidden-content').should('be.visible')
-    cy.getTestId('k-collapse-hidden-content').should('contain.text', collapseContent)
+    cy.getTestId('collapse-hidden-content').should('be.visible')
+    cy.getTestId('collapse-hidden-content').should('contain.text', collapseContent)
     // hidden when clicked
-    cy.getTestId('k-collapse-trigger-content').click()
-    cy.getTestId('k-collapse-hidden-content').should('not.be.visible')
+    cy.getTestId('collapse-trigger-content').click()
+    cy.getTestId('collapse-hidden-content').should('not.be.visible')
   })
 
   it('renders proper content when using slots', () => {
@@ -108,14 +108,14 @@ describe('KCollapse', () => {
       },
     })
 
-    cy.getTestId('k-collapse-trigger-content').should('contain.text', triggerContent)
-    cy.getTestId('k-collapse-visible-content').should('exist')
-    cy.getTestId('k-collapse-visible-content').should('contain.text', visibleContent)
+    cy.getTestId('collapse-trigger-content').should('contain.text', triggerContent)
+    cy.getTestId('collapse-visible-content').should('exist')
+    cy.getTestId('collapse-visible-content').should('contain.text', visibleContent)
     // hidden by default
-    cy.getTestId('k-collapse-hidden-content').should('not.be.visible')
+    cy.getTestId('collapse-hidden-content').should('not.be.visible')
     // visible when clicked
-    cy.getTestId('k-collapse-trigger-content').click()
-    cy.getTestId('k-collapse-hidden-content').should('be.visible')
-    cy.getTestId('k-collapse-hidden-content').should('contain.text', collapseContent)
+    cy.getTestId('collapse-trigger-content').click()
+    cy.getTestId('collapse-hidden-content').should('be.visible')
+    cy.getTestId('collapse-hidden-content').should('contain.text', collapseContent)
   })
 })
diff --git a/src/components/KCollapse/KCollapse.vue b/src/components/KCollapse/KCollapse.vue
index 7a1cdbcd6c..cdf0aedb6a 100644
--- a/src/components/KCollapse/KCollapse.vue
+++ b/src/components/KCollapse/KCollapse.vue
@@ -1,81 +1,80 @@
 <template>
   <div class="k-collapse">
     <div
-      class="k-collapse-heading"
+      class="collapse-heading"
       :class="{ 'has-trailing-trigger': trailingTrigger }"
     >
-      <div
+      <component
+        :is="titleTag"
         v-if="title"
-        class="k-collapse-title"
-        :class="{ 'has-trailing-trigger': trailingTrigger }"
-        data-testid="k-collapse-title"
+        class="collapse-title"
+        data-testid="collapse-title"
       >
         {{ title }}
-      </div>
-      <div
-        class="k-collapse-trigger"
-        :class="{ 'has-trailing-trigger': trailingTrigger }"
-      >
+      </component>
+      <div class="collapse-trigger">
         <slot
           :is-collapsed="collapsedState"
           name="trigger"
           :toggle="toggleDisplay"
         >
-          <a
-            class="k-collapse-trigger-content"
-            data-testid="k-collapse-trigger-content"
-            href="#"
+          <button
+            :aria-controls="contentId"
+            :aria-expanded="!collapsedState"
+            :aria-label="triggerLabel ? undefined : 'Toggle content'"
+            class="collapse-trigger-content"
+            data-testid="collapse-trigger-content"
             role="button"
             @click.prevent.stop="toggleDisplay()"
           >
             <slot name="trigger-content">
+              <ChevronRightIcon
+                class="collapse-trigger-icon"
+                :class="{ 'collapse-expanded': !collapsedState }"
+                data-testid="collapse-trigger-icon"
+                decorative
+                :size="KUI_ICON_SIZE_40"
+              />
               <span
                 v-if="triggerLabel"
-                class="k-collapse-trigger-label"
-                data-testid="k-collapse-trigger-label"
+                class="collapse-trigger-label"
+                data-testid="collapse-trigger-label"
               >
-                <KIcon
-                  class="k-collapse-trigger-chevron"
-                  :icon="collapseIcon"
-                  :size="KUI_ICON_SIZE_20"
-                />
-                <span>{{ triggerLabel }}</span>
+                {{ triggerLabel }}
               </span>
-              <KIcon
-                v-else
-                class="k-collapse-trigger-icon k-collapse-trigger-chevron"
-                data-testid="k-collapse-trigger-icon"
-                :icon="collapseIcon"
-              />
             </slot>
-          </a>
+          </button>
         </slot>
       </div>
     </div>
     <div
       v-if="hasVisibleContent"
-      class="k-collapse-visible-content"
-      data-testid="k-collapse-visible-content"
+      class="collapse-visible-content"
+      data-testid="collapse-visible-content"
     >
       <slot name="visible-content" />
     </div>
-    <div
-      v-show="!collapsedState"
-      class="k-collapse-hidden-content"
-      data-testid="k-collapse-hidden-content"
-    >
-      <slot />
-    </div>
+    <Transition name="kongponents-fade-transition">
+      <div
+        v-show="!collapsedState"
+        :id="contentId"
+        class="collapse-hidden-content"
+        data-testid="collapse-hidden-content"
+      >
+        <slot name="default" />
+      </div>
+    </Transition>
   </div>
 </template>
 
 <script lang="ts" setup>
-import KIcon from '@/components/KIcon/KIcon.vue'
 import type { PropType } from 'vue'
 import { computed, ref, useSlots, watch } from 'vue'
-import type { TriggerAlignment } from '@/types'
-import { TriggerAlignmentArray } from '@/types'
-import { KUI_ICON_SIZE_20 } from '@kong/design-tokens'
+import type { TriggerAlignment, HeaderTag } from '@/types'
+import { TriggerAlignmentArray, HeaderTags } from '@/types'
+import { ChevronRightIcon } from '@kong/icons'
+import { KUI_ICON_SIZE_40 } from '@kong/design-tokens'
+import { v4 as uuidv4 } from 'uuid'
 
 const props = defineProps({
   // Is the KCollapse collapsed? Defaults to true-->
@@ -89,6 +88,11 @@ const props = defineProps({
     required: false,
     default: '',
   },
+  titleTag: {
+    type: String as PropType<HeaderTag>,
+    default: 'div',
+    validator: (value: HeaderTag): boolean => HeaderTags.includes(value),
+  },
   triggerLabel: {
     type: String,
     required: false,
@@ -103,10 +107,12 @@ const props = defineProps({
 })
 
 const emit = defineEmits<{
-  (e: 'toggled', value: boolean): void;
+  (e: 'toggle', value: boolean): void;
   (e: 'update:modelValue', value: boolean): void;
 }>()
 
+const contentId = uuidv4()
+
 const isCollapsed = ref<boolean>(true)
 const modelValueChanged = ref<boolean>(false)
 
@@ -128,8 +134,6 @@ const modelComputed = computed({
 // Use the modelValue only if the value hasn't been changed
 const collapsedState = computed((): boolean => modelValueChanged.value ? isCollapsed.value : props.modelValue)
 
-const collapseIcon = computed((): string => collapsedState.value ? 'chevronRight' : 'chevronDown')
-
 const toggleDisplay = (isToggled?: boolean): void => {
   if (!modelValueChanged.value) {
     // make sure we match modelValue first time in
@@ -140,7 +144,7 @@ const toggleDisplay = (isToggled?: boolean): void => {
 
   modelValueChanged.value = true
 
-  emit('toggled', isCollapsed.value)
+  emit('toggle', isCollapsed.value)
   emit('update:modelValue', isCollapsed.value)
 }
 
@@ -153,79 +157,77 @@ watch(modelComputed, (newVal, oldVal) => {
 </script>
 
 <style lang="scss" scoped>
-
 .k-collapse {
-  width: 100% !important;
-  .k-collapse-heading {
-    display: block !important;
-    margin-bottom: var(--kui-space-50, $kui-space-50) !important;
-
-    &.has-trailing-trigger {
-      display: flex !important;
+  box-sizing: border-box;
+  font-family: var(--kui-font-family-text, $kui-font-family-text);
+  width: 100%;
+
+  .collapse-heading {
+    display: block;
+    margin-bottom: var(--kui-space-50, $kui-space-50);
+
+    .collapse-title {
+      color: var(--kui-color-text, $kui-color-text);
+      font-size: var(--kui-font-size-40, $kui-font-size-40);
+      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-30, $kui-line-height-30);
+      margin: var(--kui-space-0, $kui-space-0);
+      margin-bottom: var(--kui-space-40, $kui-space-40);
     }
-  }
-  .k-collapse-title {
-    font-size: var(--kui-font-size-50, $kui-font-size-50);
-    font-weight: var(--kui-font-weight-semibold, $kui-font-weight-semibold);
-    margin-bottom: var(--kui-space-40, $kui-space-40) !important;
 
-    &.has-trailing-trigger {
-      margin-right: var(--kui-space-auto, $kui-space-auto) !important;
-    }
-  }
-
-  .k-collapse-trigger {
-    cursor: pointer;
-
-    &.has-trailing-trigger {
-      margin-left: var(--kui-space-auto, $kui-space-auto);
-    }
+    .collapse-trigger {
+      cursor: pointer;
+
+      .collapse-trigger-content {
+        @include defaultButtonReset;
+
+        align-items: center;
+        border-radius: var(--kui-border-radius-20, $kui-border-radius-20);
+        color: var(--kui-color-text-primary, $kui-color-text-primary);
+        display: flex;
+        font-size: var(--kui-font-size-30, $kui-font-size-30);
+        font-weight: var(--kui-font-weight-semibold, $kui-font-weight-semibold);
+        gap: var(--kui-space-20, $kui-space-20);
+        line-height: var(--kui-line-height-30, $kui-line-height-30);
+        outline: none;
+        padding: var(--kui-space-10, $kui-space-10);
+
+        &:hover:not(:focus):not(:active) {
+          color: var(--kui-color-text-primary-strong, $kui-color-text-primary-strong);
+        }
 
-    .k-collapse-trigger-content {
-      color: var(--kui-color-text-primary, $kui-color-text-primary);
-      display: inline-block !important;
-      font-size: var(--kui-font-size-30, $kui-font-size-30);
-      font-weight: var(--kui-font-weight-semibold, $kui-font-weight-semibold);
-    }
-  }
-}
-</style>
+        &:focus-visible {
+          box-shadow: var(--kui-shadow-focus, $kui-shadow-focus);
+        }
 
-<style lang="scss">
+        &:active {
+          color: var(--kui-color-text-primary-stronger, $kui-color-text-primary-stronger);
+        }
 
-.k-collapse {
-  .k-collapse-trigger {
-    .k-collapse-trigger-content {
-      .k-collapse-trigger-chevron {
-        margin-right: var(--kui-space-20, $kui-space-20) !important;
-        &.kong-icon {
-          &.kong-icon-chevronDown svg path,
-          &.kong-icon-chevronRight svg path {
-            stroke: var(--kui-color-text-primary, $kui-color-text-primary);
+        .collapse-trigger-icon {
+          &.collapse-expanded {
+            transform: rotate(90deg);
           }
         }
       }
+    }
 
-      .k-collapse-trigger-icon.kong-icon {
-        padding-right: var(--kui-space-0, $kui-space-0);
-      }
-
-      .k-collapse-trigger-label {
-        .kong-icon {
-          position: relative;
-          top: 2px;
-        }
-      }
+    &.has-trailing-trigger {
+      display: flex;
+      justify-content: space-between;
     }
   }
 
-  .k-collapse-visible-content {
-    margin-bottom: var(--kui-space-60, $kui-space-60) !important;
-    width: 100% !important;
+  .collapse-visible-content,
+  .collapse-hidden-content {
+    @include bodyText;
+
+    width: 100%;
   }
 
-  .k-collapse-hidden-content {
-    width: 100% !important;
+  .collapse-hidden-content {
+    margin-top: var(--kui-space-40, $kui-space-40);
   }
 }
 </style>
diff --git a/src/types/card.ts b/src/types/card.ts
index 5ca46b46f7..84cef2dbe3 100644
--- a/src/types/card.ts
+++ b/src/types/card.ts
@@ -1,3 +1,3 @@
-export type HeaderTag = 'div' | 'span' | 'a' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
+export type HeaderTag = 'div' | 'p' | 'span' | 'a' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
 
-export const HeaderTags: HeaderTag[] = ['div', 'span', 'a', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6']
+export const HeaderTags: HeaderTag[] = ['div', 'p', 'span', 'a', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6']