From 010c8eb6a765498838243ba615217dd1feb42dee Mon Sep 17 00:00:00 2001
From: Ariella Gilmore <ariellalgilmore@gmail.com>
Date: Fri, 6 Oct 2023 06:19:13 -0700
Subject: [PATCH] feat(content-item-row): v2 (#11004)

* feat(content-item-row): v2

* fix(content-item-row): styles cleanup

* fix(content-item-row): styles format

* fix(content-item-row): adjust spacing

* fix(content-item-horizontal): documentation

* fix(thumbnail): copy spacing
---
 docs/dotcom-v2-migration.md                   |   6 +
 packages/styles/carbon.yml                    |  10 +-
 .../_content-block-horizontal.scss            |   6 +-
 .../_content-item-row-media.scss}             |  78 +++++----
 .../_index.scss                               |   6 +-
 .../_content-item-row.scss}                   | 141 +++++----------
 .../_index.scss                               |   6 +-
 packages/styles/scss/ibm-dotcom-styles.scss   |   2 +-
 .../button-group/_button-group.scss           |  11 --
 .../sub-patterns/callout/_callout.scss        |  11 --
 .../sub-patterns/card-group/_card-group.scss  |  11 --
 .../scss/patterns/sub-patterns/card/index.css |  17 --
 .../patterns/sub-patterns/card/index.scss     |  11 --
 .../_content-item-horizontal.scss             |  11 --
 .../feature-card/_feature-card.scss           |  11 --
 .../patterns/sub-patterns/layout/_layout.scss |  11 --
 .../sub-patterns/link-list/_index.scss        |  11 --
 .../sub-patterns/link-list/_link-list.scss    |  11 --
 .../pictogram-item/_pictogram-item.scss       |  11 --
 .../patterns/sub-patterns/quote/_quote.scss   |  11 --
 .../tableofcontents/_tableofcontents.scss     |  11 --
 .../sub-patterns/tableofcontents/index.css    |  17 --
 .../sub-patterns/tableofcontents/index.scss   |  11 --
 packages/web-components/carbon.yml            |   6 +-
 .../content-block-horizontal/src/index.js     |  14 +-
 .../.gitignore                                |   0
 .../index.html                                |   0
 .../package.json                              |   2 +-
 .../sandbox.config.json                       |   0
 .../src/index.css                             |   0
 .../src/index.js                              |  16 +-
 .../webpack.config.js                         |   0
 .../tabs-extended-media/src/index.js          |  36 ++--
 .../.babelrc                                  |   0
 .../.gitignore                                |   0
 .../.sassrc                                   |   0
 .../cdn.html                                  |  64 +++----
 .../index.html                                |  62 +++----
 .../package.json                              |   2 +-
 .../sandbox.config.json                       |   0
 .../src/index.js                              |   2 +-
 .../src/index.scss                            |   0
 .../components/content-item/cdn.html          |  12 +-
 .../components/tabs-extended-media/cdn.html   |  98 +++++------
 .../components/tabs-extended-media/index.html | 160 +++++++++---------
 .../tabs-extended-media/src/index.js          |   2 +-
 .../__stories__/README.stories.mdx            |  18 +-
 .../__stories__/README.stories.react.mdx      |  20 +--
 ...content-block-horizontal.stories.react.tsx |  16 +-
 .../content-block-horizontal.stories.ts       |  10 +-
 .../content-block-horizontal.test.ts          |  14 +-
 .../content-block-horizontal/index.ts         |   2 +-
 .../content-item-horizontal.scss              |  13 --
 .../content-item-horizontal/index.ts          |  20 ---
 .../__stories__/README.stories.mdx            |  98 +++++------
 .../__stories__/README.stories.react.mdx      | 118 ++++++-------
 .../content-item-row.stories.react.tsx}       |  88 +++++-----
 .../__stories__/content-item-row.stories.ts}  |  91 +++++-----
 .../__tests__/content-item-horizontal.test.ts |  70 ++++----
 .../content-item-row-copy.ts}                 |  16 +-
 .../content-item-row-eyebrow.ts}              |  14 +-
 .../content-item-row-media-copy.ts}           |  14 +-
 .../content-item-row-media-featured.ts}       |  22 +--
 .../content-item-row-media-video.ts}          |  14 +-
 .../content-item-row-media.scss}              |   2 +-
 .../content-item-row-media.ts}                |  24 +--
 .../content-item-row-thumbnail-copy.ts}       |  14 +-
 .../content-item-row/content-item-row.scss    |   8 +
 .../content-item-row.ts}                      |  26 +--
 .../defs.ts                                   |   8 +-
 .../src/components/content-item-row/index.ts  |  20 +++
 .../__stories__/data/content.react.tsx        |  18 +-
 .../dotcom-shell/__stories__/data/content.ts  |  14 +-
 .../__stories__/scroll-animations.stories.ts  |   2 +-
 .../__stories__/README.stories.mdx            |   8 +-
 .../__stories__/README.stories.react.mdx      |  32 ++--
 .../tabs-extended-media.stories.react.tsx     |  18 +-
 .../tabs-extended-media.stories.ts            |  16 +-
 .../components/tabs-extended-media/index.ts   |   2 +-
 .../tests/cdn-build/app/canary.html           |   2 +-
 .../tests/cdn-build/app/latest.html           |   2 +-
 .../tests/cdn-build/app/next.html             |   2 +-
 .../tests/cdn-build/app/version.html          |   2 +-
 .../content-item-horizontal.cdn.e2e.js        |   8 +-
 .../content-item-horizontal.e2e.js            |   8 +-
 ...em-horizontal.svg => content-item-row.svg} |   0
 86 files changed, 774 insertions(+), 1028 deletions(-)
 rename packages/styles/scss/components/{content-item-horizontal-media/_content-item-horizontal-media.scss => content-item-row-media/_content-item-row-media.scss} (62%)
 rename packages/styles/scss/components/{content-item-horizontal => content-item-row-media}/_index.scss (58%)
 rename packages/styles/scss/components/{content-item-horizontal/_content-item-horizontal.scss => content-item-row/_content-item-row.scss} (54%)
 rename packages/styles/scss/components/{content-item-horizontal-media => content-item-row}/_index.scss (54%)
 delete mode 100644 packages/styles/scss/patterns/sub-patterns/button-group/_button-group.scss
 delete mode 100644 packages/styles/scss/patterns/sub-patterns/callout/_callout.scss
 delete mode 100644 packages/styles/scss/patterns/sub-patterns/card-group/_card-group.scss
 delete mode 100644 packages/styles/scss/patterns/sub-patterns/card/index.css
 delete mode 100644 packages/styles/scss/patterns/sub-patterns/card/index.scss
 delete mode 100644 packages/styles/scss/patterns/sub-patterns/content-item-horizontal/_content-item-horizontal.scss
 delete mode 100644 packages/styles/scss/patterns/sub-patterns/feature-card/_feature-card.scss
 delete mode 100644 packages/styles/scss/patterns/sub-patterns/layout/_layout.scss
 delete mode 100644 packages/styles/scss/patterns/sub-patterns/link-list/_index.scss
 delete mode 100644 packages/styles/scss/patterns/sub-patterns/link-list/_link-list.scss
 delete mode 100644 packages/styles/scss/patterns/sub-patterns/pictogram-item/_pictogram-item.scss
 delete mode 100644 packages/styles/scss/patterns/sub-patterns/quote/_quote.scss
 delete mode 100644 packages/styles/scss/patterns/sub-patterns/tableofcontents/_tableofcontents.scss
 delete mode 100644 packages/styles/scss/patterns/sub-patterns/tableofcontents/index.css
 delete mode 100644 packages/styles/scss/patterns/sub-patterns/tableofcontents/index.scss
 rename packages/web-components/examples/codesandbox/components-react/{content-item-horizontal => content-item-row}/.gitignore (100%)
 rename packages/web-components/examples/codesandbox/components-react/{content-item-horizontal => content-item-row}/index.html (100%)
 rename packages/web-components/examples/codesandbox/components-react/{content-item-horizontal => content-item-row}/package.json (92%)
 rename packages/web-components/examples/codesandbox/components-react/{content-item-horizontal => content-item-row}/sandbox.config.json (100%)
 rename packages/web-components/examples/codesandbox/components-react/{content-item-horizontal => content-item-row}/src/index.css (100%)
 rename packages/web-components/examples/codesandbox/components-react/{content-item-horizontal => content-item-row}/src/index.js (68%)
 rename packages/web-components/examples/codesandbox/components-react/{content-item-horizontal => content-item-row}/webpack.config.js (100%)
 rename packages/web-components/examples/codesandbox/components/{content-item-horizontal => content-item-row}/.babelrc (100%)
 rename packages/web-components/examples/codesandbox/components/{content-item-horizontal => content-item-row}/.gitignore (100%)
 rename packages/web-components/examples/codesandbox/components/{content-item-horizontal => content-item-row}/.sassrc (100%)
 rename packages/web-components/examples/codesandbox/components/{content-item-horizontal => content-item-row}/cdn.html (53%)
 rename packages/web-components/examples/codesandbox/components/{content-item-horizontal => content-item-row}/index.html (54%)
 rename packages/web-components/examples/codesandbox/components/{content-item-horizontal => content-item-row}/package.json (90%)
 rename packages/web-components/examples/codesandbox/components/{content-item-horizontal => content-item-row}/sandbox.config.json (100%)
 rename packages/web-components/examples/codesandbox/components/{content-item-horizontal => content-item-row}/src/index.js (91%)
 rename packages/web-components/examples/codesandbox/components/{content-item-horizontal => content-item-row}/src/index.scss (100%)
 delete mode 100644 packages/web-components/src/components/content-item-horizontal/content-item-horizontal.scss
 delete mode 100644 packages/web-components/src/components/content-item-horizontal/index.ts
 rename packages/web-components/src/components/{content-item-horizontal => content-item-row}/__stories__/README.stories.mdx (73%)
 rename packages/web-components/src/components/{content-item-horizontal => content-item-row}/__stories__/README.stories.react.mdx (60%)
 rename packages/web-components/src/components/{content-item-horizontal/__stories__/content-item-horizontal.stories.react.tsx => content-item-row/__stories__/content-item-row.stories.react.tsx} (68%)
 rename packages/web-components/src/components/{content-item-horizontal/__stories__/content-item-horizontal.stories.ts => content-item-row/__stories__/content-item-row.stories.ts} (74%)
 rename packages/web-components/src/components/{content-item-horizontal => content-item-row}/__tests__/content-item-horizontal.test.ts (73%)
 rename packages/web-components/src/components/{content-item-horizontal/content-item-horizontal-thumbnail-copy.ts => content-item-row/content-item-row-copy.ts} (65%)
 rename packages/web-components/src/components/{content-item-horizontal/content-item-horizontal-eyebrow.ts => content-item-row/content-item-row-eyebrow.ts} (71%)
 rename packages/web-components/src/components/{content-item-horizontal/content-item-horizontal-copy.ts => content-item-row/content-item-row-media-copy.ts} (70%)
 rename packages/web-components/src/components/{content-item-horizontal/content-item-horizontal-media-featured.ts => content-item-row/content-item-row-media-featured.ts} (60%)
 rename packages/web-components/src/components/{content-item-horizontal/content-item-horizontal-media-video.ts => content-item-row/content-item-row-media-video.ts} (69%)
 rename packages/web-components/src/components/{content-item-horizontal/content-item-horizontal-media.scss => content-item-row/content-item-row-media.scss} (69%)
 rename packages/web-components/src/components/{content-item-horizontal/content-item-horizontal-media.ts => content-item-row/content-item-row-media.ts} (77%)
 rename packages/web-components/src/components/{content-item-horizontal/content-item-horizontal-media-copy.ts => content-item-row/content-item-row-thumbnail-copy.ts} (68%)
 create mode 100644 packages/web-components/src/components/content-item-row/content-item-row.scss
 rename packages/web-components/src/components/{content-item-horizontal/content-item-horizontal.ts => content-item-row/content-item-row.ts} (68%)
 rename packages/web-components/src/components/{content-item-horizontal => content-item-row}/defs.ts (69%)
 create mode 100644 packages/web-components/src/components/content-item-row/index.ts
 rename thumbnails/{content-item-horizontal.svg => content-item-row.svg} (100%)

diff --git a/docs/dotcom-v2-migration.md b/docs/dotcom-v2-migration.md
index 70064791175..c7c545f6673 100644
--- a/docs/dotcom-v2-migration.md
+++ b/docs/dotcom-v2-migration.md
@@ -38,6 +38,7 @@ For Carbon v11 migration guidance, see their
 | content-group-cards       | This component is deprecated in v2 in favor for content-section/block & card-group components                                                  |
 | content-group-pictograms  | This component is deprecated in v2 in favor for content-section/block content-item (pictogram variant) components                              |
 | content-group-simple      | This component is deprecated in v2 in favor for content-group, image, & content-item components                                                |
