From ae3b722040e78bd58cc4eb9015c53b5d63e2bbf1 Mon Sep 17 00:00:00 2001
From: Akira Sudoh <asudoh@gmail.com>
Date: Tue, 29 Dec 2020 11:09:27 +0900
Subject: [PATCH] chore(card): introduce eyebrow and heading components

Introduces `<dds-card-eyebrow>` and `<dds-card-heading>` to make a
choice of the approach of `<div>`/`<span>` with specifying `slot`
attribute vs. dedicated components to the latter, to align to other
components. The dedicated components approach allows more control over
styling.

Refs #4326.
---
 .../styles/scss/components/card/index.scss    | 36 +++++++++++++----
 .../_feature-card-block-large.scss            | 10 +++--
 .../components-react/carousel/src/index.js    |  3 +-
 .../components/card-group/index.html          |  4 +-
 .../components/card-group/src/index.js        |  1 +
 .../components/card-section-images/index.html |  6 +--
 .../card-section-images/src/index.js          |  2 +
 .../components/card-section-simple/index.html |  2 +-
 .../card-section-simple/src/index.js          |  1 +
 .../codesandbox/components/card/index.html    |  4 +-
 .../codesandbox/components/card/src/index.js  |  2 +
 .../components/carousel/index.html            | 11 ++---
 .../components/content-block-cards/index.html |  6 +--
 .../content-block-cards/src/index.js          |  1 +
 .../components/content-group-cards/index.html |  2 +-
 .../content-group-cards/src/index.js          |  1 +
 .../feature-card-block-large/index.html       |  2 +-
 .../feature-card-block-large/src/index.js     |  1 +
 .../usage/react-ssr/src/views/App.js          |  3 +-
 .../__stories__/card-group.stories.ts         | 12 +++---
 .../card-section-carousel.stories.ts          |  3 +-
 .../card-section-images.stories.ts            |  6 ++-
 .../__tests__/card-section-images.test.ts     |  6 ++-
 .../card-section-simple.stories.ts            |  5 ++-
 .../__tests__/card-section-simple.test.ts     |  3 +-
 .../card/__stories__/card.stories.ts          | 10 +++--
 .../src/components/card/card-eyebrow.ts       | 39 ++++++++++++++++++
 .../src/components/card/card-heading.ts       | 39 ++++++++++++++++++
 .../src/components/card/card.ts               | 37 ++---------------
 .../carousel/__stories__/carousel.stories.ts  |  3 +-
 .../content-block-cards.stories.ts            |  8 ++--
 .../__tests__/content-block-cards.test.ts     |  3 +-
 .../content-block-media.stories.ts            |  3 +-
 .../content-block-mixed.stories.ts            |  9 ++++-
 .../content-group-cards.stories.ts            |  9 ++++-
 .../__tests__/content-group-cards.test.ts     |  7 ++--
 .../__stories__/dotcom-shell.stories.ts       |  6 ++-
 .../feature-card-block-large.stories.ts       |  6 ++-
 .../feature-card-block-medium.stories.ts      |  6 ++-
 .../feature-card-block-medium.ts              | 10 +----
 .../__stories__/feature-card.stories.ts       |  3 +-
 .../tests/snapshots/dds-card-cta.md           | 40 ++++---------------
 .../tests/snapshots/dds-card.md               | 40 ++++---------------
 .../snapshots/dds-feature-card-block-large.md | 40 ++++---------------
 .../dds-feature-card-block-medium.md          | 36 ++++-------------
 .../tests/snapshots/dds-feature-card.md       | 40 ++++---------------
 .../tests/snapshots/dds-feature-cta.md        | 40 ++++---------------
 47 files changed, 270 insertions(+), 297 deletions(-)
 create mode 100644 packages/web-components/src/components/card/card-eyebrow.ts
 create mode 100644 packages/web-components/src/components/card/card-heading.ts

diff --git a/packages/styles/scss/components/card/index.scss b/packages/styles/scss/components/card/index.scss
index 080c0e087f5..16fb33db7ed 100644
--- a/packages/styles/scss/components/card/index.scss
+++ b/packages/styles/scss/components/card/index.scss
@@ -62,14 +62,6 @@
       margin-bottom: $carbon--spacing-07;
     }
 
-    .#{$prefix}--card__eyebrow {
-      @include use-carbon-productive-tokens();
-      @include carbon--type-style('body-short-01');
-
-      margin-bottom: $carbon--spacing-03;
-      color: $text-02;
-    }
-
     .#{$prefix}--card:focus,
     .#{$prefix}--card:visited,
     .#{$prefix}--card:active {
@@ -117,6 +109,15 @@
     }
   }
 
+  :host(#{$dds-prefix}-card-eyebrow),
+  .#{$prefix}--card__eyebrow {
+    @include use-carbon-productive-tokens();
+    @include carbon--type-style('body-short-01');
+
+    margin-bottom: $carbon--spacing-03;
+    color: $text-02;
+  }
+
   .#{$prefix}--card .#{$prefix}--card__cta,
   .#{$prefix}--card .#{$prefix}--card__cta a,
   .#{$prefix}--card .#{$prefix}--card__cta a:visited,
@@ -203,6 +204,25 @@
     }
   }
 
