diff --git a/docs/pages/kcard.vue b/docs/pages/kcard.vue
index 0e1dcef4e..b49ff0012 100644
--- a/docs/pages/kcard.vue
+++ b/docs/pages/kcard.vue
@@ -48,7 +48,7 @@
           { text: 'KCard and KCardGrid', href: '#k-card-and-grid' },
           { text: 'Title', href: '#title' },
           { text: 'Accessibility', href: '#a11y' },
-          { text: 'Navigation', href: '#navigation' },
+          { text: 'Click event and navigation', href: '#click-navigation' },
           { text: 'Layout', href: '#layout' },
           { text: 'Responsiveness', href: '#responsiveness' },
           { text: 'Content slots', href: '#content-slots' },
@@ -214,28 +214,56 @@
       <p><em>Always test semantics, accessibility, and right-to-left of the final cards.</em></p>
 
       <h3>
-        Navigation
-        <DocsAnchorTarget anchor="#navigation" />
+        Click event and navigation
+        <DocsAnchorTarget anchor="#click-navigation" />
       </h3>
 
-      <p><code>KCard</code>'s entire area is clickable, navigating to a target provided via the <code>to</code> prop as a regular Vue route object. <DocsToggleButton contentId="more-navigation" /></p>
-
-      <DocsToggleContent id="more-navigation">
-        <!-- eslint-disable -->
-        <DocsShowCode language="html">
-          <KCardGrid ...>
-            <KCard
-              :to="{ name: 'NamedRoute' }"
-              ...
-            />
-            <KCard
-              :to="{ path: '/kcard' }"
-              ...
-            />
-          </KCardGrid>
-        </DocsShowCode>
-        <!-- eslint-enable -->
-      </DocsToggleContent>
+      <p><code>KCard</code>'s entire area is clickable.</p>
+
+      <p>You can use the <code>to</code> prop to navigate to a URL when the card is clicked.</p>
+
+      <DocsShowCode language="html">
+        <KCardGrid ...>
+          <KCard
+            ...
+            :to="{ name: 'NamedRoute' }"
+          />
+          <KCard
+            ...
+            :to="{ path: '/kcard' }"
+          />
+        </KCardGrid>
+      </DocsShowCode>
+
+      <p>Listen to the <code>click</code> event to perform a custom action (whether or not the <code>to</code> prop is used).</p>
+
+      <DocsShowCode language="html">
+        <KCardGrid ...>
+          <KCard
+            ...
+            @click="onClick"
+          />
+          <KCard
+            ...
+            :to="{ path: '/kcard' }"
+            @click="onClick"
+          />
+        </KCardGrid>
+      </DocsShowCode>
+
+      <!-- eslint-disable -->
+      <DocsShowCode language="javascript">
+        export default {
+          methods() {
+            onClick() {
+              console.log('Card clicked');
+            }
+          },
+        };
+      </DocsShowCode>
+      <!-- eslint-enable -->
+
+      <p>Note that long clicks are ignored to allow for text selection.</p>
 
       <p>See <DocsInternalLink text="Interactive elements" href="#interactive-elements" /> to learn how to disable card navigation in favor of a custom handler when elements like buttons are rendered within a card.</p>
 
@@ -563,7 +591,7 @@
         <DocsAnchorTarget anchor="#interactive-elements" />
       </h3>
 
-      <p>When adding interactive elements like buttons to a card via slots, apply the <code>.stop</code> event modifier to their <code>@click</code> event to prevent the card from navigating away when clicked.</p>
+      <p>When adding interactive elements like buttons to a card via slots, apply the <code>.stop</code> event modifier to their <code>@click</code> event to prevent the card <DocsInternalLink text="click event and navigation" href="#click-navigation" />.</p>
 
       <p><em>This applies to all slot content, but considering accessibility is especially important with interactive elements.</em> For instance, <code>ariaLabel</code> is applied to the bookmark icon button in the following example so that screenreaders can communicate its purpose. In production, more work would be needed to indicate the bookmark's toggled state. Always assess on a case-by-case basis.</p>
 
diff --git a/lib/cards/KCard.vue b/lib/cards/KCard.vue
index 7a7e93084..340250c8e 100644
--- a/lib/cards/KCard.vue
+++ b/lib/cards/KCard.vue
@@ -36,12 +36,13 @@
                   selecting card's content in `onClick`)
         -->
         <router-link
+          v-if="to"
           event=""
           :to="to"
           draggable="false"