+| content-item-horizontal   | View changes [here](#content-item-horizontal)                                                                                           |
 | cta                       | View changes [here](#cta)                                                                                                                      |
 | cta-block                 | This component is deprecated in v2 in favor for content-section/block & content-item components                                                |
 | cta-section               | This component is deprecated in v2 in favor for content-section/block & content-item components                                                |
@@ -79,6 +80,11 @@ For Carbon v11 migration guidance, see their
   options
 - New `link` property which takes the place of the deprecated `card-link`
 
+### Content item horizontal
+
+- `content-item-horizontal` changed names to `content-item-row`
+- All components with `content-item-horizontal-*` also changed to `content-item-row-*`
+
 ### CTA
 
 In Carbon for IBM.com v2, the CTA component (and all of its subcomponents) have
diff --git a/packages/styles/carbon.yml b/packages/styles/carbon.yml
index a46c9f1e841..a31c8dc2955 100644
--- a/packages/styles/carbon.yml
+++ b/packages/styles/carbon.yml
@@ -371,17 +371,17 @@ assets:
     thumbnailPath: ../../thumbnails/content-item.svg
     tags:
       - content-element
-  content-item-horizontal:
-    name: Content item horizontal
+  content-item-row:
+    name: Content item row
     description:
-      Content item horizontal component displays information in a horizontal
+      Content item row component displays information in a horizontal
       orientation.
-    externalDocsUrl: https://www.ibm.com/standards/carbon/components/content-item-horizontal
+    externalDocsUrl: https://www.ibm.com/standards/carbon/components/content-item-row
     status: stable
     type: component
     platform: web
     noIndex: true
-    thumbnailPath: ../../thumbnails/content-item-horizontal.svg
+    thumbnailPath: ../../thumbnails/content-item-row.svg
     tags:
       - content-block
       - content-element
diff --git a/packages/styles/scss/components/content-block-horizontal/_content-block-horizontal.scss b/packages/styles/scss/components/content-block-horizontal/_content-block-horizontal.scss
index 4a2ac664dd3..941f7f423e1 100644
--- a/packages/styles/scss/components/content-block-horizontal/_content-block-horizontal.scss
+++ b/packages/styles/scss/components/content-block-horizontal/_content-block-horizontal.scss
@@ -9,7 +9,7 @@
 @use '@carbon/styles/scss/config' as *;
 @use '@carbon/styles/scss/spacing' as *;
 @use '../../internal/content-block';
-@use '../content-item-horizontal';
+@use '../content-item-row';
 @use '../../globals/vars' as *;
 
 @mixin content-block-horizontal {
@@ -44,9 +44,7 @@
     margin-bottom: $spacing-07;
   }
 
-  :host(#{$c4d-prefix}-content-item-horizontal):last-child,
-  .#{$prefix}--content-block-horizontal
-    .#{$prefix}--content-item-horizontal__item:last-child {
+  :host(#{$c4d-prefix}-content-item-row):last-child {
     @include breakpoint(max) {
       padding-bottom: $spacing-13;
     }
diff --git a/packages/styles/scss/components/content-item-horizontal-media/_content-item-horizontal-media.scss b/packages/styles/scss/components/content-item-row-media/_content-item-row-media.scss
similarity index 62%
rename from packages/styles/scss/components/content-item-horizontal-media/_content-item-horizontal-media.scss
rename to packages/styles/scss/components/content-item-row-media/_content-item-row-media.scss
index 2efd3d00ee4..5876dcb3886 100644
--- a/packages/styles/scss/components/content-item-horizontal-media/_content-item-horizontal-media.scss
+++ b/packages/styles/scss/components/content-item-row-media/_content-item-row-media.scss
@@ -10,12 +10,13 @@
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/type' as *;
+@use '@carbon/styles/scss/utilities' as *;
 @use '../../globals/vars' as *;
 @use '../link-list';
 
-@mixin content-item-horizontal-media {
-  :host(#{$c4d-prefix}-content-item-horizontal-media) {
-    padding: $spacing-07 $spacing-05 $spacing-10;
+@mixin content-item-row-media {
+  :host(#{$c4d-prefix}-content-item-row-media) {
+    padding: $spacing-07 0 $spacing-10;
     display: block;
 
     @include breakpoint(md) {
@@ -26,61 +27,61 @@
       padding-top: $spacing-07;
       padding-bottom: $spacing-10;
     }
+
+    ::slotted([slot='media']) {
+      margin-top: $spacing-07;
+
+      @include breakpoint(md) {
+        margin-top: $spacing-09;
+      }
+
+      @include breakpoint(lg) {
+        margin-top: 0;
+      }
+    }
   }
 
-  :host(#{$c4d-prefix}-content-item-horizontal-media),
-  :host(#{$c4d-prefix}-content-item-horizontal-media-featured)
+  :host(#{$c4d-prefix}-content-item-row-media),
+  :host(#{$c4d-prefix}-content-item-row-media-featured)
     ::slotted([slot='heading']),
-  :host(#{$c4d-prefix}-content-item-horizontal-media-copy)
-    ::slotted(:not([slot])),
-  :host(#{$c4d-prefix}-content-item-horizontal-eyebrow),
-  .#{$prefix}--content-item-horizontal__item--eyebrow,
-  .#{$prefix}--content-item-horizontal__item--heading,
-  .#{$prefix}--content-item-horizontal__item--copy {
+  :host(#{$c4d-prefix}-content-item-row-media-copy) ::slotted(:not([slot])),
+  :host(#{$c4d-prefix}-content-item-row-eyebrow) {
     width: 100%;
     max-width: 100%;
     min-width: 0;
   }
 
-  :host(#{$c4d-prefix}-content-item-horizontal-eyebrow),
-  .#{$prefix}--content-item-horizontal__item--eyebrow {
+  :host(#{$c4d-prefix}-content-item-row-eyebrow) {
     color: $text-helper;
     padding-bottom: $spacing-03;
     @include type-style('label-01');
   }
 
-  :host(#{$c4d-prefix}-content-item-horizontal-media)
-    ::slotted([slot='heading']),
-  :host(#{$c4d-prefix}-content-item-horizontal-media-featured)
-    ::slotted([slot='heading']),
-  .#{$prefix}--content-item-horizontal__item--heading {
+  :host(#{$c4d-prefix}-content-item-row-media) ::slotted([slot='heading']),
+  :host(#{$c4d-prefix}-content-item-row-media-featured)
+    ::slotted([slot='heading']) {
     display: block;
     color: $text-primary;
     margin-bottom: $spacing-07;
     @include type-style('fluid-heading-03', true);
   }
 
-  :host(#{$c4d-prefix}-content-item-horizontal-media-copy)
-    ::slotted(:not([slot])) {
-    margin-bottom: $spacing-07;
+  :host(#{$c4d-prefix}-content-item-row-media-copy) ::slotted(:not([slot])) {
     max-width: rem(640px);
     p {
       color: $text-primary;
     }
   }
 
-  :host(#{$c4d-prefix}-content-item-horizontal-media-video) {
+  :host(#{$c4d-prefix}-content-item-row-media-video) {
     position: relative;
     text-align: left;
   }
 
-  :host(#{$c4d-prefix}-content-item-horizontal-media)
-    .#{$prefix}--content-item__cta,
-  :host(#{$c4d-prefix}-content-item-horizontal-media-featured)
-    .#{$prefix}--content-item__cta,
-  .#{$prefix}--content-item-horizontal__item--cta {
+  :host(#{$c4d-prefix}-content-item-row-media) .#{$prefix}--content-item__cta,
+  :host(#{$c4d-prefix}-content-item-row-media-featured)
+    .#{$prefix}--content-item__cta {
     margin-top: auto;
-    margin-bottom: $spacing-07;
 
     .#{$prefix}--link-list {
       padding: 0;
@@ -96,7 +97,7 @@
     }
   }
 
-  .#{$prefix}--content-item-horizontal__row {
+  .#{$prefix}--content-item-row__row {
     width: 100%;
     display: grid;
     grid-auto-flow: dense;
@@ -107,7 +108,7 @@
       grid-template-columns: repeat(12, 1fr);
     }
 
-    .#{$prefix}--content-item-horizontal__col {
+    .#{$prefix}--content-item-row__col {
       text-align: left;
       grid-column: 1 / span 4;
 
@@ -123,8 +124,8 @@
       }
     }
 
-    &.#{$prefix}--content-item-horizontal-media__align-left {
-      .#{$prefix}--content-item-horizontal__col {
+    &.#{$prefix}--content-item-row-media__align-left {
+      .#{$prefix}--content-item-row__col {
         &:first-of-type {
           @include breakpoint(lg) {
             margin-inline-end: 0;
@@ -142,7 +143,7 @@
     }
   }
 
-  :host(#{$c4d-prefix}-content-item-horizontal-media-featured) {
+  :host(#{$c4d-prefix}-content-item-row-media-featured) {
     display: block;
     position: relative;
     padding-block-start: $spacing-07;
@@ -158,8 +159,8 @@
       background-color: $layer-accent-01;
     }
 
-    .#{$prefix}--content-item-horizontal__row {
-      .#{$prefix}--content-item-horizontal__col {
+    .#{$prefix}--content-item-row__row {
+      .#{$prefix}--content-item-row__col {
         &:last-of-type {
           @include breakpoint-down(md) {
             margin-block-start: 0;
@@ -170,10 +171,17 @@
 
     ::slotted([slot='media']) {
       grid-column: 1 / span 4;
+      margin-top: $spacing-07;
+
+      @include breakpoint(md) {
+        margin-top: $spacing-09;
+      }
+
       @include breakpoint(lg) {
         grid-column: 1 / span 12;
       }
     }
+
     ::slotted(#{$c4d-prefix}-image) {
       max-width: none;
       margin-top: 0;
diff --git a/packages/styles/scss/components/content-item-horizontal/_index.scss b/packages/styles/scss/components/content-item-row-media/_index.scss
similarity index 58%
rename from packages/styles/scss/components/content-item-horizontal/_index.scss
rename to packages/styles/scss/components/content-item-row-media/_index.scss
index c7f9d4f0794..7398bdaa295 100644
--- a/packages/styles/scss/components/content-item-horizontal/_index.scss
+++ b/packages/styles/scss/components/content-item-row-media/_index.scss
@@ -5,7 +5,7 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@forward 'content-item-horizontal';
-@use 'content-item-horizontal';
+@forward 'content-item-row-media';
+@use 'content-item-row-media';
 
-@include content-item-horizontal.content-item-horizontal;
+@include content-item-row-media.content-item-row-media;
diff --git a/packages/styles/scss/components/content-item-horizontal/_content-item-horizontal.scss b/packages/styles/scss/components/content-item-row/_content-item-row.scss
similarity index 54%
rename from packages/styles/scss/components/content-item-horizontal/_content-item-horizontal.scss
rename to packages/styles/scss/components/content-item-row/_content-item-row.scss
index 7a19e83ff29..63613781593 100644
--- a/packages/styles/scss/components/content-item-horizontal/_content-item-horizontal.scss
+++ b/packages/styles/scss/components/content-item-row/_content-item-row.scss
@@ -10,20 +10,17 @@
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/type' as *;
+@use '@carbon/styles/scss/utilities' as *;
 @use '../../globals/utils/flex-grid' as *;
 @use '../../globals/vars' as *;
 @use '../link-list';
 
-@mixin content-item-horizontal {
-  // Web component
-  :host(#{$c4d-prefix}-content-item-horizontal),
-  // React
-  .#{$prefix}--content-item-horizontal__item {
+@mixin content-item-row {
+  :host(#{$c4d-prefix}-content-item-row) {
     @include make-row;
 
     border-top: 1px solid $layer-accent-01;
-    padding-left: $spacing-05;
-    padding-right: $spacing-05;
+    margin: 0;
 
     @include breakpoint(sm) {
       padding-top: $spacing-07;
@@ -34,27 +31,9 @@
       padding-top: $spacing-07;
       padding-bottom: $spacing-10;
     }
-
-    &[thumbnail] {
-      @include breakpoint(md) {
-        min-height: rem(306px);
-      }
-
-      @include breakpoint(lg) {
-        min-height: rem(272px);
-      }
-
-      @include breakpoint(xlg) {
-        min-height: rem(252px);
-      }
-    }
   }
 
-  :host(#{$c4d-prefix}-content-item-horizontal) {
-    margin: 0;
-  }
-
-  .#{$prefix}--content-item-horizontal__row {
+  .#{$prefix}--content-item-row__row {
     min-height: $spacing-13;
     width: 100%;
     display: flex;
@@ -63,16 +42,13 @@
       flex-direction: row;
     }
 
-    :host(#{$c4d-prefix}-content-item-horizontal)[thumbnail] & {
+    :host(#{$c4d-prefix}-content-item-row)[thumbnail] & {
       justify-content: space-between;
       min-height: auto;
     }
   }
 
-  .#{$prefix}--content-item-horizontal__col {
-    // React styles - only accounting for the default variation
-    @include make-col-ready;
-
+  .#{$prefix}--content-item-row__col {
     // Web component layout styles - accommodating the thumbnail variation
     &--1,
     &--2 {
@@ -90,7 +66,7 @@
         width: auto;
       }
 
-      :host(#{$c4d-prefix}-content-item-horizontal)[thumbnail] & {
+      :host(#{$c4d-prefix}-content-item-row)[thumbnail] & {
         @include breakpoint(md) {
           @include make-col(4, 8);
         }
@@ -115,7 +91,7 @@
         grid-column: 9 / span 4;
         grid-row: 1 / span 1;
       }
-      :host(#{$c4d-prefix}-content-item-horizontal)[thumbnail] & {
+      :host(#{$c4d-prefix}-content-item-row)[thumbnail] & {
         @include breakpoint(md) {
           @include make-col(3, 8);
         }
@@ -127,13 +103,9 @@
     }
   }
 
-  // Web component
-  .#{$prefix}--content-item-horizontal__heading-wrapper,
-  .#{$prefix}--content-item-horizontal__content-wrapper,
-  // React
-  .#{$prefix}--content-item-horizontal__col:first-of-type,
-  .#{$prefix}--content-item-horizontal__col:last-of-type {
-    :host(#{$c4d-prefix}-content-item-horizontal)[thumbnail] & {
+  .#{$prefix}--content-item-row__heading-wrapper,
+  .#{$prefix}--content-item-row__content-wrapper {
+    :host(#{$c4d-prefix}-content-item-row)[thumbnail] & {
       @include make-col(4, 4);
 
       @include breakpoint(lg) {
@@ -142,10 +114,11 @@
     }
   }
 
-  // Web component
-  .#{$prefix}--content-item-horizontal__heading-wrapper,
-  // React
-  .#{$prefix}--content-item-horizontal__col:first-of-type {
+  .#{$prefix}--content-item-row__heading-wrapper {
+    grid-column: 1 / span 4;
+    padding-left: 0;
+    padding-right: 0;
+
     @include breakpoint(md) {
       @include make-col(6, 12);
     }
@@ -154,30 +127,23 @@
     }
   }
 
-  // Web component
-  .#{$prefix}--content-item-horizontal__content-wrapper,
-  // React
-  .#{$prefix}--content-item-horizontal__col:last-of-type {
+  .#{$prefix}--content-item-row__content-wrapper {
+    box-sizing: border-box;
     display: flex;
     flex-direction: column;
     width: 100%;
+    grid-column: 1 / span 4;
 
     @include breakpoint(lg) {
       @include make-col(8, 12);
 
       display: flex;
-    }
-  }
-
-  .#{$prefix}--content-item-horizontal__content-wrapper {
-    grid-column: 1 / span 4;
-    @include breakpoint(lg) {
       grid-column: 5 / span 4;
       padding-left: $spacing-04;
     }
   }
 
-  .#{$prefix}--content-item-horizontal__content-wrapper_with-media {
+  .#{$prefix}--content-item-row__content-wrapper_with-media {
     width: 100%;
     @include breakpoint(lg) {
       @include make-col(8, 12);
@@ -186,35 +152,26 @@
     }
   }
 
-  :host(#{$c4d-prefix}-content-item-horizontal) ::slotted([slot='media']) {
+  :host(#{$c4d-prefix}-content-item-row) ::slotted([slot='media']) {
     display: block;
     padding-top: $spacing-07;
-  }
-
-  :host(#{$c4d-prefix}-content-item-horizontal) ::slotted([slot='heading']),
-  :host(#{$c4d-prefix}-content-item-horizontal-copy) ::slotted(:not([slot])),
-  :host(#{$c4d-prefix}-content-item-horizontal-eyebrow),
-  .#{$prefix}--content-item-horizontal__item--eyebrow,
-  .#{$prefix}--content-item-horizontal__item--heading,
-  .#{$prefix}--content-item-horizontal__item--copy {
     @include breakpoint(md) {
-      max-width: 90%;
+      padding-top: $spacing-09;
     }
   }
 
-  :host(#{$c4d-prefix}-content-item-horizontal-copy) ::slotted(:not([slot])) {
+  :host(#{$c4d-prefix}-content-item-row-copy) ::slotted(:not([slot])) {
     max-width: rem(640px);
   }
 
-  :host(#{$c4d-prefix}-content-item-horizontal-eyebrow),
-  .#{$prefix}--content-item-horizontal__item--eyebrow {
+  :host(#{$c4d-prefix}-content-item-row-eyebrow) {
+    display: block;
     color: $text-helper;
     padding-bottom: $spacing-03;
     @include type-style('label-02');
   }
 
-  :host(#{$c4d-prefix}-content-item-horizontal) ::slotted([slot='heading']),
-  .#{$prefix}--content-item-horizontal__item--heading {
+  :host(#{$c4d-prefix}-content-item-row) ::slotted([slot='heading']) {
     display: block;
     color: $text-primary;
     margin-bottom: $spacing-07;
@@ -230,27 +187,34 @@
     }
   }
 
-  :host(#{$c4d-prefix}-content-item-horizontal)[thumbnail] {
+  :host(#{$c4d-prefix}-content-item-row)[thumbnail] {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     grid-auto-flow: dense;
 
     @include breakpoint(md) {
+      min-height: rem(306px);
       grid-template-columns: repeat(8, 1fr);
       column-gap: $spacing-07;
     }
+
     @include breakpoint(lg) {
+      min-height: rem(272px);
       grid-template-columns: repeat(12, 1fr);
     }
+
+    @include breakpoint(xlg) {
+      min-height: rem(252px);
+    }
   }
 
-  :host(#{$c4d-prefix}-content-item-horizontal[thumbnail])
-    .#{$prefix}--content-item-horizontal__heading-wrapper {
+  :host(#{$c4d-prefix}-content-item-row[thumbnail])
+    .#{$prefix}--content-item-row__heading-wrapper {
     max-width: 100%;
   }
 
-  :host(#{$c4d-prefix}-content-item-horizontal[thumbnail])
-    .#{$prefix}--content-item-horizontal__content-wrapper {
+  :host(#{$c4d-prefix}-content-item-row[thumbnail])
+    .#{$prefix}--content-item-row__content-wrapper {
     @include breakpoint-down(md) {
       margin-bottom: $spacing-07;
     }
@@ -259,8 +223,8 @@
     padding-left: 0;
   }
 
-  :host(#{$c4d-prefix}-content-item-horizontal[thumbnail]) {
-    .#{$prefix}--content-item-horizontal__body-wrapper {
+  :host(#{$c4d-prefix}-content-item-row[thumbnail]) {
+    .#{$prefix}--content-item-row__body-wrapper {
       grid-column: 1 / span 4;
       max-width: 100%;
 
@@ -269,7 +233,7 @@
         display: contents;
       }
     }
-    .#{$prefix}--content-item-horizontal__col--2 {
+    .#{$prefix}--content-item-row__col--2 {
       max-width: 100%;
       grid-column: 1 / span 4;
       @include breakpoint(md) {
@@ -281,24 +245,7 @@
     }
   }
 
-  .#{$prefix}--content-item-horizontal__heading-wrapper {
-    grid-column: 1 / span 4;
-    padding-left: 0;
-    padding-right: 0;
-  }
-
-  :host(#{$c4d-prefix}-content-item-horizontal-copy) ::slotted(:not([slot])),
-  .#{$prefix}--content-item-horizontal__item--copy {
-    margin-bottom: $spacing-07;
-  }
-
-  :host(#{$c4d-prefix}-content-item-horizontal-thumbnail-copy)
-    ::slotted(#{$c4d-prefix}-content-item-paragraph) {
-    margin-bottom: $spacing-07;
-  }
-
-  :host(#{$c4d-prefix}-content-item-horizontal) .#{$prefix}--content-item__cta,
-  .#{$prefix}--content-item-horizontal__item--cta {
+  :host(#{$c4d-prefix}-content-item-row) .#{$prefix}--content-item__cta {
     .#{$prefix}--link-list {
       padding: 0;
 
@@ -312,7 +259,7 @@
     }
   }
 
-  :host(#{$c4d-prefix}-content-item-horizontal) ::slotted([slot='thumbnail']) {
+  :host(#{$c4d-prefix}-content-item-row) ::slotted([slot='thumbnail']) {
     @include breakpoint(md) {
       @include make-col(3, 3);
 
diff --git a/packages/styles/scss/components/content-item-horizontal-media/_index.scss b/packages/styles/scss/components/content-item-row/_index.scss
similarity index 54%
rename from packages/styles/scss/components/content-item-horizontal-media/_index.scss
rename to packages/styles/scss/components/content-item-row/_index.scss
index 78cf2edae1d..1cb41ca9bdc 100644
--- a/packages/styles/scss/components/content-item-horizontal-media/_index.scss
+++ b/packages/styles/scss/components/content-item-row/_index.scss
@@ -5,7 +5,7 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@forward 'content-item-horizontal-media';
-@use 'content-item-horizontal-media';
+@forward 'content-item-row';
+@use 'content-item-row';
 
-@include content-item-horizontal-media.content-item-horizontal-media;
+@include content-item-row.content-item-row;
diff --git a/packages/styles/scss/ibm-dotcom-styles.scss b/packages/styles/scss/ibm-dotcom-styles.scss
index b154395c8c7..756e579f7db 100644
--- a/packages/styles/scss/ibm-dotcom-styles.scss
+++ b/packages/styles/scss/ibm-dotcom-styles.scss
@@ -30,7 +30,7 @@
 @use 'components/content-group-cards';
 @use 'components/content-group-pictograms';
 @use 'components/content-group-simple';
-@use 'components/content-item-horizontal';
+@use 'components/content-item-row';
 @use 'components/cta-section';
 @use 'components/dotcom-shell';
 @use 'components/expressive-modal';
diff --git a/packages/styles/scss/patterns/sub-patterns/button-group/_button-group.scss b/packages/styles/scss/patterns/sub-patterns/button-group/_button-group.scss
deleted file mode 100644
index d01c0a726c4..00000000000
--- a/packages/styles/scss/patterns/sub-patterns/button-group/_button-group.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 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.
- */
-
-/// @deprecated Remap import to "@carbon/ibmdotcom-styles/scss/components/button-group/button-group"
-
-@warn 'Deprecated scss import for `buttongroup`, remap to `@carbon/ibmdotcom-styles/scss/components/button-group/button-group`';
-@use '../../../components/button-group';
diff --git a/packages/styles/scss/patterns/sub-patterns/callout/_callout.scss b/packages/styles/scss/patterns/sub-patterns/callout/_callout.scss
deleted file mode 100644
index a7be8865100..00000000000
--- a/packages/styles/scss/patterns/sub-patterns/callout/_callout.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 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.
- */
-
-/// @deprecated Remap import to "@carbon/ibmdotcom-styles/scss/components/callout/callout"
-
-@warn 'Deprecated scss import for `callout`, remap to `@carbon/ibmdotcom-styles/scss/components/callout/callout`';
-@use '../../../components/callout';
diff --git a/packages/styles/scss/patterns/sub-patterns/card-group/_card-group.scss b/packages/styles/scss/patterns/sub-patterns/card-group/_card-group.scss
deleted file mode 100644
index 9422df15856..00000000000
--- a/packages/styles/scss/patterns/sub-patterns/card-group/_card-group.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 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.
- */
-
-/// @deprecated Remap import to "@carbon/ibmdotcom-styles/scss/components/card-group/card-group"
-
-@warn 'Deprecated scss import for `card-group`, remap to `@carbon/ibmdotcom-styles/scss/components/card-group/card-group`';
-@use '../../../components/card-group';
diff --git a/packages/styles/scss/patterns/sub-patterns/card/index.css b/packages/styles/scss/patterns/sub-patterns/card/index.css
deleted file mode 100644
index a95c660e10c..00000000000
--- a/packages/styles/scss/patterns/sub-patterns/card/index.css
+++ /dev/null
@@ -1,17 +0,0 @@
-/* Error: @use rules must be written before any other rules.
- *    ,
- * 11 | @use '../../../components/card';
- *    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
- *    '
- *   scss/patterns/sub-patterns/card/index.scss 11:1  root stylesheet */
-
-body::before {
-  font-family: 'Source Code Pro', 'SF Mono', Monaco, Inconsolata, 'Fira Mono',
-    'Droid Sans Mono', monospace;
-  white-space: pre;
-  display: block;
-  padding: 1em;
-  margin-bottom: 1em;
-  border-bottom: 2px solid #000000;
-  content: "Error: @use rules must be written before any other rules.\a    \2577 \a 11 \2502  @use '../../../components/card';\a    \2502  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\a    \2575 \a   scss/patterns/sub-patterns/card/index.scss 11:1  root stylesheet";
-}
diff --git a/packages/styles/scss/patterns/sub-patterns/card/index.scss b/packages/styles/scss/patterns/sub-patterns/card/index.scss
deleted file mode 100644
index 7c3ea95c16d..00000000000
--- a/packages/styles/scss/patterns/sub-patterns/card/index.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 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.
- */
-
-/// @deprecated Remap import to "@carbon/ibmdotcom-styles/scss/components/card/index"
-
-@warn 'Deprecated scss import for `card`, remap to `@carbon/ibmdotcom-styles/scss/components/card/index`';
-@use '../../../components/card';
diff --git a/packages/styles/scss/patterns/sub-patterns/content-item-horizontal/_content-item-horizontal.scss b/packages/styles/scss/patterns/sub-patterns/content-item-horizontal/_content-item-horizontal.scss
deleted file mode 100644
index 183a523bc7e..00000000000
--- a/packages/styles/scss/patterns/sub-patterns/content-item-horizontal/_content-item-horizontal.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 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.
- */
-
-/// @deprecated Remap import to "@carbon/ibmdotcom-styles/scss/components/content-item-horizontal/content-item-horizontal"
-
-@warn 'Deprecated scss import for `content-item-horizontal`, remap to `@carbon/ibmdotcom-styles/scss/components/content-item-horizontal/content-item-horizontal`';
-@use '../../../components/content-item-horizontal';
diff --git a/packages/styles/scss/patterns/sub-patterns/feature-card/_feature-card.scss b/packages/styles/scss/patterns/sub-patterns/feature-card/_feature-card.scss
deleted file mode 100644
index f512c3978a8..00000000000
--- a/packages/styles/scss/patterns/sub-patterns/feature-card/_feature-card.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 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.
- */
-
-/// @deprecated Remap import to "@carbon/ibmdotcom-styles/scss/components/feature-card/feature-card"
-
-@warn 'Deprecated scss import for `feature-card`, remap to `@carbon/ibmdotcom-styles/scss/components/feature-card/feature-card`';
-@use '../../../components/feature-card';
diff --git a/packages/styles/scss/patterns/sub-patterns/layout/_layout.scss b/packages/styles/scss/patterns/sub-patterns/layout/_layout.scss
deleted file mode 100644
index 571e7e1be99..00000000000
--- a/packages/styles/scss/patterns/sub-patterns/layout/_layout.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 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.
- */
-
-/// @deprecated Remap import to "@carbon/ibmdotcom-styles/scss/components/layout/layout"
-
-@warn 'Deprecated scss import for `layout`, remap to `@carbon/ibmdotcom-styles/scss/components/layout/layout`';
-@use '../../../components/layout';
diff --git a/packages/styles/scss/patterns/sub-patterns/link-list/_index.scss b/packages/styles/scss/patterns/sub-patterns/link-list/_index.scss
deleted file mode 100644
index b9aa902c4ee..00000000000
--- a/packages/styles/scss/patterns/sub-patterns/link-list/_index.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 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.
- */
-
-/// @deprecated Remap import to "@carbon/ibmdotcom-styles/scss/components/link-list/index"
-
-@warn 'Deprecated scss import for `link-list`, remap to `@carbon/ibmdotcom-styles/scss/components/link-list/index`';
-@use '../../../components/link-list';
diff --git a/packages/styles/scss/patterns/sub-patterns/link-list/_link-list.scss b/packages/styles/scss/patterns/sub-patterns/link-list/_link-list.scss
deleted file mode 100644
index 79b1019ecf9..00000000000
--- a/packages/styles/scss/patterns/sub-patterns/link-list/_link-list.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 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.
- */
-
-/// @deprecated Remap import to "@carbon/ibmdotcom-styles/scss/components/link-list/link-list"
-
-@warn 'Deprecated scss import for `link-list`, remap to `@carbon/ibmdotcom-styles/scss/components/link-list/link-list`';
-@use '../../../components/link-list';
diff --git a/packages/styles/scss/patterns/sub-patterns/pictogram-item/_pictogram-item.scss b/packages/styles/scss/patterns/sub-patterns/pictogram-item/_pictogram-item.scss
deleted file mode 100644
index b0b03f3040a..00000000000
--- a/packages/styles/scss/patterns/sub-patterns/pictogram-item/_pictogram-item.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 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.
- */
-
-/// @deprecated Remap import to "@carbon/ibmdotcom-styles/scss/components/pictogram-item/pictogram-item"
-
-@warn 'Deprecated scss import for `pictogram-item`, remap to `@carbon/ibmdotcom-styles/scss/components/pictogram-item/pictogram-item`';
-@use '../../../components/pictogram-item';
diff --git a/packages/styles/scss/patterns/sub-patterns/quote/_quote.scss b/packages/styles/scss/patterns/sub-patterns/quote/_quote.scss
deleted file mode 100644
index 88a45096c3b..00000000000
--- a/packages/styles/scss/patterns/sub-patterns/quote/_quote.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 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.
- */
-
-/// @deprecated Remap import to "@carbon/ibmdotcom-styles/scss/components/quote/quote"
-
-@warn 'Deprecated scss import for `quote`, remap to `@carbon/ibmdotcom-styles/scss/components/quote/quote`';
-@use '../../../components/quote';
diff --git a/packages/styles/scss/patterns/sub-patterns/tableofcontents/_tableofcontents.scss b/packages/styles/scss/patterns/sub-patterns/tableofcontents/_tableofcontents.scss
deleted file mode 100644
index 55e7f29d699..00000000000
--- a/packages/styles/scss/patterns/sub-patterns/tableofcontents/_tableofcontents.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 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.
- */
-
-/// @deprecated Remap import to "@carbon/ibmdotcom-styles/scss/components/tableofcontents/tableofcontents"
-
-@warn 'Deprecated scss import for `tableofcontents`, remap to `@carbon/ibmdotcom-styles/scss/components/tableofcontents/tableofcontents`';
-@use '../../../components/tableofcontents';
diff --git a/packages/styles/scss/patterns/sub-patterns/tableofcontents/index.css b/packages/styles/scss/patterns/sub-patterns/tableofcontents/index.css
deleted file mode 100644
index 22e6e4b8490..00000000000
--- a/packages/styles/scss/patterns/sub-patterns/tableofcontents/index.css
+++ /dev/null
@@ -1,17 +0,0 @@
-/* Error: @use rules must be written before any other rules.
- *    ,
- * 11 | @use '../../../components/tableofcontents';
- *    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
- *    '
- *   scss/patterns/sub-patterns/tableofcontents/index.scss 11:1  root stylesheet */
-
-body::before {
-  font-family: 'Source Code Pro', 'SF Mono', Monaco, Inconsolata, 'Fira Mono',
-    'Droid Sans Mono', monospace;
-  white-space: pre;
-  display: block;
-  padding: 1em;
-  margin-bottom: 1em;
-  border-bottom: 2px solid #000000;
-  content: "Error: @use rules must be written before any other rules.\a    \2577 \a 11 \2502  @use '../../../components/tableofcontents';\a    \2502  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\a    \2575 \a   scss/patterns/sub-patterns/tableofcontents/index.scss 11:1  root stylesheet";
-}
diff --git a/packages/styles/scss/patterns/sub-patterns/tableofcontents/index.scss b/packages/styles/scss/patterns/sub-patterns/tableofcontents/index.scss
deleted file mode 100644
index 9466d096c1a..00000000000
--- a/packages/styles/scss/patterns/sub-patterns/tableofcontents/index.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 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.
- */
-
-/// @deprecated Remap import to "@carbon/ibmdotcom-styles/scss/components/tableofcontents/index"
-
-@warn 'Deprecated scss import for `tableofcontents`, remap to `@carbon/ibmdotcom-styles/scss/components/tableofcontents/index`';
-@use '../../../components/tableofcontents';
diff --git a/packages/web-components/carbon.yml b/packages/web-components/carbon.yml
index 038a73f7b00..dccec94392b 100644
--- a/packages/web-components/carbon.yml
+++ b/packages/web-components/carbon.yml
@@ -231,15 +231,15 @@ assets:
         name: Storybook
         action: link
         url: https://www.ibm.com/standards/carbon/web-components/?path=/docs/components-content-item
-  content-item-horizontal:
-    externalDocsUrl: https://www.ibm.com/standards/carbon/components/content-item-horizontal
+  content-item-row:
+    externalDocsUrl: https://www.ibm.com/standards/carbon/components/content-item-row
     status: stable
     framework: web-component
     demoLinks:
       - type: storybook
         name: Storybook
         action: link
-        url: https://www.ibm.com/standards/carbon/web-components/?path=/docs/components-content-item-horizontal
+        url: https://www.ibm.com/standards/carbon/web-components/?path=/docs/components-content-item-row
   content-section:
     externalDocsUrl: https://www.ibm.com/standards/carbon/components/content-section
     status: stable
diff --git a/packages/web-components/examples/codesandbox/components-react/content-block-horizontal/src/index.js b/packages/web-components/examples/codesandbox/components-react/content-block-horizontal/src/index.js
index 5ce319fb9c9..cf7379a9f70 100644
--- a/packages/web-components/examples/codesandbox/components-react/content-block-horizontal/src/index.js
+++ b/packages/web-components/examples/codesandbox/components-react/content-block-horizontal/src/index.js
@@ -12,9 +12,9 @@ import { render } from 'react-dom';
 import C4DContentBlockHorizontal from '@carbon/ibmdotcom-web-components/es/components-react/content-block-horizontal/content-block-horizontal';
 import C4DContentBlockHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-heading';
 import C4DContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading';
-import C4DContentItemHorizontal from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal';
-import C4DContentItemHorizontalEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-eyebrow';
-import C4DContentItemHorizontalCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-copy';
+import C4DContentItemRow from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row';
+import C4DContentItemRowEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-eyebrow';
+import C4DContentItemRowCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-copy';
 
 import C4DLinkList from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list';
 import C4DLinkListItemCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/link-list-item-cta';
@@ -24,10 +24,10 @@ import './index.css';
 const App = () => (
   <C4DContentBlockHorizontal>
     <C4DContentBlockHeading>Lorem ipsum dolor sit amet</C4DContentBlockHeading>
-    <C4DContentItemHorizontal>
-      <C4DContentItemHorizontalEyebrow>Lorem ipsum</C4DContentItemHorizontalEyebrow>
+    <C4DContentItemRow>
+      <C4DContentItemRowEyebrow>Lorem ipsum</C4DContentItemRowEyebrow>
       <C4DContentItemHeading>Aliquam condimentum</C4DContentItemHeading>
-      <C4DContentItemHorizontalCopy>Lorem ipsum dolor sit amet</C4DContentItemHorizontalCopy>
+      <C4DContentItemRowCopy>Lorem ipsum dolor sit amet</C4DContentItemRowCopy>
       <C4DLinkList slot="footer" type="vertical">
         <C4DLinkListItemCTA icon-placement="right" href="https://www.ibm.com" cta-type="local">
           Link text
@@ -36,7 +36,7 @@ const App = () => (
           External link text
         </C4DLinkListItemCTA>
       </C4DLinkList>
-    </C4DContentItemHorizontal>
+    </C4DContentItemRow>
   </C4DContentBlockHorizontal>
 );
 
diff --git a/packages/web-components/examples/codesandbox/components-react/content-item-horizontal/.gitignore b/packages/web-components/examples/codesandbox/components-react/content-item-row/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/content-item-horizontal/.gitignore
rename to packages/web-components/examples/codesandbox/components-react/content-item-row/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components-react/content-item-horizontal/index.html b/packages/web-components/examples/codesandbox/components-react/content-item-row/index.html
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/content-item-horizontal/index.html
rename to packages/web-components/examples/codesandbox/components-react/content-item-row/index.html
diff --git a/packages/web-components/examples/codesandbox/components-react/content-item-horizontal/package.json b/packages/web-components/examples/codesandbox/components-react/content-item-row/package.json
similarity index 92%
rename from packages/web-components/examples/codesandbox/components-react/content-item-horizontal/package.json
rename to packages/web-components/examples/codesandbox/components-react/content-item-row/package.json
index 6bc3a4895c9..2aad58bdf43 100644
--- a/packages/web-components/examples/codesandbox/components-react/content-item-horizontal/package.json
+++ b/packages/web-components/examples/codesandbox/components-react/content-item-row/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "ibmdotcom-web-components-react-content-item-horizontal-example",
+  "name": "ibmdotcom-web-components-react-content-item-row-example",
   "version": "0.1.0",
   "private": true,
   "description": "Sample project for getting started with the Web Components from Carbon for IBM.com with React.",
diff --git a/packages/web-components/examples/codesandbox/components-react/content-item-horizontal/sandbox.config.json b/packages/web-components/examples/codesandbox/components-react/content-item-row/sandbox.config.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/content-item-horizontal/sandbox.config.json
rename to packages/web-components/examples/codesandbox/components-react/content-item-row/sandbox.config.json
diff --git a/packages/web-components/examples/codesandbox/components-react/content-item-horizontal/src/index.css b/packages/web-components/examples/codesandbox/components-react/content-item-row/src/index.css
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/content-item-horizontal/src/index.css
rename to packages/web-components/examples/codesandbox/components-react/content-item-row/src/index.css
diff --git a/packages/web-components/examples/codesandbox/components-react/content-item-horizontal/src/index.js b/packages/web-components/examples/codesandbox/components-react/content-item-row/src/index.js
similarity index 68%
rename from packages/web-components/examples/codesandbox/components-react/content-item-horizontal/src/index.js
rename to packages/web-components/examples/codesandbox/components-react/content-item-row/src/index.js
index 203532008d4..8804b9ac8d5 100644
--- a/packages/web-components/examples/codesandbox/components-react/content-item-horizontal/src/index.js
+++ b/packages/web-components/examples/codesandbox/components-react/content-item-row/src/index.js
@@ -10,11 +10,11 @@
 import React from 'react';
 import { render } from 'react-dom';
 // eslint-disable-next-line max-len
-import C4DContentItemHorizontal from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal';
+import C4DContentItemRow from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row';
 // eslint-disable-next-line max-len
-import C4DContentItemHorizontalCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-copy';
+import C4DContentItemRowCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-copy';
 // eslint-disable-next-line max-len
-import C4DContentItemHorizontalEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-eyebrow';
+import C4DContentItemRowEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-eyebrow';
 import C4DContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading';
 import C4DLinkList from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list';
 import C4DLinkListItemCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/link-list-item-cta';
@@ -22,13 +22,13 @@ import C4DLinkListItemCTA from '@carbon/ibmdotcom-web-components/es/components-r
 import './index.css';
 
 const App = () => (
-  <C4DContentItemHorizontal>
-    <C4DContentItemHorizontalEyebrow>Lorem ipsum</C4DContentItemHorizontalEyebrow>
+  <C4DContentItemRow>
+    <C4DContentItemRowEyebrow>Lorem ipsum</C4DContentItemRowEyebrow>
     <C4DContentItemHeading>Aliquam condimentum</C4DContentItemHeading>
-    <C4DContentItemHorizontalCopy>
+    <C4DContentItemRowCopy>
       Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.
       Phasellus at elit sollicitudin.
-    </C4DContentItemHorizontalCopy>
+    </C4DContentItemRowCopy>
     <C4DLinkList slot="footer" type="vertical">
       <C4DLinkListItemCTA icon-placement="right" href="https://www.ibm.com" cta-type="local">
         Learn more
@@ -37,7 +37,7 @@ const App = () => (
         Microservices and containers
       </C4DLinkListItemCTA>
     </C4DLinkList>
-  </C4DContentItemHorizontal>
+  </C4DContentItemRow>
 );
 
 render(<App />, document.getElementById('root'));
diff --git a/packages/web-components/examples/codesandbox/components-react/content-item-horizontal/webpack.config.js b/packages/web-components/examples/codesandbox/components-react/content-item-row/webpack.config.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/content-item-horizontal/webpack.config.js
rename to packages/web-components/examples/codesandbox/components-react/content-item-row/webpack.config.js
diff --git a/packages/web-components/examples/codesandbox/components-react/tabs-extended-media/src/index.js b/packages/web-components/examples/codesandbox/components-react/tabs-extended-media/src/index.js
index e7a677e1b2b..786f14d209b 100644
--- a/packages/web-components/examples/codesandbox/components-react/tabs-extended-media/src/index.js
+++ b/packages/web-components/examples/codesandbox/components-react/tabs-extended-media/src/index.js
@@ -14,9 +14,9 @@ import C4DTab from '@carbon/ibmdotcom-web-components/es/components-react/tabs-ex
 /* eslint-disable max-len */
 import C4DContentSectionHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-section/content-section-heading';
 /* eslint-disable max-len */
-import C4DContentItemHorizontalMedia from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-media';
+import C4DContentItemRowMedia from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-media';
 /* eslint-disable max-len */
-import C4DContentItemHorizontalMediaCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-media-copy';
+import C4DContentItemRowMediaCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-media-copy';
 import C4DContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading';
 import C4DLinkList from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list';
 import C4DLinkListItemCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/link-list-item-cta';
@@ -28,16 +28,16 @@ const App = () => (
   <C4DTabsExtendedMedia>
     <C4DContentSectionHeading>Section heading</C4DContentSectionHeading>
     <C4DTab label="First tab">
-      <C4DContentItemHorizontalMedia align="left">
+      <C4DContentItemRowMedia align="left">
         <C4DImage
           slot="media"
           alt="Image alt text"
           default-src="https://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616"></C4DImage>
         <C4DContentItemHeading>Aliquam condimentum</C4DContentItemHeading>
-        <C4DContentItemHorizontalMediaCopy>
+        <C4DContentItemRowMediaCopy>
           Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec
           hendrerit. Phasellus at elit sollicitudin.
-        </C4DContentItemHorizontalMediaCopy>
+        </C4DContentItemRowMediaCopy>
         <C4DLinkList slot="footer" type="vertical">
           <C4DLinkListItemCTA icon-placement="right" href="https://www.ibm.com" cta-type="local">
             Learn more
@@ -46,19 +46,19 @@ const App = () => (
             Microservices and containers
           </C4DLinkListItemCTA>
         </C4DLinkList>
-      </C4DContentItemHorizontalMedia>
+      </C4DContentItemRowMedia>
     </C4DTab>
     <C4DTab label="Second tab">
-      <C4DContentItemHorizontalMedia align="left">
+      <C4DContentItemRowMedia align="left">
         <C4DImage
           slot="media"
           alt="Image alt text"
           default-src="https://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616"></C4DImage>
         <C4DContentItemHeading>Aliquam condimentum</C4DContentItemHeading>
-        <C4DContentItemHorizontalMediaCopy>
+        <C4DContentItemRowMediaCopy>
           Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec
           hendrerit. Phasellus at elit sollicitudin.
-        </C4DContentItemHorizontalMediaCopy>
+        </C4DContentItemRowMediaCopy>
         <C4DLinkList slot="footer" type="vertical">
           <C4DLinkListItemCTA icon-placement="right" href="https://www.ibm.com" cta-type="local">
             Learn more
@@ -67,19 +67,19 @@ const App = () => (
             Microservices and containers
           </C4DLinkListItemCTA>
         </C4DLinkList>
-      </C4DContentItemHorizontalMedia>
+      </C4DContentItemRowMedia>
     </C4DTab>
     <C4DTab label="Third tab">
-      <C4DContentItemHorizontalMedia align="left">
+      <C4DContentItemRowMedia align="left">
         <C4DImage
           slot="media"
           alt="Image alt text"
           default-src="https://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616"></C4DImage>
         <C4DContentItemHeading>Aliquam condimentum</C4DContentItemHeading>
-        <C4DContentItemHorizontalMediaCopy>
+        <C4DContentItemRowMediaCopy>
           Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec
           hendrerit. Phasellus at elit sollicitudin.
-        </C4DContentItemHorizontalMediaCopy>
+        </C4DContentItemRowMediaCopy>
         <C4DLinkList slot="footer" type="vertical">
           <C4DLinkListItemCTA icon-placement="right" href="https://www.ibm.com" cta-type="local">
             Learn more
@@ -88,19 +88,19 @@ const App = () => (
             Microservices and containers
           </C4DLinkListItemCTA>
         </C4DLinkList>
-      </C4DContentItemHorizontalMedia>
+      </C4DContentItemRowMedia>
     </C4DTab>
     <C4DTab label="Fourth tab">
-      <C4DContentItemHorizontalMedia align="left">
+      <C4DContentItemRowMedia align="left">
         <C4DImage
           slot="media"
           alt="Image alt text"
           default-src="https://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616"></C4DImage>
         <C4DContentItemHeading>Aliquam condimentum</C4DContentItemHeading>
-        <C4DContentItemHorizontalMediaCopy>
+        <C4DContentItemRowMediaCopy>
           Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec
           hendrerit. Phasellus at elit sollicitudin.
-        </C4DContentItemHorizontalMediaCopy>
+        </C4DContentItemRowMediaCopy>
         <C4DLinkList slot="footer" type="vertical">
           <C4DLinkListItemCTA icon-placement="right" href="https://www.ibm.com" cta-type="local">
             Learn more
@@ -109,7 +109,7 @@ const App = () => (
             Microservices and containers
           </C4DLinkListItemCTA>
         </C4DLinkList>
-      </C4DContentItemHorizontalMedia>
+      </C4DContentItemRowMedia>
     </C4DTab>
   </C4DTabsExtendedMedia>
 );
diff --git a/packages/web-components/examples/codesandbox/components/content-item-horizontal/.babelrc b/packages/web-components/examples/codesandbox/components/content-item-row/.babelrc
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/content-item-horizontal/.babelrc
rename to packages/web-components/examples/codesandbox/components/content-item-row/.babelrc
diff --git a/packages/web-components/examples/codesandbox/components/content-item-horizontal/.gitignore b/packages/web-components/examples/codesandbox/components/content-item-row/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/content-item-horizontal/.gitignore
rename to packages/web-components/examples/codesandbox/components/content-item-row/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components/content-item-horizontal/.sassrc b/packages/web-components/examples/codesandbox/components/content-item-row/.sassrc
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/content-item-horizontal/.sassrc
rename to packages/web-components/examples/codesandbox/components/content-item-row/.sassrc
diff --git a/packages/web-components/examples/codesandbox/components/content-item-horizontal/cdn.html b/packages/web-components/examples/codesandbox/components/content-item-row/cdn.html
similarity index 53%
rename from packages/web-components/examples/codesandbox/components/content-item-horizontal/cdn.html
rename to packages/web-components/examples/codesandbox/components/content-item-row/cdn.html
index 8d26f947b36..7d8b099ea65 100644
--- a/packages/web-components/examples/codesandbox/components/content-item-horizontal/cdn.html
+++ b/packages/web-components/examples/codesandbox/components/content-item-row/cdn.html
@@ -13,61 +13,61 @@
   <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style>
     /* Suppress custom element until styles are loaded */
-    cds-content-item-horizontal:not(:defined) {
+    c4d-content-item-row:not(:defined) {
       display: none;
     }
   </style>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/content-item-horizontal.min.js"></script>
+  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/content-item-row.min.js"></script>
 </head>
 <body>
 <div id="app">
   <div class="cds--grid">
     <div class="cds--row">
       <div class="cds--col-lg-12 cds--col-sm-4 cds--offset-lg-4">
-        <cds-content-item-horizontal>
-          <cds-content-item-horizontal-eyebrow>Lorem ipsum</cds-content-item-horizontal-eyebrow>
-          <cds-content-item-heading>Aliquam condimentum</cds-content-item-heading>
-          <cds-content-item-horizontal-copy>
-            <cds-content-item-paragraph
+        <c4d-content-item-row>
+          <c4d-content-item-row-eyebrow>Lorem ipsum</c4d-content-item-row-eyebrow>
+          <c4d-content-item-heading>Aliquam condimentum</c4d-content-item-heading>
+          <c4d-content-item-row-copy>
+            <c4d-content-item-paragraph
             >Lorem ipsum dolor sit amet, <em>consectetur</em> adipiscing elit. Aenean et ultricies est. Mauris iaculis eget
-              dolor nec hendrerit. Phasellus at elit sollicitudin.</cds-content-item-paragraph
+              dolor nec hendrerit. Phasellus at elit sollicitudin.</c4d-content-item-paragraph
             >
-          </cds-content-item-horizontal-copy>
-          <cds-link-list slot="footer" type="vertical">
-            <cds-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="local">
+          </c4d-content-item-row-copy>
+          <c4d-link-list slot="footer" type="vertical">
+            <c4d-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="local">
               Link text
-            </cds-link-list-item-cta>
-            <cds-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="external">
+            </c4d-link-list-item-cta>
+            <c4d-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="external">
               External link text
-            </cds-link-list-item-cta>
-          </cds-link-list>
-        </cds-content-item-horizontal>
+            </c4d-link-list-item-cta>
+          </c4d-link-list>
+        </c4d-content-item-row>
       </div>
     </div>
     <div class="cds--row">
       <div class="cds--col-lg-12 cds--col-sm-4 cds--offset-lg-4">
-        <cds-content-item-horizontal-media-featured>
-          <cds-content-item-horizontal-eyebrow>Lorem ipsum</cds-content-item-horizontal-eyebrow>
-          <cds-content-item-heading>Aliquam condimentum</cds-content-item-heading>
-          <cds-content-item-horizontal-copy>
-            <cds-content-item-paragraph>
+        <c4d-content-item-row-media-featured>
+          <c4d-content-item-row-eyebrow>Lorem ipsum</c4d-content-item-row-eyebrow>
+          <c4d-content-item-heading>Aliquam condimentum</c4d-content-item-heading>
+          <c4d-content-item-row-copy>
+            <c4d-content-item-paragraph>
               Lorem ipsum dolor sit amet, <em>consectetur</em> adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin.
-            </cds-content-item-paragraph>
-          </cds-content-item-horizontal-copy>
-          <cds-link-list slot="footer" type="vertical">
-            <cds-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="local">
+            </c4d-content-item-paragraph>
+          </c4d-content-item-row-copy>
+          <c4d-link-list slot="footer" type="vertical">
+            <c4d-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="local">
               Link text
-            </cds-link-list-item-cta>
-            <cds-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="external">
+            </c4d-link-list-item-cta>
+            <c4d-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="external">
               External link text
-            </cds-link-list-item-cta>
-          </cds-link-list>
-          <cds-image
+            </c4d-link-list-item-cta>
+          </c4d-link-list>
+          <c4d-image
             slot="media"
             alt="image alt text"
             default-src="https://fpoimg.com/672x378?text=16:9&amp;bg_color=ee5396&amp;text_color=161616">
-          </cds-image>
-        </cds-content-item-horizontal-media-featured>
+          </c4d-image>
+        </c4d-content-item-row-media-featured>
       </div>
     </div>
   </div>
diff --git a/packages/web-components/examples/codesandbox/components/content-item-horizontal/index.html b/packages/web-components/examples/codesandbox/components/content-item-row/index.html
similarity index 54%
rename from packages/web-components/examples/codesandbox/components/content-item-horizontal/index.html
rename to packages/web-components/examples/codesandbox/components/content-item-row/index.html
index 745cf96a184..80ae8630bdf 100644
--- a/packages/web-components/examples/codesandbox/components/content-item-horizontal/index.html
+++ b/packages/web-components/examples/codesandbox/components/content-item-row/index.html
@@ -14,7 +14,7 @@
 
     <style>
       /* Suppress custom element until styles are loaded */
-      cds-content-item-horizontal:not(:defined) {
+      c4d-content-item-row:not(:defined) {
         display: none;
       }
     </style>
@@ -25,50 +25,50 @@
       <div class="cds--grid">
         <div class="cds--row">
           <div class="cds--col-lg-12 cds--col-sm-4 cds--offset-lg-4">
-            <cds-content-item-horizontal>
-              <cds-content-item-horizontal-eyebrow>Lorem ipsum</cds-content-item-horizontal-eyebrow>
-              <cds-content-item-heading>Aliquam condimentum</cds-content-item-heading>
-              <cds-content-item-horizontal-copy>
-                <cds-content-item-paragraph
+            <c4d-content-item-row>
+              <c4d-content-item-row-eyebrow>Lorem ipsum</c4d-content-item-row-eyebrow>
+              <c4d-content-item-heading>Aliquam condimentum</c4d-content-item-heading>
+              <c4d-content-item-row-copy>
+                <c4d-content-item-paragraph
                   >Lorem ipsum dolor sit amet, <em>consectetur</em> adipiscing elit. Aenean et ultricies est. Mauris iaculis eget
-                  dolor nec hendrerit. Phasellus at elit sollicitudin.</cds-content-item-paragraph
+                  dolor nec hendrerit. Phasellus at elit sollicitudin.</c4d-content-item-paragraph
                 >
-              </cds-content-item-horizontal-copy>
-              <cds-link-list slot="footer" type="vertical">
-                <cds-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="local">
+              </c4d-content-item-row-copy>
+              <c4d-link-list slot="footer" type="vertical">
+                <c4d-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="local">
                   Link text
-                </cds-link-list-item-cta>
-                <cds-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="external">
+                </c4d-link-list-item-cta>
+                <c4d-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="external">
                   External link text
-                </cds-link-list-item-cta>
-              </cds-link-list>
-            </cds-content-item-horizontal>
+                </c4d-link-list-item-cta>
+              </c4d-link-list>
+            </c4d-content-item-row>
           </div>
         </div>
         <div class="cds--row">
           <div class="cds--col-lg-12 cds--col-sm-4 cds--offset-lg-4">
-            <cds-content-item-horizontal-media-featured>
-              <cds-content-item-horizontal-eyebrow>Lorem ipsum</cds-content-item-horizontal-eyebrow>
-              <cds-content-item-heading>Aliquam condimentum</cds-content-item-heading>
-              <cds-content-item-horizontal-copy>
-                <cds-content-item-paragraph>
+            <c4d-content-item-row-media-featured>
+              <c4d-content-item-row-eyebrow>Lorem ipsum</c4d-content-item-row-eyebrow>
+              <c4d-content-item-heading>Aliquam condimentum</c4d-content-item-heading>
+              <c4d-content-item-row-copy>
+                <c4d-content-item-paragraph>
                   Lorem ipsum dolor sit amet, <em>consectetur</em> adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin.
-                </cds-content-item-paragraph>
-              </cds-content-item-horizontal-copy>
-              <cds-link-list slot="footer" type="vertical">
-                <cds-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="local">
+                </c4d-content-item-paragraph>
+              </c4d-content-item-row-copy>
+              <c4d-link-list slot="footer" type="vertical">
+                <c4d-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="local">
                   Link text
-                </cds-link-list-item-cta>
-                <cds-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="external">
+                </c4d-link-list-item-cta>
+                <c4d-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="external">
                   External link text
-                </cds-link-list-item-cta>
-              </cds-link-list>
-              <cds-image
+                </c4d-link-list-item-cta>
+              </c4d-link-list>
+              <c4d-image
                 slot="media"
                 alt="image alt text"
                 default-src="https://fpoimg.com/672x378?text=16:9&amp;bg_color=ee5396&amp;text_color=161616">
-              </cds-image>
-            </cds-content-item-horizontal-media-featured>
+              </c4d-image>
+            </c4d-content-item-row-media-featured>
           </div>
         </div>
       </div>
diff --git a/packages/web-components/examples/codesandbox/components/content-item-horizontal/package.json b/packages/web-components/examples/codesandbox/components/content-item-row/package.json
similarity index 90%
rename from packages/web-components/examples/codesandbox/components/content-item-horizontal/package.json
rename to packages/web-components/examples/codesandbox/components/content-item-row/package.json
index 2fe46f91812..2b8d3dc18a8 100644
--- a/packages/web-components/examples/codesandbox/components/content-item-horizontal/package.json
+++ b/packages/web-components/examples/codesandbox/components/content-item-row/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "ibmdotcom-web-components-content-item-horizontal-example",
+  "name": "ibmdotcom-web-components-content-item-row-example",
   "version": "0.1.0",
   "private": true,
   "description": "Sample project for getting started with the Web Components from Carbon for IBM.com.",
diff --git a/packages/web-components/examples/codesandbox/components/content-item-horizontal/sandbox.config.json b/packages/web-components/examples/codesandbox/components/content-item-row/sandbox.config.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/content-item-horizontal/sandbox.config.json
rename to packages/web-components/examples/codesandbox/components/content-item-row/sandbox.config.json
diff --git a/packages/web-components/examples/codesandbox/components/content-item-horizontal/src/index.js b/packages/web-components/examples/codesandbox/components/content-item-row/src/index.js
similarity index 91%
rename from packages/web-components/examples/codesandbox/components/content-item-horizontal/src/index.js
rename to packages/web-components/examples/codesandbox/components/content-item-row/src/index.js
index cba9c470fd0..a7ed26d4367 100644
--- a/packages/web-components/examples/codesandbox/components/content-item-horizontal/src/index.js
+++ b/packages/web-components/examples/codesandbox/components/content-item-row/src/index.js
@@ -7,5 +7,5 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import '@carbon/ibmdotcom-web-components/es/components/content-item-horizontal/index.js';
+import '@carbon/ibmdotcom-web-components/es/components/content-item-row/index.js';
 import './index.scss';
diff --git a/packages/web-components/examples/codesandbox/components/content-item-horizontal/src/index.scss b/packages/web-components/examples/codesandbox/components/content-item-row/src/index.scss
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/content-item-horizontal/src/index.scss
rename to packages/web-components/examples/codesandbox/components/content-item-row/src/index.scss
diff --git a/packages/web-components/examples/codesandbox/components/content-item/cdn.html b/packages/web-components/examples/codesandbox/components/content-item/cdn.html
index 1ab27adf701..d8bd3f9a2a4 100644
--- a/packages/web-components/examples/codesandbox/components/content-item/cdn.html
+++ b/packages/web-components/examples/codesandbox/components/content-item/cdn.html
@@ -13,7 +13,7 @@
   <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style>
     /* Suppress custom element until styles are loaded */
-    cds-content-item-horizontal:not(:defined) {
+    c4d-content-item:not(:defined) {
       display: none;
     }
   </style>
@@ -24,11 +24,11 @@
   <div class="cds--grid">
     <div class="cds--row">
       <div class="cds--col-lg-12 cds--col-sm-4 cds--offset-lg-4">
-        <cds-content-item>
-          <cds-content-item-heading>Heading</cds-content-item-heading>
-          <cds-content-item-copy>Copy</cds-content-item-copy>
-          <cds-text-cta slot="footer" cta-type="local" href="https://www.example.com">CTA text</cds-text-cta>
-        </cds-content-item>
+        <c4d-content-item>
+          <c4d-content-item-heading>Heading</c4d-content-item-heading>
+          <c4d-content-item-copy>Copy</c4d-content-item-copy>
+          <c4d-text-cta slot="footer" cta-type="local" href="https://www.example.com">CTA text</c4d-text-cta>
+        </c4d-content-item>
       </div>
     </div>
   </div>
diff --git a/packages/web-components/examples/codesandbox/components/tabs-extended-media/cdn.html b/packages/web-components/examples/codesandbox/components/tabs-extended-media/cdn.html
index 2297df78d37..6ec6433a6c1 100644
--- a/packages/web-components/examples/codesandbox/components/tabs-extended-media/cdn.html
+++ b/packages/web-components/examples/codesandbox/components/tabs-extended-media/cdn.html
@@ -13,7 +13,7 @@
   <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style>
     /* Suppress custom element until styles are loaded */
-    cds-tabs-extended-media:not(:defined) {
+    c4d-tabs-extended-media:not(:defined) {
       display: none;
     }
   </style>
@@ -24,72 +24,72 @@
   <div class="cds--grid">
     <div class="cds--row">
       <div class="cds--col-lg-12 cds--col-sm-4 cds--offset-lg-4">
-        <cds-tabs-extended-media>
-          <cds-content-section-heading>Section heading</cds-content-section-heading>
-          <cds-tab label="First tab">
-            <cds-content-item-horizontal-media align="left">
-              <cds-image
+        <c4d-tabs-extended-media>
+          <c4d-content-section-heading>Section heading</c4d-content-section-heading>
+          <c4d-tab label="First tab">
+            <c4d-content-item-row-media align="left">
+              <c4d-image
                 slot="media"
                 alt="Image alt text"
                 default-src="https://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616">
-              </cds-image>
-              <cds-content-item-heading>Aliquam condimentum</cds-content-item-heading>
-              <cds-content-item-horizontal-media-copy>Lorem ipsum dolor sit amet, <em>consectetur</em> adipiscing elit. Aenean et ultricies est. Mauris iaculis eget
+              </c4d-image>
+              <c4d-content-item-heading>Aliquam condimentum</c4d-content-item-heading>
+              <c4d-content-item-row-media-copy>Lorem ipsum dolor sit amet, <em>consectetur</em> adipiscing elit. Aenean et ultricies est. Mauris iaculis eget
                 dolor nec hendrerit. Phasellus at elit sollicitudin.
-              </cds-content-item-horizontal-media-copy>
-              <cds-link-list slot="footer" type="vertical">
-                <cds-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="local">
+              </c4d-content-item-row-media-copy>
+              <c4d-link-list slot="footer" type="vertical">
+                <c4d-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="local">
                   Link text
-                </cds-link-list-item-cta>
-                <cds-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="external">
+                </c4d-link-list-item-cta>
+                <c4d-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="external">
                   External link text
-                </cds-link-list-item-cta>
-              </cds-link-list>
-            </cds-content-item-horizontal-media>
-          </cds-tab>
-          <cds-tab label="Second tab">
-            <cds-content-item-horizontal-media align="left">
-              <cds-image
+                </c4d-link-list-item-cta>
+              </c4d-link-list>
+            </c4d-content-item-row-media>
+          </c4d-tab>
+          <c4d-tab label="Second tab">
+            <c4d-content-item-row-media align="left">
+              <c4d-image
                 slot="media"
                 alt="Image alt text"
                 default-src="https://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616">
-              </cds-image>
-              <cds-content-item-heading>Aliquam condimentum</cds-content-item-heading>
-              <cds-content-item-horizontal-media-copy>Lorem ipsum dolor sit amet, <em>consectetur</em> adipiscing elit. Aenean et ultricies est. Mauris iaculis eget
+              </c4d-image>
+              <c4d-content-item-heading>Aliquam condimentum</c4d-content-item-heading>
+              <c4d-content-item-row-media-copy>Lorem ipsum dolor sit amet, <em>consectetur</em> adipiscing elit. Aenean et ultricies est. Mauris iaculis eget
                 dolor nec hendrerit. Phasellus at elit sollicitudin.
-              </cds-content-item-horizontal-media-copy>
-              <cds-link-list slot="footer" type="vertical">
-                <cds-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="local">
+              </c4d-content-item-row-media-copy>
+              <c4d-link-list slot="footer" type="vertical">
+                <c4d-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="local">
                   Link text
-                </cds-link-list-item-cta>
-                <cds-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="external">
+                </c4d-link-list-item-cta>
+                <c4d-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="external">
                   External link text
-                </cds-link-list-item-cta>
-              </cds-link-list>
-            </cds-content-item-horizontal-media>
-          </cds-tab>
-          <cds-tab label="Third tab">
-            <cds-content-item-horizontal-media align="left">
-              <cds-image
+                </c4d-link-list-item-cta>
+              </c4d-link-list>
+            </c4d-content-item-row-media>
+          </c4d-tab>
+          <c4d-tab label="Third tab">
+            <c4d-content-item-row-media align="left">
+              <c4d-image
                 slot="media"
                 alt="Image alt text"
                 default-src="https://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616">
-              </cds-image>
-              <cds-content-item-heading>Aliquam condimentum</cds-content-item-heading>
-              <cds-content-item-horizontal-media-copy>Lorem ipsum dolor sit amet, <em>consectetur</em> adipiscing elit. Aenean et ultricies est. Mauris iaculis eget
+              </c4d-image>
+              <c4d-content-item-heading>Aliquam condimentum</c4d-content-item-heading>
+              <c4d-content-item-row-media-copy>Lorem ipsum dolor sit amet, <em>consectetur</em> adipiscing elit. Aenean et ultricies est. Mauris iaculis eget
                 dolor nec hendrerit. Phasellus at elit sollicitudin.
-              </cds-content-item-horizontal-media-copy>
-              <cds-link-list slot="footer" type="vertical">
-                <cds-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="local">
+              </c4d-content-item-row-media-copy>
+              <c4d-link-list slot="footer" type="vertical">
+                <c4d-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="local">
                   Link text
-                </cds-link-list-item-cta>
-                <cds-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="external">
+                </c4d-link-list-item-cta>
+                <c4d-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="external">
                   External link text
-                </cds-link-list-item-cta>
-              </cds-link-list>
-            </cds-content-item-horizontal-media>
-          </cds-tab>
-        </cds-tabs-extended-media>
+                </c4d-link-list-item-cta>
+              </c4d-link-list>
+            </c4d-content-item-row-media>
+          </c4d-tab>
+        </c4d-tabs-extended-media>
       </div>
     </div>
   </div>
diff --git a/packages/web-components/examples/codesandbox/components/tabs-extended-media/index.html b/packages/web-components/examples/codesandbox/components/tabs-extended-media/index.html
index d8cd76c7014..e291908f59b 100644
--- a/packages/web-components/examples/codesandbox/components/tabs-extended-media/index.html
+++ b/packages/web-components/examples/codesandbox/components/tabs-extended-media/index.html
@@ -12,7 +12,7 @@
     <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css" />
     <style>
       /* Suppress custom element until styles are loaded */
-      cds-tabs-extended-media:not(:defined) {
+      c4d-tabs-extended-media:not(:defined) {
         display: none;
       }
     </style>
@@ -23,124 +23,124 @@
       <div class="cds--grid">
         <div class="cds--row">
           <div class="cds--col-lg-12 cds--col-sm-4 cds--offset-lg-4">
-            <cds-tabs-extended-media>
-              <cds-content-section-heading>Section heading</cds-content-section-heading>
-              <cds-tab label="First tab">
-                <cds-content-item-horizontal-media align="left">
-                  <cds-image
+            <c4d-tabs-extended-media>
+              <c4d-content-section-heading>Section heading</c4d-content-section-heading>
+              <c4d-tab label="First tab">
+                <c4d-content-item-row-media align="left">
+                  <c4d-image
                     slot="media"
                     alt="Image alt text"
                     default-src="https://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616">
-                  </cds-image>
-                  <cds-content-item-heading>Aliquam condimentum</cds-content-item-heading>
-                  <cds-content-item-horizontal-media-copy>Lorem ipsum dolor sit amet, <em>consectetur</em> adipiscing elit. Aenean et ultricies est. Mauris iaculis eget
+                  </c4d-image>
+                  <c4d-content-item-heading>Aliquam condimentum</c4d-content-item-heading>
+                  <c4d-content-item-row-media-copy>Lorem ipsum dolor sit amet, <em>consectetur</em> adipiscing elit. Aenean et ultricies est. Mauris iaculis eget
                       dolor nec hendrerit. Phasellus at elit sollicitudin.
-                  </cds-content-item-horizontal-media-copy>
-                  <cds-link-list slot="footer" type="vertical">
-                    <cds-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="local">
+                  </c4d-content-item-row-media-copy>
+                  <c4d-link-list slot="footer" type="vertical">
+                    <c4d-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="local">
                       Link text
-                    </cds-link-list-item-cta>
-                    <cds-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="external">
+                    </c4d-link-list-item-cta>
+                    <c4d-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="external">
                       External link text
-                    </cds-link-list-item-cta>
-                  </cds-link-list>
-                </cds-content-item-horizontal-media>
-              </cds-tab>
-              <cds-tab label="Second tab">
-                <cds-content-item-horizontal-media align="left">
-                  <cds-image
+                    </c4d-link-list-item-cta>
+                  </c4d-link-list>
+                </c4d-content-item-row-media>
+              </c4d-tab>
+              <c4d-tab label="Second tab">
+                <c4d-content-item-row-media align="left">
+                  <c4d-image
                     slot="media"
                     alt="Image alt text"
                     default-src="https://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616">
-                  </cds-image>
-                  <cds-content-item-heading>Aliquam condimentum</cds-content-item-heading>
-                  <cds-content-item-horizontal-media-copy>Lorem ipsum dolor sit amet, <em>consectetur</em> adipiscing elit. Aenean et ultricies est. Mauris iaculis eget
+                  </c4d-image>
+                  <c4d-content-item-heading>Aliquam condimentum</c4d-content-item-heading>
+                  <c4d-content-item-row-media-copy>Lorem ipsum dolor sit amet, <em>consectetur</em> adipiscing elit. Aenean et ultricies est. Mauris iaculis eget
                     dolor nec hendrerit. Phasellus at elit sollicitudin.
-                  </cds-content-item-horizontal-media-copy>
-                  <cds-link-list slot="footer" type="vertical">
-                    <cds-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="local">
+                  </c4d-content-item-row-media-copy>
+                  <c4d-link-list slot="footer" type="vertical">
+                    <c4d-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="local">
                       Link text
-                    </cds-link-list-item-cta>
-                    <cds-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="external">
+                    </c4d-link-list-item-cta>
+                    <c4d-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="external">
                       External link text
-                    </cds-link-list-item-cta>
-                  </cds-link-list>
-                </cds-content-item-horizontal-media>
-              </cds-tab>
-              <cds-tab label="Third tab">
-                <cds-content-item-horizontal-media align="left">
-                  <cds-image
+                    </c4d-link-list-item-cta>
+                  </c4d-link-list>
+                </c4d-content-item-row-media>
+              </c4d-tab>
+              <c4d-tab label="Third tab">
+                <c4d-content-item-row-media align="left">
+                  <c4d-image
                     slot="media"
                     alt="Image alt text"
                     default-src="https://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616">
-                  </cds-image>
-                  <cds-content-item-heading>Aliquam condimentum</cds-content-item-heading>
-                  <cds-content-item-horizontal-media-copy>Lorem ipsum dolor sit amet, <em>consectetur</em> adipiscing elit. Aenean et ultricies est. Mauris iaculis eget
+                  </c4d-image>
+                  <c4d-content-item-heading>Aliquam condimentum</c4d-content-item-heading>
+                  <c4d-content-item-row-media-copy>Lorem ipsum dolor sit amet, <em>consectetur</em> adipiscing elit. Aenean et ultricies est. Mauris iaculis eget
                     dolor nec hendrerit. Phasellus at elit sollicitudin.
-                  </cds-content-item-horizontal-media-copy>
-                  <cds-link-list slot="footer" type="vertical">
-                    <cds-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="local">
+                  </c4d-content-item-row-media-copy>
+                  <c4d-link-list slot="footer" type="vertical">
+                    <c4d-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="local">
                       Link text
-                    </cds-link-list-item-cta>
-                    <cds-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="external">
+                    </c4d-link-list-item-cta>
+                    <c4d-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="external">
                       External link text
-                    </cds-link-list-item-cta>
-                  </cds-link-list>
-                </cds-content-item-horizontal-media>
-              </cds-tab>
-              <cds-tab label="Fourth tab">
-                <cds-content-item-horizontal-media align="left">
-                  <cds-image
+                    </c4d-link-list-item-cta>
+                  </c4d-link-list>
+                </c4d-content-item-row-media>
+              </c4d-tab>
+              <c4d-tab label="Fourth tab">
+                <c4d-content-item-row-media align="left">
+                  <c4d-image
                     slot="media"
                     alt="Image alt text"
                     default-src="https://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616">
-                  </cds-image>
-                  <cds-content-item-heading>Aliquam condimentum</cds-content-item-heading>
-                  <cds-content-item-horizontal-media-copy>Lorem ipsum dolor sit amet, <em>consectetur</em> adipiscing elit. Aenean et ultricies est. Mauris iaculis eget
+                  </c4d-image>
+                  <c4d-content-item-heading>Aliquam condimentum</c4d-content-item-heading>
+                  <c4d-content-item-row-media-copy>Lorem ipsum dolor sit amet, <em>consectetur</em> adipiscing elit. Aenean et ultricies est. Mauris iaculis eget
                     dolor nec hendrerit. Phasellus at elit sollicitudin.
-                  </cds-content-item-horizontal-media-copy>
-                  <cds-link-list slot="footer" type="vertical">
-                    <cds-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="local">
+                  </c4d-content-item-row-media-copy>
+                  <c4d-link-list slot="footer" type="vertical">
+                    <c4d-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="local">
                       Link text
-                    </cds-link-list-item-cta>
-                    <cds-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="external">
+                    </c4d-link-list-item-cta>
+                    <c4d-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="external">
                       External link text
-                    </cds-link-list-item-cta>
-                  </cds-link-list>
-                </cds-content-item-horizontal-media>
-              </cds-tab>
-              <cds-tab label="Tab with video">
-                <cds-content-item-horizontal-media align="left">
-                  <cds-content-item-horizontal-media-video
+                    </c4d-link-list-item-cta>
+                  </c4d-link-list>
+                </c4d-content-item-row-media>
+              </c4d-tab>
+              <c4d-tab label="Tab with video">
+                <c4d-content-item-row-media align="left">
+                  <c4d-content-item-row-media-video
                     video-id="1_9h94wo6b"
-                  ></cds-content-item-horizontal-media-video>
-                  <cds-content-item-heading
-                    >Aliquam condimentum</cds-content-item-heading
+                  ></c4d-content-item-row-media-video>
+                  <c4d-content-item-heading
+                    >Aliquam condimentum</c4d-content-item-heading
                   >
-                  <cds-content-item-horizontal-media-copy
+                  <c4d-content-item-row-media-copy
                     >Lorem ipsum dolor sit amet, <em>consectetur</em> adipiscing
                     elit. Aenean et ultricies est. Mauris iaculis eget dolor nec
                     hendrerit. Phasellus at elit sollicitudin.
-                  </cds-content-item-horizontal-media-copy>
-                  <cds-link-list slot="footer" type="vertical">
-                    <cds-link-list-item-cta
+                  </c4d-content-item-row-media-copy>
+                  <c4d-link-list slot="footer" type="vertical">
+                    <c4d-link-list-item-cta
                       icon-placement="right"
                       href="https://www.ibm.com"
                       cta-type="local"
                     >
                       Link text
-                    </cds-link-list-item-cta>
-                    <cds-link-list-item-cta
+                    </c4d-link-list-item-cta>
+                    <c4d-link-list-item-cta
                       icon-placement="right"
                       href="https://www.ibm.com"
                       cta-type="external"
                     >
                       External link text
-                    </cds-link-list-item-cta>
-                  </cds-link-list>
-                </cds-content-item-horizontal-media>
-              </cds-tab>
-            </cds-tabs-extended-media>
+                    </c4d-link-list-item-cta>
+                  </c4d-link-list>
+                </c4d-content-item-row-media>
+              </c4d-tab>
+            </c4d-tabs-extended-media>
           </div>
         </div>
       </div>
diff --git a/packages/web-components/examples/codesandbox/components/tabs-extended-media/src/index.js b/packages/web-components/examples/codesandbox/components/tabs-extended-media/src/index.js
index 09cf443aff8..c3fc8563ea9 100644
--- a/packages/web-components/examples/codesandbox/components/tabs-extended-media/src/index.js
+++ b/packages/web-components/examples/codesandbox/components/tabs-extended-media/src/index.js
@@ -8,6 +8,6 @@
  */
 
 import '@carbon/ibmdotcom-web-components/es/components/tabs-extended-media/index.js';
-import '@carbon/ibmdotcom-web-components/es/components/content-item-horizontal/index.js';
+import '@carbon/ibmdotcom-web-components/es/components/content-item-row/index.js';
 import '@carbon/ibmdotcom-web-components/es/components/link-list/index.js';
 import './index.scss';
diff --git a/packages/web-components/src/components/content-block-horizontal/__stories__/README.stories.mdx b/packages/web-components/src/components/content-block-horizontal/__stories__/README.stories.mdx
index b9094f711b7..115d911fdbd 100644
--- a/packages/web-components/src/components/content-block-horizontal/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/content-block-horizontal/__stories__/README.stories.mdx
@@ -6,7 +6,7 @@ import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
 # `<cds-content-block-horizontal>`
 
 > The Content Block - Horizontal block pattern contains a collection of
-> `<cds-content-item-horizontal>` content items.
+> `<cds-content-item-row>` content items.
 
 > 💡 Check our
 > [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/content-block-horizontal)
@@ -37,15 +37,15 @@ import '@carbon/ibmdotcom-web-components/es/components/content-block-horizontal/
   <cds-content-block-heading
     >Curabitur malesuada varius mi eu posuere</cds-content-block-heading
   >
-  <cds-content-item-horizontal>
-    <cds-content-item-horizontal-eyebrow
-      >Lorem ipsum</cds-content-item-horizontal-eyebrow
+  <cds-content-item-row>
+    <cds-content-item-row-eyebrow
+      >Lorem ipsum</cds-content-item-row-eyebrow
     >
     <cds-content-item-heading>Aliquam condimentum</cds-content-item-heading>
-    <cds-content-item-horizontal-copy
+    <cds-content-item-row-copy
       >Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et
       ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit
-      sollicitudin.</cds-content-item-horizontal-copy
+      sollicitudin.</cds-content-item-row-copy
     >
     <cds-link-list slot="footer" type="vertical">
       <cds-link-list-item-cta
@@ -61,7 +61,7 @@ import '@carbon/ibmdotcom-web-components/es/components/content-block-horizontal/
         External link text
       </cds-link-list-item-cta>
     </cds-link-list>
-  </cds-content-item-horizontal>
+  </cds-content-item-row>
 </cds-content-block-horizontal>
 ```
 
@@ -81,7 +81,7 @@ to see how Web Components selector and `data-autoid` should be used.
 | ------------------------------------ | ------------------------------------------------- | ----------- |
 | `<cds-content-block-horizontal>`     | `data-autoid="cds--content-block-simple"`         | Component   |
 | `<cds-content-block-heading>`        | `data-autoid="cds--content-block__heading"`       | Component   |
-| `<cds-content-item-horizontal>`      | `data-autoid="cds--content-item-horizontal"`      | Component   |
-| `<cds-content-item-horizontal-copy>` | `data-autoid="cds--content-item-horizontal-copy"` | Component   |
+| `<cds-content-item-row>`      | `data-autoid="cds--content-item-row"`      | Component   |
+| `<cds-content-item-row-copy>` | `data-autoid="cds--content-item-row-copy"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/content-block-horizontal/__stories__/README.stories.react.mdx b/packages/web-components/src/components/content-block-horizontal/__stories__/README.stories.react.mdx
index 81ca31960ef..8b958115da5 100644
--- a/packages/web-components/src/components/content-block-horizontal/__stories__/README.stories.react.mdx
+++ b/packages/web-components/src/components/content-block-horizontal/__stories__/README.stories.react.mdx
@@ -25,9 +25,9 @@ Here's a quick example to get you started.
 import C4DContentBlockHorizontal from '@carbon/ibmdotcom-web-components/es/components-react/content-block-horizontal/content-block-horizontal';
 import C4DContentBlockHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-heading';
 import C4DContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading';
-import C4DContentItemHorizontal from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal';
-import C4DContentItemHorizontalEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-eyebrow';
-import C4DContentItemHorizontalCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-copy';
+import C4DContentItemRow from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row';
+import C4DContentItemRowEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-eyebrow';
+import C4DContentItemRowCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-copy';
 
 import C4DLinkList from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list';
 import C4DLinkListItemCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/link-list-item-cta';
@@ -38,12 +38,12 @@ function App() {
       <C4DContentBlockHeading>
         Lorem ipsum dolor sit amet
       </C4DContentBlockHeading>
-      <C4DContentItemHorizontal>
-        <C4DContentItemHorizontalEyebrow>
+      <C4DContentItemRow>
+        <C4DContentItemRowEyebrow>
           Lorem ipsum
-        </C4DContentItemHorizontalEyebrow>
+        </C4DContentItemRowEyebrow>
         <C4DContentItemHeading>Aliquam condimentum</C4DContentItemHeading>
-        <C4DContentItemHorizontalCopy>{copy}</C4DContentItemHorizontalCopy>
+        <C4DContentItemRowCopy>{copy}</C4DContentItemRowCopy>
         <C4DLinkList slot="footer" type="vertical">
           <C4DLinkListItemCTA
             icon-placement="right"
@@ -58,7 +58,7 @@ function App() {
             External link text
           </C4DLinkListItemCTA>
         </C4DLinkList>
-      </C4DContentItemHorizontal>
+      </C4DContentItemRow>
     </C4DContentBlockHorizontal>
   );
 }
@@ -78,7 +78,7 @@ to see how Web Components selector and `data-autoid` should be used.
 | ------------------------------------ | ------------------------------------------------- | ----------- |
 | `<cds-content-block-horizontal>`     | `data-autoid="cds--content-block-simple"`         | Component   |
 | `<cds-content-block-heading>`        | `data-autoid="cds--content-block__heading"`       | Component   |
-| `<cds-content-item-horizontal>`      | `data-autoid="cds--content-item-horizontal"`      | Component   |
-| `<cds-content-item-horizontal-copy>` | `data-autoid="cds--content-item-horizontal-copy"` | Component   |
+| `<cds-content-item-row>`      | `data-autoid="cds--content-item-row"`      | Component   |
+| `<cds-content-item-row-copy>` | `data-autoid="cds--content-item-row-copy"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/content-block-horizontal/__stories__/content-block-horizontal.stories.react.tsx b/packages/web-components/src/components/content-block-horizontal/__stories__/content-block-horizontal.stories.react.tsx
index 048a95e6d65..18fe807110b 100644
--- a/packages/web-components/src/components/content-block-horizontal/__stories__/content-block-horizontal.stories.react.tsx
+++ b/packages/web-components/src/components/content-block-horizontal/__stories__/content-block-horizontal.stories.react.tsx
@@ -16,9 +16,9 @@ import React from 'react';
 import C4DContentBlockHorizontal from '@carbon/ibmdotcom-web-components/es/components-react/content-block-horizontal/content-block-horizontal';
 import C4DContentBlockHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-heading';
 import C4DContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading';
-import C4DContentItemHorizontal from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal';
-import C4DContentItemHorizontalEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-eyebrow';
-import C4DContentItemHorizontalCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-copy';
+import C4DContentItemRow from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row';
+import C4DContentItemRowEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-eyebrow';
+import C4DContentItemRowCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-copy';
 
 import C4DLinkList from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list';
 import C4DLinkListItemCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/link-list-item-cta';
@@ -32,12 +32,12 @@ const copy =
   'Phasellus at elit sollicitudin.';
 
 const linkListItem = (
-  <C4DContentItemHorizontal>
-    <C4DContentItemHorizontalEyebrow>
+  <C4DContentItemRow>
+    <C4DContentItemRowEyebrow>
       Lorem ipsum
-    </C4DContentItemHorizontalEyebrow>
+    </C4DContentItemRowEyebrow>
     <C4DContentItemHeading>Aliquam condimentum</C4DContentItemHeading>
-    <C4DContentItemHorizontalCopy>{copy}</C4DContentItemHorizontalCopy>
+    <C4DContentItemRowCopy>{copy}</C4DContentItemRowCopy>
     <C4DLinkList slot="footer" type="vertical">
       <C4DLinkListItemCTA
         icon-placement="right"
@@ -52,7 +52,7 @@ const linkListItem = (
         External link text
       </C4DLinkListItemCTA>
     </C4DLinkList>
-  </C4DContentItemHorizontal>
+  </C4DContentItemRow>
 );
 
 export const Default = (args) => {
diff --git a/packages/web-components/src/components/content-block-horizontal/__stories__/content-block-horizontal.stories.ts b/packages/web-components/src/components/content-block-horizontal/__stories__/content-block-horizontal.stories.ts
index d12fe89c6ff..776b615a804 100644
--- a/packages/web-components/src/components/content-block-horizontal/__stories__/content-block-horizontal.stories.ts
+++ b/packages/web-components/src/components/content-block-horizontal/__stories__/content-block-horizontal.stories.ts
@@ -19,12 +19,10 @@ const copy =
   'Phasellus at elit sollicitudin.';
 
 const linkListItem = html`
-  <c4d-content-item-horizontal>
-    <c4d-content-item-horizontal-eyebrow
-      >Lorem ipsum</c4d-content-item-horizontal-eyebrow
-    >
+  <c4d-content-item-row>
+    <c4d-content-item-row-eyebrow>Lorem ipsum</c4d-content-item-row-eyebrow>
     <c4d-content-item-heading>Aliquam condimentum</c4d-content-item-heading>
-    <c4d-content-item-horizontal-copy>${copy}</c4d-content-item-horizontal-copy>
+    <c4d-content-item-row-copy>${copy}</c4d-content-item-row-copy>
     <c4d-link-list slot="footer" type="vertical">
       <c4d-link-list-item-cta
         icon-placement="right"
@@ -39,7 +37,7 @@ const linkListItem = html`
         External link text
       </c4d-link-list-item-cta>
     </c4d-link-list>
-  </c4d-content-item-horizontal>
+  </c4d-content-item-row>
 `;
 
 export const Default = (args) => {
diff --git a/packages/web-components/src/components/content-block-horizontal/__tests__/content-block-horizontal.test.ts b/packages/web-components/src/components/content-block-horizontal/__tests__/content-block-horizontal.test.ts
index 18b379c3b2c..53a6e189308 100644
--- a/packages/web-components/src/components/content-block-horizontal/__tests__/content-block-horizontal.test.ts
+++ b/packages/web-components/src/components/content-block-horizontal/__tests__/content-block-horizontal.test.ts
@@ -8,9 +8,9 @@
  */
 
 import { html, render } from 'lit/html.js';
-import '../../content-item-horizontal/content-item-horizontal';
-import '../../content-item-horizontal/content-item-horizontal-copy';
-import '../../content-item-horizontal/content-item-horizontal-eyebrow';
+import '../../content-item-row/content-item-row';
+import '../../content-item-row/content-item-row-copy';
+import '../../content-item-row/content-item-row-eyebrow';
 import '../content-block-horizontal';
 import { ICON_PLACEMENT } from '../../link-with-icon/link-with-icon';
 import { CTA_TYPE } from '../../cta/defs';
@@ -36,10 +36,10 @@ describe('c4d-content-block-horizontal', function () {
       render(
         template({
           children: html`
-            <c4d-content-item-horizontal>
-              <c4d-content-item-horizontal-eyebrow>eyebrow-foo</c4d-content-item-horizontal-eyebrow>
+            <c4d-content-item-row>
+              <c4d-content-item-row-eyebrow>eyebrow-foo</c4d-content-item-row-eyebrow>
               <c4d-content-item-heading>heading-foo</c4d-content-item-heading>
-              <c4d-content-item-horizontal-copy>copy-foo</c4d-content-item-horizontal-copy>
+              <c4d-content-item-row-copy>copy-foo</c4d-content-item-row-copy>
               <c4d-link-list slot="footer" type="vertical">
                 <c4d-link-list-item-cta
                   icon-placement="${ICON_PLACEMENT.RIGHT}"
@@ -56,7 +56,7 @@ describe('c4d-content-block-horizontal', function () {
                   cta-copy-foo
                 </c4d-link-list-item-cta>
               </c4d-link-list>
-             </content-item-horizontal>
+             </content-item-row>
           `,
         }),
         document.body
diff --git a/packages/web-components/src/components/content-block-horizontal/index.ts b/packages/web-components/src/components/content-block-horizontal/index.ts
index 19573b3c64c..e7a8801faeb 100644
--- a/packages/web-components/src/components/content-block-horizontal/index.ts
+++ b/packages/web-components/src/components/content-block-horizontal/index.ts
@@ -10,4 +10,4 @@
 import './content-block-horizontal';
 import '../content-block/content-block-heading';
 import '../content-block/content-block-complementary';
-import '../content-item-horizontal/index';
+import '../content-item-row/index';
diff --git a/packages/web-components/src/components/content-item-horizontal/content-item-horizontal.scss b/packages/web-components/src/components/content-item-horizontal/content-item-horizontal.scss
deleted file mode 100644
index e2b3a668153..00000000000
--- a/packages/web-components/src/components/content-item-horizontal/content-item-horizontal.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-//
-// Copyright IBM Corp. 2020, 2021
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@use '@carbon/ibmdotcom-styles/scss/components/content-item-horizontal';
-@use '@carbon/ibmdotcom-styles/scss/globals/vars' as *;
-
-:host(#{$c4d-prefix}-content-item-horizontal-eyebrow) {
-  display: block;
-}
diff --git a/packages/web-components/src/components/content-item-horizontal/index.ts b/packages/web-components/src/components/content-item-horizontal/index.ts
deleted file mode 100644
index 8a29626cac0..00000000000
--- a/packages/web-components/src/components/content-item-horizontal/index.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2020, 2022
- *
- * 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 './content-item-horizontal';
-import './content-item-horizontal-copy';
-import './content-item-horizontal-eyebrow';
-import './content-item-horizontal-media';
-import './content-item-horizontal-media-copy';
-import './content-item-horizontal-media-video';
-import './content-item-horizontal-thumbnail-copy';
-import './content-item-horizontal-media-featured';
-import '../content-item/content-item-heading';
-import '../cta/index';
-import '../link-list/link-list';
diff --git a/packages/web-components/src/components/content-item-horizontal/__stories__/README.stories.mdx b/packages/web-components/src/components/content-item-row/__stories__/README.stories.mdx
similarity index 73%
rename from packages/web-components/src/components/content-item-horizontal/__stories__/README.stories.mdx
rename to packages/web-components/src/components/content-item-row/__stories__/README.stories.mdx
index ef15dff2e12..66fe0b1d98f 100644
--- a/packages/web-components/src/components/content-item-horizontal/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/content-item-row/__stories__/README.stories.mdx
@@ -3,13 +3,13 @@ import markdownContents from '../../../../docs/markdown-contents.md';
 import contributing from '../../../../../../docs/contributing-license.md';
 import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
 
-# `<cds-content-item-horizontal>`
+# `<cds-content-item-row>`
 
 > 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/content-item-horizontal)
+> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/content-item-row)
 > example implementation.
 
-[![Edit @carbon/ibmdotcom-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/content-item-horizontal)
+[![Edit @carbon/ibmdotcom-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/content-item-row)
 
 ## Getting started
 
@@ -18,11 +18,11 @@ Here's a quick example to get you started.
 ### JS (via import)
 
 ```javascript
-import '@carbon/ibmdotcom-web-components/es/components/content-item-horizontal/index.js';
+import '@carbon/ibmdotcom-web-components/es/components/content-item-row/index.js';
 ```
 
 <Description
-  markdown={`${cdnJs({ components: ['content-item-horizontal'] })}`}
+  markdown={`${cdnJs({ components: ['content-item-row'] })}`}
 />
 
 <Description markdown={`${cdnCss()}`} />
@@ -30,15 +30,15 @@ import '@carbon/ibmdotcom-web-components/es/components/content-item-horizontal/i
 ### HTML
 
 ```html
-<cds-content-item-horizontal>
-  <cds-content-item-horizontal-eyebrow
-    >Lorem ipsum</cds-content-item-horizontal-eyebrow
+<cds-content-item-row>
+  <cds-content-item-row-eyebrow
+    >Lorem ipsum</cds-content-item-row-eyebrow
   >
   <cds-content-item-heading>Aliquam condimentum</cds-content-item-heading>
-  <cds-content-item-horizontal-copy
+  <cds-content-item-row-copy
     >Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et
     ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit
-    sollicitudin.</cds-content-item-horizontal-copy
+    sollicitudin.</cds-content-item-row-copy
   >
   <cds-link-list slot="footer" type="vertical">
     <cds-link-list-item-cta
@@ -54,19 +54,19 @@ import '@carbon/ibmdotcom-web-components/es/components/content-item-horizontal/i
       Microservices and containers
     </cds-link-list-item-cta>
   </cds-link-list>
-</cds-content-item-horizontal>
+</cds-content-item-row>
 ```
 
 ### HTML (with thumbnail)
 
 ```html
-<cds-content-item-horizontal thumbnail>
+<cds-content-item-row thumbnail>
   <cds-content-item-heading> Aliquam condimentum </cds-content-item-heading>
-  <cds-content-item-horizontal-thumbnail-copy>
+  <cds-content-item-row-thumbnail-copy>
     Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et
     ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit
     sollicitudin.
-  </cds-content-item-horizontal-thumbnail-copy>
+  </cds-content-item-row-thumbnail-copy>
   <cds-link-list slot="footer" type="vertical">
     <cds-link-list-item-cta
       icon-placement="right"
@@ -85,7 +85,7 @@ import '@carbon/ibmdotcom-web-components/es/components/content-item-horizontal/i
     slot="thumbnail"
     alt="Alt text"
     default-src="https://fpoimg.com/960x720?text=4:3&bg_color=ee5396&text_color=161616"></cds-image>
-</cds-content-item-horizontal>
+</cds-content-item-row>
 ```
 
 ## With Media (image)
@@ -93,7 +93,7 @@ import '@carbon/ibmdotcom-web-components/es/components/content-item-horizontal/i
 ### JS (via import)
 
 ```javascript
-import '@carbon/ibmdotcom-web-components/es/components/content-item-horizontal/index.js';
+import '@carbon/ibmdotcom-web-components/es/components/content-item-row/index.js';
 
 // with Image
 import '@carbon/ibmdotcom-web-components/es/components/image/image';
@@ -102,11 +102,11 @@ import '@carbon/ibmdotcom-web-components/es/components/image/image';
 ### HTML
 
 ```html
-<cds-content-item-horizontal-media align="right">
+<cds-content-item-row-media align="right">
   <cds-image slot="media" alt="Alt text" default-src="image.jpg"></cds-image>
   <cds-content-item-heading>Lorem Ipsum</cds-content-item-heading>
-  <cds-content-item-horizontal-media-copy
-    >Lorem Ipsum</cds-content-item-horizontal-media-copy
+  <cds-content-item-row-media-copy
+    >Lorem Ipsum</cds-content-item-row-media-copy
   >
   <cds-link-list slot="footer" type="vertical">
     <cds-link-list-item-cta
@@ -122,7 +122,7 @@ import '@carbon/ibmdotcom-web-components/es/components/image/image';
       Microservices and containers
     </cds-link-list-item-cta>
   </cds-link-list>
-</cds-content-item-horizontal-media>
+</cds-content-item-row-media>
 ```
 
 ## With Media (video)
@@ -130,21 +130,21 @@ import '@carbon/ibmdotcom-web-components/es/components/image/image';
 ### JS (via import)
 
 ```javascript
-import '@carbon/ibmdotcom-web-components/es/components/content-item-horizontal/index.js';
+import '@carbon/ibmdotcom-web-components/es/components/content-item-row/index.js';
 
 // with Video
-import '@carbon/ibmdotcom-web-components/es/components/content-item-horizontal/content-item-horizontal-media-video';
+import '@carbon/ibmdotcom-web-components/es/components/content-item-row/content-item-row-media-video';
 ```
 
 ### HTML
 
 ```html
-<cds-content-item-horizontal-media align="right">
-  <cds-content-item-horizontal-media-video
-    video-id="0_ibuqxqbe"></cds-content-item-horizontal-media-video>
+<cds-content-item-row-media align="right">
+  <cds-content-item-row-media-video
+    video-id="0_ibuqxqbe"></cds-content-item-row-media-video>
   <cds-content-item-heading>Lorem Ipsum</cds-content-item-heading>
-  <cds-content-item-horizontal-media-copy
-    >Lorem Ipsum</cds-content-item-horizontal-media-copy
+  <cds-content-item-row-media-copy
+    >Lorem Ipsum</cds-content-item-row-media-copy
   >
   <cds-link-list slot="footer" type="vertical">
     <cds-link-list-item-cta
@@ -160,7 +160,7 @@ import '@carbon/ibmdotcom-web-components/es/components/content-item-horizontal/c
       Microservices and containers
     </cds-link-list-item-cta>
   </cds-link-list>
-</cds-content-item-horizontal-media>
+</cds-content-item-row-media>
 ```
 
 ## With Featured Media (image)
@@ -168,7 +168,7 @@ import '@carbon/ibmdotcom-web-components/es/components/content-item-horizontal/c
 ### JS (via import)
 
 ```javascript
-import '@carbon/ibmdotcom-web-components/es/components/content-item-horizontal/index.js';
+import '@carbon/ibmdotcom-web-components/es/components/content-item-row/index.js';
 
 // with Image
 import '@carbon/ibmdotcom-web-components/es/components/image/image';
@@ -177,16 +177,16 @@ import '@carbon/ibmdotcom-web-components/es/components/image/image';
 ### HTML
 
 ```html
-<cds-content-item-horizontal-media-featured>
-  <cds-content-item-horizontal-eyebrow
-    >Lorem ipsum</cds-content-item-horizontal-eyebrow
+<cds-content-item-row-media-featured>
+  <cds-content-item-row-eyebrow
+    >Lorem ipsum</cds-content-item-row-eyebrow
   >
   <cds-content-item-heading>Aliquam condimentum</cds-content-item-heading>
-  <cds-content-item-horizontal-media-copy>
+  <cds-content-item-row-media-copy>
     Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et
     ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit
     sollicitudin.
-  </cds-content-item-horizontal-media-copy>
+  </cds-content-item-row-media-copy>
   <cds-link-list slot="footer" type="vertical">
     <cds-link-list-item-cta
       icon-placement="right"
@@ -202,7 +202,7 @@ import '@carbon/ibmdotcom-web-components/es/components/image/image';
     </cds-link-list-item-cta>
   </cds-link-list>
   <cds-image slot="media" alt="Alt text" default-src="image.jpg"></cds-image>
-</cds-content-item-horizontal-media-featured>
+</cds-content-item-row-media-featured>
 ```
 
 ## With Featured Media (video)
@@ -210,25 +210,25 @@ import '@carbon/ibmdotcom-web-components/es/components/image/image';
 ### JS (via import)
 
 ```javascript
-import '@carbon/ibmdotcom-web-components/es/components/content-item-horizontal/index.js';
+import '@carbon/ibmdotcom-web-components/es/components/content-item-row/index.js';
 
 // with Video
-import '@carbon/ibmdotcom-web-components/es/components/content-item-horizontal/content-item-horizontal-media-video';
+import '@carbon/ibmdotcom-web-components/es/components/content-item-row/content-item-row-media-video';
 ```
 
 ### HTML
 
 ```html
-<cds-content-item-horizontal-media-featured>
-  <cds-content-item-horizontal-eyebrow
-    >Lorem ipsum</cds-content-item-horizontal-eyebrow
+<cds-content-item-row-media-featured>
+  <cds-content-item-row-eyebrow
+    >Lorem ipsum</cds-content-item-row-eyebrow
   >
   <cds-content-item-heading>Aliquam condimentum</cds-content-item-heading>
-  <cds-content-item-horizontal-media-copy>
+  <cds-content-item-row-media-copy>
     Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et
     ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit
     sollicitudin.
-  </cds-content-item-horizontal-media-copy>
+  </cds-content-item-row-media-copy>
   <cds-link-list slot="footer" type="vertical">
     <cds-link-list-item-cta
       icon-placement="right"
@@ -243,14 +243,14 @@ import '@carbon/ibmdotcom-web-components/es/components/content-item-horizontal/c
       Microservices and containers
     </cds-link-list-item-cta>
   </cds-link-list>
-  <cds-content-item-horizontal-media-video
-    video-id="0_ibuqxqbe"></cds-content-item-horizontal-media-video>
-</cds-content-item-horizontal-media-featured>
+  <cds-content-item-row-media-video
+    video-id="0_ibuqxqbe"></cds-content-item-row-media-video>
+</cds-content-item-row-media-featured>
 ```
 
 ## Props
 
-<Props of="cds-content-item-horizontal" />
+<Props of="cds-content-item-row" />
 <Description markdown={markdownContents} />
 
 ## Stable selectors
@@ -261,10 +261,10 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector               | Compatibility selector                             | Description |
 | ------------------------------------- | -------------------------------------------------- | ----------- |
-| `<cds-content-item-horizontal>`       | `data-autoid="cds--content-item-horizontal"`       | Component   |
-| `<cds-content-item-horizontal-media>` | `data-autoid="cds--content-item-horizontal-media"` | Component   |
+| `<cds-content-item-row>`       | `data-autoid="cds--content-item-row"`       | Component   |
+| `<cds-content-item-row-media>` | `data-autoid="cds--content-item-row-media"` | Component   |
 | `<cds-content-item-heading>`          | `data-autoid="cds--content-item-heading"`          | Component   |
-| `<cds-content-item-horizontal-copy>`  | `data-autoid="cds--content-item-horizontal-copy"`  | Component   |
+| `<cds-content-item-row-copy>`  | `data-autoid="cds--content-item-row-copy"`  | Component   |
 | `<cds-link-list>`                     | `data-autoid="cds--link-list"`                     | Component   |
 | `<cds-link-list-item-cta>`            | `data-autoid="cds--link-list-item-cta"`            | Component   |
 
diff --git a/packages/web-components/src/components/content-item-horizontal/__stories__/README.stories.react.mdx b/packages/web-components/src/components/content-item-row/__stories__/README.stories.react.mdx
similarity index 60%
rename from packages/web-components/src/components/content-item-horizontal/__stories__/README.stories.react.mdx
rename to packages/web-components/src/components/content-item-row/__stories__/README.stories.react.mdx
index 4d07ae92201..33560804674 100644
--- a/packages/web-components/src/components/content-item-horizontal/__stories__/README.stories.react.mdx
+++ b/packages/web-components/src/components/content-item-row/__stories__/README.stories.react.mdx
@@ -5,15 +5,15 @@ import {
   Story,
 } from '@storybook/addon-docs/blocks';
 import contributing from '../../../../../../docs/contributing-license.md';
-import { PropTypesRef } from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal';
+import { PropTypesRef } from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row';
 
-# Content Item Horizontal
+# Content Item Row
 
 > 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/content-item-horizontal)
+> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/content-item-row)
 > example implementation.
 
-[![Edit @carbon/ibmdotcom-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/content-item-horizontal)
+[![Edit @carbon/ibmdotcom-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/content-item-row)
 
 ## Getting started
 
@@ -22,25 +22,25 @@ Here's a quick example to get you started.
 ### JS
 
 ```javascript
-import C4DContentItemHorizontal from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal';
-import C4DContentItemHorizontalCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-copy';
-import C4DContentItemHorizontalEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-eyebrow';
+import C4DContentItemRow from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row';
+import C4DContentItemRowCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-copy';
+import C4DContentItemRowEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-eyebrow';
 import C4DContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading';
 import C4DLinkList from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list';
 import C4DLinkListItemCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/link-list-item-cta';
 
 function App() {
   return (
-    <C4DContentItemHorizontal>
-      <C4DContentItemHorizontalEyebrow>
+    <C4DContentItemRow>
+      <C4DContentItemRowEyebrow>
         Lorem ipsum
-      </C4DContentItemHorizontalEyebrow>
+      </C4DContentItemRowEyebrow>
       <C4DContentItemHeading>Aliquam condimentum</C4DContentItemHeading>
-      <C4DContentItemHorizontalCopy>
+      <C4DContentItemRowCopy>
         Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et
         ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at
         elit sollicitudin.
-      </C4DContentItemHorizontalCopy>
+      </C4DContentItemRowCopy>
       <C4DLinkList slot="footer" type="vertical">
         <C4DLinkListItemCTA
           icon-placement="right"
@@ -55,7 +55,7 @@ function App() {
           Microservices and containers
         </C4DLinkListItemCTA>
       </C4DLinkList>
-    </C4DContentItemHorizontal>
+    </C4DContentItemRow>
   );
 }
 ```
@@ -63,8 +63,8 @@ function App() {
 ### JS (with thumbnail)
 
 ```javascript
-import C4DContentItemHorizontal from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal';
-import C4DContentItemHorizontalThumbnailCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-thumbnail-copy';
+import C4DContentItemRow from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row';
+import C4DContentItemRowThumbnailCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-thumbnail-copy';
 import C4DContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading';
 import C4DLinkList from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list';
 import C4DLinkListItemCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/link-list-item-cta';
@@ -72,13 +72,13 @@ import C4DImage from '@carbon/ibmdotcom-web-components/es/components-react/image
 
 function App() {
   return (
-    <C4DContentItemHorizontal thumbnail>
+    <C4DContentItemRow thumbnail>
       <C4DContentItemHeading>Aliquam condimentum</C4DContentItemHeading>
-      <C4DContentItemHorizontalThumbnailCopy>
+      <C4DContentItemRowThumbnailCopy>
         Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et
         ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at
         elit sollicitudin.
-      </C4DContentItemHorizontalThumbnailCopy>
+      </C4DContentItemRowThumbnailCopy>
       <C4DLinkList slot="footer" type="vertical">
         <C4DLinkListItemCTA
           icon-placement="right"
@@ -98,7 +98,7 @@ function App() {
         alt="Alt text"
         default-src="https://fpoimg.com/960x720?text=4:3&bg_color=ee5396&text_color=161616"
       />
-    </C4DContentItemHorizontal>
+    </C4DContentItemRow>
   );
 }
 ```
@@ -106,8 +106,8 @@ function App() {
 ### JS (with media - image)
 
 ```javascript
-import C4DContentItemHorizontalMedia from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-media';
-import C4DContentItemHorizontalMediaCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-media-copy';
+import C4DContentItemRowMedia from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-media';
+import C4DContentItemRowMediaCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-media-copy';
 import C4DContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading';
 import C4DLinkList from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list';
 import C4DLinkListItemCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/link-list-item-cta';
@@ -115,16 +115,16 @@ import C4DImage from '@carbon/ibmdotcom-web-components/es/components-react/image
 
 function App() {
   return (
-    <C4DContentItemHorizontalMedia align="right">
+    <C4DContentItemRowMedia align="right">
       <C4DImage
         slot="media"
         alt="Alt text"
         default-src="https://fpoimg.com/960x720?text=4:3&bg_color=ee5396&text_color=161616"
       />
       <C4DContentItemHeading>Aliquam condimentum</C4DContentItemHeading>
-      <C4DContentItemHorizontalMediaCopy>
+      <C4DContentItemRowMediaCopy>
         Lorem Ipsum
-      </C4DContentItemHorizontalMediaCopy>
+      </C4DContentItemRowMediaCopy>
       <C4DLinkList slot="footer" type="vertical">
         <C4DLinkListItemCTA
           icon-placement="right"
@@ -139,7 +139,7 @@ function App() {
           Microservices and containers
         </C4DLinkListItemCTA>
       </C4DLinkList>
-    </C4DContentItemHorizontalMedia>
+    </C4DContentItemRowMedia>
   );
 }
 ```
@@ -147,21 +147,21 @@ function App() {
 ### JS (with media - video)
 
 ```javascript
-import C4DContentItemHorizontalMedia from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-media';
-import C4DContentItemHorizontalMediaVideo from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-media-video';
-import C4DContentItemHorizontalMediaCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-media-copy';
+import C4DContentItemRowMedia from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-media';
+import C4DContentItemRowMediaVideo from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-media-video';
+import C4DContentItemRowMediaCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-media-copy';
 import C4DContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading';
 import C4DLinkList from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list';
 import C4DLinkListItemCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/link-list-item-cta';
 
 function App() {
   return (
-    <C4DContentItemHorizontalMedia align="right">
-      <C4DContentItemHorizontalMediaVideo video-id="0_ibuqxqbe"></C4DContentItemHorizontalMediaVideo>
+    <C4DContentItemRowMedia align="right">
+      <C4DContentItemRowMediaVideo video-id="0_ibuqxqbe"></C4DContentItemRowMediaVideo>
       <C4DContentItemHeading>Aliquam condimentum</C4DContentItemHeading>
-      <C4DContentItemHorizontalMediaCopy>
+      <C4DContentItemRowMediaCopy>
         Lorem Ipsum
-      </C4DContentItemHorizontalMediaCopy>
+      </C4DContentItemRowMediaCopy>
       <C4DLinkList slot="footer" type="vertical">
         <C4DLinkListItemCTA
           icon-placement="right"
@@ -176,7 +176,7 @@ function App() {
           Microservices and containers
         </C4DLinkListItemCTA>
       </C4DLinkList>
-    </C4DContentItemHorizontalMedia>
+    </C4DContentItemRowMedia>
   );
 }
 ```
@@ -184,9 +184,9 @@ function App() {
 ### JS (with featured media - image)
 
 ```javascript
-import C4DContentItemHorizontalMediaFeatured from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-media-featured';
-import C4DContentItemHorizontalMediaCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-media-copy';
-import C4DContentItemHorizontalEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-eyebrow';
+import C4DContentItemRowMediaFeatured from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-media-featured';
+import C4DContentItemRowMediaCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-media-copy';
+import C4DContentItemRowEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-eyebrow';
 import C4DContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading';
 import C4DLinkList from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list';
 import C4DLinkListItemCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/link-list-item-cta';
@@ -194,12 +194,12 @@ import C4DImage from '@carbon/ibmdotcom-web-components/es/components-react/image
 
 function App() {
   return (
-  <C4DContentItemHorizontalMediaFeatured>
-    <C4DContentItemHorizontalEyebrow>Lorem ipsum</C4DContentItemHorizontalEyebrow>
+  <C4DContentItemRowMediaFeatured>
+    <C4DContentItemRowEyebrow>Lorem ipsum</C4DContentItemRowEyebrow>
     <C4DContentItemHeading>Aliquam condimentum</C4DContentItemHeading>
-    <C4DContentItemHorizontalMediaCopy>
+    <C4DContentItemRowMediaCopy>
         Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin.
-    </C4DContentItemHorizontalMediaCopy>
+    </C4DContentItemRowMediaCopy>
     <C4DLinkList slot="footer" type="vertical">
       <C4DLinkListItemCTA icon-placement="right" href="https://www.ibm.com" cta-type="local">
         Learn more
@@ -209,7 +209,7 @@ function App() {
       </C4DLinkListItemCTA>
     </C4DLinkList>
     <C4DImage slot="media" alt="Alt text" default-src="https://fpoimg.com/960x720?text=4:3&bg_color=ee5396&text_color=161616" />
-  </C4DContentItemHorizontalMedia>
+  </C4DContentItemRowMedia>
   );
 }
 ```
@@ -217,22 +217,22 @@ function App() {
 ### JS (with featured media - video)
 
 ```javascript
-import C4DContentItemHorizontalMediaFeatured from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-media-featured';
-import C4DContentItemHorizontalMediaCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-media-copy';
-import C4DContentItemHorizontalMediaVideo from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-media-video';
-import C4DContentItemHorizontalEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-eyebrow';
+import C4DContentItemRowMediaFeatured from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-media-featured';
+import C4DContentItemRowMediaCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-media-copy';
+import C4DContentItemRowMediaVideo from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-media-video';
+import C4DContentItemRowEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-eyebrow';
 import C4DContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading';
 import C4DLinkList from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list';
 import C4DLinkListItemCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/link-list-item-cta';
 
 function App() {
   return (
-  <C4DContentItemHorizontalMediaFeatured>
-    <C4DContentItemHorizontalEyebrow>Lorem ipsum</C4DContentItemHorizontalEyebrow>
+  <C4DContentItemRowMediaFeatured>
+    <C4DContentItemRowEyebrow>Lorem ipsum</C4DContentItemRowEyebrow>
     <C4DContentItemHeading>Aliquam condimentum</C4DContentItemHeading>
-    <C4DContentItemHorizontalMediaCopy>
+    <C4DContentItemRowMediaCopy>
         Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin.
-    </C4DContentItemHorizontalMediaCopy>
+    </C4DContentItemRowMediaCopy>
     <C4DLinkList slot="footer" type="vertical">
       <C4DLinkListItemCTA icon-placement="right" href="https://www.ibm.com" cta-type="local">
         Learn more
@@ -241,8 +241,8 @@ function App() {
         Microservices and containers
       </C4DLinkListItemCTA>
     </C4DLinkList>
-  <C4DContentItemHorizontalMediaVideo video-id="0_ibuqxqbe"></C4DContentItemHorizontalMediaVideo>
-  </C4DContentItemHorizontalMedia>
+  <C4DContentItemRowMediaVideo video-id="0_ibuqxqbe"></C4DContentItemRowMediaVideo>
+  </C4DContentItemRowMedia>
   );
 }
 ```
@@ -259,13 +259,13 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector                        | Compatibility selector                                      | Description |
 | ---------------------------------------------- | ----------------------------------------------------------- | ----------- |
-| `<cds-content-item-horizontal>`                | `data-autoid="cds--content-item-horizontal"`                | Component   |
-| `<cds-content-item-horizontal-copy>`           | `data-autoid="cds--content-item-horizontal-copy"`           | Component   |
-| `<cds-content-item-horizontal-eyebrow>`        | `data-autoid="cds--content-item-horizontal-eyebrow"`        | Component   |
-| `<cds-content-item-horizontal-media>`          | `data-autoid="cds--content-item-horizontal-media"`          | Component   |
-| `<cds-content-item-horizontal-media-copy>`     | `data-autoid="cds--content-item-horizontal-media-copy"`     | Component   |
-| `<cds-content-item-horizontal-media-video>`    | `data-autoid="cds--content-item-horizontal-media-video"`    | Component   |
-| `<cds-content-item-horizontal-media-featured>` | `data-autoid="cds--content-item-horizontal-media-featured"` | Component   |
-| `<cds-content-item-horizontal-thumbnail-copy>` | `data-autoid="cds--content-item-horizontal-thumbnail-copy"` | Component   |
+| `<cds-content-item-row>`                | `data-autoid="cds--content-item-row"`                | Component   |
+| `<cds-content-item-row-copy>`           | `data-autoid="cds--content-item-row-copy"`           | Component   |
+| `<cds-content-item-row-eyebrow>`        | `data-autoid="cds--content-item-row-eyebrow"`        | Component   |
+| `<cds-content-item-row-media>`          | `data-autoid="cds--content-item-row-media"`          | Component   |
+| `<cds-content-item-row-media-copy>`     | `data-autoid="cds--content-item-row-media-copy"`     | Component   |
+| `<cds-content-item-row-media-video>`    | `data-autoid="cds--content-item-row-media-video"`    | Component   |
+| `<cds-content-item-row-media-featured>` | `data-autoid="cds--content-item-row-media-featured"` | Component   |
+| `<cds-content-item-row-thumbnail-copy>` | `data-autoid="cds--content-item-row-thumbnail-copy"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/content-item-horizontal/__stories__/content-item-horizontal.stories.react.tsx b/packages/web-components/src/components/content-item-row/__stories__/content-item-row.stories.react.tsx
similarity index 68%
rename from packages/web-components/src/components/content-item-horizontal/__stories__/content-item-horizontal.stories.react.tsx
rename to packages/web-components/src/components/content-item-row/__stories__/content-item-row.stories.react.tsx
index adf6d36bd05..a24bf2efd7b 100644
--- a/packages/web-components/src/components/content-item-horizontal/__stories__/content-item-horizontal.stories.react.tsx
+++ b/packages/web-components/src/components/content-item-row/__stories__/content-item-row.stories.react.tsx
@@ -12,28 +12,28 @@ import { select } from '@storybook/addon-knobs';
 // In our dev env, we auto-generate the file and re-map below path to to point to the generated file.
 /* eslint-disable max-len */
 // @ts-ignore
-import C4DContentItemHorizontal from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal';
+import C4DContentItemRow from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row';
 /* eslint-disable max-len */
 // @ts-ignore
-import C4DContentItemHorizontalCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-copy';
+import C4DContentItemRowCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-copy';
 /* eslint-disable max-len */
 // @ts-ignore
-import C4DContentItemHorizontalEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-eyebrow';
+import C4DContentItemRowEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-eyebrow';
 /* eslint-disable max-len */
 // @ts-ignore
-import C4DContentItemHorizontalMedia from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-media';
+import C4DContentItemRowMedia from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-media';
 /* eslint-disable max-len */
 // @ts-ignore
-import C4DContentItemHorizontalMediaFeatured from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-media-featured';
+import C4DContentItemRowMediaFeatured from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-media-featured';
 /* eslint-disable max-len */
 // @ts-ignore
-import C4DContentItemHorizontalMediaCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-media-copy';
+import C4DContentItemRowMediaCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-media-copy';
 /* eslint-disable max-len */
 // @ts-ignore
-import C4DContentItemHorizontalMediaVideo from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-media-video';
+import C4DContentItemRowMediaVideo from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-media-video';
 /* eslint-disable max-len */
 // @ts-ignore
-import C4DContentItemHorizontalThumbnailCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-thumbnail-copy';
+import C4DContentItemRowThumbnailCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-thumbnail-copy';
 // @ts-ignore
 import C4DContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading';
 // @ts-ignore
@@ -76,15 +76,15 @@ id est laborum.`;
 
 export const Default = (args) => {
   const { eyebrow, heading, copy, withMedia } =
-    args?.ContentItemHorizontal ?? {};
+    args?.ContentItemRow ?? {};
 
   return (
-    <C4DContentItemHorizontal>
-      <C4DContentItemHorizontalEyebrow>
+    <C4DContentItemRow>
+      <C4DContentItemRowEyebrow>
         {eyebrow}
-      </C4DContentItemHorizontalEyebrow>
+      </C4DContentItemRowEyebrow>
       <C4DContentItemHeading>{heading}</C4DContentItemHeading>
-      <C4DContentItemHorizontalCopy>{copy}</C4DContentItemHorizontalCopy>
+      <C4DContentItemRowCopy>{copy}</C4DContentItemRowCopy>
       <C4DTextCTA slot="footer" href="https://www.ibm.com" cta-type="local">
         Learn more
       </C4DTextCTA>
@@ -97,19 +97,19 @@ export const Default = (args) => {
         ''
       )}
       {withMedia === MEDIA_TYPE.VIDEO ? (
-        <C4DContentItemHorizontalMediaVideo video-id="0_ibuqxqbe"></C4DContentItemHorizontalMediaVideo>
+        <C4DContentItemRowMediaVideo video-id="0_ibuqxqbe"></C4DContentItemRowMediaVideo>
       ) : (
         ''
       )}
-    </C4DContentItemHorizontal>
+    </C4DContentItemRow>
   );
 };
 
 Default.story = {
   parameters: {
-    gridContentClasses: 'cds--col-lg-12 cds--no-gutter',
+    gridContentClasses: 'cds--col-lg-12',
     knobs: {
-      ContentItemHorizontal: () => ({
+      ContentItemRow: () => ({
         eyebrow: textNullable('Eyebrow (eyebrow):', 'Lorem ipsum'),
         heading: textNullable('Heading (heading):', 'Aliquam condimentum'),
         withMedia: select('Media type', { ...mediaType, None: null }, null),
@@ -120,13 +120,13 @@ Default.story = {
 };
 
 export const withThumbnail = (args) => {
-  const { alt, heading, copy } = args?.ContentItemHorizontal ?? {};
+  const { alt, heading, copy } = args?.ContentItemRow ?? {};
   return (
-    <C4DContentItemHorizontal thumbnail>
+    <C4DContentItemRow thumbnail>
       <C4DContentItemHeading>{heading}</C4DContentItemHeading>
-      <C4DContentItemHorizontalThumbnailCopy>
+      <C4DContentItemRowThumbnailCopy>
         {copy}
-      </C4DContentItemHorizontalThumbnailCopy>
+      </C4DContentItemRowThumbnailCopy>
       <C4DTextCTA slot="footer" href="https://www.ibm.com" cta-type="local">
         Learn more
       </C4DTextCTA>
@@ -134,16 +134,16 @@ export const withThumbnail = (args) => {
         slot="thumbnail"
         alt={alt || undefined}
         default-src={imgMd4x3}></C4DImage>
-    </C4DContentItemHorizontal>
+    </C4DContentItemRow>
   );
 };
 
 withThumbnail.story = {
   name: 'With thumbnail',
   parameters: {
-    gridContentClasses: 'cds--col-lg-12 cds--no-gutter',
+    gridContentClasses: 'cds--col-lg-12',
     knobs: {
-      ContentItemHorizontal: () => ({
+      ContentItemRow: () => ({
         heading: textNullable('Heading (heading):', 'Aliquam condimentum'),
         copy: shortBodyCopy,
         alt: textNullable('Image alt text', 'Image alt text'),
@@ -154,9 +154,9 @@ withThumbnail.story = {
 
 export const withMedia = (args) => {
   const { align, type, alt, heading, eyebrow, copy } =
-    args?.ContentItemHorizontal ?? {};
+    args?.ContentItemRow ?? {};
   return (
-    <C4DContentItemHorizontalMedia align={align}>
+    <C4DContentItemRowMedia align={align}>
       {type === MEDIA_TYPE.IMAGE ? (
         <C4DImage
           slot="media"
@@ -166,30 +166,30 @@ export const withMedia = (args) => {
         ''
       )}
       {type === MEDIA_TYPE.VIDEO ? (
-        <C4DContentItemHorizontalMediaVideo video-id="0_ibuqxqbe"></C4DContentItemHorizontalMediaVideo>
+        <C4DContentItemRowMediaVideo video-id="0_ibuqxqbe"></C4DContentItemRowMediaVideo>
       ) : (
         ''
       )}
-      <C4DContentItemHorizontalEyebrow>
+      <C4DContentItemRowEyebrow>
         {eyebrow}
-      </C4DContentItemHorizontalEyebrow>
+      </C4DContentItemRowEyebrow>
       <C4DContentItemHeading>{heading}</C4DContentItemHeading>
-      <C4DContentItemHorizontalMediaCopy>
+      <C4DContentItemRowMediaCopy>
         {copy}
-      </C4DContentItemHorizontalMediaCopy>
+      </C4DContentItemRowMediaCopy>
       <C4DTextCTA slot="footer" href="https://www.ibm.com" cta-type="local">
         Learn more
       </C4DTextCTA>
-    </C4DContentItemHorizontalMedia>
+    </C4DContentItemRowMedia>
   );
 };
 
 withMedia.story = {
   name: 'With media',
   parameters: {
-    gridContentClasses: 'cds--col-lg-12 cds--no-gutter',
+    gridContentClasses: 'cds--col-lg-12',
     knobs: {
-      ContentItemHorizontal: () => ({
+      ContentItemRow: () => ({
         align: select('Alignment', mediaAlign, MEDIA_ALIGN.RIGHT),
         type: select('Media type', mediaType, MEDIA_TYPE.IMAGE),
         alt: textNullable('Image alt text', 'Image alt text'),
@@ -202,9 +202,9 @@ withMedia.story = {
 };
 
 export const withFeaturedMedia = (args) => {
-  const { type, heading, eyebrow, copy } = args?.ContentItemHorizontal ?? {};
+  const { type, heading, eyebrow, copy } = args?.ContentItemRow ?? {};
   return (
-    <C4DContentItemHorizontalMediaFeatured>
+    <C4DContentItemRowMediaFeatured>
       {type === MEDIA_TYPE.IMAGE ? (
         <C4DImage
           slot="media"
@@ -215,21 +215,21 @@ export const withFeaturedMedia = (args) => {
         ''
       )}
       {type === MEDIA_TYPE.VIDEO ? (
-        <C4DContentItemHorizontalMediaVideo video-id="0_ibuqxqbe"></C4DContentItemHorizontalMediaVideo>
+        <C4DContentItemRowMediaVideo video-id="0_ibuqxqbe"></C4DContentItemRowMediaVideo>
       ) : (
         ''
       )}
-      <C4DContentItemHorizontalEyebrow>
+      <C4DContentItemRowEyebrow>
         {eyebrow}
-      </C4DContentItemHorizontalEyebrow>
+      </C4DContentItemRowEyebrow>
       <C4DContentItemHeading>{heading}</C4DContentItemHeading>
-      <C4DContentItemHorizontalMediaCopy>
+      <C4DContentItemRowMediaCopy>
         {copy}
-      </C4DContentItemHorizontalMediaCopy>
+      </C4DContentItemRowMediaCopy>
       <C4DTextCTA slot="footer" href="https://www.ibm.com" cta-type="local">
         Learn more
       </C4DTextCTA>
-    </C4DContentItemHorizontalMediaFeatured>
+    </C4DContentItemRowMediaFeatured>
   );
 };
 
@@ -238,7 +238,7 @@ withFeaturedMedia.story = {
   parameters: {
     gridContentClasses: 'cds--col-lg-12',
     knobs: {
-      ContentItemHorizontal: () => ({
+      ContentItemRow: () => ({
         type: select('Media type', mediaType, MEDIA_TYPE.IMAGE),
         eyebrow: textNullable('Eyebrow:', 'Lorem Ipsum'),
         heading: textNullable('Heading:', 'Aliquam condimentum'),
@@ -249,7 +249,7 @@ withFeaturedMedia.story = {
 };
 
 export default {
-  title: 'Components/Content item horizontal',
+  title: 'Components/Content item row',
   decorators: [
     (story, { parameters }) => {
       return (
diff --git a/packages/web-components/src/components/content-item-horizontal/__stories__/content-item-horizontal.stories.ts b/packages/web-components/src/components/content-item-row/__stories__/content-item-row.stories.ts
similarity index 74%
rename from packages/web-components/src/components/content-item-horizontal/__stories__/content-item-horizontal.stories.ts
rename to packages/web-components/src/components/content-item-row/__stories__/content-item-row.stories.ts
index cb29f01d538..46c5aa88341 100644
--- a/packages/web-components/src/components/content-item-horizontal/__stories__/content-item-horizontal.stories.ts
+++ b/packages/web-components/src/components/content-item-row/__stories__/content-item-row.stories.ts
@@ -13,7 +13,7 @@ import { select } from '@storybook/addon-knobs';
 import readme from './README.stories.mdx';
 import textNullable from '../../../../.storybook/knob-text-nullable';
 import '../index';
-import '../content-item-horizontal-media-video';
+import '../content-item-row-media-video';
 import '../../image/image';
 import { MEDIA_ALIGN, MEDIA_TYPE } from '../defs';
 import imgLg16x9 from '../../../../../storybook-images/assets/720/fpo--16x9--720x405--001.jpg';
@@ -47,17 +47,12 @@ dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
 id est laborum.`;
 
 export const Default = (args) => {
-  const { eyebrow, heading, copy, withMedia } =
-    args?.ContentItemHorizontal ?? {};
+  const { eyebrow, heading, copy, withMedia } = args?.ContentItemRow ?? {};
   return html`
-    <c4d-content-item-horizontal>
-      <c4d-content-item-horizontal-eyebrow
-        >${eyebrow}</c4d-content-item-horizontal-eyebrow
-      >
+    <c4d-content-item-row>
+      <c4d-content-item-row-eyebrow>${eyebrow}</c4d-content-item-row-eyebrow>
       <c4d-content-item-heading>${heading}</c4d-content-item-heading>
-      <c4d-content-item-horizontal-copy
-        >${copy}</c4d-content-item-horizontal-copy
-      >
+      <c4d-content-item-row-copy>${copy}</c4d-content-item-row-copy>
       <c4d-text-cta slot="footer" href="https://www.ibm.com" cta-type="local"
         >Learn more</c4d-text-cta
       >
@@ -72,21 +67,21 @@ export const Default = (args) => {
         : null}
       ${withMedia === MEDIA_TYPE.VIDEO
         ? html`
-            <c4d-content-item-horizontal-media-video
-              video-id="0_ibuqxqbe"></c4d-content-item-horizontal-media-video>
+            <c4d-content-item-row-media-video
+              video-id="0_ibuqxqbe"></c4d-content-item-row-media-video>
           `
         : null}
-    </c4d-content-item-horizontal>
+    </c4d-content-item-row>
   `;
 };
 
 export const WithThumbnail = (args) => {
-  const { alt, heading, copy } = args?.ContentItemHorizontal ?? {};
+  const { alt, heading, copy } = args?.ContentItemRow ?? {};
   return html`
-    <c4d-content-item-horizontal thumbnail>
+    <c4d-content-item-row thumbnail>
       <c4d-content-item-heading>${heading}</c4d-content-item-heading>
-      <c4d-content-item-horizontal-thumbnail-copy
-        >${copy}</c4d-content-item-horizontal-thumbnail-copy
+      <c4d-content-item-row-thumbnail-copy
+        >${copy}</c4d-content-item-row-thumbnail-copy
       >
       <c4d-text-cta slot="footer" href="https://www.ibm.com" cta-type="local"
         >Learn more</c4d-text-cta
@@ -95,15 +90,15 @@ export const WithThumbnail = (args) => {
         slot="thumbnail"
         alt="${ifDefined(alt)}"
         default-src="${imgMd4x3}"></c4d-image>
-    </c4d-content-item-horizontal>
+    </c4d-content-item-row>
   `;
 };
 
 export const WithMedia = (args) => {
   const { align, type, alt, heading, eyebrow, copy } =
-    args?.ContentItemHorizontal ?? {};
+    args?.ContentItemRow ?? {};
   return html`
-    <c4d-content-item-horizontal-media align="${align}">
+    <c4d-content-item-row-media align="${align}">
       ${type === MEDIA_TYPE.IMAGE
         ? html`
             <c4d-image
@@ -114,28 +109,24 @@ export const WithMedia = (args) => {
         : null}
       ${type === MEDIA_TYPE.VIDEO
         ? html`
-            <c4d-content-item-horizontal-media-video
-              video-id="0_ibuqxqbe"></c4d-content-item-horizontal-media-video>
+            <c4d-content-item-row-media-video
+              video-id="0_ibuqxqbe"></c4d-content-item-row-media-video>
           `
         : null}
-      <c4d-content-item-horizontal-eyebrow
-        >${eyebrow}</c4d-content-item-horizontal-eyebrow
-      >
+      <c4d-content-item-row-eyebrow>${eyebrow}</c4d-content-item-row-eyebrow>
       <c4d-content-item-heading>${heading}</c4d-content-item-heading>
-      <c4d-content-item-horizontal-media-copy
-        >${copy}</c4d-content-item-horizontal-media-copy
-      >
+      <c4d-content-item-row-media-copy>${copy}</c4d-content-item-row-media-copy>
       <c4d-text-cta slot="footer" href="https://www.ibm.com" cta-type="local"
         >Learn more</c4d-text-cta
       >
-    </c4d-content-item-horizontal-media>
+    </c4d-content-item-row-media>
   `;
 };
 
 export const WithMediaFeatured = (args) => {
-  const { type, heading, eyebrow, copy } = args?.ContentItemHorizontal ?? {};
+  const { type, heading, eyebrow, copy } = args?.ContentItemRow ?? {};
   return html`
-    <c4d-content-item-horizontal-media-featured>
+    <c4d-content-item-row-media-featured>
       ${type === MEDIA_TYPE.IMAGE
         ? html`
             <c4d-image
@@ -148,43 +139,39 @@ export const WithMediaFeatured = (args) => {
         : null}
       ${type === MEDIA_TYPE.VIDEO
         ? html`
-            <c4d-content-item-horizontal-media-video
-              video-id="0_ibuqxqbe"></c4d-content-item-horizontal-media-video>
+            <c4d-content-item-row-media-video
+              video-id="0_ibuqxqbe"></c4d-content-item-row-media-video>
           `
         : null}
-      <c4d-content-item-horizontal-eyebrow
-        >${eyebrow}</c4d-content-item-horizontal-eyebrow
-      >
+      <c4d-content-item-row-eyebrow>${eyebrow}</c4d-content-item-row-eyebrow>
       <c4d-content-item-heading>${heading}</c4d-content-item-heading>
-      <c4d-content-item-horizontal-media-copy
-        >${copy}</c4d-content-item-horizontal-media-copy
-      >
+      <c4d-content-item-row-media-copy>${copy}</c4d-content-item-row-media-copy>
       <c4d-text-cta slot="footer" href="https://www.ibm.com" cta-type="local"
         >Learn more</c4d-text-cta
       >
-    </c4d-content-item-horizontal-media-featured>
+    </c4d-content-item-row-media-featured>
   `;
 };
 
 Default.story = {
   parameters: {
-    gridContentClasses: 'cds--col-lg-12 cds--no-gutter',
+    gridContentClasses: 'cds--col-lg-12',
   },
 };
 
 WithThumbnail.story = {
   name: 'With thumbnail',
   parameters: {
-    gridContentClasses: 'cds--col-lg-12 cds--no-gutter',
+    gridContentClasses: 'cds--col-lg-12',
     knobs: {
-      ContentItemHorizontal: () => ({
+      ContentItemRow: () => ({
         heading: textNullable('Heading (heading):', 'Aliquam condimentum'),
         copy: shortBodyCopy,
       }),
     },
     propsSet: {
       default: {
-        ContentItemHorizontal: {
+        ContentItemRow: {
           heading: 'Aliquam condimentum',
           copy: shortBodyCopy,
         },
@@ -196,9 +183,9 @@ WithThumbnail.story = {
 WithMedia.story = {
   name: 'With media',
   parameters: {
-    gridContentClasses: 'cds--col-lg-12 cds--no-gutter',
+    gridContentClasses: 'cds--col-lg-12',
     knobs: {
-      ContentItemHorizontal: () => ({
+      ContentItemRow: () => ({
         align: select('Alignment', mediaAlign, MEDIA_ALIGN.RIGHT),
         type: select('Media type', mediaType, MEDIA_TYPE.IMAGE),
         heading: textNullable('Heading (heading):', 'Aliquam condimentum'),
@@ -208,7 +195,7 @@ WithMedia.story = {
     },
     propsSet: {
       default: {
-        ContentItemHorizontal: {
+        ContentItemRow: {
           align: 'right',
           type: 'image',
           alt: 'Image alt text',
@@ -226,7 +213,7 @@ WithMediaFeatured.story = {
   parameters: {
     gridContentClasses: 'cds--col-lg-12',
     knobs: {
-      ContentItemHorizontal: () => ({
+      ContentItemRow: () => ({
         type: select('Media type', mediaType, MEDIA_TYPE.IMAGE),
         eyebrow: textNullable('Eyebrow:', 'Lorem Ipsum'),
         heading: textNullable('Heading:', 'Aliquam condimentum'),
@@ -235,7 +222,7 @@ WithMediaFeatured.story = {
     },
     propsSet: {
       default: {
-        ContentItemHorizontal: {
+        ContentItemRow: {
           type: 'image',
           alt: 'Image alt text',
           heading: 'Aliquam condimentum',
@@ -248,7 +235,7 @@ WithMediaFeatured.story = {
 };
 
 export default {
-  title: 'Components/Content item horizontal',
+  title: 'Components/Content item row',
   decorators: [
     (story, { parameters }) => html`
       <div class="cds--grid">
@@ -262,7 +249,7 @@ export default {
     ...readme.parameters,
     hasStoryPadding: true,
     knobs: {
-      ContentItemHorizontal: () => ({
+      ContentItemRow: () => ({
         eyebrow: textNullable('Eyebrow (eyebrow):', 'Lorem ipsum'),
         heading: textNullable('Heading (heading):', 'Aliquam condimentum'),
         withMedia: select('Media type', { ...mediaType, None: null }, null),
@@ -271,7 +258,7 @@ export default {
     },
     propsSet: {
       default: {
-        ContentItemHorizontal: {
+        ContentItemRow: {
           eyebrow: 'Lorem ipsum',
           heading: 'Aliquam condimentum',
           copy: bodyCopy,
diff --git a/packages/web-components/src/components/content-item-horizontal/__tests__/content-item-horizontal.test.ts b/packages/web-components/src/components/content-item-row/__tests__/content-item-horizontal.test.ts
similarity index 73%
rename from packages/web-components/src/components/content-item-horizontal/__tests__/content-item-horizontal.test.ts
rename to packages/web-components/src/components/content-item-row/__tests__/content-item-horizontal.test.ts
index 2141601fc31..b291793cf7b 100644
--- a/packages/web-components/src/components/content-item-horizontal/__tests__/content-item-horizontal.test.ts
+++ b/packages/web-components/src/components/content-item-row/__tests__/content-item-horizontal.test.ts
@@ -11,54 +11,48 @@ import { html, render } from 'lit/html.js';
 import '../../content-item/content-item-heading';
 import '../../link-list/link-list';
 import '../../cta/link-list-item-cta';
-import '../content-item-horizontal';
-import '../content-item-horizontal-copy';
-import '../content-item-horizontal-eyebrow';
-import '../content-item-horizontal-thumbnail-copy';
+import '../content-item-row';
+import '../content-item-row-copy';
+import '../content-item-row-eyebrow';
+import '../content-item-row-thumbnail-copy';
 import { ICON_PLACEMENT } from '../../link-with-icon/link-with-icon';
 import { CTA_TYPE } from '../../cta/defs';
 
 const DefaultTemplate = (props?) => {
   const { children } = props ?? {};
-  return html`
-    <c4d-content-item-horizontal> ${children} </c4d-content-item-horizontal>
-  `;
+  return html` <c4d-content-item-row> ${children} </c4d-content-item-row> `;
 };
 
 const WithMediaTemplate = (props?) => {
   const { children } = props ?? {};
   return html`
-    <c4d-content-item-horizontal-media>
-      ${children}
-    </c4d-content-item-horizontal-media>
+    <c4d-content-item-row-media> ${children} </c4d-content-item-row-media>
   `;
 };
 
 const WithFeaturedMediaTemplate = (props?) => {
   const { children } = props ?? {};
   return html`
-    <c4d-content-item-horizontal-media-featured>
+    <c4d-content-item-row-media-featured>
       ${children}
-    </c4d-content-item-horizontal-media-featured>
+    </c4d-content-item-row-media-featured>
   `;
 };
 
 const WithThumbnailTemplate = (props?) => {
   const { children } = props ?? {};
   return html`
-    <c4d-content-item-horizontal thumbnail>
-      ${children}
-    </c4d-content-item-horizontal>
+    <c4d-content-item-row thumbnail> ${children} </c4d-content-item-row>
   `;
 };
 
-describe('c4d-content-item-horizontal', function () {
+describe('c4d-content-item-row', function () {
   describe('Misc attributes - Default', function () {
     it('should render with minimum attributes', async function () {
       render(DefaultTemplate(), document.body);
       await Promise.resolve();
       expect(
-        document.body.querySelector('c4d-content-item-horizontal')
+        document.body.querySelector('c4d-content-item-row')
       ).toMatchSnapshot({ mode: 'shadow' });
     });
 
@@ -67,13 +61,11 @@ describe('c4d-content-item-horizontal', function () {
         DefaultTemplate({
           copy: 'copy-foo',
           children: html`
-            <c4d-content-item-horizontal-eyebrow
-              >eyebrow-foo</c4d-content-item-horizontal-eyebrow
+            <c4d-content-item-row-eyebrow
+              >eyebrow-foo</c4d-content-item-row-eyebrow
             >
             <c4d-content-item-heading>heading-foo</c4d-content-item-heading>
-            <c4d-content-item-horizontal-copy
-              >copy-foo</c4d-content-item-horizontal-copy
-            >
+            <c4d-content-item-row-copy>copy-foo</c4d-content-item-row-copy>
             <c4d-link-list slot="footer" type="vertical">
               <c4d-link-list-item-cta
                 icon-placement="${ICON_PLACEMENT.RIGHT}"
@@ -94,7 +86,7 @@ describe('c4d-content-item-horizontal', function () {
       );
       await Promise.resolve();
       expect(
-        document.body.querySelector('c4d-content-item-horizontal')
+        document.body.querySelector('c4d-content-item-row')
       ).toMatchSnapshot({ mode: 'shadow' });
     });
   });
@@ -104,7 +96,7 @@ describe('c4d-content-item-horizontal', function () {
       render(WithMediaTemplate(), document.body);
       await Promise.resolve();
       expect(
-        document.body.querySelector('c4d-content-item-horizontal-media')
+        document.body.querySelector('c4d-content-item-row-media')
       ).toMatchSnapshot({ mode: 'shadow' });
     });
 
@@ -114,8 +106,8 @@ describe('c4d-content-item-horizontal', function () {
           children: html`
             <c4d-image slot="media" alt="image" default-src=""></c4d-image>
             <c4d-content-item-heading>heading-foo</c4d-content-item-heading>
-            <c4d-content-item-horizontal-media-copy
-              >copy-foo</c4d-content-item-horizontal-media-copy
+            <c4d-content-item-row-media-copy
+              >copy-foo</c4d-content-item-row-media-copy
             >
             <c4d-link-list slot="footer" type="vertical">
               <c4d-link-list-item-cta
@@ -131,7 +123,7 @@ describe('c4d-content-item-horizontal', function () {
       );
       await Promise.resolve();
       expect(
-        document.body.querySelector('c4d-content-item-horizontal-media')
+        document.body.querySelector('c4d-content-item-row-media')
       ).toMatchSnapshot({ mode: 'shadow' });
     });
   });
@@ -141,9 +133,7 @@ describe('c4d-content-item-horizontal', function () {
       render(WithFeaturedMediaTemplate(), document.body);
       await Promise.resolve();
       expect(
-        document.body.querySelector(
-          'c4d-content-item-horizontal-media-featured'
-        )
+        document.body.querySelector('c4d-content-item-row-media-featured')
       ).toMatchSnapshot({ mode: 'shadow' });
     });
 
@@ -151,12 +141,12 @@ describe('c4d-content-item-horizontal', function () {
       render(
         WithFeaturedMediaTemplate({
           children: html`
-            <c4d-content-item-horizontal-eyebrow
-              >eyebrow-foo</c4d-content-item-horizontal-eyebrow
+            <c4d-content-item-row-eyebrow
+              >eyebrow-foo</c4d-content-item-row-eyebrow
             >
             <c4d-content-item-heading>heading-foo</c4d-content-item-heading>
-            <c4d-content-item-horizontal-media-copy
-              >copy-foo</c4d-content-item-horizontal-media-copy
+            <c4d-content-item-row-media-copy
+              >copy-foo</c4d-content-item-row-media-copy
             >
             <c4d-link-list slot="footer" type="vertical">
               <c4d-link-list-item-cta
@@ -173,9 +163,7 @@ describe('c4d-content-item-horizontal', function () {
       );
       await Promise.resolve();
       expect(
-        document.body.querySelector(
-          'c4d-content-item-horizontal-media-featured'
-        )
+        document.body.querySelector('c4d-content-item-row-media-featured')
       ).toMatchSnapshot({ mode: 'shadow' });
     });
   });
@@ -185,7 +173,7 @@ describe('c4d-content-item-horizontal', function () {
       render(WithThumbnailTemplate(), document.body);
       await Promise.resolve();
       expect(
-        document.body.querySelector('c4d-content-item-horizontal')
+        document.body.querySelector('c4d-content-item-row')
       ).toMatchSnapshot({ mode: 'shadow' });
     });
 
@@ -194,8 +182,8 @@ describe('c4d-content-item-horizontal', function () {
         WithThumbnailTemplate({
           children: html`
             <c4d-content-item-heading>heading-foo</c4d-content-item-heading>
-            <c4d-content-item-horizontal-thumbnail-copy
-              >copy-foo</c4d-content-item-horizontal-thumbnail-copy
+            <c4d-content-item-row-thumbnail-copy
+              >copy-foo</c4d-content-item-row-thumbnail-copy
             >
             <c4d-link-list slot="footer" type="vertical">
               <c4d-link-list-item-cta
@@ -215,7 +203,7 @@ describe('c4d-content-item-horizontal', function () {
       );
       await Promise.resolve();
       expect(
-        document.body.querySelector('c4d-content-item-horizontal')
+        document.body.querySelector('c4d-content-item-row')
       ).toMatchSnapshot({ mode: 'shadow' });
     });
   });
diff --git a/packages/web-components/src/components/content-item-horizontal/content-item-horizontal-thumbnail-copy.ts b/packages/web-components/src/components/content-item-row/content-item-row-copy.ts
similarity index 65%
rename from packages/web-components/src/components/content-item-horizontal/content-item-horizontal-thumbnail-copy.ts
rename to packages/web-components/src/components/content-item-row/content-item-row-copy.ts
index de191d63a7f..b4b1bb28b4d 100644
--- a/packages/web-components/src/components/content-item-horizontal/content-item-horizontal-thumbnail-copy.ts
+++ b/packages/web-components/src/components/content-item-row/content-item-row-copy.ts
@@ -11,30 +11,28 @@ import { html } from 'lit';
 import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import C4DContentItemCopy from '../content-item/content-item-copy';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
-import styles from './content-item-horizontal.scss';
+import styles from './content-item-row.scss';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 
 const { stablePrefix: c4dPrefix } = settings;
 
 /**
- * The copy content of content item horizontal with thumbnail.
+ * The copy content of content item row.
  *
- * @element c4d-content-item-horizontal-thumbnail-copy
+ * @element c4d-content-item-row-copy
  */
-@customElement(`${c4dPrefix}-content-item-horizontal-thumbnail-copy`)
-class C4DContentItemHorizontalThumbnailCopy extends StableSelectorMixin(
-  C4DContentItemCopy
-) {
+@customElement(`${c4dPrefix}-content-item-row-copy`)
+class C4DContentItemRowCopy extends StableSelectorMixin(C4DContentItemCopy) {
   render() {
     return html` <slot></slot> `;
   }
 
   static get stableSelector() {
-    return `${c4dPrefix}--content-item-horizontal-thumbnail-copy`;
+    return `${c4dPrefix}--content-item-row-copy`;
   }
 
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default C4DContentItemHorizontalThumbnailCopy;
+export default C4DContentItemRowCopy;
diff --git a/packages/web-components/src/components/content-item-horizontal/content-item-horizontal-eyebrow.ts b/packages/web-components/src/components/content-item-row/content-item-row-eyebrow.ts
similarity index 71%
rename from packages/web-components/src/components/content-item-horizontal/content-item-horizontal-eyebrow.ts
rename to packages/web-components/src/components/content-item-row/content-item-row-eyebrow.ts
index 937d912825a..28afc47219d 100644
--- a/packages/web-components/src/components/content-item-horizontal/content-item-horizontal-eyebrow.ts
+++ b/packages/web-components/src/components/content-item-row/content-item-row-eyebrow.ts
@@ -9,19 +9,19 @@
 import { LitElement, html } from 'lit';
 import { property } from 'lit/decorators.js';
 import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
-import styles from './content-item-horizontal.scss';
+import styles from './content-item-row.scss';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 
 const { stablePrefix: c4dPrefix } = settings;
 
 /**
- * The eyebrow content of content item horizontal.
+ * The eyebrow content of content item row.
  *
- * @element c4d-content-item-horizontal-eyebrow
+ * @element c4d-content-item-row-eyebrow
  */
-@customElement(`${c4dPrefix}-content-item-horizontal-eyebrow`)
-class C4DContentItemHorizontalEyebrow extends StableSelectorMixin(LitElement) {
+@customElement(`${c4dPrefix}-content-item-row-eyebrow`)
+class C4DContentItemRowEyebrow extends StableSelectorMixin(LitElement) {
   /**
    * The shadow slot this eyebrow content should be in.
    */
@@ -33,7 +33,7 @@ class C4DContentItemHorizontalEyebrow extends StableSelectorMixin(LitElement) {
   }
 
   static get stableSelector() {
-    return `${c4dPrefix}--content-item-horizontal-eyebrow`;
+    return `${c4dPrefix}--content-item-row-eyebrow`;
   }
 
   // `styles` here is a `CSSResult` generated by custom WebPack loader
@@ -41,4 +41,4 @@ class C4DContentItemHorizontalEyebrow extends StableSelectorMixin(LitElement) {
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default C4DContentItemHorizontalEyebrow;
+export default C4DContentItemRowEyebrow;
diff --git a/packages/web-components/src/components/content-item-horizontal/content-item-horizontal-copy.ts b/packages/web-components/src/components/content-item-row/content-item-row-media-copy.ts
similarity index 70%
rename from packages/web-components/src/components/content-item-horizontal/content-item-horizontal-copy.ts
rename to packages/web-components/src/components/content-item-row/content-item-row-media-copy.ts
index 7ed0b63294e..3b334dbeff7 100644
--- a/packages/web-components/src/components/content-item-horizontal/content-item-horizontal-copy.ts
+++ b/packages/web-components/src/components/content-item-row/content-item-row-media-copy.ts
@@ -11,18 +11,18 @@ import { html } from 'lit';
 import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import C4DContentItemCopy from '../content-item/content-item-copy';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
-import styles from './content-item-horizontal.scss';
+import styles from './content-item-row-media.scss';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 
 const { stablePrefix: c4dPrefix } = settings;
 
 /**
- * The copy content of content item horizontal.
+ * The copy content of content item row with media.
  *
- * @element c4d-content-item-horizontal-copy
+ * @element c4d-content-item-row-media-copy
  */
-@customElement(`${c4dPrefix}-content-item-horizontal-copy`)
-class C4DContentItemHorizontalCopy extends StableSelectorMixin(
+@customElement(`${c4dPrefix}-content-item-row-media-copy`)
+class C4DContentItemRowMediaCopy extends StableSelectorMixin(
   C4DContentItemCopy
 ) {
   render() {
@@ -30,11 +30,11 @@ class C4DContentItemHorizontalCopy extends StableSelectorMixin(
   }
 
   static get stableSelector() {
-    return `${c4dPrefix}--content-item-horizontal-copy`;
+    return `${c4dPrefix}--content-item-row-media-copy`;
   }
 
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default C4DContentItemHorizontalCopy;
+export default C4DContentItemRowMediaCopy;
diff --git a/packages/web-components/src/components/content-item-horizontal/content-item-horizontal-media-featured.ts b/packages/web-components/src/components/content-item-row/content-item-row-media-featured.ts
similarity index 60%
rename from packages/web-components/src/components/content-item-horizontal/content-item-horizontal-media-featured.ts
rename to packages/web-components/src/components/content-item-row/content-item-row-media-featured.ts
index 36fbe3fbe7a..ed343121bd1 100644
--- a/packages/web-components/src/components/content-item-horizontal/content-item-horizontal-media-featured.ts
+++ b/packages/web-components/src/components/content-item-row/content-item-row-media-featured.ts
@@ -10,42 +10,42 @@
 import { html } from 'lit';
 import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import C4DContentItem from '../content-item/content-item';
-import styles from './content-item-horizontal-media.scss';
+import styles from './content-item-row-media.scss';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 
 const { prefix, stablePrefix: c4dPrefix } = settings;
 
 /**
- * A component to present content in a horizontal orientation with featured
+ * A component to present content in a row orientation with featured
  * media beneath.
  *
- * @element c4d-content-item-horizontal-media-featured
+ * @element c4d-content-item-row-media-featured
  */
-@customElement(`${c4dPrefix}-content-item-horizontal-media-featured`)
-class C4DContentItemHorizontalMediaFeatured extends C4DContentItem {
+@customElement(`${c4dPrefix}-content-item-row-media-featured`)
+class C4DContentItemRowMediaFeatured extends C4DContentItem {
   render() {
     return html`
-      <div class="${prefix}--content-item-horizontal__row">
-        <div class="${prefix}--content-item-horizontal__col">
+      <div class="${prefix}--content-item-row__row">
+        <div class="${prefix}--content-item-row__col">
           <slot name="eyebrow" @slotchange="${this._handleSlotChange}"></slot>
           <slot name="heading"></slot>
         </div>
-        <div class="${prefix}--content-item-horizontal__col">
+        <div class="${prefix}--content-item-row__col">
           ${this._renderBody()} ${this._renderFooter()}
         </div>
       </div>
-      <div class="${prefix}--content-item-horizontal__row">
+      <div class="${prefix}--content-item-row__row">
         <slot name="media" @slotchange="${this._handleSlotChange}"></slot>
       </div>
     `;
   }
 
   static get stableSelector() {
-    return `${c4dPrefix}-content-item-horizontal-media-featured`;
+    return `${c4dPrefix}-content-item-row-media-featured`;
   }
 
   static styles = styles;
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default C4DContentItemHorizontalMediaFeatured;
+export default C4DContentItemRowMediaFeatured;
diff --git a/packages/web-components/src/components/content-item-horizontal/content-item-horizontal-media-video.ts b/packages/web-components/src/components/content-item-row/content-item-row-media-video.ts
similarity index 69%
rename from packages/web-components/src/components/content-item-horizontal/content-item-horizontal-media-video.ts
rename to packages/web-components/src/components/content-item-row/content-item-row-media-video.ts
index 126255080ad..a150f1a9a01 100644
--- a/packages/web-components/src/components/content-item-horizontal/content-item-horizontal-media-video.ts
+++ b/packages/web-components/src/components/content-item-row/content-item-row-media-video.ts
@@ -12,17 +12,17 @@ import { property } from 'lit/decorators.js';
 import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 import C4DVideoPlayerContainer from '../video-player/video-player-container';
-import styles from './content-item-horizontal-media.scss';
+import styles from './content-item-row-media.scss';
 
 const { stablePrefix: c4dPrefix } = settings;
 
 /**
- * The video content in horizontal content item with media.
+ * The video content in row content item with media.
  *
- * @element c4d-content-item-horizontal-media-video
+ * @element c4d-content-item-row-media-video
  */
-@customElement(`${c4dPrefix}-content-item-horizontal-media-video`)
-class C4DContentItemHorizontalMediaVideo extends C4DVideoPlayerContainer {
+@customElement(`${c4dPrefix}-content-item-row-media-video`)
+class C4DContentItemRowMediaVideo extends C4DVideoPlayerContainer {
   /**
    * The shadow slot this video should be in.
    */
@@ -34,11 +34,11 @@ class C4DContentItemHorizontalMediaVideo extends C4DVideoPlayerContainer {
   }
 
   static get stableSelector() {
-    return `${c4dPrefix}--content-item-horizontal-media-video`;
+    return `${c4dPrefix}--content-item-row-media-video`;
   }
 
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default C4DContentItemHorizontalMediaVideo;
+export default C4DContentItemRowMediaVideo;
diff --git a/packages/web-components/src/components/content-item-horizontal/content-item-horizontal-media.scss b/packages/web-components/src/components/content-item-row/content-item-row-media.scss
similarity index 69%
rename from packages/web-components/src/components/content-item-horizontal/content-item-horizontal-media.scss
rename to packages/web-components/src/components/content-item-row/content-item-row-media.scss
index ba32bc3fd24..cbf48f7c148 100644
--- a/packages/web-components/src/components/content-item-horizontal/content-item-horizontal-media.scss
+++ b/packages/web-components/src/components/content-item-row/content-item-row-media.scss
@@ -5,4 +5,4 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@use '@carbon/ibmdotcom-styles/scss/components/content-item-horizontal-media';
+@use '@carbon/ibmdotcom-styles/scss/components/content-item-row-media';
diff --git a/packages/web-components/src/components/content-item-horizontal/content-item-horizontal-media.ts b/packages/web-components/src/components/content-item-row/content-item-row-media.ts
similarity index 77%
rename from packages/web-components/src/components/content-item-horizontal/content-item-horizontal-media.ts
rename to packages/web-components/src/components/content-item-row/content-item-row-media.ts
index 3a7f2a38fc3..394987bb517 100644
--- a/packages/web-components/src/components/content-item-horizontal/content-item-horizontal-media.ts
+++ b/packages/web-components/src/components/content-item-row/content-item-row-media.ts
@@ -12,9 +12,9 @@ import { property, state } from 'lit/decorators.js';
 import { baseFontSize, breakpoints } from '@carbon/layout';
 import HostListener from '../../internal/vendor/@carbon/web-components/globals/decorators/host-listener.js';
 import HostListenerMixin from '../../internal/vendor/@carbon/web-components/globals/mixins/host-listener.js';
-import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings.js';
 import C4DContentItem from '../content-item/content-item';
-import styles from './content-item-horizontal-media.scss';
+import styles from './content-item-row-media.scss';
 
 import { MEDIA_ALIGN } from './defs';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';
@@ -24,12 +24,12 @@ const { prefix, stablePrefix: c4dPrefix } = settings;
 const breakpoint = parseFloat(breakpoints.lg.width) * baseFontSize;
 
 /**
- * A component to present content in a horizontal orientation with media.
+ * A component to present content in a row orientation with media.
  *
- * @element c4d-content-item-horizontal-media
+ * @element c4d-content-item-row-media
  */
-@customElement(`${c4dPrefix}-content-item-horizontal-media`)
-class C4DContentItemHorizontalMedia extends HostListenerMixin(C4DContentItem) {
+@customElement(`${c4dPrefix}-content-item-row-media`)
+class C4DContentItemRowMedia extends HostListenerMixin(C4DContentItem) {
   /**
    * Defines the alignment of the media: `left` or `right`
    */
@@ -53,7 +53,7 @@ class C4DContentItemHorizontalMedia extends HostListenerMixin(C4DContentItem) {
    */
   protected _renderTextCol(): TemplateResult | string | void {
     return html`
-      <div class="${prefix}--content-item-horizontal__col">
+      <div class="${prefix}--content-item-row__col">
         <slot name="eyebrow" @slotchange="${this._handleSlotChange}"></slot>
         <slot name="heading"></slot>
         ${this._renderBody()} ${this._renderFooter()}
@@ -70,12 +70,12 @@ class C4DContentItemHorizontalMedia extends HostListenerMixin(C4DContentItem) {
     return alignedRight
       ? html`
           ${this._renderTextCol()}
-          <div class="${prefix}--content-item-horizontal__col">
+          <div class="${prefix}--content-item-row__col">
             <slot name="media" @slotchange="${this._handleSlotChange}"></slot>
           </div>
         `
       : html`
-          <div class="${prefix}--content-item-horizontal__col">
+          <div class="${prefix}--content-item-row__col">
             <slot name="media" @slotchange="${this._handleSlotChange}"></slot>
           </div>
           ${this._renderTextCol()}
@@ -85,7 +85,7 @@ class C4DContentItemHorizontalMedia extends HostListenerMixin(C4DContentItem) {
   render() {
     return html`
       <div
-        class="${prefix}--content-item-horizontal__row ${prefix}--content-item-horizontal-media__align-${this
+        class="${prefix}--content-item-row__row ${prefix}--content-item-row-media__align-${this
           .align}">
         ${this._renderContent()}
       </div>
@@ -93,11 +93,11 @@ class C4DContentItemHorizontalMedia extends HostListenerMixin(C4DContentItem) {
   }
 
   static get stableSelector() {
-    return `${c4dPrefix}--content-item-horizontal-media`;
+    return `${c4dPrefix}--content-item-row-media`;
   }
 
   static styles = styles;
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default C4DContentItemHorizontalMedia;
+export default C4DContentItemRowMedia;
diff --git a/packages/web-components/src/components/content-item-horizontal/content-item-horizontal-media-copy.ts b/packages/web-components/src/components/content-item-row/content-item-row-thumbnail-copy.ts
similarity index 68%
rename from packages/web-components/src/components/content-item-horizontal/content-item-horizontal-media-copy.ts
rename to packages/web-components/src/components/content-item-row/content-item-row-thumbnail-copy.ts
index 4944c272b8f..7b3570f61b5 100644
--- a/packages/web-components/src/components/content-item-horizontal/content-item-horizontal-media-copy.ts
+++ b/packages/web-components/src/components/content-item-row/content-item-row-thumbnail-copy.ts
@@ -11,18 +11,18 @@ import { html } from 'lit';
 import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import C4DContentItemCopy from '../content-item/content-item-copy';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
-import styles from './content-item-horizontal-media.scss';
+import styles from './content-item-row.scss';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 
 const { stablePrefix: c4dPrefix } = settings;
 
 /**
- * The copy content of content item horizontal with media.
+ * The copy content of content item row with thumbnail.
  *
- * @element c4d-content-item-horizontal-media-copy
+ * @element c4d-content-item-row-thumbnail-copy
  */
-@customElement(`${c4dPrefix}-content-item-horizontal-media-copy`)
-class C4DContentItemHorizontalMediaCopy extends StableSelectorMixin(
+@customElement(`${c4dPrefix}-content-item-row-thumbnail-copy`)
+class C4DContentItemRowThumbnailCopy extends StableSelectorMixin(
   C4DContentItemCopy
 ) {
   render() {
@@ -30,11 +30,11 @@ class C4DContentItemHorizontalMediaCopy extends StableSelectorMixin(
   }
 
   static get stableSelector() {
-    return `${c4dPrefix}--content-item-horizontal-media-copy`;
+    return `${c4dPrefix}--content-item-row-thumbnail-copy`;
   }
 
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default C4DContentItemHorizontalMediaCopy;
+export default C4DContentItemRowThumbnailCopy;
diff --git a/packages/web-components/src/components/content-item-row/content-item-row.scss b/packages/web-components/src/components/content-item-row/content-item-row.scss
new file mode 100644
index 00000000000..0d8aa302f01
--- /dev/null
+++ b/packages/web-components/src/components/content-item-row/content-item-row.scss
@@ -0,0 +1,8 @@
+//
+// Copyright IBM Corp. 2020, 2021
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@use '@carbon/ibmdotcom-styles/scss/components/content-item-row';
diff --git a/packages/web-components/src/components/content-item-horizontal/content-item-horizontal.ts b/packages/web-components/src/components/content-item-row/content-item-row.ts
similarity index 68%
rename from packages/web-components/src/components/content-item-horizontal/content-item-horizontal.ts
rename to packages/web-components/src/components/content-item-row/content-item-row.ts
index 25b6080a0e0..183bc2407ed 100644
--- a/packages/web-components/src/components/content-item-horizontal/content-item-horizontal.ts
+++ b/packages/web-components/src/components/content-item-row/content-item-row.ts
@@ -11,18 +11,18 @@ import { TemplateResult, html } from 'lit';
 import { property } from 'lit/decorators.js';
 import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import C4DContentItem from '../content-item/content-item';
-import styles from './content-item-horizontal.scss';
+import styles from './content-item-row.scss';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 
 const { prefix, stablePrefix: c4dPrefix } = settings;
 
 /**
- * A component to present a content in a horizontal orientation.
+ * A component to present a content in a row orientation.
  *
- * @element c4d-content-item-horizontal
+ * @element c4d-content-item-row
  */
-@customElement(`${c4dPrefix}-content-item-horizontal`)
-class C4DContentItemHorizontal extends C4DContentItem {
+@customElement(`${c4dPrefix}-content-item-row`)
+class C4DContentItemRow extends C4DContentItem {
   /**
    * Determines whether to render the thumbnail variant
    */
@@ -41,26 +41,26 @@ class C4DContentItemHorizontal extends C4DContentItem {
     return html`
       ${!this.thumbnail
         ? html`
-            <div class="${prefix}--content-item-horizontal__heading-wrapper">
+            <div class="${prefix}--content-item-row__heading-wrapper">
               <slot
                 name="eyebrow"
                 @slotchange="${this._handleSlotChange}"></slot>
               <slot name="heading"></slot>
             </div>
-            <div class="${prefix}--content-item-horizontal__content-wrapper">
+            <div class="${prefix}--content-item-row__content-wrapper">
               ${this._renderBody()}${this._renderFooter()}${this._renderMedia()}
             </div>
           `
         : html`
-            <div class="${prefix}--content-item-horizontal__body-wrapper">
-              <div class="${prefix}--content-item-horizontal__heading-wrapper">
+            <div class="${prefix}--content-item-row__body-wrapper">
+              <div class="${prefix}--content-item-row__heading-wrapper">
                 <slot name="heading"></slot>
               </div>
-              <div class="${prefix}--content-item-horizontal__content-wrapper">
+              <div class="${prefix}--content-item-row__content-wrapper">
                 ${this._renderBody()}${this._renderFooter()}
               </div>
             </div>
-            <div class="${prefix}--content-item-horizontal__col--2">
+            <div class="${prefix}--content-item-row__col--2">
               <slot name="thumbnail" @slotchange="${this._handleSlotChange}">
               </slot>
             </div>
@@ -69,11 +69,11 @@ class C4DContentItemHorizontal extends C4DContentItem {
   }
 
   static get stableSelector() {
-    return `${c4dPrefix}--content-item-horizontal`;
+    return `${c4dPrefix}--content-item-row`;
   }
 
   static styles = styles;
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default C4DContentItemHorizontal;
+export default C4DContentItemRow;
diff --git a/packages/web-components/src/components/content-item-horizontal/defs.ts b/packages/web-components/src/components/content-item-row/defs.ts
similarity index 69%
rename from packages/web-components/src/components/content-item-horizontal/defs.ts
rename to packages/web-components/src/components/content-item-row/defs.ts
index 08ef39566c5..3aee6c7ec1d 100644
--- a/packages/web-components/src/components/content-item-horizontal/defs.ts
+++ b/packages/web-components/src/components/content-item-row/defs.ts
@@ -12,12 +12,12 @@
  */
 export enum MEDIA_ALIGN {
   /**
-   * Content item horizontal media align left
+   * Content item row media align left
    */
   LEFT = 'left',
 
   /**
-   * Content item horizontal media align right
+   * Content item row media align right
    */
   RIGHT = 'right',
 }
@@ -27,12 +27,12 @@ export enum MEDIA_ALIGN {
  */
 export enum MEDIA_TYPE {
   /**
-   * Content item horizontal media type image
+   * Content item row media type image
    */
   IMAGE = 'image',
 
   /**
-   * Content item horizontal media type video
+   * Content item row media type video
    */
   VIDEO = 'video',
 }
diff --git a/packages/web-components/src/components/content-item-row/index.ts b/packages/web-components/src/components/content-item-row/index.ts
new file mode 100644
index 00000000000..9b88e3270fd
--- /dev/null
+++ b/packages/web-components/src/components/content-item-row/index.ts
@@ -0,0 +1,20 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2020, 2022
+ *
+ * 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 './content-item-row';
+import './content-item-row-copy';
+import './content-item-row-eyebrow';
+import './content-item-row-media';
+import './content-item-row-media-copy';
+import './content-item-row-media-video';
+import './content-item-row-thumbnail-copy';
+import './content-item-row-media-featured';
+import '../content-item/content-item-heading';
+import '../cta/index';
+import '../link-list/link-list';
diff --git a/packages/web-components/src/components/dotcom-shell/__stories__/data/content.react.tsx b/packages/web-components/src/components/dotcom-shell/__stories__/data/content.react.tsx
index 3d461d292f2..5ce0f70df6c 100644
--- a/packages/web-components/src/components/dotcom-shell/__stories__/data/content.react.tsx
+++ b/packages/web-components/src/components/dotcom-shell/__stories__/data/content.react.tsx
@@ -15,10 +15,10 @@ import C4DContentBlockSegmentedItem from '@carbon/ibmdotcom-web-components/es/co
 import C4DContentGroupHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-group/content-group-heading';
 import C4DContentItemCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-copy';
 import C4DTextCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/text-cta';
-import C4DContentItemHorizontal from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal';
-import C4DContentItemHorizontalEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-eyebrow';
+import C4DContentItemRow from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row';
+import C4DContentItemRowEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-eyebrow';
 import C4DContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading';
-import C4DContentItemHorizontalCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-copy';
+import C4DContentItemRowCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-copy';
 import C4DLinkList from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list';
 import C4DLinkListItemCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/link-list-item-cta';
 import C4DGlobalBanner from '@carbon/ibmdotcom-web-components/es/components-react/global-banner/global-banner';
@@ -146,16 +146,16 @@ export const contentBlockSegmentedItemsWithImage = (
 );
 
 export const contentItemHorizontal = (
-  <C4DContentItemHorizontal>
-    <C4DContentItemHorizontalEyebrow>
+  <C4DContentItemRow>
+    <C4DContentItemRowEyebrow>
       Lorem ipsum
-    </C4DContentItemHorizontalEyebrow>
+    </C4DContentItemRowEyebrow>
     <C4DContentItemHeading>Aliquam condimentum</C4DContentItemHeading>
-    <C4DContentItemHorizontalCopy>
+    <C4DContentItemRowCopy>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
       ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit
       sollicitudin.
-    </C4DContentItemHorizontalCopy>
+    </C4DContentItemRowCopy>
     <C4DLinkList slot="footer" type="vertical">
       <C4DLinkListItemCTA
         icon-placement="right"
@@ -170,7 +170,7 @@ export const contentItemHorizontal = (
         External link text
       </C4DLinkListItemCTA>
     </C4DLinkList>
-  </C4DContentItemHorizontal>
+  </C4DContentItemRow>
 );
 
 export const globalBanner = (srcImage) => (
diff --git a/packages/web-components/src/components/dotcom-shell/__stories__/data/content.ts b/packages/web-components/src/components/dotcom-shell/__stories__/data/content.ts
index b4fc322f069..01f11970203 100644
--- a/packages/web-components/src/components/dotcom-shell/__stories__/data/content.ts
+++ b/packages/web-components/src/components/dotcom-shell/__stories__/data/content.ts
@@ -16,7 +16,7 @@ import '../../../cta/index';
 import '../../../card-group/index';
 import '../../../content-block/index';
 import '../../../content-block-segmented/index';
-import '../../../content-item-horizontal/index';
+import '../../../content-item-row/index';
 import '../../../leadspace/index';
 import '../../../image/index';
 import '../../../leadspace-block/index';
@@ -99,15 +99,13 @@ export const contentBlockSegmentedItemsWithImage = html`
 `;
 
 export const contentItemHorizontal = html`
-  <c4d-content-item-horizontal>
-    <c4d-content-item-horizontal-eyebrow
-      >Lorem ipsum</c4d-content-item-horizontal-eyebrow
-    >
+  <c4d-content-item-row>
+    <c4d-content-item-row-eyebrow>Lorem ipsum</c4d-content-item-row-eyebrow>
     <c4d-content-item-heading>Aliquam condimentum</c4d-content-item-heading>
-    <c4d-content-item-horizontal-copy
+    <c4d-content-item-row-copy
       >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
       ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit
-      sollicitudin.</c4d-content-item-horizontal-copy
+      sollicitudin.</c4d-content-item-row-copy
     >
     <c4d-link-list slot="footer" type="vertical">
       <c4d-link-list-item-cta
@@ -123,7 +121,7 @@ export const contentItemHorizontal = html`
         External link text
       </c4d-link-list-item-cta>
     </c4d-link-list>
-  </c4d-content-item-horizontal>
+  </c4d-content-item-row>
 `;
 
 export const globalBanner = (srcImage) => html`
diff --git a/packages/web-components/src/components/scroll-animations/__stories__/scroll-animations.stories.ts b/packages/web-components/src/components/scroll-animations/__stories__/scroll-animations.stories.ts
index dd2b21960a3..e16dd9b4ba1 100644
--- a/packages/web-components/src/components/scroll-animations/__stories__/scroll-animations.stories.ts
+++ b/packages/web-components/src/components/scroll-animations/__stories__/scroll-animations.stories.ts
@@ -27,7 +27,7 @@ const selectorTargets = `c4d-content-block-heading,
    c4d-image,
    c4d-card-cta,
    c4d-callout-with-media,
-   c4d-content-item-horizontal,
+   c4d-content-item-row,
    c4d-logo-grid-item,
    .cds--card__CTA,
    c4d-card-group-item,
diff --git a/packages/web-components/src/components/tabs-extended-media/__stories__/README.stories.mdx b/packages/web-components/src/components/tabs-extended-media/__stories__/README.stories.mdx
index 4d692439ed2..2a695c8af88 100644
--- a/packages/web-components/src/components/tabs-extended-media/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/tabs-extended-media/__stories__/README.stories.mdx
@@ -33,16 +33,16 @@ import '@carbon/ibmdotcom-web-components/es/components/tabs-extended-media/index
 <cds-tabs-extended-media>
   <cds-content-section-heading>Section heading</cds-content-section-heading>
   <cds-tab label="First tab">
-    <cds-content-item-horizontal-media align="right">
+    <cds-content-item-row-media align="right">
       <cds-image
         slot="media"
         alt="Lorem ipsum"
         default-src="https://fpoimg.com/672x336?text=2:1&bg_color=ee5396&text_color=161616"></cds-image>
       <cds-content-item-heading>Aliquam condimentum</cds-content-item-heading>
-      <cds-content-item-horizontal-copy
+      <cds-content-item-row-copy
         >Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et
         ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at
-        elit sollicitudin.</cds-content-item-horizontal-copy
+        elit sollicitudin.</cds-content-item-row-copy
       >
       <cds-link-list slot="footer" type="vertical">
         <cds-link-list-item-cta
@@ -58,7 +58,7 @@ import '@carbon/ibmdotcom-web-components/es/components/tabs-extended-media/index
           Microservices and containers
         </cds-link-list-item-cta>
       </cds-link-list>
-    </cds-content-item-horizontal-media>
+    </cds-content-item-row-media>
   </cds-tab>
 </cds-tabs-extended-media>
 ```
diff --git a/packages/web-components/src/components/tabs-extended-media/__stories__/README.stories.react.mdx b/packages/web-components/src/components/tabs-extended-media/__stories__/README.stories.react.mdx
index 54de5f351bb..ce5e4f68203 100644
--- a/packages/web-components/src/components/tabs-extended-media/__stories__/README.stories.react.mdx
+++ b/packages/web-components/src/components/tabs-extended-media/__stories__/README.stories.react.mdx
@@ -29,17 +29,17 @@ function App() {
     <C4DTabsExtendedMedia>
       <C4DContentSectionHeading>Section heading</C4DContentSectionHeading>
       <C4DTab label="First tab">
-        <C4DContentItemHorizontalMedia align="left">
+        <C4DContentItemRowMedia align="left">
           <C4DImage
             slot="media"
             alt="Image alt text"
             default-src="https://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616"></C4DImage>
           <C4DContentItemHeading>Aliquam condimentum</C4DContentItemHeading>
-          <C4DContentItemHorizontalMediaCopy>
+          <C4DContentItemRowMediaCopy>
             Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et
             ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at
             elit sollicitudin.
-          </C4DContentItemHorizontalMediaCopy>
+          </C4DContentItemRowMediaCopy>
           <C4DLinkList slot="footer" type="vertical">
             <C4DLinkListItemCTA
               icon-placement="right"
@@ -54,20 +54,20 @@ function App() {
               Microservices and containers
             </C4DLinkListItemCTA>
           </C4DLinkList>
-        </C4DContentItemHorizontalMedia>
+        </C4DContentItemRowMedia>
       </C4DTab>
       <C4DTab label="Second tab">
-        <C4DContentItemHorizontalMedia align="left">
+        <C4DContentItemRowMedia align="left">
           <C4DImage
             slot="media"
             alt="Image alt text"
             default-src="https://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616"></C4DImage>
           <C4DContentItemHeading>Aliquam condimentum</C4DContentItemHeading>
-          <C4DContentItemHorizontalMediaCopy>
+          <C4DContentItemRowMediaCopy>
             Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et
             ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at
             elit sollicitudin.
-          </C4DContentItemHorizontalMediaCopy>
+          </C4DContentItemRowMediaCopy>
           <C4DLinkList slot="footer" type="vertical">
             <C4DLinkListItemCTA
               icon-placement="right"
@@ -82,20 +82,20 @@ function App() {
               Microservices and containers
             </C4DLinkListItemCTA>
           </C4DLinkList>
-        </C4DContentItemHorizontalMedia>
+        </C4DContentItemRowMedia>
       </C4DTab>
       <C4DTab label="Third tab">
-        <C4DContentItemHorizontalMedia align="left">
+        <C4DContentItemRowMedia align="left">
           <C4DImage
             slot="media"
             alt="Image alt text"
             default-src="https://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616"></C4DImage>
           <C4DContentItemHeading>Aliquam condimentum</C4DContentItemHeading>
-          <C4DContentItemHorizontalMediaCopy>
+          <C4DContentItemRowMediaCopy>
             Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et
             ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at
             elit sollicitudin.
-          </C4DContentItemHorizontalMediaCopy>
+          </C4DContentItemRowMediaCopy>
           <C4DLinkList slot="footer" type="vertical">
             <C4DLinkListItemCTA
               icon-placement="right"
@@ -110,20 +110,20 @@ function App() {
               Microservices and containers
             </C4DLinkListItemCTA>
           </C4DLinkList>
-        </C4DContentItemHorizontalMedia>
+        </C4DContentItemRowMedia>
       </C4DTab>
       <C4DTab label="Fourth tab">
-        <C4DContentItemHorizontalMedia align="left">
+        <C4DContentItemRowMedia align="left">
           <C4DImage
             slot="media"
             alt="Image alt text"
             default-src="https://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616"></C4DImage>
           <C4DContentItemHeading>Aliquam condimentum</C4DContentItemHeading>
-          <C4DContentItemHorizontalMediaCopy>
+          <C4DContentItemRowMediaCopy>
             Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et
             ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at
             elit sollicitudin.
-          </C4DContentItemHorizontalMediaCopy>
+          </C4DContentItemRowMediaCopy>
           <C4DLinkList slot="footer" type="vertical">
             <C4DLinkListItemCTA
               icon-placement="right"
@@ -138,7 +138,7 @@ function App() {
               Microservices and containers
             </C4DLinkListItemCTA>
           </C4DLinkList>
-        </C4DContentItemHorizontalMedia>
+        </C4DContentItemRowMedia>
       </C4DTab>
     </C4DTabsExtendedMedia>
   );
diff --git a/packages/web-components/src/components/tabs-extended-media/__stories__/tabs-extended-media.stories.react.tsx b/packages/web-components/src/components/tabs-extended-media/__stories__/tabs-extended-media.stories.react.tsx
index b535d447b8a..fc09e030880 100644
--- a/packages/web-components/src/components/tabs-extended-media/__stories__/tabs-extended-media.stories.react.tsx
+++ b/packages/web-components/src/components/tabs-extended-media/__stories__/tabs-extended-media.stories.react.tsx
@@ -19,13 +19,13 @@ import C4DTab from '@carbon/ibmdotcom-web-components/es/components-react/tabs-ex
 import C4DContentSectionHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-section/content-section-heading';
 /* eslint-disable max-len */
 // @ts-ignore
-import C4DContentItemHorizontalMedia from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-media';
+import C4DContentItemRowMedia from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-media';
 /* eslint-disable max-len */
 // @ts-ignore
-import C4DContentItemHorizontalMediaCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-media-copy';
+import C4DContentItemRowMediaCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-media-copy';
 /* eslint-disable max-len */
 // @ts-ignore
-import C4DContentItemHorizontalMediaVideo from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-media-video';
+import C4DContentItemRowMediaVideo from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-media-video';
 // @ts-ignore
 import C4DContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading';
 // @ts-ignore
@@ -36,7 +36,7 @@ import C4DLinkListItemCTA from '@carbon/ibmdotcom-web-components/es/components-r
 import C4DImage from '@carbon/ibmdotcom-web-components/es/components-react/image/image';
 
 import readme from './README.stories.react.mdx';
-import { MEDIA_ALIGN, MEDIA_TYPE } from '../../content-item-horizontal/defs';
+import { MEDIA_ALIGN, MEDIA_TYPE } from '../../content-item-row/defs';
 import imgLg16x9 from '../../../../../storybook-images/assets/720/fpo--16x9--720x405--001.jpg';
 import textNullable from '../../../../.storybook/knob-text-nullable';
 
@@ -58,7 +58,7 @@ export const Default = (args) => {
   for (let i = 1; i < 5; i++) {
     tabs.push(
       <C4DTab label={`Tab ${i}`}>
-        <C4DContentItemHorizontalMedia align={align}>
+        <C4DContentItemRowMedia align={align}>
           {type === MEDIA_TYPE.IMAGE ? (
             <C4DImage
               slot="media"
@@ -68,16 +68,16 @@ export const Default = (args) => {
             ``
           )}
           {type === MEDIA_TYPE.VIDEO ? (
-            <C4DContentItemHorizontalMediaVideo video-id="0_ibuqxqbe"></C4DContentItemHorizontalMediaVideo>
+            <C4DContentItemRowMediaVideo video-id="0_ibuqxqbe"></C4DContentItemRowMediaVideo>
           ) : (
             ``
           )}
           <C4DContentItemHeading>Tab heading {i}</C4DContentItemHeading>
-          <C4DContentItemHorizontalMediaCopy>
+          <C4DContentItemRowMediaCopy>
             Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et
             ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at
             elit sollicitudin.
-          </C4DContentItemHorizontalMediaCopy>
+          </C4DContentItemRowMediaCopy>
           <C4DLinkList slot="footer" type="vertical">
             <C4DLinkListItemCTA
               icon-placement="right"
@@ -92,7 +92,7 @@ export const Default = (args) => {
               Microservices and containers
             </C4DLinkListItemCTA>
           </C4DLinkList>
-        </C4DContentItemHorizontalMedia>
+        </C4DContentItemRowMedia>
       </C4DTab>
     );
   }
diff --git a/packages/web-components/src/components/tabs-extended-media/__stories__/tabs-extended-media.stories.ts b/packages/web-components/src/components/tabs-extended-media/__stories__/tabs-extended-media.stories.ts
index a7de13e8ca1..915d26251b8 100644
--- a/packages/web-components/src/components/tabs-extended-media/__stories__/tabs-extended-media.stories.ts
+++ b/packages/web-components/src/components/tabs-extended-media/__stories__/tabs-extended-media.stories.ts
@@ -12,9 +12,9 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import { boolean, select } from '@storybook/addon-knobs';
 import readme from './README.stories.mdx';
 import '../index';
-import '../../content-item-horizontal/index';
+import '../../content-item-row/index';
 import '../../image/index';
-import { MEDIA_ALIGN, MEDIA_TYPE } from '../../content-item-horizontal/defs';
+import { MEDIA_ALIGN, MEDIA_TYPE } from '../../content-item-row/defs';
 import imgLg16x9 from '../../../../../storybook-images/assets/720/fpo--16x9--720x405--001.jpg';
 import textNullable from '../../../../.storybook/knob-text-nullable';
 
@@ -36,7 +36,7 @@ export const Default = (args) => {
   for (let i = 1; i < 5; i++) {
     tabs.push(html`
       <c4d-tab label="Tab ${i}">
-        <c4d-content-item-horizontal-media align="${align}">
+        <c4d-content-item-row-media align="${align}">
           ${type === MEDIA_TYPE.IMAGE
             ? html`
                 <c4d-image
@@ -47,15 +47,15 @@ export const Default = (args) => {
             : ''}
           ${type === MEDIA_TYPE.VIDEO
             ? html`
-                <c4d-content-item-horizontal-media-video
-                  video-id="0_ibuqxqbe"></c4d-content-item-horizontal-media-video>
+                <c4d-content-item-row-media-video
+                  video-id="0_ibuqxqbe"></c4d-content-item-row-media-video>
               `
             : ''}
           <c4d-content-item-heading>Tab heading ${i}</c4d-content-item-heading>
-          <c4d-content-item-horizontal-media-copy
+          <c4d-content-item-row-media-copy
             >Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean
             et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus
-            at elit sollicitudin.</c4d-content-item-horizontal-media-copy
+            at elit sollicitudin.</c4d-content-item-row-media-copy
           >
           <c4d-link-list slot="footer" type="vertical">
             <c4d-link-list-item-cta
@@ -71,7 +71,7 @@ export const Default = (args) => {
               Microservices and containers
             </c4d-link-list-item-cta>
           </c4d-link-list>
-        </c4d-content-item-horizontal-media>
+        </c4d-content-item-row-media>
       </c4d-tab>
     `);
   }
diff --git a/packages/web-components/src/components/tabs-extended-media/index.ts b/packages/web-components/src/components/tabs-extended-media/index.ts
index 1d5f12276d3..9e86339bd81 100644
--- a/packages/web-components/src/components/tabs-extended-media/index.ts
+++ b/packages/web-components/src/components/tabs-extended-media/index.ts
@@ -9,5 +9,5 @@
 
 import './tabs-extended-media';
 import '../tabs-extended/tabs-extended';
-import '../content-item-horizontal/content-item-horizontal-media';
+import '../content-item-row/content-item-row-media';
 import '../content-section/content-section-heading';
diff --git a/packages/web-components/tests/cdn-build/app/canary.html b/packages/web-components/tests/cdn-build/app/canary.html
index f8dd4872ef5..2cf37cb43c4 100644
--- a/packages/web-components/tests/cdn-build/app/canary.html
+++ b/packages/web-components/tests/cdn-build/app/canary.html
@@ -271,7 +271,7 @@
       src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/content-item.min.js"></script>
     <script
       type="module"
-      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/content-item-horizontal.min.js"></script>
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/content-item-row.min.js"></script>
     <script
       type="module"
       src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/content-section.min.js"></script>
diff --git a/packages/web-components/tests/cdn-build/app/latest.html b/packages/web-components/tests/cdn-build/app/latest.html
index 08460332fc4..9c035684384 100644
--- a/packages/web-components/tests/cdn-build/app/latest.html
+++ b/packages/web-components/tests/cdn-build/app/latest.html
@@ -271,7 +271,7 @@
       src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/content-item.min.js"></script>
     <script
       type="module"
-      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/content-item-horizontal.min.js"></script>
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/content-item-row.min.js"></script>
     <script
       type="module"
       src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/content-section.min.js"></script>
diff --git a/packages/web-components/tests/cdn-build/app/next.html b/packages/web-components/tests/cdn-build/app/next.html
index a50d73d5150..d963db2fc5a 100644
--- a/packages/web-components/tests/cdn-build/app/next.html
+++ b/packages/web-components/tests/cdn-build/app/next.html
@@ -271,7 +271,7 @@
       src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/content-item.min.js"></script>
     <script
       type="module"
-      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/content-item-horizontal.min.js"></script>
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/content-item-row.min.js"></script>
     <script
       type="module"
       src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/content-section.min.js"></script>
diff --git a/packages/web-components/tests/cdn-build/app/version.html b/packages/web-components/tests/cdn-build/app/version.html
index 060c54d280f..84ad1544ec2 100644
--- a/packages/web-components/tests/cdn-build/app/version.html
+++ b/packages/web-components/tests/cdn-build/app/version.html
@@ -271,7 +271,7 @@
       src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/content-item.min.js"></script>
     <script
       type="module"
-      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/content-item-horizontal.min.js"></script>
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/content-item-row.min.js"></script>
     <script
       type="module"
       src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/content-section.min.js"></script>
diff --git a/packages/web-components/tests/e2e/cypress/integration/content-item-horizontal/content-item-horizontal.cdn.e2e.js b/packages/web-components/tests/e2e/cypress/integration/content-item-horizontal/content-item-horizontal.cdn.e2e.js
index 044e1ce2a44..1faf2c0b939 100644
--- a/packages/web-components/tests/e2e/cypress/integration/content-item-horizontal/content-item-horizontal.cdn.e2e.js
+++ b/packages/web-components/tests/e2e/cypress/integration/content-item-horizontal/content-item-horizontal.cdn.e2e.js
@@ -7,11 +7,11 @@
 
 'use strict';
 
-describe('cds-content-item-horizontal (cdn)', () => {
-  it('should load the default cds-content-item-horizontal example (cdn)', () => {
-    cy.visit('/content-item-horizontal/cdn.html');
+describe('cds-content-item-row (cdn)', () => {
+  it('should load the default cds-content-item-row example (cdn)', () => {
+    cy.visit('/content-item-row/cdn.html');
 
     // Take a snapshot for visual diffing
-    cy.percySnapshot('cds-content-item-horizontal | cdn | default');
+    cy.percySnapshot('cds-content-item-row | cdn | default');
   });
 });
diff --git a/packages/web-components/tests/e2e/cypress/integration/content-item-horizontal/content-item-horizontal.e2e.js b/packages/web-components/tests/e2e/cypress/integration/content-item-horizontal/content-item-horizontal.e2e.js
index c80229801d0..bfa472047a5 100644
--- a/packages/web-components/tests/e2e/cypress/integration/content-item-horizontal/content-item-horizontal.e2e.js
+++ b/packages/web-components/tests/e2e/cypress/integration/content-item-horizontal/content-item-horizontal.e2e.js
@@ -7,11 +7,11 @@
 
 'use strict';
 
-describe('cds-content-item-horizontal', () => {
-  it('should load the default cds-content-item-horizontal example', () => {
-    cy.visit('/content-item-horizontal');
+describe('cds-content-item-row', () => {
+  it('should load the default cds-content-item-row example', () => {
+    cy.visit('/content-item-row');
 
     // Take a snapshot for visual diffing
-    cy.percySnapshot('cds-content-item-horizontal | default');
+    cy.percySnapshot('cds-content-item-row | default');
   });
 });
diff --git a/thumbnails/content-item-horizontal.svg b/thumbnails/content-item-row.svg
similarity index 100%
rename from thumbnails/content-item-horizontal.svg
rename to thumbnails/content-item-row.svg