+  :host(#{$dds-prefix}-card-heading) {
+    @include carbon--type-style('expressive-heading-03');
+    @include content-width;
+
+    color: $text-01;
+    margin-bottom: $carbon--layout-05;
+  }
+
+  :host(#{$dds-prefix}-card)[color-scheme='inverse'],
+  :host(#{$dds-prefix}-card-group-item)[color-scheme='inverse'] {
+    ::slotted(#{$dds-prefix}-card-eyebrow) {
+      color: $text-03;
+    }
+
+    ::slotted(#{$dds-prefix}-card-heading) {
+      color: $inverse-01;
+    }
+  }
+
   .#{$prefix}--card--inverse .#{$prefix}--card__cta,
   .#{$prefix}--card--inverse .#{$prefix}--card__cta a,
   .#{$prefix}--card--inverse .#{$prefix}--card__cta a:visited,
diff --git a/packages/styles/scss/components/feature-card-block-large/_feature-card-block-large.scss b/packages/styles/scss/components/feature-card-block-large/_feature-card-block-large.scss
index 411c01b02cd..f6b3445acbe 100644
--- a/packages/styles/scss/components/feature-card-block-large/_feature-card-block-large.scss
+++ b/packages/styles/scss/components/feature-card-block-large/_feature-card-block-large.scss
@@ -107,7 +107,9 @@ $fcb-breakpoint-up--lg: map-get(
 
       .#{$prefix}--card__eyebrow,
       .#{$prefix}--card__heading,
-      .#{$prefix}--card__copy {
+      .#{$prefix}--card__copy,
+      ::slotted(#{$dds-prefix}-card-eyebrow),
+      ::slotted(#{$dds-prefix}-card-heading) {
         width: 100%;
         max-width: carbon--rem(480px);
         @include carbon--breakpoint('md') {
@@ -115,12 +117,14 @@ $fcb-breakpoint-up--lg: map-get(
         }
       }
 
-      .#{$prefix}--card__eyebrow {
+      .#{$prefix}--card__eyebrow,
+      ::slotted(#{$dds-prefix}-card-eyebrow) {
         margin: 0 0 $spacing-05 0;
         @include carbon--type-style('body-long-02');
       }
 
-      .#{$prefix}--card__heading {
+      .#{$prefix}--card__heading,
+      ::slotted(#{$dds-prefix}-card-heading) {
         @include carbon--type-style('expressive-heading-04', true);
 
         margin-bottom: $spacing-07;
diff --git a/packages/web-components/examples/codesandbox/components-react/carousel/src/index.js b/packages/web-components/examples/codesandbox/components-react/carousel/src/index.js
index 51f0ec06f9a..570ee99c63a 100644
--- a/packages/web-components/examples/codesandbox/components-react/carousel/src/index.js
+++ b/packages/web-components/examples/codesandbox/components-react/carousel/src/index.js
@@ -12,6 +12,7 @@ import { render } from 'react-dom';
 import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js';
 import DDSCard from '@carbon/ibmdotcom-web-components/es/components-react/card/card';
 import DDSCardFooter from '@carbon/ibmdotcom-web-components/es/components-react/card/card-footer';
+import DDSCardHeading from '@carbon/ibmdotcom-web-components/es/components-react/card/card-heading';
 import DDSCarousel from '@carbon/ibmdotcom-web-components/es/components-react/carousel/carousel';
 import './index.css';
 
@@ -25,7 +26,7 @@ const copyOdd = `
 // eslint-disable-next-line react/prop-types
 const Card = ({ copy = copyDefault, heading = headingDefault } = {}) => (
   <DDSCard href="https://www.ibm.com/standards/web/carbon-for-ibm-dotcom">
-    <span slot="heading">{heading}</span>
+    <DDSCardHeading>{heading}</DDSCardHeading>
     {copy}
     <DDSCardFooter>
       <ArrowRight20 slot="icon" />
diff --git a/packages/web-components/examples/codesandbox/components/card-group/index.html b/packages/web-components/examples/codesandbox/components/card-group/index.html
index 2685d2c5b1e..12f3177c944 100644
--- a/packages/web-components/examples/codesandbox/components/card-group/index.html
+++ b/packages/web-components/examples/codesandbox/components/card-group/index.html
@@ -26,7 +26,7 @@
     <h1>Hello World! 👋</h1>
     <div id="app">
       <dds-card-group-item href="https://example.com">
-        <div slot="heading">Nunc convallis lobortis</div>
+        <dds-card-heading>Nunc convallis lobortis</dds-card-heading>
         <p>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.
           Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
@@ -36,7 +36,7 @@ <h1>Hello World! 👋</h1>
         </dds-card-footer>
       </dds-card-group-item>
       <dds-card-group-item href="https://example.com" color-scheme="inverse">
-        <div slot="heading">Top level card link</div>
+        <dds-card-heading>Top level card link</dds-card-heading>
         <dds-card-footer slot="footer" color-scheme="inverse">
           ${ArrowRight20({ slot: 'icon' })}
         </dds-card-footer>
diff --git a/packages/web-components/examples/codesandbox/components/card-group/src/index.js b/packages/web-components/examples/codesandbox/components/card-group/src/index.js
index 3bba50283a5..3d84091306f 100644
--- a/packages/web-components/examples/codesandbox/components/card-group/src/index.js
+++ b/packages/web-components/examples/codesandbox/components/card-group/src/index.js
@@ -10,3 +10,4 @@
 import '@carbon/ibmdotcom-web-components/es/components/card-group/card-group.js';
 import '@carbon/ibmdotcom-web-components/es/components/card-group/card-group-item.js';
 import '@carbon/ibmdotcom-web-components/es/components/card/card-footer.js';
+import '@carbon/ibmdotcom-web-components/es/components/card/card-heading.js';
diff --git a/packages/web-components/examples/codesandbox/components/card-section-images/index.html b/packages/web-components/examples/codesandbox/components/card-section-images/index.html
index 2c595fe41c3..d551c17d175 100644
--- a/packages/web-components/examples/codesandbox/components/card-section-images/index.html
+++ b/packages/web-components/examples/codesandbox/components/card-section-images/index.html
@@ -25,11 +25,11 @@
         <div class="bx--col-sm-4">
           <dds-card-section-images heading="Aliquam condimentum interdum">
             <dds-card-group>
-                <dds-card-group-item href="https://example.com">
+              <dds-card-group-item href="https://example.com">
                 <dds-image slot="image" alt="Image alt text" default-src="https://dummyimage.com/1056x792/ee5396/161616&amp;text=4:3">
                 </dds-image>
-                <div slot="eyebrow">Topic</div>
-                <div slot="heading">Natural Language Processing.</div>
+                <dds-card-eyebrow>Topic</dds-card-eyebrow>
+                <dds-card-heading>Natural Language Processing.</dds-card-heading>
                 <dds-card-footer slot="footer">
                   ${ArrowRight20({ slot: 'icon' })}
                 </dds-card-footer>
diff --git a/packages/web-components/examples/codesandbox/components/card-section-images/src/index.js b/packages/web-components/examples/codesandbox/components/card-section-images/src/index.js
index e4f9c7c8985..17ecf853748 100644
--- a/packages/web-components/examples/codesandbox/components/card-section-images/src/index.js
+++ b/packages/web-components/examples/codesandbox/components/card-section-images/src/index.js
@@ -8,5 +8,7 @@
  */
 
 import '@carbon/ibmdotcom-web-components/es/components/card-section-images/card-section-images.js';
+import '@carbon/ibmdotcom-web-components/es/components/card/card-eyebrow.js';
+import '@carbon/ibmdotcom-web-components/es/components/card/card-heading.js';
 import '@carbon/ibmdotcom-web-components/es/components/card-group/card-group.js';
 import '@carbon/ibmdotcom-web-components/es/components/card-group/card-group-item.js';
diff --git a/packages/web-components/examples/codesandbox/components/card-section-simple/index.html b/packages/web-components/examples/codesandbox/components/card-section-simple/index.html
index 4305b04c6eb..21b6ce78b69 100644
--- a/packages/web-components/examples/codesandbox/components/card-section-simple/index.html
+++ b/packages/web-components/examples/codesandbox/components/card-section-simple/index.html
@@ -26,7 +26,7 @@
           <dds-card-section-simple heading="Aliquam condimentum interdum">
             <dds-card-group>
               <dds-card-group-item href="https://example.com">
-                <div slot="heading">Nunc convallis lobortis</div>
+                <dds-card-heading>Nunc convallis lobortis</dds-card-heading>
                 <p>
                   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.
                   Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
diff --git a/packages/web-components/examples/codesandbox/components/card-section-simple/src/index.js b/packages/web-components/examples/codesandbox/components/card-section-simple/src/index.js
index 426b2766d70..496a5b10897 100644
--- a/packages/web-components/examples/codesandbox/components/card-section-simple/src/index.js
+++ b/packages/web-components/examples/codesandbox/components/card-section-simple/src/index.js
@@ -8,5 +8,6 @@
  */
 
 import '@carbon/ibmdotcom-web-components/es/components/card-section-simple/card-section-simple.js';
+import '@carbon/ibmdotcom-web-components/es/components/card/card-heading.js';
 import '@carbon/ibmdotcom-web-components/es/components/card-group/card-group.js';
 import '@carbon/ibmdotcom-web-components/es/components/card-group/card-group-item.js';
diff --git a/packages/web-components/examples/codesandbox/components/card/index.html b/packages/web-components/examples/codesandbox/components/card/index.html
index 325edcb8b7f..b1f83c48f29 100644
--- a/packages/web-components/examples/codesandbox/components/card/index.html
+++ b/packages/web-components/examples/codesandbox/components/card/index.html
@@ -24,8 +24,8 @@
 <h1>Hello World! 👋</h1>
 <div id="app">
   <dds-card href="https://example.com">
-    <span slot="eyebrow">eyebrow text</span>
-    <span slot="heading">Lorem ipsum dolor sit amet</span>
+    <dds-card-eyebrow>eyebrow text</dds-card-eyebrow>
+    <dds-card-heading>Lorem ipsum dolor sit amet</dds-card-heading>
     <dds-card-footer>
       Card cta text
       <svg
diff --git a/packages/web-components/examples/codesandbox/components/card/src/index.js b/packages/web-components/examples/codesandbox/components/card/src/index.js
index 97bf85b9d5e..3cccc3bc00e 100644
--- a/packages/web-components/examples/codesandbox/components/card/src/index.js
+++ b/packages/web-components/examples/codesandbox/components/card/src/index.js
@@ -8,4 +8,6 @@
  */
 
 import '@carbon/ibmdotcom-web-components/es/components/card/card.js';
+import '@carbon/ibmdotcom-web-components/es/components/card/card-eyebrow.js';
 import '@carbon/ibmdotcom-web-components/es/components/card/card-footer.js';
+import '@carbon/ibmdotcom-web-components/es/components/card/card-heading.js';
diff --git a/packages/web-components/examples/codesandbox/components/carousel/index.html b/packages/web-components/examples/codesandbox/components/carousel/index.html
index ab3a276f664..0ee990d5ad5 100644
--- a/packages/web-components/examples/codesandbox/components/carousel/index.html
+++ b/packages/web-components/examples/codesandbox/components/carousel/index.html
@@ -14,6 +14,7 @@
     <script type="module">
       import '@carbon/ibmdotcom-web-components/es/components/card/card.js';
       import '@carbon/ibmdotcom-web-components/es/components/card/card-footer.js';
+      import '@carbon/ibmdotcom-web-components/es/components/card/card-heading.js';
       import '@carbon/ibmdotcom-web-components/es/components/carousel/carousel.js';
       import '@carbon/ibmdotcom-web-components/es/components/content-section/content-section-leading.js';
       import '@carbon/ibmdotcom-web-components/es/components/content-section/content-section-heading.js';
@@ -70,7 +71,7 @@
         </dds-link-with-icon>
       </dds-content-section-leading>
       <dds-card href="https://example.com">
-        <span slot="heading">Lorem ipsum dolor sit amet</span>
+        <dds-card-heading>Lorem ipsum dolor sit amet</dds-card-heading>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est.
         <dds-card-footer>
           <svg
@@ -88,7 +89,7 @@
         </dds-card-footer>
       </dds-card>
       <dds-card href="https://example.com">
-        <span slot="heading">Lorem ipsum dolor sit amet</span>
+        <dds-card-heading>Lorem ipsum dolor sit amet</dds-card-heading>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est.
         Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
         <dds-card-footer>
@@ -107,7 +108,7 @@
         </dds-card-footer>
       </dds-card>
       <dds-card href="https://example.com">
-        <span slot="heading">Lorem ipsum dolor sit amet</span>
+        <dds-card-heading>Lorem ipsum dolor sit amet</dds-card-heading>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est.
         <dds-card-footer>
           <svg
@@ -125,7 +126,7 @@
         </dds-card-footer>
       </dds-card>
       <dds-card href="https://example.com">
-        <span slot="heading">Lorem ipsum dolor sit amet</span>
+        <dds-card-heading>Lorem ipsum dolor sit amet</dds-card-heading>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est.
         Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
         <dds-card-footer>
@@ -144,7 +145,7 @@
         </dds-card-footer>
       </dds-card>
       <dds-card href="https://example.com">
-        <span slot="heading">Lorem ipsum dolor sit amet</span>
+        <dds-card-heading>Lorem ipsum dolor sit amet</dds-card-heading>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est.
         <dds-card-footer>
           <svg
diff --git a/packages/web-components/examples/codesandbox/components/content-block-cards/index.html b/packages/web-components/examples/codesandbox/components/content-block-cards/index.html
index 769ee608f01..604914b12bf 100644
--- a/packages/web-components/examples/codesandbox/components/content-block-cards/index.html
+++ b/packages/web-components/examples/codesandbox/components/content-block-cards/index.html
@@ -27,7 +27,7 @@
             <dds-content-block-heading>Lorem ipsum dolor sit amet</dds-content-block-heading>
             <dds-card-group slot="content">
               <dds-card-group-item href="https://example.com">
-                <div slot="heading">Nunc convallis lobortis</div>
+                <dds-card-heading>Nunc convallis lobortis</dds-card-heading>
                 <p>
                   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.
                   Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
@@ -39,7 +39,7 @@
                 </dds-card-cta-footer>
               </dds-card-group-item>
               <dds-card-group-item href="https://example.com">
-                <div slot="heading">Nunc convallis lobortis</div>
+                <dds-card-heading>Nunc convallis lobortis</dds-card-heading>
                 <p>
                   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.
                   Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
@@ -51,7 +51,7 @@
                 </dds-card-cta-footer>
               </dds-card-group-item>
               <dds-card-group-item href="https://example.com">
-                <div slot="heading">Nunc convallis lobortis</div>
+                <dds-card-heading>Nunc convallis lobortis</dds-card-heading>
                 <p>
                   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.
                   Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
diff --git a/packages/web-components/examples/codesandbox/components/content-block-cards/src/index.js b/packages/web-components/examples/codesandbox/components/content-block-cards/src/index.js
index 57e3f983c7a..272338a1251 100644
--- a/packages/web-components/examples/codesandbox/components/content-block-cards/src/index.js
+++ b/packages/web-components/examples/codesandbox/components/content-block-cards/src/index.js
@@ -9,6 +9,7 @@
 
 import '@carbon/ibmdotcom-web-components/es/components/content-block-cards/content-block-cards.js';
 import '@carbon/ibmdotcom-web-components/es/components/content-block/content-block-heading.js';
+import '@carbon/ibmdotcom-web-components/es/components/card/card-heading.js';
 import '@carbon/ibmdotcom-web-components/es/components/card-group/card-group.js';
 import '@carbon/ibmdotcom-web-components/es/components/card-group/card-group-item.js';
 import '@carbon/ibmdotcom-web-components/es/components/cta/card-cta-footer.js';
diff --git a/packages/web-components/examples/codesandbox/components/content-group-cards/index.html b/packages/web-components/examples/codesandbox/components/content-group-cards/index.html
index 540695eef2d..e407807e895 100644
--- a/packages/web-components/examples/codesandbox/components/content-group-cards/index.html
+++ b/packages/web-components/examples/codesandbox/components/content-group-cards/index.html
@@ -24,7 +24,7 @@
       <dds-content-group-cards>
         <dds-content-group-heading>Curabitur malesuada varius mi eu posuere</dds-content-group-heading>
         <dds-content-group-cards-item href="https://www.example.com">
-          <span slot="heading">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt</span>
+          <dds-card-heading>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt</dds-card-heading>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
           <dds-card-footer icon-placement="left">
             ${ArrowRight20({ slot: 'icon' })}
diff --git a/packages/web-components/examples/codesandbox/components/content-group-cards/src/index.js b/packages/web-components/examples/codesandbox/components/content-group-cards/src/index.js
index a64abec01f4..920e22d834e 100644
--- a/packages/web-components/examples/codesandbox/components/content-group-cards/src/index.js
+++ b/packages/web-components/examples/codesandbox/components/content-group-cards/src/index.js
@@ -7,6 +7,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import '@carbon/ibmdotcom-web-components/es/components/card/card-heading.js';
 import '@carbon/ibmdotcom-web-components/es/components/content-group-cards/content-group-cards.js';
 import '@carbon/ibmdotcom-web-components/es/components/content-group-cards/content-group-cards-item.js';
 import '@carbon/ibmdotcom-web-components/es/components/content-group/content-group-heading.js';
diff --git a/packages/web-components/examples/codesandbox/components/feature-card-block-large/index.html b/packages/web-components/examples/codesandbox/components/feature-card-block-large/index.html
index ba434600e9f..fc138866413 100644
--- a/packages/web-components/examples/codesandbox/components/feature-card-block-large/index.html
+++ b/packages/web-components/examples/codesandbox/components/feature-card-block-large/index.html
@@ -37,7 +37,7 @@ <h1>Hello World! 👋</h1>
       </dds-image-item>
     </dds-image>
     <span slot="eyebrow">This is an eyebrow</span>
-    <h3 slot="heading">Explore AI use cases in all industries</h3>
+    <dds-card-heading>Explore AI use cases in all industries</dds-card-heading>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
     <dds-feature-card-block-large-footer>
       <svg
diff --git a/packages/web-components/examples/codesandbox/components/feature-card-block-large/src/index.js b/packages/web-components/examples/codesandbox/components/feature-card-block-large/src/index.js
index 2956547fff2..331790ee420 100644
--- a/packages/web-components/examples/codesandbox/components/feature-card-block-large/src/index.js
+++ b/packages/web-components/examples/codesandbox/components/feature-card-block-large/src/index.js
@@ -7,6 +7,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import '@carbon/ibmdotcom-web-components/es/components/card/card-heading.js';
 import '@carbon/ibmdotcom-web-components/es/components/feature-card/feature-card-block-large-footer.js';
 import '@carbon/ibmdotcom-web-components/es/components/image/image.js';
 import '@carbon/ibmdotcom-web-components/es/components/feature-card-block-large/feature-card-block-large.js';
diff --git a/packages/web-components/examples/codesandbox/usage/react-ssr/src/views/App.js b/packages/web-components/examples/codesandbox/usage/react-ssr/src/views/App.js
index bf2361eb763..7d650d63bcc 100644
--- a/packages/web-components/examples/codesandbox/usage/react-ssr/src/views/App.js
+++ b/packages/web-components/examples/codesandbox/usage/react-ssr/src/views/App.js
@@ -11,6 +11,7 @@ import React from 'react';
 import ArrowRight20 from '@carbon/icons-react/lib/arrow--right/20.js';
 import DDSCard from '@carbon/ibmdotcom-web-components/es/components-react/card/card';
 import DDSCardFooter from '@carbon/ibmdotcom-web-components/es/components-react/card/card-footer';
+import DDSCardHeading from '@carbon/ibmdotcom-web-components/es/components-react/card/card-heading';
 import DDSCarousel from '@carbon/ibmdotcom-web-components/es/components-react/carousel/carousel';
 
 const headingDefault = 'Lorem ipsum dolor sit amet';
@@ -23,7 +24,7 @@ const copyOdd = `
 // eslint-disable-next-line react/prop-types
 const Card = ({ copy = copyDefault, heading = headingDefault } = {}) => (
   <DDSCard href="https://www.ibm.com/standards/web/carbon-for-ibm-dotcom">
-    <span slot="heading">{heading}</span>
+    <DDSCardHeading>{heading}</DDSCardHeading>
     {copy}
     <DDSCardFooter>
       <ArrowRight20 slot="icon" />
diff --git a/packages/web-components/src/components/card-group/__stories__/card-group.stories.ts b/packages/web-components/src/components/card-group/__stories__/card-group.stories.ts
index 798c4cbe1d1..07204dfeb16 100644
--- a/packages/web-components/src/components/card-group/__stories__/card-group.stories.ts
+++ b/packages/web-components/src/components/card-group/__stories__/card-group.stories.ts
@@ -11,12 +11,14 @@ import { html } from 'lit-element';
 import ArrowRight20 from 'carbon-web-components/es/icons/arrow--right/20';
 import { number } from '@storybook/addon-knobs';
 import readme from './README.stories.mdx';
+import '../../card/card-eyebrow';
+import '../../card/card-heading';
 import '../card-group';
 import '../card-group-item';
 
 const defaultCardGroupItem = html`
   <dds-card-group-item href="https://example.com">
-    <div slot="heading">Nunc convallis lobortis</div>
+    <dds-card-heading>Nunc convallis lobortis</dds-card-heading>
     <p>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.
       Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
@@ -35,8 +37,8 @@ const cardGroupItemWithImages = html`
       default-src="https://fpoimg.com/1056x792?text=4:3&amp;bg_color=ee5396&amp;text_color=161616"
     >
     </dds-image>
-    <div slot="eyebrow">Topic</div>
-    <div slot="heading">Natural Language Processing.</div>
+    <dds-card-eyebrow>Topic</dds-card-eyebrow>
+    <dds-card-heading>Natural Language Processing.</dds-card-heading>
     <dds-card-footer slot="footer">
       ${ArrowRight20({ slot: 'icon' })}
     </dds-card-footer>
@@ -56,7 +58,7 @@ export const withCTA = ({ parameters }) => {
     <dds-card-group>
       ${cards}
       <dds-card-group-item href="https://example.com" color-scheme="inverse">
-        <div slot="heading">Top level card link</div>
+        <dds-card-heading>Top level card link</dds-card-heading>
         <dds-card-footer slot="footer" color-scheme="inverse">
           ${ArrowRight20({ slot: 'icon' })}
         </dds-card-footer>
@@ -91,7 +93,7 @@ export const withImagesAndCTA = ({ parameters }) => {
     <dds-card-group>
       ${cards}
       <dds-card-group-item href="https://example.com" color-scheme="inverse">
-        <div slot="heading">Top level card link</div>
+        <dds-card-heading>Top level card link</dds-card-heading>
         <dds-card-footer slot="footer" color-scheme="inverse">
           ${ArrowRight20({ slot: 'icon' })}
         </dds-card-footer>
diff --git a/packages/web-components/src/components/card-section-carousel/__stories__/card-section-carousel.stories.ts b/packages/web-components/src/components/card-section-carousel/__stories__/card-section-carousel.stories.ts
index 93137ede69c..56cc7802c56 100644
--- a/packages/web-components/src/components/card-section-carousel/__stories__/card-section-carousel.stories.ts
+++ b/packages/web-components/src/components/card-section-carousel/__stories__/card-section-carousel.stories.ts
@@ -14,6 +14,7 @@ import ifNonNull from 'carbon-web-components/es/globals/directives/if-non-null.j
 import ArrowRight20 from 'carbon-web-components/es/icons/arrow--right/20.js';
 import '../../card/card';
 import '../../card/card-footer';
+import '../../card/card-heading';
 import '../../content-section/content-section';
 import '../../content-section/content-section-copy';
 import '../../content-section/content-section-heading';
@@ -31,7 +32,7 @@ const copyOdd = `
 
 const Card = ({ copy = copyDefault, heading = headingDefault, href = hrefDefault } = {}) => html`
   <dds-card href="${ifNonNull(href)}">
-    <span slot="heading">${heading}</span>
+    <dds-card-heading>${heading}</dds-card-heading>
     ${copy}
     <dds-card-footer>
       ${ArrowRight20({ slot: 'icon' })}
diff --git a/packages/web-components/src/components/card-section-images/__stories__/card-section-images.stories.ts b/packages/web-components/src/components/card-section-images/__stories__/card-section-images.stories.ts
index 0db935675c2..6a1c259e9c4 100644
--- a/packages/web-components/src/components/card-section-images/__stories__/card-section-images.stories.ts
+++ b/packages/web-components/src/components/card-section-images/__stories__/card-section-images.stories.ts
@@ -12,6 +12,8 @@ import ArrowRight20 from 'carbon-web-components/es/icons/arrow--right/20';
 import ifNonNull from 'carbon-web-components/es/globals/directives/if-non-null.js';
 import readme from './README.stories.mdx';
 import textNullable from '../../../../.storybook/knob-text-nullable';
+import '../../card/card-eyebrow';
+import '../../card/card-heading';
 import '../../content-section/content-section';
 import '../../content-section/content-section-heading';
 import '../../card-group/card-group';
@@ -22,8 +24,8 @@ const cardGroupItemWithImages = html`
   <dds-card-group-item href="https://example.com">
     <dds-image slot="image" alt="Image alt text" default-src="https://dummyimage.com/1056x792/ee5396/161616&amp;text=4:3">
     </dds-image>
-    <div slot="eyebrow">Topic</div>
-    <div slot="heading">Natural Language Processing.</div>
+    <dds-card-eyebrow>Topic</dds-card-eyebrow>
+    <dds-card-heading>Natural Language Processing.</dds-card-heading>
     <dds-card-footer slot="footer">
       ${ArrowRight20({ slot: 'icon' })}
     </dds-card-footer>
diff --git a/packages/web-components/src/components/card-section-images/__tests__/card-section-images.test.ts b/packages/web-components/src/components/card-section-images/__tests__/card-section-images.test.ts
index 77c9199d810..d3d25541586 100644
--- a/packages/web-components/src/components/card-section-images/__tests__/card-section-images.test.ts
+++ b/packages/web-components/src/components/card-section-images/__tests__/card-section-images.test.ts
@@ -10,6 +10,8 @@
 import { html, render } from 'lit-html';
 import ArrowRight20 from 'carbon-web-components/es/icons/arrow--right/20';
 import ifNonNull from 'carbon-web-components/es/globals/directives/if-non-null.js';
+import '../../card/card-eyebrow';
+import '../../card/card-heading';
 import '../card-section-images';
 
 const template = (props?) => {
@@ -41,8 +43,8 @@ describe('dds-card-section-images', function() {
                 default-src="https://dummyimage.com/1056x792/ee5396/161616&amp;text=4:3"
               >
               </dds-image>
-              <div slot="eyebrow">Topic</div>
-              <div slot="heading">Natural Language Processing.</div>
+              <dds-card-eyebrow>Topic</dds-card-eyebrow>
+              <dds-card-heading>Natural Language Processing.</dds-card-heading>
               <dds-card-footer slot="footer">
                 ${ArrowRight20({ slot: 'icon' })}
               </dds-card-footer>
diff --git a/packages/web-components/src/components/card-section-simple/__stories__/card-section-simple.stories.ts b/packages/web-components/src/components/card-section-simple/__stories__/card-section-simple.stories.ts
index 9a7650c2d67..e6a9906884d 100644
--- a/packages/web-components/src/components/card-section-simple/__stories__/card-section-simple.stories.ts
+++ b/packages/web-components/src/components/card-section-simple/__stories__/card-section-simple.stories.ts
@@ -14,13 +14,14 @@ import readme from './README.stories.mdx';
 import textNullable from '../../../../.storybook/knob-text-nullable';
 import '../../content-section/content-section';
 import '../../content-section/content-section-heading';
+import '../../card/card-heading';
 import '../../card-group/card-group';
 import '../../card-group/card-group-item';
 import '../card-section-simple';
 
 const defaultCardGroupItem = html`
   <dds-card-group-item href="https://example.com">
-    <div slot="heading">Nunc convallis lobortis</div>
+    <dds-card-heading>Nunc convallis lobortis</dds-card-heading>
     <p>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.
       Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
@@ -49,7 +50,7 @@ export const WithCTA = ({ parameters }) => {
       <dds-card-group>
         ${cards}
         <dds-card-group-item href="https://example.com" color-scheme="inverse">
-          <div slot="heading">Top level card link</div>
+          <dds-card-heading>Top level card link</dds-card-heading>
           <dds-card-footer slot="footer" color-scheme="inverse">
             ${ArrowRight20({ slot: 'icon' })}
           </dds-card-footer>
diff --git a/packages/web-components/src/components/card-section-simple/__tests__/card-section-simple.test.ts b/packages/web-components/src/components/card-section-simple/__tests__/card-section-simple.test.ts
index 1613776022a..e6ac27420c2 100644
--- a/packages/web-components/src/components/card-section-simple/__tests__/card-section-simple.test.ts
+++ b/packages/web-components/src/components/card-section-simple/__tests__/card-section-simple.test.ts
@@ -10,6 +10,7 @@
 import { html, render } from 'lit-html';
 import ArrowRight20 from 'carbon-web-components/es/icons/arrow--right/20';
 import ifNonNull from 'carbon-web-components/es/globals/directives/if-non-null.js';
+import '../../card/card-heading';
 import '../card-section-simple';
 
 const template = (props?) => {
@@ -35,7 +36,7 @@ describe('dds-card-section-simple', function() {
           heading: 'heading-foo',
           cards: html`
             <dds-card-group-item href="https://example.com">
-              <div slot="heading">Nunc convallis lobortis</div>
+              <dds-card-heading>Nunc convallis lobortis</dds-card-heading>
               <p>
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec
                 hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
diff --git a/packages/web-components/src/components/card/__stories__/card.stories.ts b/packages/web-components/src/components/card/__stories__/card.stories.ts
index 51ce3066a17..f83407770a7 100644
--- a/packages/web-components/src/components/card/__stories__/card.stories.ts
+++ b/packages/web-components/src/components/card/__stories__/card.stories.ts
@@ -16,6 +16,8 @@ import ifNonNull from 'carbon-web-components/es/globals/directives/if-non-null';
 import readme from './README.stories.mdx';
 import textNullable from '../../../../.storybook/knob-text-nullable';
 import '../card';
+import '../card-eyebrow';
+import '../card-heading';
 import { PICTOGRAM_PLACEMENT } from '../defs';
 
 export const Default = ({ parameters }) => {
@@ -27,8 +29,8 @@ export const Default = ({ parameters }) => {
             <dds-image slot="image" alt="${ifNonNull(alt)}" default-src="${ifNonNull(defaultSrc)}"></dds-image>
           `
         : ``}
-      <span slot="eyebrow">${eyebrow}</span>
-      <span slot="heading">${heading}</span>
+      <dds-card-eyebrow>${eyebrow}</dds-card-eyebrow>
+      <dds-card-heading>${heading}</dds-card-heading>
       ${copy
         ? html`
             <p>${copy}</p>
@@ -59,8 +61,8 @@ export const Pictogram = ({ parameters }) => {
       pictogram-placement="${pictogramPlacement}"
       href=${ifNonNull(href || undefined)}
     >
-      <span slot="eyebrow">${eyebrow}</span>
-      <span slot="heading">${heading}</span>
+      <dds-card-eyebrow>${eyebrow}</dds-card-eyebrow>
+      <dds-card-heading>${heading}</dds-card-heading>
       ${copy
         ? html`
             <p>${copy}</p>
diff --git a/packages/web-components/src/components/card/card-eyebrow.ts b/packages/web-components/src/components/card/card-eyebrow.ts
new file mode 100644
index 00000000000..30375215e66
--- /dev/null
+++ b/packages/web-components/src/components/card/card-eyebrow.ts
@@ -0,0 +1,39 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2020
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { html, property, customElement, LitElement } from 'lit-element';
+import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
+import styles from './card.scss';
+
+const { stablePrefix: ddsPrefix } = ddsSettings;
+
+/**
+ * The eyebrow content of card.
+ *
+ * @element dds-card-eyebrow
+ */
+@customElement(`${ddsPrefix}-card-eyebrow`)
+class DDSCardEyebrow extends LitElement {
+  /**
+   * The shadow slot this card eyebrow should be in.
+   */
+  @property({ reflect: true })
+  slot = 'eyebrow';
+
+  render() {
+    return html`
+      <slot></slot>
+    `;
+  }
+
+  // `styles` here is a `CSSResult` generated by custom WebPack loader
+  static styles = styles;
+}
+
+/* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
+export default DDSCardEyebrow;
diff --git a/packages/web-components/src/components/card/card-heading.ts b/packages/web-components/src/components/card/card-heading.ts
new file mode 100644
index 00000000000..ddb8a5e8662
--- /dev/null
+++ b/packages/web-components/src/components/card/card-heading.ts
@@ -0,0 +1,39 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2020
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { html, property, customElement, LitElement } from 'lit-element';
+import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
+import styles from './card.scss';
+
+const { stablePrefix: ddsPrefix } = ddsSettings;
+
+/**
+ * The heading content of card.
+ *
+ * @element dds-card-heading
+ */
+@customElement(`${ddsPrefix}-card-heading`)
+class DDSCardHeading extends LitElement {
+  /**
+   * The shadow slot this card heading should be in.
+   */
+  @property({ reflect: true })
+  slot = 'heading';
+
+  render() {
+    return html`
+      <slot></slot>
+    `;
+  }
+
+  // `styles` here is a `CSSResult` generated by custom WebPack loader
+  static styles = styles;
+}
+
+/* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
+export default DDSCardHeading;
diff --git a/packages/web-components/src/components/card/card.ts b/packages/web-components/src/components/card/card.ts
index 035f94bcf0b..d2726ed222a 100644
--- a/packages/web-components/src/components/card/card.ts
+++ b/packages/web-components/src/components/card/card.ts
@@ -24,8 +24,6 @@ const { stablePrefix: ddsPrefix } = ddsSettings;
  * The table mapping slot name with the private property name that indicates the existence of the slot content.
  */
 const slotExistencePropertyNames = {
-  eyebrow: '_hasEyebrow',
-  heading: '_hasHeading',
   image: '_hasImage',
   pictogram: '_hasPictogram',
 };
@@ -41,18 +39,6 @@ const slotExistencePropertyNames = {
  */
 @customElement(`${ddsPrefix}-card`)
 class DDSCard extends StableSelectorMixin(DDSLink) {
-  /**
-   * `true` if there is eyebrow content.
-   */
-  @internalProperty()
-  protected _hasEyebrow = false;
-
-  /**
-   * `true` if there is heading content.
-   */
-  @internalProperty()
-  protected _hasHeading = false;
-
   /**
    * `true` if there is image content.
    */
@@ -121,19 +107,12 @@ class DDSCard extends StableSelectorMixin(DDSLink) {
    * @returns The inner content.
    */
   protected _renderInner() {
-    const {
-      _hasEyebrow: hasEyebrow,
-      _hasHeading: hasHeading,
-      _handleSlotChange: handleSlotChange,
-      _hasPictogram: hasPictogram,
-    } = this;
+    const { _handleSlotChange: handleSlotChange, _hasPictogram: hasPictogram } = this;
     return html`
       ${this._renderImage()}
       <div class="${prefix}--card__wrapper ${hasPictogram ? `${prefix}--card__pictogram` : ''}">
         <div class="${prefix}--card__content">
-          <p ?hidden="${!hasEyebrow}" class="${prefix}--card__eyebrow">
-            <slot name="eyebrow" @slotchange="${handleSlotChange}"></slot>
-          </p>
+          <slot name="eyebrow"></slot>
           ${this.pictogramPlacement === PICTOGRAM_PLACEMENT.TOP
             ? html`
                 <slot
@@ -145,11 +124,7 @@ class DDSCard extends StableSelectorMixin(DDSLink) {
             : ''}
           ${this.pictogramPlacement !== PICTOGRAM_PLACEMENT.TOP || !hasPictogram
             ? html`
-                <h3 ?hidden="${!hasHeading}" class="${prefix}--card__heading">
-                  <span>
-                    <slot name="heading" @slotchange="${handleSlotChange}"></slot>
-                  </span>
-                </h3>
+                <slot name="heading"></slot>
               `
             : null}
           ${this.pictogramPlacement === PICTOGRAM_PLACEMENT.BOTTOM || !hasPictogram ? this._renderCopy() : ''}
@@ -164,11 +139,7 @@ class DDSCard extends StableSelectorMixin(DDSLink) {
             : ''}
           ${hasPictogram && this.pictogramPlacement === PICTOGRAM_PLACEMENT.TOP
             ? html`
-                <h3 ?hidden="${!hasHeading}" class="${prefix}--card__heading">
-                  <span>
-                    <slot name="heading" @slotchange="${handleSlotChange}"></slot>
-                  </span>
-                </h3>
+                <slot name="heading"></slot>
               `
             : null}
           <slot name="footer"></slot>
diff --git a/packages/web-components/src/components/carousel/__stories__/carousel.stories.ts b/packages/web-components/src/components/carousel/__stories__/carousel.stories.ts
index 7e07feaa3a4..8095dea15fd 100644
--- a/packages/web-components/src/components/carousel/__stories__/carousel.stories.ts
+++ b/packages/web-components/src/components/carousel/__stories__/carousel.stories.ts
@@ -16,6 +16,7 @@ import ifNonNull from 'carbon-web-components/es/globals/directives/if-non-null.j
 import ArrowRight20 from 'carbon-web-components/es/icons/arrow--right/20.js';
 import '../../card/card';
 import '../../card/card-footer';
+import '../../card/card-heading';
 import '../../content-section/content-section';
 import '../../content-section/content-section-copy';
 import '../../content-section/content-section-heading';
@@ -33,7 +34,7 @@ const copyOdd = `
 
 const Card = ({ copy = copyDefault, heading = headingDefault, href = hrefDefault } = {}) => html`
   <dds-card href="${ifNonNull(href)}">
-    <span slot="heading">${heading}</span>
+    <dds-card-heading>${heading}</dds-card-heading>
     ${copy}
     <dds-card-footer>
       ${ArrowRight20({ slot: 'icon' })}
diff --git a/packages/web-components/src/components/content-block-cards/__stories__/content-block-cards.stories.ts b/packages/web-components/src/components/content-block-cards/__stories__/content-block-cards.stories.ts
index 6173403873a..f97893bb2fb 100644
--- a/packages/web-components/src/components/content-block-cards/__stories__/content-block-cards.stories.ts
+++ b/packages/web-components/src/components/content-block-cards/__stories__/content-block-cards.stories.ts
@@ -14,6 +14,8 @@ import textNullable from '../../../../.storybook/knob-text-nullable';
 import readme from './README.stories.mdx';
 import '../content-block-cards';
 import '../../content-block/content-block-heading';
+import '../../card/card-eyebrow';
+import '../../card/card-heading';
 import '../../card-group/card-group';
 import '../../card-group/card-group-item';
 import '../../cta/card-cta-footer';
@@ -29,7 +31,7 @@ const ctaTypes = {
 
 const cardGroupItem = html`
   <dds-card-group-item cta-type="local" href="https://example.com">
-    <div slot="heading">Nunc convallis lobortis</div>
+    <dds-card-heading>Nunc convallis lobortis</dds-card-heading>
     <p>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.
       Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
@@ -46,8 +48,8 @@ const cardGroupItemWithImages = html`
       default-src="https://fpoimg.com/1056x792?text=4:3&amp;bg_color=ee5396&amp;text_color=161616"
     >
     </dds-image>
-    <div slot="eyebrow">Topic</div>
-    <div slot="heading">Natural Language Processing.</div>
+    <dds-card-eyebrow>Topic</dds-card-eyebrow>
+    <dds-card-heading>Natural Language Processing.</dds-card-heading>
     <dds-card-cta-footer><dds-card-cta-footer>
   </dds-card-group-item>
 `;
diff --git a/packages/web-components/src/components/content-block-cards/__tests__/content-block-cards.test.ts b/packages/web-components/src/components/content-block-cards/__tests__/content-block-cards.test.ts
index 98bbbcc15b2..1a90d017032 100644
--- a/packages/web-components/src/components/content-block-cards/__tests__/content-block-cards.test.ts
+++ b/packages/web-components/src/components/content-block-cards/__tests__/content-block-cards.test.ts
@@ -10,6 +10,7 @@
 import { html, render } from 'lit-html';
 import ArrowRight20 from 'carbon-web-components/es/icons/arrow--right/20';
 import ifNonNull from 'carbon-web-components/es/globals/directives/if-non-null.js';
+import '../../card/card-heading';
 import '../content-block-cards';
 
 const template = (props?) => {
@@ -40,7 +41,7 @@ describe('dds-content-block-cards', function() {
           heading: 'heading-foo',
           cards: html`
             <dds-card-group-item href="https://example.com">
-              <div slot="heading">Nunc convallis lobortis</div>
+              <dds-card-heading>Nunc convallis lobortis</dds-card-heading>
               <p>
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec
                 hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
diff --git a/packages/web-components/src/components/content-block-media/__stories__/content-block-media.stories.ts b/packages/web-components/src/components/content-block-media/__stories__/content-block-media.stories.ts
index c861fa63096..f174d080d0b 100644
--- a/packages/web-components/src/components/content-block-media/__stories__/content-block-media.stories.ts
+++ b/packages/web-components/src/components/content-block-media/__stories__/content-block-media.stories.ts
@@ -17,6 +17,7 @@ import '../../content-item/content-item-heading';
 import '../../content-item/content-item-copy';
 import '../../content-item/content-item';
 import '../content-block-media-content';
+import '../../card/card-heading';
 import '../../card-link/card-link';
 import '../../feature-card/feature-card';
 import '../../feature-card/feature-card-footer';
@@ -165,7 +166,7 @@ export const Default = () => {
           alt="Feature card image"
           default-src="https://fpoimg.com/672x672?text=1:1&amp;bg_color=ee5396&amp;text_color=161616"
         ></dds-image>
-        <span slot="heading">Consectetur adipisicing elit</span>
+        <dds-card-heading>Consectetur adipisicing elit</dds-card-heading>
         <dds-feature-card-footer>
           ${ArrowRight20({ slot: 'icon' })}
         </dds-feature-card-footer>
diff --git a/packages/web-components/src/components/content-block-mixed/__stories__/content-block-mixed.stories.ts b/packages/web-components/src/components/content-block-mixed/__stories__/content-block-mixed.stories.ts
index 6968323ba52..d410f9ddb09 100644
--- a/packages/web-components/src/components/content-block-mixed/__stories__/content-block-mixed.stories.ts
+++ b/packages/web-components/src/components/content-block-mixed/__stories__/content-block-mixed.stories.ts
@@ -12,6 +12,7 @@ import ArrowRight20 from 'carbon-web-components/es/icons/arrow--right/20';
 import { html } from 'lit-element';
 import ifNonNull from 'carbon-web-components/es/globals/directives/if-non-null.js';
 import textNullable from '../../../../.storybook/knob-text-nullable';
+import '../../card/card-heading';
 import readme from './README.stories.mdx';
 
 const copy = `Lorem ipsum dolor sit amet, consectetur adipiscing elit.
@@ -113,7 +114,9 @@ export const Default = ({ parameters }) => {
         <dds-content-group-heading>${cardsGroupHeading}</dds-content-group-heading>
         <p slot="copy">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
         <dds-content-group-cards-item href="www.ibm.com">
-          <span slot="heading">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt</span>
+          <dds-card-heading>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
+          </dds-card-heading>
           <p>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
             aliqua.
@@ -123,7 +126,9 @@ export const Default = ({ parameters }) => {
           </dds-card-footer>
         </dds-content-group-cards-item>
         <dds-content-group-cards-item href="www.ibm.com">
-          <span slot="heading">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt</span>
+          <dds-card-heading>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
+          </dds-card-heading>
           <p>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
             aliqua.
diff --git a/packages/web-components/src/components/content-group-cards/__stories__/content-group-cards.stories.ts b/packages/web-components/src/components/content-group-cards/__stories__/content-group-cards.stories.ts
index e3ec102a02e..301b70121cf 100644
--- a/packages/web-components/src/components/content-group-cards/__stories__/content-group-cards.stories.ts
+++ b/packages/web-components/src/components/content-group-cards/__stories__/content-group-cards.stories.ts
@@ -13,11 +13,14 @@ import readme from './README.stories.mdx';
 import textNullable from '../../../../.storybook/knob-text-nullable';
 import '../content-group-cards';
 import '../content-group-cards-item';
+import '../../card/card-heading';
 import '../../content-group/content-group-heading';
 
 const card1 = html`
   <dds-content-group-cards-item href="https://www.example.com">
-    <span slot="heading">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt</span>
+    <dds-card-heading>
+      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
+    </dds-card-heading>
     <p>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
     </p>
@@ -29,7 +32,9 @@ const card1 = html`
 
 const card2 = html`
   <dds-content-group-cards-item href="https://www.example.com">
-    <span slot="heading">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt</span>
+    <dds-card-heading>
+      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
+    </dds-card-heading>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
     <dds-card-footer icon-placement="left">
       ${ArrowRight20({ slot: 'icon' })}
diff --git a/packages/web-components/src/components/content-group-cards/__tests__/content-group-cards.test.ts b/packages/web-components/src/components/content-group-cards/__tests__/content-group-cards.test.ts
index 1dce117a707..4f2b2ffe219 100644
--- a/packages/web-components/src/components/content-group-cards/__tests__/content-group-cards.test.ts
+++ b/packages/web-components/src/components/content-group-cards/__tests__/content-group-cards.test.ts
@@ -9,6 +9,7 @@
 
 import { html, render } from 'lit-html';
 import ArrowRight20 from 'carbon-web-components/es/icons/arrow--right/20';
+import '../../card/card-heading';
 import '../content-group-cards';
 import '../content-group-cards-item';
 
@@ -36,9 +37,9 @@ describe('dds-content-group-cards', function() {
             <dds-content-group-heading>heading-foo</dds-content-group-heading>
             <p>copy-foo</p>
             <dds-content-group-cards-item href="https://www.example.com">
-              <span slot="heading"
-                >Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt</span
-              >
+              <dds-card-heading>
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
+              </dds-card-heading>
               <p>
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
                 magna aliqua.
diff --git a/packages/web-components/src/components/dotcom-shell/__stories__/dotcom-shell.stories.ts b/packages/web-components/src/components/dotcom-shell/__stories__/dotcom-shell.stories.ts
index 8c969434f0b..8150e42a3cd 100644
--- a/packages/web-components/src/components/dotcom-shell/__stories__/dotcom-shell.stories.ts
+++ b/packages/web-components/src/components/dotcom-shell/__stories__/dotcom-shell.stories.ts
@@ -25,6 +25,8 @@ import mastheadLinks from '../../masthead/__stories__/links';
 import mockFooterLinks from '../../footer/__stories__/links';
 import mockLegalLinks from '../../footer/__stories__/legal-links';
 import mockLocaleList from '../../locale-modal/__stories__/locale-data.json';
+import '../../card/card-eyebrow';
+import '../../card/card-heading';
 import readme from './README.stories.mdx';
 
 const footerSizes = {
@@ -115,8 +117,8 @@ const cardGroupItems = html`
       default-src="https://fpoimg.com/1056x792?text=4:3&amp;bg_color=ee5396&amp;text_color=161616"
     >
     </dds-image>
-    <div slot="eyebrow">Topic</div>
-    <div slot="heading">Natural Language Processing.</div>
+    <dds-card-eyebrow>Topic</dds-card-eyebrow>
+    <dds-card-heading>Natural Language Processing.</dds-card-heading>
     <dds-card-footer slot="footer">
       ${ArrowRight20({ slot: 'icon' })}
     </dds-card-footer>
diff --git a/packages/web-components/src/components/feature-card-block-large/__stories__/feature-card-block-large.stories.ts b/packages/web-components/src/components/feature-card-block-large/__stories__/feature-card-block-large.stories.ts
index 759e0b60544..9a82d43333d 100644
--- a/packages/web-components/src/components/feature-card-block-large/__stories__/feature-card-block-large.stories.ts
+++ b/packages/web-components/src/components/feature-card-block-large/__stories__/feature-card-block-large.stories.ts
@@ -12,6 +12,8 @@ import ArrowRight20 from 'carbon-web-components/es/icons/arrow--right/20.js';
 import ifNonNull from 'carbon-web-components/es/globals/directives/if-non-null.js';
 import readme from './README.stories.mdx';
 import textNullable from '../../../../.storybook/knob-text-nullable';
+import '../../card/card-eyebrow';
+import '../../card/card-heading';
 import '../../image/image';
 import '../feature-card-block-large';
 import '../feature-card-block-large-footer';
@@ -47,8 +49,8 @@ export const Default = ({ parameters }) => {
         >
         </dds-image-item>
       </dds-image>
-      <span slot="eyebrow">${eyebrow}</span>
-      <span slot="heading">${heading}</span>
+      <dds-card-eyebrow>${eyebrow}</dds-card-eyebrow>
+      <dds-card-heading>${heading}</dds-card-heading>
       <p>${copy}</p>
       <dds-feature-card-block-large-footer>
         ${ArrowRight20({ slot: 'icon' })}
diff --git a/packages/web-components/src/components/feature-card-block-medium/__stories__/feature-card-block-medium.stories.ts b/packages/web-components/src/components/feature-card-block-medium/__stories__/feature-card-block-medium.stories.ts
index 92e73008b1b..28f18d82d9a 100644
--- a/packages/web-components/src/components/feature-card-block-medium/__stories__/feature-card-block-medium.stories.ts
+++ b/packages/web-components/src/components/feature-card-block-medium/__stories__/feature-card-block-medium.stories.ts
@@ -13,14 +13,16 @@ import '../../image/image';
 import ifNonNull from 'carbon-web-components/es/globals/directives/if-non-null.js';
 import readme from './README.stories.mdx';
 import textNullable from '../../../../.storybook/knob-text-nullable';
+import '../../card/card-eyebrow';
+import '../../card/card-heading';
 import '../feature-card-block-medium';
 
 export const Default = ({ parameters }) => {
   const { copy, eyebrow, heading, defaultSrc, alt, href } = parameters?.props?.['dds-feature-card-block-medium'] ?? {};
   return html`
     <dds-feature-card-block-medium href=${ifNonNull(href || undefined)}>
-      <span slot="heading">${heading}</span>
-      <span slot="eyebrow">${eyebrow}</span>
+      <dds-card-heading>${heading}</dds-card-heading>
+      <dds-card-eyebrow>${eyebrow}</dds-card-eyebrow>
       <dds-image slot="image" alt="${ifNonNull(alt)}" default-src="${ifNonNull(defaultSrc)}"></dds-image>
       ${copy}
       <dds-feature-card-footer>
diff --git a/packages/web-components/src/components/feature-card-block-medium/feature-card-block-medium.ts b/packages/web-components/src/components/feature-card-block-medium/feature-card-block-medium.ts
index db588a04ad3..1933f59e6c5 100644
--- a/packages/web-components/src/components/feature-card-block-medium/feature-card-block-medium.ts
+++ b/packages/web-components/src/components/feature-card-block-medium/feature-card-block-medium.ts
@@ -26,14 +26,11 @@ const { stablePrefix: ddsPrefix } = ddsSettings;
 @customElement(`${ddsPrefix}-feature-card-block-medium`)
 class DDSFeatureCardBlockMedium extends StableSelectorMixin(DDSFeatureCard) {
   protected _renderInner() {
-    const { _hasEyebrow: hasEyebrow, _handleSlotChange: handleSlotChange } = this;
     return html`
       ${this._renderImage()}
       <div class="${prefix}--card__wrapper">
         <div class="${prefix}--card__content">
-          <p ?hidden="${!hasEyebrow}" class="${prefix}--card__eyebrow">
-            <slot name="eyebrow" @slotchange="${handleSlotChange}"></slot>
-          </p>
+          <slot name="eyebrow"></slot>
           <h3 class="${prefix}--card__heading">${this._renderCopy()}</h3>
           <slot name="footer"></slot>
         </div>
@@ -51,11 +48,8 @@ class DDSFeatureCardBlockMedium extends StableSelectorMixin(DDSFeatureCard) {
   }
 
   render() {
-    const { _hasHeading: hasHeading, _handleSlotChange: handleSlotChange } = this;
     return html`
-      <h3 ?hidden="${!hasHeading}" class="${prefix}--feature-card-block-medium__heading">
-        <slot name="heading" @slotchange="${handleSlotChange}"></slot>
-      </h3>
+      <slot name="heading"></slot>
       <div class="${prefix}--feature-card" data-autoid="${ddsPrefix}--feature-card">
         ${super.render()}
       </div>
diff --git a/packages/web-components/src/components/feature-card/__stories__/feature-card.stories.ts b/packages/web-components/src/components/feature-card/__stories__/feature-card.stories.ts
index 6aae7dc47f5..1ea7a634900 100644
--- a/packages/web-components/src/components/feature-card/__stories__/feature-card.stories.ts
+++ b/packages/web-components/src/components/feature-card/__stories__/feature-card.stories.ts
@@ -12,6 +12,7 @@ import ArrowRight20 from 'carbon-web-components/es/icons/arrow--right/20.js';
 import ifNonNull from 'carbon-web-components/es/globals/directives/if-non-null.js';
 import readme from './README.stories.mdx';
 import textNullable from '../../../../.storybook/knob-text-nullable';
+import '../../card/card-heading';
 import '../feature-card';
 import '../feature-card-footer';
 
@@ -20,7 +21,7 @@ export const Default = ({ parameters }) => {
   return html`
     <dds-feature-card href=${ifNonNull(href || undefined)}>
       <dds-image slot="image" alt="${ifNonNull(alt)}" default-src="${ifNonNull(defaultSrc)}"></dds-image>
-      <span slot="heading">${heading}</span>
+      <dds-card-heading>${heading}</dds-card-heading>
       <dds-feature-card-footer>
         ${ArrowRight20({ slot: 'icon' })}
       </dds-feature-card-footer>
diff --git a/packages/web-components/tests/snapshots/dds-card-cta.md b/packages/web-components/tests/snapshots/dds-card-cta.md
index f41d0572002..b5700b2e8a1 100644
--- a/packages/web-components/tests/snapshots/dds-card-cta.md
+++ b/packages/web-components/tests/snapshots/dds-card-cta.md
@@ -9,27 +9,15 @@
 </slot>
 <div class="bx--card__wrapper">
   <div class="bx--card__content">
-    <p
-      class="bx--card__eyebrow"
-      hidden=""
-    >
-      <slot name="eyebrow">
-      </slot>
-    </p>
+    <slot name="eyebrow">
+    </slot>
     <slot
       data-pictogram-placement="top"
       name="pictogram"
     >
     </slot>
-    <h3
-      class="bx--card__heading"
-      hidden=""
-    >
-      <span>
-        <slot name="heading">
-        </slot>
-      </span>
-    </h3>
+    <slot name="heading">
+    </slot>
     <div
       class="bx--card__copy"
       hidden=""
@@ -57,27 +45,15 @@
 </dds-image>
 <div class="bx--card__wrapper">
   <div class="bx--card__content">
-    <p
-      class="bx--card__eyebrow"
-      hidden=""
-    >
-      <slot name="eyebrow">
-      </slot>
-    </p>
+    <slot name="eyebrow">
+    </slot>
     <slot
       data-pictogram-placement="top"
       name="pictogram"
     >
     </slot>
-    <h3
-      class="bx--card__heading"
-      hidden=""
-    >
-      <span>
-        <slot name="heading">
-        </slot>
-      </span>
-    </h3>
+    <slot name="heading">
+    </slot>
     <div class="bx--card__copy">
       <slot>
       </slot>
diff --git a/packages/web-components/tests/snapshots/dds-card.md b/packages/web-components/tests/snapshots/dds-card.md
index ef0ec5e24fa..35450b428fe 100644
--- a/packages/web-components/tests/snapshots/dds-card.md
+++ b/packages/web-components/tests/snapshots/dds-card.md
@@ -9,27 +9,15 @@
 </slot>
 <div class="bx--card__wrapper">
   <div class="bx--card__content">
-    <p
-      class="bx--card__eyebrow"
-      hidden=""
-    >
-      <slot name="eyebrow">
-      </slot>
-    </p>
+    <slot name="eyebrow">
+    </slot>
     <slot
       data-pictogram-placement="top"
       name="pictogram"
     >
     </slot>
-    <h3
-      class="bx--card__heading"
-      hidden=""
-    >
-      <span>
-        <slot name="heading">
-        </slot>
-      </span>
-    </h3>
+    <slot name="heading">
+    </slot>
     <div
       class="bx--card__copy"
       hidden=""
@@ -51,27 +39,15 @@
 </slot>
 <div class="bx--card__wrapper">
   <div class="bx--card__content">
-    <p
-      class="bx--card__eyebrow"
-      hidden=""
-    >
-      <slot name="eyebrow">
-      </slot>
-    </p>
+    <slot name="eyebrow">
+    </slot>
     <slot
       data-pictogram-placement="top"
       name="pictogram"
     >
     </slot>
-    <h3
-      class="bx--card__heading"
-      hidden=""
-    >
-      <span>
-        <slot name="heading">
-        </slot>
-      </span>
-    </h3>
+    <slot name="heading">
+    </slot>
     <div
       class="bx--card__copy"
       hidden=""
diff --git a/packages/web-components/tests/snapshots/dds-feature-card-block-large.md b/packages/web-components/tests/snapshots/dds-feature-card-block-large.md
index 11d3af26aa1..8e5566abf5b 100644
--- a/packages/web-components/tests/snapshots/dds-feature-card-block-large.md
+++ b/packages/web-components/tests/snapshots/dds-feature-card-block-large.md
@@ -10,27 +10,15 @@
   </slot>
   <div class="bx--card__wrapper">
     <div class="bx--card__content">
-      <p
-        class="bx--card__eyebrow"
-        hidden=""
-      >
-        <slot name="eyebrow">
-        </slot>
-      </p>
+      <slot name="eyebrow">
+      </slot>
       <slot
         data-pictogram-placement="top"
         name="pictogram"
       >
       </slot>
-      <h3
-        class="bx--card__heading"
-        hidden=""
-      >
-        <span>
-          <slot name="heading">
-          </slot>
-        </span>
-      </h3>
+      <slot name="heading">
+      </slot>
       <div
         class="bx--card__copy"
         hidden=""
@@ -60,27 +48,15 @@
     </slot>
     <div class="bx--card__wrapper">
       <div class="bx--card__content">
-        <p
-          class="bx--card__eyebrow"
-          hidden=""
-        >
-          <slot name="eyebrow">
-          </slot>
-        </p>
+        <slot name="eyebrow">
+        </slot>
         <slot
           data-pictogram-placement="top"
           name="pictogram"
         >
         </slot>
-        <h3
-          class="bx--card__heading"
-          hidden=""
-        >
-          <span>
-            <slot name="heading">
-            </slot>
-          </span>
-        </h3>
+        <slot name="heading">
+        </slot>
         <div
           class="bx--card__copy"
           hidden=""
diff --git a/packages/web-components/tests/snapshots/dds-feature-card-block-medium.md b/packages/web-components/tests/snapshots/dds-feature-card-block-medium.md
index fa2cb628a4a..509acd8a73d 100644
--- a/packages/web-components/tests/snapshots/dds-feature-card-block-medium.md
+++ b/packages/web-components/tests/snapshots/dds-feature-card-block-medium.md
@@ -5,13 +5,8 @@
 ####   `should render with minimum attributes`
 
 ```
-<h3
-  class="bx--feature-card-block-medium__heading"
-  hidden=""
->
-  <slot name="heading">
-  </slot>
-</h3>
+<slot name="heading">
+</slot>
 <div
   class="bx--feature-card"
   data-autoid="dds--feature-card"
@@ -20,13 +15,8 @@
   </slot>
   <div class="bx--card__wrapper">
     <div class="bx--card__content">
-      <p
-        class="bx--card__eyebrow"
-        hidden=""
-      >
-        <slot name="eyebrow">
-        </slot>
-      </p>
+      <slot name="eyebrow">
+      </slot>
       <h3 class="bx--card__heading">
         <slot>
         </slot>
@@ -42,13 +32,8 @@
 ####   `should render with various attributes`
 
 ```
-<h3
-  class="bx--feature-card-block-medium__heading"
-  hidden=""
->
-  <slot name="heading">
-  </slot>
-</h3>
+<slot name="heading">
+</slot>
 <div
   class="bx--feature-card"
   data-autoid="dds--feature-card"
@@ -63,13 +48,8 @@
     </slot>
     <div class="bx--card__wrapper">
       <div class="bx--card__content">
-        <p
-          class="bx--card__eyebrow"
-          hidden=""
-        >
-          <slot name="eyebrow">
-          </slot>
-        </p>
+        <slot name="eyebrow">
+        </slot>
         <h3 class="bx--card__heading">
           <slot>
           </slot>
diff --git a/packages/web-components/tests/snapshots/dds-feature-card.md b/packages/web-components/tests/snapshots/dds-feature-card.md
index 7a3e3bd8584..846fabdaa97 100644
--- a/packages/web-components/tests/snapshots/dds-feature-card.md
+++ b/packages/web-components/tests/snapshots/dds-feature-card.md
@@ -9,27 +9,15 @@
 </slot>
 <div class="bx--card__wrapper">
   <div class="bx--card__content">
-    <p
-      class="bx--card__eyebrow"
-      hidden=""
-    >
-      <slot name="eyebrow">
-      </slot>
-    </p>
+    <slot name="eyebrow">
+    </slot>
     <slot
       data-pictogram-placement="top"
       name="pictogram"
     >
     </slot>
-    <h3
-      class="bx--card__heading"
-      hidden=""
-    >
-      <span>
-        <slot name="heading">
-        </slot>
-      </span>
-    </h3>
+    <slot name="heading">
+    </slot>
     <div
       class="bx--card__copy"
       hidden=""
@@ -57,27 +45,15 @@
   </slot>
   <div class="bx--card__wrapper">
     <div class="bx--card__content">
-      <p
-        class="bx--card__eyebrow"
-        hidden=""
-      >
-        <slot name="eyebrow">
-        </slot>
-      </p>
+      <slot name="eyebrow">
+      </slot>
       <slot
         data-pictogram-placement="top"
         name="pictogram"
       >
       </slot>
-      <h3
-        class="bx--card__heading"
-        hidden=""
-      >
-        <span>
-          <slot name="heading">
-          </slot>
-        </span>
-      </h3>
+      <slot name="heading">
+      </slot>
       <div
         class="bx--card__copy"
         hidden=""
diff --git a/packages/web-components/tests/snapshots/dds-feature-cta.md b/packages/web-components/tests/snapshots/dds-feature-cta.md
index 62a056bf257..3998c3e838d 100644
--- a/packages/web-components/tests/snapshots/dds-feature-cta.md
+++ b/packages/web-components/tests/snapshots/dds-feature-cta.md
@@ -9,27 +9,15 @@
 </slot>
 <div class="bx--card__wrapper">
   <div class="bx--card__content">
-    <p
-      class="bx--card__eyebrow"
-      hidden=""
-    >
-      <slot name="eyebrow">
-      </slot>
-    </p>
+    <slot name="eyebrow">
+    </slot>
     <slot
       data-pictogram-placement="top"
       name="pictogram"
     >
     </slot>
-    <h3
-      class="bx--card__heading"
-      hidden=""
-    >
-      <span>
-        <slot name="heading">
-        </slot>
-      </span>
-    </h3>
+    <slot name="heading">
+    </slot>
     <div
       class="bx--card__copy"
       hidden=""
@@ -51,27 +39,15 @@
 </slot>
 <div class="bx--card__wrapper">
   <div class="bx--card__content">
-    <p
-      class="bx--card__eyebrow"
-      hidden=""
-    >
-      <slot name="eyebrow">
-      </slot>
-    </p>
+    <slot name="eyebrow">
+    </slot>
     <slot
       data-pictogram-placement="top"
       name="pictogram"
     >
     </slot>
-    <h3
-      class="bx--card__heading"
-      hidden=""
-    >
-      <span>
-        <slot name="heading">
-        </slot>
-      </span>
-    </h3>
+    <slot name="heading">
+    </slot>
     <div class="bx--card__copy">
       <slot>
       </slot>