-          class="link"
-          @focus.native="onLinkFocus"
-          @blur.native="onLinkBlur"
+          class="title"
+          @focus.native="onTitleFocus"
+          @blur.native="onTitleBlur"
         >
           <!-- @slot Optional slot section containing the title contents, should not contain a heading element. -->
           <slot 
@@ -54,6 +55,40 @@
             :maxLines="titleMaxLines"
           />
         </router-link>
+        <!--
+          Set tabindex to 0 to make title focusable so we
+          can use the same focus ring logic like when title
+          is a router-link. Relatedly set data-focus so that
+          the trackInputModality can set modality to keyboard
+          to make the focus ring display correctly.
+
+          `aria-label` is needed in this mode otherwise some
+          screenreaders don't announce the text in KTextTruncator,
+          for mysterious reasons (likely some internal screenreader logic)
+          -->
+        <span
+          v-else
+          tabindex="0"
+          data-focus="true"
+          class="title"
+          :aria-label="title"
+          @focus="onTitleFocus"
+          @blur="onTitleBlur"
+        >
+          <!-- since we're using `aria-label`, hide all unnecessary elements -->
+          <span aria-hidden="true">
+            <!-- @slot Optional slot section containing the title contents, should not contain a heading element. -->
+            <slot 
+              v-if="$slots.title"
+              name="title"
+            ></slot>
+            <KTextTruncator
+              v-else
+              :text="title"
+              :maxLines="titleMaxLines"
+            />
+          </span>
+        </span>
       </component>
 
       <div
@@ -171,14 +206,6 @@
       };
     },
     props: {
-      /**
-       * A Vue route object that defines
-       * where the card click should navigate.
-       */
-      to: {
-        type: Object,
-        required: true,
-      },
       /**
        * HTML heading level in range (h2 - h6) for the title
        */
@@ -194,6 +221,15 @@
           }
         },
       },
+      /**
+       * A Vue route object. If provided, card click
+       * will navigate to the target.
+       */
+      to: {
+        type: Object,
+        required: false,
+        default: null,
+      },
       /**
        * Card title
        */
@@ -293,13 +329,13 @@
       return {
         mouseDownTime: 0,
         ThumbnailDisplays,
-        isLinkFocused: false,
+        isTitleFocused: false,
         thumbnailError: false,
       };
     },
     computed: {
       focusStyle() {
-        return this.isLinkFocused ? this.$coreOutline : {};
+        return this.isTitleFocused ? this.$coreOutline : {};
       },
       hasAboveTitleArea() {
         return this.$slots.aboveTitle || this.preserveAboveTitle;
@@ -436,23 +472,26 @@
       }
     },
     methods: {
-      onLinkFocus() {
+      onTitleFocus() {
         if (this.isSkeleton) {
           return;
         }
-        this.isLinkFocused = true;
+        this.isTitleFocused = true;
       },
-      onLinkBlur() {
-        this.isLinkFocused = false;
+      onTitleBlur() {
+        this.isTitleFocused = false;
       },
       onThumbnailError() {
         this.thumbnailError = true;
       },
-      navigate() {
-        if (this.isSkeleton) {
-          return;
+      clickHandler() {
+        /**
+         * Emitted when a card is clicked
+         */
+        this.$emit('click');
+        if (this.to) {
+          this.$router.push(this.to);
         }
-        this.$router.push(this.to);
       },
       onFocus(e) {
         /**
@@ -467,7 +506,7 @@
         this.$emit('hover', e);
       },
       onEnter() {
-        this.navigate();
+        this.clickHandler();
       },
       onMouseDown() {
         this.mouseDownTime = new Date().getTime();
@@ -482,10 +521,10 @@
         // Calculate the time difference between the mouse button press and release.
         // If the time difference is greater than or equal to 200 milliseconds,
         // it means that the mouse button was pressed and held for a longer time,
-        // which is not typically interpreted as a click event. Do not navigate
-        // in such case.
+        // which is not typically interpreted as a click event so do not run
+        // the click handler.
         if (mouseUpTime - this.mouseDownTime < 200) {
-          this.navigate();
+          this.clickHandler();
         } else {
           return;
         }
@@ -581,7 +620,7 @@
     height: 100%;
   }
 
-  .link {
+  .title {
     display: inline-block; // allows title placeholder in the skeleton card
     width: 100%; // allows title placeholder in the skeleton card
     color: inherit;
diff --git a/lib/cards/SkeletonCard.vue b/lib/cards/SkeletonCard.vue
index 516fbe401..78a362499 100644
--- a/lib/cards/SkeletonCard.vue
+++ b/lib/cards/SkeletonCard.vue
@@ -5,7 +5,6 @@
     Their logic is disabled in skeleton mode.
   -->
   <KCard
-    :to="{ path: null }"
     :headingLevel="2"
     isSkeleton
     aria-hidden="true"
diff --git a/lib/cards/__tests__/KCard.spec.js b/lib/cards/__tests__/KCard.spec.js
index 491aaa898..feb494e3b 100644
--- a/lib/cards/__tests__/KCard.spec.js
+++ b/lib/cards/__tests__/KCard.spec.js
@@ -43,8 +43,9 @@ function checkExpectedCardMarkup({ wrapper, headingLevel, title }) {
   expect(thirdElement.element.tagName.toLowerCase()).toBe(`h${headingLevel}`);
 
   const fourthElement = wrapper.find(`li > div > h${headingLevel} > :first-child`);
-  expect(fourthElement.element.tagName.toLowerCase()).toBe('a');
   expect(fourthElement.exists()).toBe(true);
+  expect(fourthElement.element.tagName.toLowerCase()).toBe('span');
+  expect(fourthElement.element.classList.contains('title')).toBeTruthy();
 
   const linkText = fourthElement.text();
   expect(linkText).toBe(title);
@@ -53,16 +54,30 @@ function checkExpectedCardMarkup({ wrapper, headingLevel, title }) {
 describe('KCard', () => {
   it('renders passed header level', () => {
     const wrapper = makeWrapper({
-      propsData: { headingLevel: 4, title: 'sample title prop', to: { path: '/some-link' } },
+      propsData: { headingLevel: 4, title: 'sample title prop' },
     });
 
     const heading = wrapper.find('h4');
     expect(heading.exists()).toBe(true);
   });
 
+  it(`renders the title text as span when 'to' is not provided`, () => {
+    const wrapper = makeWrapper({
+      propsData: { headingLevel: 4, title: 'sample title' },
+    });
+    expect(wrapper.find('.title').element.tagName.toLowerCase()).toBe('span');
+  });
+
+  it(`renders the title text as link when 'to' is provided`, () => {
+    const wrapper = makeWrapper({
+      propsData: { to: { path: '/some-link' }, headingLevel: 4, title: 'sample title' },
+    });
+    expect(wrapper.find('.title').element.tagName.toLowerCase()).toBe('a');
+  });
+
   it('renders the correct accessibility structure when title passed via slot', () => {
     const wrapper = makeWrapper({
-      propsData: { to: { path: '/some-link' }, headingLevel: 4 },
+      propsData: { headingLevel: 4 },
       slots: {
         title: 'Test Title',
       },
@@ -72,38 +87,57 @@ describe('KCard', () => {
 
   it('renders the correct accessibility structure when title passed via prop', () => {
     const wrapper = makeWrapper({
-      propsData: { to: { path: '/some-link' }, headingLevel: 4, title: 'Test Title' },
+      propsData: { headingLevel: 4, title: 'Test Title' },
     });
     checkExpectedCardMarkup({ wrapper, headingLevel: 4, title: 'Test Title' });
   });
 
-  it('should not navigate on long click to allow for text selection', async () => {
-    const wrapper = makeWrapper({
-      propsData: { to: { path: '/some-link' }, title: 'sample title prop' },
-    });
+  describe('on long click', () => {
+    it('should not emit a click event or navigate to allow for text selection', async () => {
+      const wrapper = makeWrapper({
+        propsData: { to: { path: '/some-link' }, title: 'sample title ' },
+      });
+
+      await wrapper.find('li').trigger('mousedown');
+      await new Promise(resolve => setTimeout(resolve, 500));
+      await wrapper.find('li').trigger('click');
 
-    await wrapper.find('li').trigger('mousedown');
-    await new Promise(resolve => setTimeout(resolve, 500));
-    await wrapper.find('li').trigger('click');
-    expect(wrapper.vm.$router.currentRoute.path).not.toBe('/some-link');
+      expect(wrapper.emitted().click).toBeFalsy();
+      expect(wrapper.vm.$router.currentRoute.path).not.toBe('/some-link');
+    });
   });
 
-  it('should navigate on quick click', async () => {
-    const wrapper = makeWrapper({
-      propsData: { to: { path: '/some-link' }, title: 'sample title ' },
+  describe('on short click', () => {
+    it('should emit a click event', async () => {
+      const wrapper = makeWrapper({
+        propsData: { title: 'sample title ' },
+      });
+
+      await wrapper.find('li').trigger('mousedown');
+      await new Promise(resolve => setTimeout(resolve, 100));
+      await wrapper.find('li').trigger('click');
+
+      expect(wrapper.emitted().click).toBeTruthy();
     });
 
-    await wrapper.find('li').trigger('mousedown');
-    await new Promise(resolve => setTimeout(resolve, 100));
-    await wrapper.find('li').trigger('click');
+    it(`when 'to' provided, should both navigate and emit a click event`, async () => {
+      const wrapper = makeWrapper({
+        propsData: { to: { path: '/some-link' }, title: 'sample title ' },
+      });
+
+      await wrapper.find('li').trigger('mousedown');
+      await new Promise(resolve => setTimeout(resolve, 100));
+      await wrapper.find('li').trigger('click');
 
-    expect(wrapper.vm.$router.currentRoute.path).toBe('/some-link');
+      expect(wrapper.emitted().click).toBeTruthy();
+      expect(wrapper.vm.$router.currentRoute.path).toBe('/some-link');
+    });
   });
 
   describe('it renders slotted content', () => {
     it('renders slotted content with aboveTitle slot', () => {
       const wrapper = makeWrapper({
-        propsData: { to: { path: '/some-link' }, title: 'sample title ' },
+        propsData: { title: 'sample title ' },
         slots: {
           aboveTitle: 'above title',
         },
@@ -116,7 +150,7 @@ describe('KCard', () => {
 
     it('renders slotted content with belowTitle slot', () => {
       const wrapper = makeWrapper({
-        propsData: { to: { path: '/some-link' }, title: 'sample title ' },
+        propsData: { title: 'sample title ' },
         slots: {
           belowTitle: 'below title',
         },
@@ -129,7 +163,7 @@ describe('KCard', () => {
 
     it('renders slotted content with footer slot', () => {
       const wrapper = makeWrapper({
-        propsData: { to: { path: '/some-link' }, title: 'sample title ' },
+        propsData: { title: 'sample title ' },
         slots: {
           footer: 'footer slot content goes here',
         },
@@ -144,7 +178,6 @@ describe('KCard', () => {
     it('preserves space when preserve prop is true and slot is not empty', () => {
       const wrapper = makeWrapper({
         propsData: {
-          to: { path: '/some-link' },
           title: 'sample title ',
           headingLevel: 4,
           preserveAboveTitle: true,
@@ -168,7 +201,6 @@ describe('KCard', () => {
     it('preserves space when preserve prop is true and slot is empty', () => {
       const wrapper = makeWrapper({
         propsData: {
-          to: { path: '/some-link' },
           title: 'sample title ',
           headingLevel: 4,
           preserveAboveTitle: true,
@@ -188,7 +220,6 @@ describe('KCard', () => {
     it('removes space when preserve prop is false and slot is empty', () => {
       const wrapper = makeWrapper({
         propsData: {
-          to: { path: '/some-link' },
           title: 'sample title ',
           headingLevel: 4,
           preserveAboveTitle: false,
@@ -208,7 +239,6 @@ describe('KCard', () => {
     it('show slots content regardless of whether the preserve prop is true', () => {
       const wrapper = makeWrapper({
         propsData: {
-          to: { path: '/some-link' },
           title: 'sample title ',
           headingLevel: 4,
           preserveAboveTitle: true,
@@ -234,7 +264,6 @@ describe('KCard', () => {
     it('is not displayed for thumbnail display none', () => {
       const wrapper = makeWrapper({
         propsData: {
-          to: { path: '/some-link' },
           title: 'sample title ',
           headingLevel: 4,
           thumbnailDisplay: 'none',
@@ -249,7 +278,6 @@ describe('KCard', () => {
     it('is displayed when a thumbnail image source is not provided', () => {
       const wrapper = makeWrapper({
         propsData: {
-          to: { path: '/some-link' },
           title: 'sample title ',
           headingLevel: 4,
           thumbnailSrc: null,
@@ -266,7 +294,6 @@ describe('KCard', () => {
     it('is displayed when a thumbnail image could not be loaded', async () => {
       const wrapper = makeWrapper({
         propsData: {
-          to: { path: '/some-link' },
           title: 'sample title ',
           headingLevel: 4,
           thumbnailSrc: '/thumbnail-img.jpg',
@@ -287,7 +314,6 @@ describe('KCard', () => {
     it('is not displayed when a thumbnail image is available', () => {
       const wrapper = makeWrapper({
         propsData: {
-          to: { path: '/some-link' },
           title: 'sample title ',
           headingLevel: 4,
           thumbnailSrc: '/thumbnail-img.jpg',