diff --git a/packages/carbon-web-components/docs/form-story.mdx b/packages/carbon-web-components/docs/form-story.mdx
index 8586730a246..a8e438f6cee 100644
--- a/packages/carbon-web-components/docs/form-story.mdx
+++ b/packages/carbon-web-components/docs/form-story.mdx
@@ -30,7 +30,7 @@ button.addEventListener('click', () => {
 ```
 
 <iframe
-  src="https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/form/basic?embed=1&file=src%2Findex.js&hideExplorer=1&hideNavigation=1&theme=light&terminalHeight=0&hidedevtools=1"
+  src="https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/packages/carbon-web-components/examples/codesandbox/form/basic?embed=1&file=src%2Findex.js&hideExplorer=1&hideNavigation=1&theme=light&terminalHeight=0&hidedevtools=1"
   style={{ width: '100%', height: '500px', border: 'solid rgba(0,0,0,0.1) 1px', boxShadow: 'rgba(0,0,0,0.1) 0 1px 3px 0' }}
   title="carbon-web-components-getting-started"
   sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
diff --git a/packages/carbon-web-components/docs/styling-story.mdx b/packages/carbon-web-components/docs/styling-story.mdx
index 395df4cbbc3..9bd1711e9b7 100644
--- a/packages/carbon-web-components/docs/styling-story.mdx
+++ b/packages/carbon-web-components/docs/styling-story.mdx
@@ -25,7 +25,7 @@ Changes to CSS Custom Properties of the Carbon theme are reflected in the color
 scheme of `@carbon/web-components` components:
 
 <iframe
-  src="https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/styling/theme-zoning?embed=1&file=src%2Findex.js&hideExplorer=1&hideNavigation=1&theme=light&terminalHeight=0&hidedevtools=1"
+  src="https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/packages/carbon-web-components/examples/codesandbox/styling/theme-zoning?embed=1&file=src%2Findex.js&hideExplorer=1&hideNavigation=1&theme=light&terminalHeight=0&hidedevtools=1"
   style={{
     width: '100%',
     height: '700px',
@@ -108,7 +108,7 @@ class MyDropdown extends CDSDropdown {
 ```
 
 <iframe
-  src="https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/styling/custom-style?embed=1&file=src%2Findex.js&hideExplorer=1&hideNavigation=1&theme=light&terminalHeight=0&hidedevtools=1"
+  src="https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/packages/carbon-web-components/examples/codesandbox/styling/custom-style?embed=1&file=src%2Findex.js&hideExplorer=1&hideNavigation=1&theme=light&terminalHeight=0&hidedevtools=1"
   style={{
     width: '100%',
     height: '500px',
diff --git a/packages/carbon-web-components/docs/welcome-story.mdx b/packages/carbon-web-components/docs/welcome-story.mdx
index 75f89b869ca..381cb33d3eb 100644
--- a/packages/carbon-web-components/docs/welcome-story.mdx
+++ b/packages/carbon-web-components/docs/welcome-story.mdx
@@ -46,10 +46,10 @@ yarn add @carbon/web-components
 
 ### Basic usage
 
-Our example at [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic) shows the most basic usage:
+Our example at [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/packages/carbon-web-components/examples/codesandbox/basic) shows the most basic usage:
 
 <iframe
-  src="https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic?embed=1&file=src%2Findex.js&hideExplorer=1&hideNavigation=1&theme=light&terminalHeight=0&hidedevtools=1"
+  src="https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/packages/carbon-web-components/examples/codesandbox/basic?embed=1&file=src%2Findex.js&hideExplorer=1&hideNavigation=1&theme=light&terminalHeight=0&hidedevtools=1"
   style={{ width: '100%', height: '500px', border: 'solid rgba(0,0,0,0.1) 1px', boxShadow: 'rgba(0,0,0,0.1) 0 1px 3px 0' }}
   title="carbon-web-components-getting-started"
   sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
diff --git a/packages/carbon-web-components/src/components/accordion/accordion-story.mdx b/packages/carbon-web-components/src/components/accordion/accordion-story.mdx
index bab2e07081d..3f47a284882 100644
--- a/packages/carbon-web-components/src/components/accordion/accordion-story.mdx
+++ b/packages/carbon-web-components/src/components/accordion/accordion-story.mdx
@@ -4,10 +4,10 @@ import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
 # Accordion
 
 > 💡 Check our
-> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/accordion)
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/packages/carbon-web-components/examples/codesandbox/basic/components/accordion)
 > example implementation.
 
-[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/accordion)
+[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/packages/carbon-web-components/examples/codesandbox/basic/components/accordion)
 
 The accordion component delivers large amounts of content in a small space
 through progressive disclosure. That is, the user gets key details about the
diff --git a/packages/carbon-web-components/src/components/breadcrumb/breadcrumb-story.mdx b/packages/carbon-web-components/src/components/breadcrumb/breadcrumb-story.mdx
index 04d657f65da..c3549fca95c 100644
--- a/packages/carbon-web-components/src/components/breadcrumb/breadcrumb-story.mdx
+++ b/packages/carbon-web-components/src/components/breadcrumb/breadcrumb-story.mdx
@@ -4,10 +4,10 @@ import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
 # Breadcrumb
 
 > 💡 Check our
-> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/breadcrumb)
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/packages/carbon-web-components/examples/codesandbox/basic/components/breadcrumb)
 > example implementation.
 
-[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/breadcrumb)
+[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/packages/carbon-web-components/examples/codesandbox/basic/components/breadcrumb)
 
 ## Getting started
 
diff --git a/packages/carbon-web-components/src/components/button/button-story.mdx b/packages/carbon-web-components/src/components/button/button-story.mdx
index ee690e0f93d..ced97e7d257 100644
--- a/packages/carbon-web-components/src/components/button/button-story.mdx
+++ b/packages/carbon-web-components/src/components/button/button-story.mdx
@@ -5,10 +5,10 @@ import Add16 from '@carbon/web-components/es/icons/add/16';
 # Button
 
 > 💡 Check our
-> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/button)
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/packages/carbon-web-components/examples/codesandbox/basic/components/button)
 > example implementation.
 
-[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/button)
+[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/packages/carbon-web-components/examples/codesandbox/basic/components/button)
 
 ## Overview
 
diff --git a/packages/carbon-web-components/src/components/checkbox/checkbox-story.mdx b/packages/carbon-web-components/src/components/checkbox/checkbox-story.mdx
index a6a4e487c73..ce79993f018 100644
--- a/packages/carbon-web-components/src/components/checkbox/checkbox-story.mdx
+++ b/packages/carbon-web-components/src/components/checkbox/checkbox-story.mdx
@@ -4,10 +4,10 @@ import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
 # Check box
 
 > 💡 Check our
-> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/checkbox)
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/packages/carbon-web-components/examples/codesandbox/basic/components/checkbox)
 > example implementation.
 
-[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/checkbox)
+[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/packages/carbon-web-components/examples/codesandbox/basic/components/checkbox)
 
 Check box in `carbon-web-components` represents a combination of a check box and
 its label.
diff --git a/packages/carbon-web-components/src/components/code-snippet/code-snippet-story.mdx b/packages/carbon-web-components/src/components/code-snippet/code-snippet-story.mdx
index fc6fa250f2a..1247586531d 100644
--- a/packages/carbon-web-components/src/components/code-snippet/code-snippet-story.mdx
+++ b/packages/carbon-web-components/src/components/code-snippet/code-snippet-story.mdx
@@ -4,10 +4,10 @@ import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
 # Code snippet
 
 > 💡 Check our
-> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/code-snippet)
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/packages/carbon-web-components/examples/codesandbox/basic/components/code-snippet)
 > example implementation.
 
-[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/code-snippet)
+[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/packages/carbon-web-components/examples/codesandbox/basic/components/code-snippet)
 
 Code snippets are small blocks of reusable code that can be inserted in a code
 file.
diff --git a/packages/carbon-web-components/src/components/combo-box/combo-box-story.mdx b/packages/carbon-web-components/src/components/combo-box/combo-box-story.mdx
index 604910fda4f..3776c67f958 100644
--- a/packages/carbon-web-components/src/components/combo-box/combo-box-story.mdx
+++ b/packages/carbon-web-components/src/components/combo-box/combo-box-story.mdx
@@ -4,10 +4,10 @@ import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
 # Combo box
 
 > 💡 Check our
-> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/combo-box)
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/packages/carbon-web-components/examples/codesandbox/basic/components/combo-box)
 > example implementation.
 
-[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/combo-box)
+[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/packages/carbon-web-components/examples/codesandbox/basic/components/combo-box)
 
 A combobox allows the user to make a selection from a predefined list of options
 and is typically used when there are a large amount of options to choose from.
diff --git a/packages/carbon-web-components/src/components/content-switcher/content-switcher-story.mdx b/packages/carbon-web-components/src/components/content-switcher/content-switcher-story.mdx
index 5fc64fc0d7b..a0ece21be66 100644
--- a/packages/carbon-web-components/src/components/content-switcher/content-switcher-story.mdx
+++ b/packages/carbon-web-components/src/components/content-switcher/content-switcher-story.mdx
@@ -4,10 +4,10 @@ import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
 # Content switcher
 
 > 💡 Check our
-> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/content-switcher)
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/packages/carbon-web-components/examples/codesandbox/basic/components/content-switcher)
 > example implementation.
 
-[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/content-switcher)
+[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/packages/carbon-web-components/examples/codesandbox/basic/components/content-switcher)
 
 Content switcher manipulates the content shown following an exclusive or
 “either/or” pattern. It is used to toggle between two or more content sections
diff --git a/packages/carbon-web-components/src/components/copy-button/copy-button-story.mdx b/packages/carbon-web-components/src/components/copy-button/copy-button-story.mdx
index b3f034ecf80..5983c9a2889 100644
--- a/packages/carbon-web-components/src/components/copy-button/copy-button-story.mdx
+++ b/packages/carbon-web-components/src/components/copy-button/copy-button-story.mdx
@@ -4,10 +4,10 @@ import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
 # Copy button
 
 > 💡 Check our
-> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/copy-button)
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/packages/carbon-web-components/examples/codesandbox/basic/components/copy-button)
 > example implementation.
 
-[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/copy-button)
+[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/packages/carbon-web-components/examples/codesandbox/basic/components/copy-button)
 
 Copy button provides the interface of copy button and its feedback tooltip. No
 actual copy is performed, but application can listen to `click` event of
diff --git a/packages/carbon-web-components/src/components/copy-button/copy-button.mdx b/packages/carbon-web-components/src/components/copy-button/copy-button.mdx
new file mode 100644
index 00000000000..418c11990d0
--- /dev/null
+++ b/packages/carbon-web-components/src/components/copy-button/copy-button.mdx
@@ -0,0 +1,43 @@
+import { ArgsTable, Description, Meta } from '@storybook/blocks';
+import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
+import * as CopyButtonStories from './copy-button.stories';
+
+<Meta of={CopyButtonStories} /> 
+
+# Copy button
+
+> 💡 Check our
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/packages/carbon-web-components/examples/codesandbox/basic/components/copy-button)
+> example implementation.
+
+[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/packages/carbon-web-components/examples/codesandbox/basic/components/copy-button)
+
+Copy button provides the interface of copy button and its feedback tooltip. No
+actual copy is performed, but application can listen to `click` event of
+`<cds-copy-button>` and interact with the clipboard.
+
+## Getting started
+
+Here's a quick example to get you started.
+
+### JS (via import)
+
+```javascript
+import '@carbon/web-components/es/components/copy-button/index.js';
+```
+
+<Description markdown={`${cdnJs({ components: ['copy-button'] })}`} />
+<Description markdown={`${cdnCss()}`} />
+
+### HTML
+
+```html
+<cds-copy-button feedback="Copied!" feedback-timeout="2000">
+  Copy to Clipboard
+</cds-copy-button>
+```
+
+## `<cds-copy-button>` attributes and properties
+
+<ArgsTable of="cds-copy-button" />
+
diff --git a/packages/carbon-web-components/src/components/data-table/stories/data-table-story.mdx b/packages/carbon-web-components/src/components/data-table/stories/data-table-story.mdx
index 47531571782..42e3ed4a574 100644
--- a/packages/carbon-web-components/src/components/data-table/stories/data-table-story.mdx
+++ b/packages/carbon-web-components/src/components/data-table/stories/data-table-story.mdx
@@ -4,10 +4,10 @@ import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
 # Data table
 
 > 💡 Check our
-> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/data-table)
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/packages/carbon-web-components/examples/codesandbox/basic/components/data-table)
 > example implementation.
 
-[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/data-table)
+[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/packages/carbon-web-components/examples/codesandbox/basic/components/data-table)
 
 Data table in `@carbon/web-components` focuses on primitives that constructs
 table UI, consisting of the following:
diff --git a/packages/carbon-web-components/src/components/date-picker/date-picker-story.mdx b/packages/carbon-web-components/src/components/date-picker/date-picker-story.mdx
index 1c0d254148f..7806eead98e 100644
--- a/packages/carbon-web-components/src/components/date-picker/date-picker-story.mdx
+++ b/packages/carbon-web-components/src/components/date-picker/date-picker-story.mdx
@@ -4,10 +4,10 @@ import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
 # Date picker
 
 > 💡 Check our
-> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/date-picker)
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/packages/carbon-web-components/examples/codesandbox/basic/components/date-picker)
 > example implementation.
 
-[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/date-picker)
+[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/packages/carbon-web-components/examples/codesandbox/basic/components/date-picker)
 
 Date and time pickers allow users to select a single or a range of dates and
 times.
diff --git a/packages/carbon-web-components/src/components/dropdown/dropdown-story.mdx b/packages/carbon-web-components/src/components/dropdown/dropdown-story.mdx
index fc028cd3791..cd21534e593 100644
--- a/packages/carbon-web-components/src/components/dropdown/dropdown-story.mdx
+++ b/packages/carbon-web-components/src/components/dropdown/dropdown-story.mdx
@@ -4,10 +4,10 @@ import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
 # Dropdown
 
 > 💡 Check our
-> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/dropdown)
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/packages/carbon-web-components/examples/codesandbox/basic/components/dropdown)
 > example implementation.
 
-[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/dropdown)
+[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/packages/carbon-web-components/examples/codesandbox/basic/components/dropdown)
 
 Dropdown presents a list of options that can be used to filter or sort existing
 content.
diff --git a/packages/carbon-web-components/src/components/file-uploader/file-uploader-story.mdx b/packages/carbon-web-components/src/components/file-uploader/file-uploader-story.mdx
index 4a982ad96c2..1ee870133cf 100644
--- a/packages/carbon-web-components/src/components/file-uploader/file-uploader-story.mdx
+++ b/packages/carbon-web-components/src/components/file-uploader/file-uploader-story.mdx
@@ -4,10 +4,10 @@ import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
 # File uploader
 
 > 💡 Check our
-> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/file-uploader)
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/packages/carbon-web-components/examples/codesandbox/basic/components/file-uploader)
 > example implementation.
 
-[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/file-uploader)
+[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/packages/carbon-web-components/examples/codesandbox/basic/components/file-uploader)
 
 File uploaders allow users to select one or more files to upload to a specific
 location.
diff --git a/packages/carbon-web-components/src/components/form-group/form-group-story.mdx b/packages/carbon-web-components/src/components/form-group/form-group-story.mdx
index 158b22bbd8f..148e3f9d902 100644
--- a/packages/carbon-web-components/src/components/form-group/form-group-story.mdx
+++ b/packages/carbon-web-components/src/components/form-group/form-group-story.mdx
@@ -4,10 +4,10 @@ import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
 # Form Group
 
 > 💡 Check our
-> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/form-group)
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/packages/carbon-web-components/examples/codesandbox/basic/components/form-group)
 > example implementation.
 
-[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/form-group)
+[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/packages/carbon-web-components/examples/codesandbox/basic/components/form-group)
 
 ## Getting started
 
diff --git a/packages/carbon-web-components/src/components/icon-button/icon-button-story.mdx b/packages/carbon-web-components/src/components/icon-button/icon-button-story.mdx
index ce433b524c7..43af4aa49e3 100644
--- a/packages/carbon-web-components/src/components/icon-button/icon-button-story.mdx
+++ b/packages/carbon-web-components/src/components/icon-button/icon-button-story.mdx
@@ -4,10 +4,10 @@ import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
 # Icon Button
 
 > 💡 Check our
-> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/icon-button)
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/packages/carbon-web-components/examples/codesandbox/basic/components/icon-button)
 > example implementation.
 
-[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/icon-button)
+[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/packages/carbon-web-components/examples/codesandbox/basic/components/icon-button)
 
 The `icon-button` component is useful when you have a button where the content
 is an icon. In this situation, it's important that the button itself is labeled
diff --git a/packages/carbon-web-components/src/components/inline-loading/inline-loading-story.mdx b/packages/carbon-web-components/src/components/inline-loading/inline-loading-story.mdx
index 6d5b18cc988..ba91423b849 100644
--- a/packages/carbon-web-components/src/components/inline-loading/inline-loading-story.mdx
+++ b/packages/carbon-web-components/src/components/inline-loading/inline-loading-story.mdx
@@ -4,10 +4,10 @@ import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
 # Inline loading
 
 > 💡 Check our
-> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/inline-loading)
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/packages/carbon-web-components/examples/codesandbox/basic/components/inline-loading)
 > example implementation.
 
-[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/inline-loading)
+[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/packages/carbon-web-components/examples/codesandbox/basic/components/inline-loading)
 
 Inline loading spinners are used when performing actions. They help notify
 user’s that their action is being processed. The waiting experience is a crucial
diff --git a/packages/carbon-web-components/src/components/layer/layer-story.mdx b/packages/carbon-web-components/src/components/layer/layer-story.mdx
index 96763e02c0c..0d09fa7c2cd 100644
--- a/packages/carbon-web-components/src/components/layer/layer-story.mdx
+++ b/packages/carbon-web-components/src/components/layer/layer-story.mdx
@@ -4,10 +4,10 @@ import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
 # Layer
 
 > 💡 Check our
-> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/layer)
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/packages/carbon-web-components/examples/codesandbox/basic/components/layer)
 > example implementation.
 
-[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/layer)
+[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/packages/carbon-web-components/examples/codesandbox/basic/components/layer)
 
 The `Layer` component is used to render components on different layers. Each
 layer has a specific set of token values associated with it. You can use these
diff --git a/packages/carbon-web-components/src/components/link/link-story.mdx b/packages/carbon-web-components/src/components/link/link-story.mdx
index fb27eaab2d2..6ea479f8b22 100644
--- a/packages/carbon-web-components/src/components/link/link-story.mdx
+++ b/packages/carbon-web-components/src/components/link/link-story.mdx
@@ -4,10 +4,10 @@ import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
 # Link
 
 > 💡 Check our
-> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/link)
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/packages/carbon-web-components/examples/codesandbox/basic/components/link)
 > example implementation.
 
-[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/link)
+[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/packages/carbon-web-components/examples/codesandbox/basic/components/link)
 
 Represents a link. Provided for convenience purpose, you can alternatively use
 `<a class="cds--link">` with Carbon style in place in light DOM.
diff --git a/packages/carbon-web-components/src/components/link/link.mdx b/packages/carbon-web-components/src/components/link/link.mdx
new file mode 100644
index 00000000000..0e71e1bdf6d
--- /dev/null
+++ b/packages/carbon-web-components/src/components/link/link.mdx
@@ -0,0 +1,57 @@
+import { ArgsTable, Description, Meta } from '@storybook/blocks';
+import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
+import * as LinkStories from './link.stories';
+
+<Meta of={LinkStories} /> 
+
+# Link
+
+> 💡 Check our
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/packages/carbon-web-components/examples/codesandbox/basic/components/link)
+> example implementation.
+
+[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/packages/carbon-web-components/examples/codesandbox/basic/components/link)
+
+Represents a link. Provided for convenience purpose, you can alternatively use
+`<a class="cds--link">` with Carbon style in place in light DOM.
+
+## Getting started
+
+Here's a quick example to get you started.
+
+### JS (via import)
+
+```javascript
+import '@carbon/web-components/es/components/list/index.js';
+```
+
+<Description markdown={`${cdnJs({ components: ['list'] })}`} />
+<Description markdown={`${cdnCss()}`} />
+
+### HTML
+
+```html
+<cds-link href="https://www.ibm.com"> Link </cds-link>
+```
+
+## Paired with icon
+
+Import the desired icon and incorporate with the link text:
+
+```javascript
+import Download16 from '@carbon/web-components/es/icons/download/16';
+
+function App() {
+  return html`<cds-link href="https://www.ibm.com">
+    Download ${Download16({ slot: 'icon' })}</cds-link
+  >`;
+}
+```
+
+## `<cds-link>` attributes and properties
+
+Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
+`<cds-link disabled>`) and `false` means not setting the attribute (e.g.
+`<cds-link>` without `disabled` attribute).
+
+<ArgsTable of="cds-link" />
\ No newline at end of file
diff --git a/packages/carbon-web-components/src/components/list/list-story.mdx b/packages/carbon-web-components/src/components/list/list-story.mdx
index 3cd288bfd54..09922b081f0 100644
--- a/packages/carbon-web-components/src/components/list/list-story.mdx
+++ b/packages/carbon-web-components/src/components/list/list-story.mdx
@@ -6,10 +6,10 @@ import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
 Represents a list.
 
 > 💡 Check our
-> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/list)
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/packages/carbon-web-components/examples/codesandbox/basic/components/list)
 > example implementation.
 
-[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/list)
+[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/packages/carbon-web-components/examples/codesandbox/basic/components/list)
 
 ## Getting started
 
diff --git a/packages/carbon-web-components/src/components/loading/loading-story.mdx b/packages/carbon-web-components/src/components/loading/loading-story.mdx
index 314864d1806..a04633152da 100644
--- a/packages/carbon-web-components/src/components/loading/loading-story.mdx
+++ b/packages/carbon-web-components/src/components/loading/loading-story.mdx
@@ -4,10 +4,10 @@ import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
 # Loading
 
 > 💡 Check our
-> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/loading)
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/packages/carbon-web-components/examples/codesandbox/basic/components/loading)
 > example implementation.
 
-[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/loading)
+[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/packages/carbon-web-components/examples/codesandbox/basic/components/loading)
 
 Loading spinners are used when retrieving data or performing slow computations,
 and help to notify users that loading is underway. The waiting experience is a
diff --git a/packages/carbon-web-components/src/components/modal/modal-story.mdx b/packages/carbon-web-components/src/components/modal/modal-story.mdx
index 0c9094d3f15..5ec7c56e90a 100644
--- a/packages/carbon-web-components/src/components/modal/modal-story.mdx
+++ b/packages/carbon-web-components/src/components/modal/modal-story.mdx
@@ -4,10 +4,10 @@ import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
 # Modal
 
 > 💡 Check our
-> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/modal)
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/packages/carbon-web-components/examples/codesandbox/basic/components/modal)
 > example implementation.
 
-[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/modal)
+[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/packages/carbon-web-components/examples/codesandbox/basic/components/modal)
 
 Modals interrupt user workflow by design. They are most effective when a task
 must be completed before a user can continue. While effective when used
diff --git a/packages/carbon-web-components/src/components/multi-select/multi-select-story.mdx b/packages/carbon-web-components/src/components/multi-select/multi-select-story.mdx
index 214cff12324..ae58a885d27 100644
--- a/packages/carbon-web-components/src/components/multi-select/multi-select-story.mdx
+++ b/packages/carbon-web-components/src/components/multi-select/multi-select-story.mdx
@@ -4,10 +4,10 @@ import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
 # Multi select
 
 > 💡 Check our
-> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/multi-select)
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/packages/carbon-web-components/examples/codesandbox/basic/components/multi-select)
 > example implementation.
 
-[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/multi-select)
+[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/packages/carbon-web-components/examples/codesandbox/basic/components/multi-select)
 
 Multi select is used when user needs to select multiple options from a dropdown.
 
diff --git a/packages/carbon-web-components/src/components/notification/notification-story.mdx b/packages/carbon-web-components/src/components/notification/notification-story.mdx
index 35bf339f5f4..6b25d9293fc 100644
--- a/packages/carbon-web-components/src/components/notification/notification-story.mdx
+++ b/packages/carbon-web-components/src/components/notification/notification-story.mdx
@@ -4,10 +4,10 @@ import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
 # Notification
 
 > 💡 Check our
-> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/notification)
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/packages/carbon-web-components/examples/codesandbox/basic/components/notification)
 > example implementation.
 
-[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/notification)
+[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/packages/carbon-web-components/examples/codesandbox/basic/components/notification)
 
 Notifications are messages that communicate information to the user.
 
diff --git a/packages/carbon-web-components/src/components/number-input/number-input-story.mdx b/packages/carbon-web-components/src/components/number-input/number-input-story.mdx
index 68d27e53c7a..3297488e3e4 100644
--- a/packages/carbon-web-components/src/components/number-input/number-input-story.mdx
+++ b/packages/carbon-web-components/src/components/number-input/number-input-story.mdx
@@ -4,10 +4,10 @@ import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
 # Number input
 
 > 💡 Check our
-> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/number-input)
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/packages/carbon-web-components/examples/codesandbox/basic/components/number-input)
 > example implementation.
 
-[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/number-input)
+[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/packages/carbon-web-components/examples/codesandbox/basic/components/number-input)
 
 Number inputs are similar to text inputs, but contain controls used to increase
 or decrease an incremental value.
diff --git a/packages/carbon-web-components/src/components/overflow-menu/overflow-menu-story.mdx b/packages/carbon-web-components/src/components/overflow-menu/overflow-menu-story.mdx
index 947cdadf347..84d0f1699a7 100644
--- a/packages/carbon-web-components/src/components/overflow-menu/overflow-menu-story.mdx
+++ b/packages/carbon-web-components/src/components/overflow-menu/overflow-menu-story.mdx
@@ -4,10 +4,10 @@ import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
 # Overflow menu
 
 > 💡 Check our
-> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/overflow-menu)
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/packages/carbon-web-components/examples/codesandbox/basic/components/overflow-menu)
 > example implementation.
 
-[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/overflow-menu)
+[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/packages/carbon-web-components/examples/codesandbox/basic/components/overflow-menu)
 
 Overflow menu is used when additional options are available to the user and
 there is a space constraint. Create overflow menu item components for each
diff --git a/packages/carbon-web-components/src/components/pagination/pagination-story.mdx b/packages/carbon-web-components/src/components/pagination/pagination-story.mdx
index c1b6db78a88..054da8e00d5 100644
--- a/packages/carbon-web-components/src/components/pagination/pagination-story.mdx
+++ b/packages/carbon-web-components/src/components/pagination/pagination-story.mdx
@@ -4,10 +4,10 @@ import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
 # Pagination
 
 > 💡 Check our
-> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/pagination)
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/packages/carbon-web-components/examples/codesandbox/basic/components/pagination)
 > example implementation.
 
-[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/pagination)
+[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/packages/carbon-web-components/examples/codesandbox/basic/components/pagination)
 
 The pagination component is used to switch through multiple pages of items, when
 only a maximum number of items can be displayed per page. Can be used in
@@ -29,14 +29,12 @@ import '@carbon/web-components/es/components/pagination/index.js';
 ### HTML
 
 ```html
-<cds-pagination page-size="10" total="100">
-  <cds-select>
+<cds-pagination page-size="10" total-items="100">
       <cds-select-item value="10">10</cds-select-item>
       <cds-select-item value="20">20</cds-select-item>
       <cds-select-item value="30">30</cds-select-item>
       <cds-select-item value="40">40</cds-select-item>
       <cds-select-item value="50">50</cds-select-item>
-  </cds-page-sizes-select>
 </cds-pagination>
 ```
 
diff --git a/packages/carbon-web-components/src/components/popover/popover-story.mdx b/packages/carbon-web-components/src/components/popover/popover-story.mdx
index e24c43e9dc3..506cb2876ca 100644
--- a/packages/carbon-web-components/src/components/popover/popover-story.mdx
+++ b/packages/carbon-web-components/src/components/popover/popover-story.mdx
@@ -4,10 +4,10 @@ import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
 # Popover
 
 > 💡 Check our
-> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/popover)
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/packages/carbon-web-components/examples/codesandbox/basic/components/popover)
 > example implementation.
 
-[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/popover)
+[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/packages/carbon-web-components/examples/codesandbox/basic/components/popover)
 
 Popover is a layer that pops up over all other elements on a page
 
diff --git a/packages/carbon-web-components/src/components/progress-bar/progress-bar-story.mdx b/packages/carbon-web-components/src/components/progress-bar/progress-bar-story.mdx
index 632b3ca519e..1a1df0495f0 100644
--- a/packages/carbon-web-components/src/components/progress-bar/progress-bar-story.mdx
+++ b/packages/carbon-web-components/src/components/progress-bar/progress-bar-story.mdx
@@ -4,10 +4,10 @@ import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
 # Progress bar
 
 > 💡 Check our
-> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/progress-bar)
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/packages/carbon-web-components/examples/codesandbox/basic/components/progress-bar)
 > example implementation.
 
-[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/progress-bar)
+[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/packages/carbon-web-components/examples/codesandbox/basic/components/progress-bar)
 
 A progress bar indicates that the user’s request has been received and the
 application is making progress toward completing the requested action. Progress
diff --git a/packages/carbon-web-components/src/components/progress-indicator/progress-indicator-story.mdx b/packages/carbon-web-components/src/components/progress-indicator/progress-indicator-story.mdx
index 7933f759aa1..352572a2b1a 100644
--- a/packages/carbon-web-components/src/components/progress-indicator/progress-indicator-story.mdx
+++ b/packages/carbon-web-components/src/components/progress-indicator/progress-indicator-story.mdx
@@ -4,10 +4,10 @@ import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
 # Progress indicator
 
 > 💡 Check our
-> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/progress-indicator)
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/packages/carbon-web-components/examples/codesandbox/basic/components/progress-indicator)
 > example implementation.
 
-[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/progress-indicator)
+[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/packages/carbon-web-components/examples/codesandbox/basic/components/progress-indicator)
 
 Progress indicator is a visual representation of a users progress through a set
 of steps. They guide the user through a number of steps in order to complete a
diff --git a/packages/carbon-web-components/src/components/radio-button/radio-button-story.mdx b/packages/carbon-web-components/src/components/radio-button/radio-button-story.mdx
index b22fffa5a79..0772971a292 100644
--- a/packages/carbon-web-components/src/components/radio-button/radio-button-story.mdx
+++ b/packages/carbon-web-components/src/components/radio-button/radio-button-story.mdx
@@ -4,10 +4,10 @@ import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
 # Radio button
 
 > 💡 Check our
-> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/radio-button)
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/packages/carbon-web-components/examples/codesandbox/basic/components/radio-button)
 > example implementation.
 
-[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/radio-button)
+[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/packages/carbon-web-components/examples/codesandbox/basic/components/radio-button)
 
 Radio buttons are used when a list of two or more options are mutually
 exclusive, meaning the user must select only one option.
diff --git a/packages/carbon-web-components/src/components/search/search-story.mdx b/packages/carbon-web-components/src/components/search/search-story.mdx
index 597fede009d..3dae2487869 100644
--- a/packages/carbon-web-components/src/components/search/search-story.mdx
+++ b/packages/carbon-web-components/src/components/search/search-story.mdx
@@ -4,10 +4,10 @@ import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
 # Search
 
 > 💡 Check our
-> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/search)
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/packages/carbon-web-components/examples/codesandbox/basic/components/search)
 > example implementation.
 
-[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/search)
+[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/packages/carbon-web-components/examples/codesandbox/basic/components/search)
 
 Search enables users to specify a word or a phrase to find particular relevant
 pieces of content without the use of navigation. Search can be used as the
diff --git a/packages/carbon-web-components/src/components/select/select-story.mdx b/packages/carbon-web-components/src/components/select/select-story.mdx
index 803781cff8f..1a0c16e5a28 100644
--- a/packages/carbon-web-components/src/components/select/select-story.mdx
+++ b/packages/carbon-web-components/src/components/select/select-story.mdx
@@ -4,10 +4,10 @@ import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
 # Select
 
 > 💡 Check our
-> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/select)
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/packages/carbon-web-components/examples/codesandbox/basic/components/select)
 > example implementation.
 
-[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/select)
+[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/packages/carbon-web-components/examples/codesandbox/basic/components/select)
 
 The select component allows users to choose one option from a list. It is used
 in forms for users to submit data.
diff --git a/packages/carbon-web-components/src/components/skeleton-placeholder/skeleton-placeholder-story.mdx b/packages/carbon-web-components/src/components/skeleton-placeholder/skeleton-placeholder-story.mdx
index fd20b71bd69..f260ceb4416 100644
--- a/packages/carbon-web-components/src/components/skeleton-placeholder/skeleton-placeholder-story.mdx
+++ b/packages/carbon-web-components/src/components/skeleton-placeholder/skeleton-placeholder-story.mdx
@@ -4,10 +4,10 @@ import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
 # Skeleton placeholder
 
 > 💡 Check our
-> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-placeholder)
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-placeholder)
 > example implementation.
 
-[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-placeholder)
+[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-placeholder)
 
 ## Getting started
 
diff --git a/packages/carbon-web-components/src/components/skeleton-text/skeleton-text-story.mdx b/packages/carbon-web-components/src/components/skeleton-text/skeleton-text-story.mdx
index 43f6a3eaa8a..8f0eb3c1429 100644
--- a/packages/carbon-web-components/src/components/skeleton-text/skeleton-text-story.mdx
+++ b/packages/carbon-web-components/src/components/skeleton-text/skeleton-text-story.mdx
@@ -4,10 +4,10 @@ import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
 # Skeleton text
 
 > 💡 Check our
-> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-text)
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-text)
 > example implementation.
 
-[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-text)
+[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-text)
 
 ## Getting started
 
diff --git a/packages/carbon-web-components/src/components/skip-to-content/skip-to-content-story.mdx b/packages/carbon-web-components/src/components/skip-to-content/skip-to-content-story.mdx
index 710ab8e873a..bd64411b0d7 100644
--- a/packages/carbon-web-components/src/components/skip-to-content/skip-to-content-story.mdx
+++ b/packages/carbon-web-components/src/components/skip-to-content/skip-to-content-story.mdx
@@ -3,10 +3,10 @@ import { Props } from '@storybook/addon-docs/blocks';
 # Skip to content
 
 > 💡 Check our
-> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/skip-to-content)
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/packages/carbon-web-components/examples/codesandbox/basic/components/skip-to-content)
 > example implementation.
 
-[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/skip-to-content)
+[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/packages/carbon-web-components/examples/codesandbox/basic/components/skip-to-content)
 
 The skip to content component works as an naivgation link that help users move
 around a page with keyboard.
diff --git a/packages/carbon-web-components/src/components/slider/slider-story.mdx b/packages/carbon-web-components/src/components/slider/slider-story.mdx
index bb4fcbba3a8..b24d4729353 100644
--- a/packages/carbon-web-components/src/components/slider/slider-story.mdx
+++ b/packages/carbon-web-components/src/components/slider/slider-story.mdx
@@ -4,10 +4,10 @@ import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
 # Slider
 
 > 💡 Check our
-> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/slider)
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/packages/carbon-web-components/examples/codesandbox/basic/components/slider)
 > example implementation.
 
-[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/slider)
+[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/packages/carbon-web-components/examples/codesandbox/basic/components/slider)
 
 Sliders provide a visual indication of adjustable content, where the user can
 move the handle along a horizontal track to increase or decrease the value.
diff --git a/packages/carbon-web-components/src/components/slug/slug-story.mdx b/packages/carbon-web-components/src/components/slug/slug-story.mdx
index 271473966a0..e674394eb58 100644
--- a/packages/carbon-web-components/src/components/slug/slug-story.mdx
+++ b/packages/carbon-web-components/src/components/slug/slug-story.mdx
@@ -4,10 +4,10 @@ import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
 # Slug
 
 > 💡 Check our
-> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/slug)
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/packages/carbon-web-components/examples/codesandbox/basic/components/slug)
 > example implementation.
 
-[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/slug)
+[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/packages/carbon-web-components/examples/codesandbox/basic/components/slug)
 
 The slug is a component alerting the user of generated AI content.
 
diff --git a/packages/carbon-web-components/src/components/stack/stack-story.mdx b/packages/carbon-web-components/src/components/stack/stack-story.mdx
index 86dfa58f69f..33dffc1f9eb 100644
--- a/packages/carbon-web-components/src/components/stack/stack-story.mdx
+++ b/packages/carbon-web-components/src/components/stack/stack-story.mdx
@@ -4,10 +4,10 @@ import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
 # Stack
 
 > 💡 Check our
-> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/stack)
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/packages/carbon-web-components/examples/codesandbox/basic/components/stack)
 > example implementation.
 
-[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/stack)
+[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/packages/carbon-web-components/examples/codesandbox/basic/components/stack)
 
 The Stack component is a useful layout utility in a component-based model. This
 allows components to not use margin and instead delegate the responsibility of
diff --git a/packages/carbon-web-components/src/components/structured-list/structured-list-story.mdx b/packages/carbon-web-components/src/components/structured-list/structured-list-story.mdx
index 25e3f49bede..ffc2075ece2 100644
--- a/packages/carbon-web-components/src/components/structured-list/structured-list-story.mdx
+++ b/packages/carbon-web-components/src/components/structured-list/structured-list-story.mdx
@@ -4,10 +4,10 @@ import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
 # Structured list
 
 > 💡 Check our
-> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/structured-list)
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/packages/carbon-web-components/examples/codesandbox/basic/components/structured-list)
 > example implementation.
 
-[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/structured-list)
+[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/packages/carbon-web-components/examples/codesandbox/basic/components/structured-list)
 
 Structured Lists group content that is similar or related, such as terms or
 definitions.
diff --git a/packages/carbon-web-components/src/components/tabs/tabs-story.mdx b/packages/carbon-web-components/src/components/tabs/tabs-story.mdx
index 2b304db54be..7145c6134ca 100644
--- a/packages/carbon-web-components/src/components/tabs/tabs-story.mdx
+++ b/packages/carbon-web-components/src/components/tabs/tabs-story.mdx
@@ -4,10 +4,10 @@ import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
 # Tabs
 
 > 💡 Check our
-> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/tabs)
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/packages/carbon-web-components/examples/codesandbox/basic/components/tabs)
 > example implementation.
 
-[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/tabs)
+[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/packages/carbon-web-components/examples/codesandbox/basic/components/tabs)
 
 Tabs are used to quickly navigate between views within the same context.
 
diff --git a/packages/carbon-web-components/src/components/tag/tag-story.mdx b/packages/carbon-web-components/src/components/tag/tag-story.mdx
index 489266c9859..4fdf810ec60 100644
--- a/packages/carbon-web-components/src/components/tag/tag-story.mdx
+++ b/packages/carbon-web-components/src/components/tag/tag-story.mdx
@@ -4,10 +4,10 @@ import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
 # Tag
 
 > 💡 Check our
-> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/tag)
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/packages/carbon-web-components/examples/codesandbox/basic/components/tag)
 > example implementation.
 
-[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/tag)
+[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/packages/carbon-web-components/examples/codesandbox/basic/components/tag)
 
 Tags are used for items that need to be labeled, categorized, or organized using
 keywords that describe them.
diff --git a/packages/carbon-web-components/src/components/text-input/text-input-story.mdx b/packages/carbon-web-components/src/components/text-input/text-input-story.mdx
index c5bdb662805..2f42fc25daf 100644
--- a/packages/carbon-web-components/src/components/text-input/text-input-story.mdx
+++ b/packages/carbon-web-components/src/components/text-input/text-input-story.mdx
@@ -4,10 +4,10 @@ import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
 # Text Input
 
 > 💡 Check our
-> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/input)
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/packages/carbon-web-components/examples/codesandbox/basic/components/input)
 > example implementation.
 
-[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/input)
+[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/packages/carbon-web-components/examples/codesandbox/basic/components/input)
 
 Text fields enable the user to interact with and input data. A single line field
 is used when the input anticipated by the user is a single line of text as
diff --git a/packages/carbon-web-components/src/components/textarea/textarea-story.mdx b/packages/carbon-web-components/src/components/textarea/textarea-story.mdx
index e8d230d9ea0..89eb7ad16ea 100644
--- a/packages/carbon-web-components/src/components/textarea/textarea-story.mdx
+++ b/packages/carbon-web-components/src/components/textarea/textarea-story.mdx
@@ -4,10 +4,10 @@ import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
 # Textarea
 
 > 💡 Check our
-> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/textarea)
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/packages/carbon-web-components/examples/codesandbox/basic/components/textarea)
 > example implementation.
 
-[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/textarea)
+[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/packages/carbon-web-components/examples/codesandbox/basic/components/textarea)
 
 Text inputs enable the user to interact with and input content and data. This
 component can be used for long and short form entries.
diff --git a/packages/carbon-web-components/src/components/tile/tile-story.mdx b/packages/carbon-web-components/src/components/tile/tile-story.mdx
index df8063794a9..f76c07b6387 100644
--- a/packages/carbon-web-components/src/components/tile/tile-story.mdx
+++ b/packages/carbon-web-components/src/components/tile/tile-story.mdx
@@ -4,10 +4,10 @@ import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
 # Tile
 
 > 💡 Check our
-> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/tile)
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/packages/carbon-web-components/examples/codesandbox/basic/components/tile)
 > example implementation.
 
-[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/tile)
+[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/packages/carbon-web-components/examples/codesandbox/basic/components/tile)
 
 Tiles are a highly flexible component for displaying a wide variety of content,
 including informational, getting started, how-to, next steps, and more.
diff --git a/packages/carbon-web-components/src/components/toggle-tip/toggletip-story.mdx b/packages/carbon-web-components/src/components/toggle-tip/toggletip-story.mdx
index 9803ed7a39e..b25a9df76d7 100644
--- a/packages/carbon-web-components/src/components/toggle-tip/toggletip-story.mdx
+++ b/packages/carbon-web-components/src/components/toggle-tip/toggletip-story.mdx
@@ -4,10 +4,10 @@ import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
 # Tooltip
 
 > 💡 Check our
-> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/tooltip)
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/packages/carbon-web-components/examples/codesandbox/basic/components/tooltip)
 > example implementation.
 
-[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/tooltip)
+[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/packages/carbon-web-components/examples/codesandbox/basic/components/tooltip)
 
 Tooltips provide additional information upon hover or focus. The information
 should be contextual, useful, and nonessential information. Keep tooltips short.
diff --git a/packages/carbon-web-components/src/components/toggle/toggle-story.mdx b/packages/carbon-web-components/src/components/toggle/toggle-story.mdx
index 30d45b6ed81..df54046ca85 100644
--- a/packages/carbon-web-components/src/components/toggle/toggle-story.mdx
+++ b/packages/carbon-web-components/src/components/toggle/toggle-story.mdx
@@ -4,10 +4,10 @@ import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
 # Toggle
 
 > 💡 Check our
-> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/toggle)
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/packages/carbon-web-components/examples/codesandbox/basic/components/toggle)
 > example implementation.
 
-[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/toggle)
+[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/packages/carbon-web-components/examples/codesandbox/basic/components/toggle)
 
 Toggle is a control that is used to quickly switch between two possible states.
 Toggles are only used for these binary actions that occur immediately after the
diff --git a/packages/carbon-web-components/src/components/tooltip/tooltip-story.mdx b/packages/carbon-web-components/src/components/tooltip/tooltip-story.mdx
index 6803d261f39..5171d61b8a3 100644
--- a/packages/carbon-web-components/src/components/tooltip/tooltip-story.mdx
+++ b/packages/carbon-web-components/src/components/tooltip/tooltip-story.mdx
@@ -4,10 +4,10 @@ import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
 # Tooltip
 
 > 💡 Check our
-> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/tooltip)
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/packages/carbon-web-components/examples/codesandbox/basic/components/tooltip)
 > example implementation.
 
-[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/tooltip)
+[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/packages/carbon-web-components/examples/codesandbox/basic/components/tooltip)
 
 You can use the Tooltip component as a wrapper to display a popup for an
 interactive element that you provide. If you are trying to place interactive
diff --git a/packages/carbon-web-components/src/components/ui-shell/ui-shell-story.mdx b/packages/carbon-web-components/src/components/ui-shell/ui-shell-story.mdx
index 9a6de32251a..2d75ecb3a34 100644
--- a/packages/carbon-web-components/src/components/ui-shell/ui-shell-story.mdx
+++ b/packages/carbon-web-components/src/components/ui-shell/ui-shell-story.mdx
@@ -4,10 +4,10 @@ import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
 # UI Shell
 
 > 💡 Check our
-> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/ui-shell)
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/packages/carbon-web-components/examples/codesandbox/basic/components/ui-shell)
 > example implementation.
 
-[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/ui-shell)
+[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/packages/carbon-web-components/examples/codesandbox/basic/components/ui-shell)
 
 UI Shell in Carbon Design System consists of several component groups.
 
diff --git a/packages/web-components/examples/codesandbox/components-react/background-media/sandbox.config.json b/packages/web-components/examples/codesandbox/components-react/background-media/sandbox.config.json
deleted file mode 100644
index 7ba0865f11c..00000000000
--- a/packages/web-components/examples/codesandbox/components-react/background-media/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components-react/button-group/sandbox.config.json b/packages/web-components/examples/codesandbox/components-react/button-group/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components-react/button-group/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components-react/button/sandbox.config.json b/packages/web-components/examples/codesandbox/components-react/button/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components-react/button/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components-react/callout-quote/sandbox.config.json b/packages/web-components/examples/codesandbox/components-react/callout-quote/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components-react/callout-quote/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components-react/callout-with-media/sandbox.config.json b/packages/web-components/examples/codesandbox/components-react/callout-with-media/sandbox.config.json
deleted file mode 100644
index 7ba0865f11c..00000000000
--- a/packages/web-components/examples/codesandbox/components-react/callout-with-media/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components-react/card-group/sandbox.config.json b/packages/web-components/examples/codesandbox/components-react/card-group/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components-react/card-group/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components-react/card-in-card/sandbox.config.json b/packages/web-components/examples/codesandbox/components-react/card-in-card/sandbox.config.json
deleted file mode 100644
index 7ba0865f11c..00000000000
--- a/packages/web-components/examples/codesandbox/components-react/card-in-card/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components-react/card-link/sandbox.config.json b/packages/web-components/examples/codesandbox/components-react/card-link/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components-react/card-link/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components-react/card-section-offset/sandbox.config.json b/packages/web-components/examples/codesandbox/components-react/card-section-offset/sandbox.config.json
deleted file mode 100644
index 7ba0865f11c..00000000000
--- a/packages/web-components/examples/codesandbox/components-react/card-section-offset/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components-react/card-section-simple/sandbox.config.json b/packages/web-components/examples/codesandbox/components-react/card-section-simple/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components-react/card-section-simple/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components-react/card/sandbox.config.json b/packages/web-components/examples/codesandbox/components-react/card/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components-react/card/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components-react/carousel/sandbox.config.json b/packages/web-components/examples/codesandbox/components-react/carousel/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components-react/carousel/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components-react/content-block-cards/sandbox.config.json b/packages/web-components/examples/codesandbox/components-react/content-block-cards/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components-react/content-block-cards/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components-react/content-block-horizontal/sandbox.config.json b/packages/web-components/examples/codesandbox/components-react/content-block-horizontal/sandbox.config.json
deleted file mode 100644
index 7ba0865f11c..00000000000
--- a/packages/web-components/examples/codesandbox/components-react/content-block-horizontal/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components-react/content-block-media/sandbox.config.json b/packages/web-components/examples/codesandbox/components-react/content-block-media/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components-react/content-block-media/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components-react/content-block-mixed/sandbox.config.json b/packages/web-components/examples/codesandbox/components-react/content-block-mixed/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components-react/content-block-mixed/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components-react/content-block-segmented/sandbox.config.json b/packages/web-components/examples/codesandbox/components-react/content-block-segmented/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components-react/content-block-segmented/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components-react/content-block/sandbox.config.json b/packages/web-components/examples/codesandbox/components-react/content-block/sandbox.config.json
deleted file mode 100644
index 7ba0865f11c..00000000000
--- a/packages/web-components/examples/codesandbox/components-react/content-block/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components-react/content-group-cards/sandbox.config.json b/packages/web-components/examples/codesandbox/components-react/content-group-cards/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components-react/content-group-cards/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components-react/content-group-pictograms/sandbox.config.json b/packages/web-components/examples/codesandbox/components-react/content-group-pictograms/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components-react/content-group-pictograms/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components-react/content-group-simple/sandbox.config.json b/packages/web-components/examples/codesandbox/components-react/content-group-simple/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components-react/content-group-simple/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components-react/content-group/sandbox.config.json b/packages/web-components/examples/codesandbox/components-react/content-group/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components-react/content-group/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components-react/content-item-row/sandbox.config.json b/packages/web-components/examples/codesandbox/components-react/content-item-row/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components-react/content-item-row/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components-react/content-item/sandbox.config.json b/packages/web-components/examples/codesandbox/components-react/content-item/sandbox.config.json
deleted file mode 100644
index 7ba0865f11c..00000000000
--- a/packages/web-components/examples/codesandbox/components-react/content-item/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components-react/content-section/sandbox.config.json b/packages/web-components/examples/codesandbox/components-react/content-section/sandbox.config.json
deleted file mode 100644
index 7ba0865f11c..00000000000
--- a/packages/web-components/examples/codesandbox/components-react/content-section/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components-react/cta-block/sandbox.config.json b/packages/web-components/examples/codesandbox/components-react/cta-block/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components-react/cta-block/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components-react/cta-button/sandbox.config.json b/packages/web-components/examples/codesandbox/components-react/cta-button/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components-react/cta-button/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components-react/cta-card-link/sandbox.config.json b/packages/web-components/examples/codesandbox/components-react/cta-card-link/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components-react/cta-card-link/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components-react/cta-card/sandbox.config.json b/packages/web-components/examples/codesandbox/components-react/cta-card/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components-react/cta-card/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components-react/cta-feature/sandbox.config.json b/packages/web-components/examples/codesandbox/components-react/cta-feature/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components-react/cta-feature/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components-react/cta-section/sandbox.config.json b/packages/web-components/examples/codesandbox/components-react/cta-section/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components-react/cta-section/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components-react/cta-text/sandbox.config.json b/packages/web-components/examples/codesandbox/components-react/cta-text/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components-react/cta-text/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components-react/dotcom-shell/sandbox.config.json b/packages/web-components/examples/codesandbox/components-react/dotcom-shell/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components-react/dotcom-shell/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components-react/expressive-modal/sandbox.config.json b/packages/web-components/examples/codesandbox/components-react/expressive-modal/sandbox.config.json
deleted file mode 100644
index 7ba0865f11c..00000000000
--- a/packages/web-components/examples/codesandbox/components-react/expressive-modal/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components-react/feature-card/sandbox.config.json b/packages/web-components/examples/codesandbox/components-react/feature-card/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components-react/feature-card/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components-react/feature-section/sandbox.config.json b/packages/web-components/examples/codesandbox/components-react/feature-section/sandbox.config.json
deleted file mode 100644
index 7ba0865f11c..00000000000
--- a/packages/web-components/examples/codesandbox/components-react/feature-section/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components-react/filter-panel/sandbox.config.json b/packages/web-components/examples/codesandbox/components-react/filter-panel/sandbox.config.json
deleted file mode 100644
index 7ba0865f11c..00000000000
--- a/packages/web-components/examples/codesandbox/components-react/filter-panel/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components-react/footer/sandbox.config.json b/packages/web-components/examples/codesandbox/components-react/footer/sandbox.config.json
deleted file mode 100644
index 7ba0865f11c..00000000000
--- a/packages/web-components/examples/codesandbox/components-react/footer/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components-react/global-banner/sandbox.config.json b/packages/web-components/examples/codesandbox/components-react/global-banner/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components-react/global-banner/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components-react/horizontal-rule/sandbox.config.json b/packages/web-components/examples/codesandbox/components-react/horizontal-rule/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components-react/horizontal-rule/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components-react/image/sandbox.config.json b/packages/web-components/examples/codesandbox/components-react/image/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components-react/image/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components-react/in-page-banner/sandbox.config.json b/packages/web-components/examples/codesandbox/components-react/in-page-banner/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components-react/in-page-banner/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components-react/leadspace-block/sandbox.config.json b/packages/web-components/examples/codesandbox/components-react/leadspace-block/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components-react/leadspace-block/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components-react/leadspace-with-search/sandbox.config.json b/packages/web-components/examples/codesandbox/components-react/leadspace-with-search/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components-react/leadspace-with-search/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components-react/leadspace/sandbox.config.json b/packages/web-components/examples/codesandbox/components-react/leadspace/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components-react/leadspace/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components-react/leaving-ibm/sandbox.config.json b/packages/web-components/examples/codesandbox/components-react/leaving-ibm/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components-react/leaving-ibm/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components-react/lightbox-media-viewer/sandbox.config.json b/packages/web-components/examples/codesandbox/components-react/lightbox-media-viewer/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components-react/lightbox-media-viewer/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components-react/link-list-section/sandbox.config.json b/packages/web-components/examples/codesandbox/components-react/link-list-section/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components-react/link-list-section/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components-react/link-list/sandbox.config.json b/packages/web-components/examples/codesandbox/components-react/link-list/sandbox.config.json
deleted file mode 100644
index 7ba0865f11c..00000000000
--- a/packages/web-components/examples/codesandbox/components-react/link-list/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components-react/locale-modal/sandbox.config.json b/packages/web-components/examples/codesandbox/components-react/locale-modal/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components-react/locale-modal/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components-react/logo-grid/sandbox.config.json b/packages/web-components/examples/codesandbox/components-react/logo-grid/sandbox.config.json
deleted file mode 100644
index 7ba0865f11c..00000000000
--- a/packages/web-components/examples/codesandbox/components-react/logo-grid/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components-react/masthead-l1/sandbox.config.json b/packages/web-components/examples/codesandbox/components-react/masthead-l1/sandbox.config.json
deleted file mode 100644
index 7ba0865f11c..00000000000
--- a/packages/web-components/examples/codesandbox/components-react/masthead-l1/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components-react/masthead/sandbox.config.json b/packages/web-components/examples/codesandbox/components-react/masthead/sandbox.config.json
deleted file mode 100644
index 7ba0865f11c..00000000000
--- a/packages/web-components/examples/codesandbox/components-react/masthead/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components-react/quote/sandbox.config.json b/packages/web-components/examples/codesandbox/components-react/quote/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components-react/quote/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components-react/search-with-typeahead/sandbox.config.json b/packages/web-components/examples/codesandbox/components-react/search-with-typeahead/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components-react/search-with-typeahead/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components-react/structured-list/sandbox.config.json b/packages/web-components/examples/codesandbox/components-react/structured-list/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components-react/structured-list/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components-react/table-of-contents/sandbox.config.json b/packages/web-components/examples/codesandbox/components-react/table-of-contents/sandbox.config.json
deleted file mode 100644
index 7ba0865f11c..00000000000
--- a/packages/web-components/examples/codesandbox/components-react/table-of-contents/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components-react/tabs-extended-media/sandbox.config.json b/packages/web-components/examples/codesandbox/components-react/tabs-extended-media/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components-react/tabs-extended-media/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components-react/tabs-extended/sandbox.config.json b/packages/web-components/examples/codesandbox/components-react/tabs-extended/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components-react/tabs-extended/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components-react/video-player/sandbox.config.json b/packages/web-components/examples/codesandbox/components-react/video-player/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components-react/video-player/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components/background-media/.babelrc b/packages/web-components/examples/codesandbox/components/background-media/.babelrc
deleted file mode 100644
index 74450eed94b..00000000000
--- a/packages/web-components/examples/codesandbox/components/background-media/.babelrc
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "presets": [
-    [
-      "@babel/preset-env",
-      {
-        "modules": false,
-        "targets": [
-          "last 1 version",
-          "Firefox ESR",
-          "not opera > 0",
-          "not op_mini > 0",
-          "not op_mob > 0",
-          "not android > 0",
-          "not edge > 0",
-          "not ie > 0",
-          "not ie_mob > 0"
-        ]
-      }
-    ]
-  ],
-  "plugins": [["@babel/plugin-transform-runtime", { "version": "7.3.0" }]]
-}
diff --git a/packages/web-components/examples/codesandbox/components/background-media/sandbox.config.json b/packages/web-components/examples/codesandbox/components/background-media/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components/background-media/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components/button-group/.babelrc b/packages/web-components/examples/codesandbox/components/button-group/.babelrc
deleted file mode 100644
index 74450eed94b..00000000000
--- a/packages/web-components/examples/codesandbox/components/button-group/.babelrc
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "presets": [
-    [
-      "@babel/preset-env",
-      {
-        "modules": false,
-        "targets": [
-          "last 1 version",
-          "Firefox ESR",
-          "not opera > 0",
-          "not op_mini > 0",
-          "not op_mob > 0",
-          "not android > 0",
-          "not edge > 0",
-          "not ie > 0",
-          "not ie_mob > 0"
-        ]
-      }
-    ]
-  ],
-  "plugins": [["@babel/plugin-transform-runtime", { "version": "7.3.0" }]]
-}
diff --git a/packages/web-components/examples/codesandbox/components/button-group/sandbox.config.json b/packages/web-components/examples/codesandbox/components/button-group/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components/button-group/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components/button/.babelrc b/packages/web-components/examples/codesandbox/components/button/.babelrc
deleted file mode 100644
index 74450eed94b..00000000000
--- a/packages/web-components/examples/codesandbox/components/button/.babelrc
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "presets": [
-    [
-      "@babel/preset-env",
-      {
-        "modules": false,
-        "targets": [
-          "last 1 version",
-          "Firefox ESR",
-          "not opera > 0",
-          "not op_mini > 0",
-          "not op_mob > 0",
-          "not android > 0",
-          "not edge > 0",
-          "not ie > 0",
-          "not ie_mob > 0"
-        ]
-      }
-    ]
-  ],
-  "plugins": [["@babel/plugin-transform-runtime", { "version": "7.3.0" }]]
-}
diff --git a/packages/web-components/examples/codesandbox/components/button/sandbox.config.json b/packages/web-components/examples/codesandbox/components/button/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components/button/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components/callout-quote/.babelrc b/packages/web-components/examples/codesandbox/components/callout-quote/.babelrc
deleted file mode 100644
index 74450eed94b..00000000000
--- a/packages/web-components/examples/codesandbox/components/callout-quote/.babelrc
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "presets": [
-    [
-      "@babel/preset-env",
-      {
-        "modules": false,
-        "targets": [
-          "last 1 version",
-          "Firefox ESR",
-          "not opera > 0",
-          "not op_mini > 0",
-          "not op_mob > 0",
-          "not android > 0",
-          "not edge > 0",
-          "not ie > 0",
-          "not ie_mob > 0"
-        ]
-      }
-    ]
-  ],
-  "plugins": [["@babel/plugin-transform-runtime", { "version": "7.3.0" }]]
-}
diff --git a/packages/web-components/examples/codesandbox/components/callout-quote/sandbox.config.json b/packages/web-components/examples/codesandbox/components/callout-quote/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components/callout-quote/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components/callout-with-media/.babelrc b/packages/web-components/examples/codesandbox/components/callout-with-media/.babelrc
deleted file mode 100644
index 74450eed94b..00000000000
--- a/packages/web-components/examples/codesandbox/components/callout-with-media/.babelrc
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "presets": [
-    [
-      "@babel/preset-env",
-      {
-        "modules": false,
-        "targets": [
-          "last 1 version",
-          "Firefox ESR",
-          "not opera > 0",
-          "not op_mini > 0",
-          "not op_mob > 0",
-          "not android > 0",
-          "not edge > 0",
-          "not ie > 0",
-          "not ie_mob > 0"
-        ]
-      }
-    ]
-  ],
-  "plugins": [["@babel/plugin-transform-runtime", { "version": "7.3.0" }]]
-}
diff --git a/packages/web-components/examples/codesandbox/components/callout-with-media/sandbox.config.json b/packages/web-components/examples/codesandbox/components/callout-with-media/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components/callout-with-media/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components/card-group/.babelrc b/packages/web-components/examples/codesandbox/components/card-group/.babelrc
deleted file mode 100644
index 74450eed94b..00000000000
--- a/packages/web-components/examples/codesandbox/components/card-group/.babelrc
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "presets": [
-    [
-      "@babel/preset-env",
-      {
-        "modules": false,
-        "targets": [
-          "last 1 version",
-          "Firefox ESR",
-          "not opera > 0",
-          "not op_mini > 0",
-          "not op_mob > 0",
-          "not android > 0",
-          "not edge > 0",
-          "not ie > 0",
-          "not ie_mob > 0"
-        ]
-      }
-    ]
-  ],
-  "plugins": [["@babel/plugin-transform-runtime", { "version": "7.3.0" }]]
-}
diff --git a/packages/web-components/examples/codesandbox/components/card-group/sandbox.config.json b/packages/web-components/examples/codesandbox/components/card-group/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components/card-group/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components/card-in-card/.babelrc b/packages/web-components/examples/codesandbox/components/card-in-card/.babelrc
deleted file mode 100644
index 74450eed94b..00000000000
--- a/packages/web-components/examples/codesandbox/components/card-in-card/.babelrc
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "presets": [
-    [
-      "@babel/preset-env",
-      {
-        "modules": false,
-        "targets": [
-          "last 1 version",
-          "Firefox ESR",
-          "not opera > 0",
-          "not op_mini > 0",
-          "not op_mob > 0",
-          "not android > 0",
-          "not edge > 0",
-          "not ie > 0",
-          "not ie_mob > 0"
-        ]
-      }
-    ]
-  ],
-  "plugins": [["@babel/plugin-transform-runtime", { "version": "7.3.0" }]]
-}
diff --git a/packages/web-components/examples/codesandbox/components/card-in-card/sandbox.config.json b/packages/web-components/examples/codesandbox/components/card-in-card/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components/card-in-card/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components/card-link/.babelrc b/packages/web-components/examples/codesandbox/components/card-link/.babelrc
deleted file mode 100644
index 74450eed94b..00000000000
--- a/packages/web-components/examples/codesandbox/components/card-link/.babelrc
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "presets": [
-    [
-      "@babel/preset-env",
-      {
-        "modules": false,
-        "targets": [
-          "last 1 version",
-          "Firefox ESR",
-          "not opera > 0",
-          "not op_mini > 0",
-          "not op_mob > 0",
-          "not android > 0",
-          "not edge > 0",
-          "not ie > 0",
-          "not ie_mob > 0"
-        ]
-      }
-    ]
-  ],
-  "plugins": [["@babel/plugin-transform-runtime", { "version": "7.3.0" }]]
-}
diff --git a/packages/web-components/examples/codesandbox/components/card-link/sandbox.config.json b/packages/web-components/examples/codesandbox/components/card-link/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components/card-link/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components/card-section-carousel/.babelrc b/packages/web-components/examples/codesandbox/components/card-section-carousel/.babelrc
deleted file mode 100644
index 74450eed94b..00000000000
--- a/packages/web-components/examples/codesandbox/components/card-section-carousel/.babelrc
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "presets": [
-    [
-      "@babel/preset-env",
-      {
-        "modules": false,
-        "targets": [
-          "last 1 version",
-          "Firefox ESR",
-          "not opera > 0",
-          "not op_mini > 0",
-          "not op_mob > 0",
-          "not android > 0",
-          "not edge > 0",
-          "not ie > 0",
-          "not ie_mob > 0"
-        ]
-      }
-    ]
-  ],
-  "plugins": [["@babel/plugin-transform-runtime", { "version": "7.3.0" }]]
-}
diff --git a/packages/web-components/examples/codesandbox/components/card-section-carousel/sandbox.config.json b/packages/web-components/examples/codesandbox/components/card-section-carousel/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components/card-section-carousel/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components/card-section-offset/.babelrc b/packages/web-components/examples/codesandbox/components/card-section-offset/.babelrc
deleted file mode 100644
index 74450eed94b..00000000000
--- a/packages/web-components/examples/codesandbox/components/card-section-offset/.babelrc
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "presets": [
-    [
-      "@babel/preset-env",
-      {
-        "modules": false,
-        "targets": [
-          "last 1 version",
-          "Firefox ESR",
-          "not opera > 0",
-          "not op_mini > 0",
-          "not op_mob > 0",
-          "not android > 0",
-          "not edge > 0",
-          "not ie > 0",
-          "not ie_mob > 0"
-        ]
-      }
-    ]
-  ],
-  "plugins": [["@babel/plugin-transform-runtime", { "version": "7.3.0" }]]
-}
diff --git a/packages/web-components/examples/codesandbox/components/card-section-offset/sandbox.config.json b/packages/web-components/examples/codesandbox/components/card-section-offset/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components/card-section-offset/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components/card-section-simple/.babelrc b/packages/web-components/examples/codesandbox/components/card-section-simple/.babelrc
deleted file mode 100644
index 74450eed94b..00000000000
--- a/packages/web-components/examples/codesandbox/components/card-section-simple/.babelrc
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "presets": [
-    [
-      "@babel/preset-env",
-      {
-        "modules": false,
-        "targets": [
-          "last 1 version",
-          "Firefox ESR",
-          "not opera > 0",
-          "not op_mini > 0",
-          "not op_mob > 0",
-          "not android > 0",
-          "not edge > 0",
-          "not ie > 0",
-          "not ie_mob > 0"
-        ]
-      }
-    ]
-  ],
-  "plugins": [["@babel/plugin-transform-runtime", { "version": "7.3.0" }]]
-}
diff --git a/packages/web-components/examples/codesandbox/components/card-section-simple/sandbox.config.json b/packages/web-components/examples/codesandbox/components/card-section-simple/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components/card-section-simple/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components/card/.babelrc b/packages/web-components/examples/codesandbox/components/card/.babelrc
deleted file mode 100644
index 74450eed94b..00000000000
--- a/packages/web-components/examples/codesandbox/components/card/.babelrc
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "presets": [
-    [
-      "@babel/preset-env",
-      {
-        "modules": false,
-        "targets": [
-          "last 1 version",
-          "Firefox ESR",
-          "not opera > 0",
-          "not op_mini > 0",
-          "not op_mob > 0",
-          "not android > 0",
-          "not edge > 0",
-          "not ie > 0",
-          "not ie_mob > 0"
-        ]
-      }
-    ]
-  ],
-  "plugins": [["@babel/plugin-transform-runtime", { "version": "7.3.0" }]]
-}
diff --git a/packages/web-components/examples/codesandbox/components/card/sandbox.config.json b/packages/web-components/examples/codesandbox/components/card/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components/card/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components/carousel/.babelrc b/packages/web-components/examples/codesandbox/components/carousel/.babelrc
deleted file mode 100644
index 74450eed94b..00000000000
--- a/packages/web-components/examples/codesandbox/components/carousel/.babelrc
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "presets": [
-    [
-      "@babel/preset-env",
-      {
-        "modules": false,
-        "targets": [
-          "last 1 version",
-          "Firefox ESR",
-          "not opera > 0",
-          "not op_mini > 0",
-          "not op_mob > 0",
-          "not android > 0",
-          "not edge > 0",
-          "not ie > 0",
-          "not ie_mob > 0"
-        ]
-      }
-    ]
-  ],
-  "plugins": [["@babel/plugin-transform-runtime", { "version": "7.3.0" }]]
-}
diff --git a/packages/web-components/examples/codesandbox/components/carousel/sandbox.config.json b/packages/web-components/examples/codesandbox/components/carousel/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components/carousel/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components/cloud-masthead/.babelrc b/packages/web-components/examples/codesandbox/components/cloud-masthead/.babelrc
deleted file mode 100644
index 74450eed94b..00000000000
--- a/packages/web-components/examples/codesandbox/components/cloud-masthead/.babelrc
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "presets": [
-    [
-      "@babel/preset-env",
-      {
-        "modules": false,
-        "targets": [
-          "last 1 version",
-          "Firefox ESR",
-          "not opera > 0",
-          "not op_mini > 0",
-          "not op_mob > 0",
-          "not android > 0",
-          "not edge > 0",
-          "not ie > 0",
-          "not ie_mob > 0"
-        ]
-      }
-    ]
-  ],
-  "plugins": [["@babel/plugin-transform-runtime", { "version": "7.3.0" }]]
-}
diff --git a/packages/web-components/examples/codesandbox/components/cloud-masthead/.env.local b/packages/web-components/examples/codesandbox/components/cloud-masthead/.env.local
deleted file mode 100644
index 13a85e7707a..00000000000
--- a/packages/web-components/examples/codesandbox/components/cloud-masthead/.env.local
+++ /dev/null
@@ -1 +0,0 @@
-DDS_CLOUD_MASTHEAD=true
diff --git a/packages/web-components/examples/codesandbox/components/cloud-masthead/sandbox.config.json b/packages/web-components/examples/codesandbox/components/cloud-masthead/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components/cloud-masthead/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components/content-block-card-static/.babelrc b/packages/web-components/examples/codesandbox/components/content-block-card-static/.babelrc
deleted file mode 100644
index 2d282e8de95..00000000000
--- a/packages/web-components/examples/codesandbox/components/content-block-card-static/.babelrc
+++ /dev/null
@@ -1,23 +0,0 @@
-{
-  "presets": [
-    [
-      "@babel/preset-env",
-      {
-        "modules": false,
-        "targets": [
-          "last 1 version",
-          "Firefox ESR",
-          "not opera > 0",
-          "not op_mini > 0",
-          "not op_mob > 0",
-          "not android > 0",
-          "not edge > 0",
-          "not ie > 0",
-          "not ie_mob > 0"
-        ]
-      },
-      "@babel/preset-typescript"
-    ]
-  ],
-  "plugins": [["@babel/plugin-transform-runtime", { "version": "7.3.0" }]]
-}
diff --git a/packages/web-components/examples/codesandbox/components/content-block-card-static/sandbox.config.json b/packages/web-components/examples/codesandbox/components/content-block-card-static/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components/content-block-card-static/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components/content-block-cards/.babelrc b/packages/web-components/examples/codesandbox/components/content-block-cards/.babelrc
deleted file mode 100644
index 2d282e8de95..00000000000
--- a/packages/web-components/examples/codesandbox/components/content-block-cards/.babelrc
+++ /dev/null
@@ -1,23 +0,0 @@
-{
-  "presets": [
-    [
-      "@babel/preset-env",
-      {
-        "modules": false,
-        "targets": [
-          "last 1 version",
-          "Firefox ESR",
-          "not opera > 0",
-          "not op_mini > 0",
-          "not op_mob > 0",
-          "not android > 0",
-          "not edge > 0",
-          "not ie > 0",
-          "not ie_mob > 0"
-        ]
-      },
-      "@babel/preset-typescript"
-    ]
-  ],
-  "plugins": [["@babel/plugin-transform-runtime", { "version": "7.3.0" }]]
-}
diff --git a/packages/web-components/examples/codesandbox/components/content-block-cards/sandbox.config.json b/packages/web-components/examples/codesandbox/components/content-block-cards/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components/content-block-cards/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components/content-block-headlines/.babelrc b/packages/web-components/examples/codesandbox/components/content-block-headlines/.babelrc
deleted file mode 100644
index 74450eed94b..00000000000
--- a/packages/web-components/examples/codesandbox/components/content-block-headlines/.babelrc
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "presets": [
-    [
-      "@babel/preset-env",
-      {
-        "modules": false,
-        "targets": [
-          "last 1 version",
-          "Firefox ESR",
-          "not opera > 0",
-          "not op_mini > 0",
-          "not op_mob > 0",
-          "not android > 0",
-          "not edge > 0",
-          "not ie > 0",
-          "not ie_mob > 0"
-        ]
-      }
-    ]
-  ],
-  "plugins": [["@babel/plugin-transform-runtime", { "version": "7.3.0" }]]
-}
diff --git a/packages/web-components/examples/codesandbox/components/content-block-headlines/cdn.html b/packages/web-components/examples/codesandbox/components/content-block-headlines/cdn.html
deleted file mode 100644
index db7af2aea23..00000000000
--- a/packages/web-components/examples/codesandbox/components/content-block-headlines/cdn.html
+++ /dev/null
@@ -1,86 +0,0 @@
-<!--
-@license
-
-Copyright IBM Corp. 2020
-
-This source code is licensed under the Apache-2.0 license found in the
-LICENSE file in the root directory of this source tree.
--->
-
-<html>
-<head>
-  <title>@carbon/ibmdotcom-web-components example</title>
-  <meta charset="UTF-8" />
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css" />
-  <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-block-headlines:not(:defined) {
-      display: none;
-    }
-  </style>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/content-block-headlines.min.js"></script>
-</head>
-<body>
-<div class="cds--grid">
-  <div class="cds--row">
-    <div class="cds--col-sm-4 cds--col-lg-12 cds--offset-lg-4 cds--no-gutter">
-      <cds-content-block-headlines>
-        <cds-content-block-heading>Aliquam condimentum</cds-content-block-heading>
-        <cds-content-block-copy
-        >Lorem ipsum *dolor* sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec
-          hendrerit.</cds-content-block-copy
-        >
-        <cds-content-block-headlines-item>
-          <cds-content-block-headlines-heading>25%</cds-content-block-headlines-heading>
-          <cds-content-item-copy slot="copy"
-          >Modernize mission-critical applications and infrastructure in a hybrid multicloud environment up to 25 percent
-            faster.</cds-content-item-copy
-          >
-          <cds-link-list slot="footer" type="vertical">
-            <cds-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>
-        </cds-content-block-headlines-item>
-        <cds-content-block-headlines-item>
-          <cds-content-block-headlines-heading>25%</cds-content-block-headlines-heading>
-          <cds-content-item-copy slot="copy"
-          >Modernize mission-critical applications and infrastructure in a hybrid multicloud environment up to 25 percent
-            faster.</cds-content-item-copy
-          >
-          <cds-link-list slot="footer" type="vertical">
-            <cds-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>
-        </cds-content-block-headlines-item>
-        <cds-content-block-headlines-item>
-          <cds-content-block-headlines-heading>1.34M</cds-content-block-headlines-heading>
-          <cds-content-item-copy slot="copy"
-          >Save 1.34M per year by optimizing your time and IT expenses.</cds-content-item-copy
-          >
-          <cds-link-list slot="footer" type="vertical">
-            <cds-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>
-        </cds-content-block-headlines-item>
-        <cds-content-block-headlines-item>
-          <cds-content-block-headlines-heading>25%</cds-content-block-headlines-heading>
-          <cds-content-item-copy slot="copy"
-          >Modernize mission-critical applications and infrastructure in a hybrid multicloud environment up to 25 percent
-            faster.</cds-content-item-copy
-          >
-          <cds-link-list slot="footer" type="vertical">
-            <cds-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>
-        </cds-content-block-headlines-item>
-      </cds-content-block-headlines>
-    </div>
-  </div>
-</div>
-</body>
-</html>
diff --git a/packages/web-components/examples/codesandbox/components/content-block-headlines/index.html b/packages/web-components/examples/codesandbox/components/content-block-headlines/index.html
deleted file mode 100644
index c878cd66319..00000000000
--- a/packages/web-components/examples/codesandbox/components/content-block-headlines/index.html
+++ /dev/null
@@ -1,85 +0,0 @@
-<!--
-@license
-
-Copyright IBM Corp. 2020
-
-This source code is licensed under the Apache-2.0 license found in the
-LICENSE file in the root directory of this source tree.
--->
-
-<html>
-  <head>
-    <title>@carbon/ibmdotcom-web-components example</title>
-    <meta charset="UTF-8" />
-    <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css" />
-    <style type="text/css">
-      /* Suppress custom element until styles are loaded */
-      cds-content-block-headlines:not(:defined) {
-        display: none;
-      }
-    </style>
-    <script src="src/index.js"></script>
-  </head>
-  <body>
-    <div class="cds--grid">
-      <div class="cds--row">
-        <div class="cds--col-sm-4 cds--col-lg-12 cds--offset-lg-4 cds--no-gutter">
-          <cds-content-block-headlines>
-            <cds-content-block-heading>Aliquam condimentum</cds-content-block-heading>
-            <cds-content-block-copy
-              >Lorem ipsum *dolor* sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec
-              hendrerit.</cds-content-block-copy
-            >
-            <cds-content-block-headlines-item>
-              <cds-content-block-headlines-heading>25%</cds-content-block-headlines-heading>
-              <cds-content-item-copy slot="copy"
-                >Modernize mission-critical applications and infrastructure in a hybrid multicloud environment up to 25 percent
-                faster.</cds-content-item-copy
-              >
-              <cds-link-list slot="footer" type="vertical">
-                <cds-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>
-            </cds-content-block-headlines-item>
-            <cds-content-block-headlines-item>
-              <cds-content-block-headlines-heading>25%</cds-content-block-headlines-heading>
-              <cds-content-item-copy slot="copy"
-                >Modernize mission-critical applications and infrastructure in a hybrid multicloud environment up to 25 percent
-                faster.</cds-content-item-copy
-              >
-              <cds-link-list slot="footer" type="vertical">
-                <cds-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>
-            </cds-content-block-headlines-item>
-            <cds-content-block-headlines-item>
-              <cds-content-block-headlines-heading>1.34M</cds-content-block-headlines-heading>
-              <cds-content-item-copy slot="copy"
-                >Save 1.34M per year by optimizing your time and IT expenses.</cds-content-item-copy
-              >
-              <cds-link-list slot="footer" type="vertical">
-                <cds-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>
-            </cds-content-block-headlines-item>
-            <cds-content-block-headlines-item>
-              <cds-content-block-headlines-heading>25%</cds-content-block-headlines-heading>
-              <cds-content-item-copy slot="copy"
-                >Modernize mission-critical applications and infrastructure in a hybrid multicloud environment up to 25 percent
-                faster.</cds-content-item-copy
-              >
-              <cds-link-list slot="footer" type="vertical">
-                <cds-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>
-            </cds-content-block-headlines-item>
-          </cds-content-block-headlines>
-        </div>
-      </div>
-    </div>
-  </body>
-</html>
diff --git a/packages/web-components/examples/codesandbox/components/content-block-headlines/sandbox.config.json b/packages/web-components/examples/codesandbox/components/content-block-headlines/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components/content-block-headlines/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components/content-block-media/.babelrc b/packages/web-components/examples/codesandbox/components/content-block-media/.babelrc
deleted file mode 100644
index 74450eed94b..00000000000
--- a/packages/web-components/examples/codesandbox/components/content-block-media/.babelrc
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "presets": [
-    [
-      "@babel/preset-env",
-      {
-        "modules": false,
-        "targets": [
-          "last 1 version",
-          "Firefox ESR",
-          "not opera > 0",
-          "not op_mini > 0",
-          "not op_mob > 0",
-          "not android > 0",
-          "not edge > 0",
-          "not ie > 0",
-          "not ie_mob > 0"
-        ]
-      }
-    ]
-  ],
-  "plugins": [["@babel/plugin-transform-runtime", { "version": "7.3.0" }]]
-}
diff --git a/packages/web-components/examples/codesandbox/components/content-block-media/sandbox.config.json b/packages/web-components/examples/codesandbox/components/content-block-media/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components/content-block-media/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components/content-block-mixed/.babelrc b/packages/web-components/examples/codesandbox/components/content-block-mixed/.babelrc
deleted file mode 100644
index 74450eed94b..00000000000
--- a/packages/web-components/examples/codesandbox/components/content-block-mixed/.babelrc
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "presets": [
-    [
-      "@babel/preset-env",
-      {
-        "modules": false,
-        "targets": [
-          "last 1 version",
-          "Firefox ESR",
-          "not opera > 0",
-          "not op_mini > 0",
-          "not op_mob > 0",
-          "not android > 0",
-          "not edge > 0",
-          "not ie > 0",
-          "not ie_mob > 0"
-        ]
-      }
-    ]
-  ],
-  "plugins": [["@babel/plugin-transform-runtime", { "version": "7.3.0" }]]
-}
diff --git a/packages/web-components/examples/codesandbox/components/content-block-mixed/sandbox.config.json b/packages/web-components/examples/codesandbox/components/content-block-mixed/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components/content-block-mixed/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components/content-block-segmented/.babelrc b/packages/web-components/examples/codesandbox/components/content-block-segmented/.babelrc
deleted file mode 100644
index 74450eed94b..00000000000
--- a/packages/web-components/examples/codesandbox/components/content-block-segmented/.babelrc
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "presets": [
-    [
-      "@babel/preset-env",
-      {
-        "modules": false,
-        "targets": [
-          "last 1 version",
-          "Firefox ESR",
-          "not opera > 0",
-          "not op_mini > 0",
-          "not op_mob > 0",
-          "not android > 0",
-          "not edge > 0",
-          "not ie > 0",
-          "not ie_mob > 0"
-        ]
-      }
-    ]
-  ],
-  "plugins": [["@babel/plugin-transform-runtime", { "version": "7.3.0" }]]
-}
diff --git a/packages/web-components/examples/codesandbox/components/content-block-segmented/sandbox.config.json b/packages/web-components/examples/codesandbox/components/content-block-segmented/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components/content-block-segmented/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components/content-block-simple/.babelrc b/packages/web-components/examples/codesandbox/components/content-block-simple/.babelrc
deleted file mode 100644
index 74450eed94b..00000000000
--- a/packages/web-components/examples/codesandbox/components/content-block-simple/.babelrc
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "presets": [
-    [
-      "@babel/preset-env",
-      {
-        "modules": false,
-        "targets": [
-          "last 1 version",
-          "Firefox ESR",
-          "not opera > 0",
-          "not op_mini > 0",
-          "not op_mob > 0",
-          "not android > 0",
-          "not edge > 0",
-          "not ie > 0",
-          "not ie_mob > 0"
-        ]
-      }
-    ]
-  ],
-  "plugins": [["@babel/plugin-transform-runtime", { "version": "7.3.0" }]]
-}
diff --git a/packages/web-components/examples/codesandbox/components/content-block-simple/sandbox.config.json b/packages/web-components/examples/codesandbox/components/content-block-simple/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components/content-block-simple/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components/content-block/.babelrc b/packages/web-components/examples/codesandbox/components/content-block/.babelrc
deleted file mode 100644
index 74450eed94b..00000000000
--- a/packages/web-components/examples/codesandbox/components/content-block/.babelrc
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "presets": [
-    [
-      "@babel/preset-env",
-      {
-        "modules": false,
-        "targets": [
-          "last 1 version",
-          "Firefox ESR",
-          "not opera > 0",
-          "not op_mini > 0",
-          "not op_mob > 0",
-          "not android > 0",
-          "not edge > 0",
-          "not ie > 0",
-          "not ie_mob > 0"
-        ]
-      }
-    ]
-  ],
-  "plugins": [["@babel/plugin-transform-runtime", { "version": "7.3.0" }]]
-}
diff --git a/packages/web-components/examples/codesandbox/components/content-block/sandbox.config.json b/packages/web-components/examples/codesandbox/components/content-block/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components/content-block/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components/content-group-cards/.babelrc b/packages/web-components/examples/codesandbox/components/content-group-cards/.babelrc
deleted file mode 100644
index 74450eed94b..00000000000
--- a/packages/web-components/examples/codesandbox/components/content-group-cards/.babelrc
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "presets": [
-    [
-      "@babel/preset-env",
-      {
-        "modules": false,
-        "targets": [
-          "last 1 version",
-          "Firefox ESR",
-          "not opera > 0",
-          "not op_mini > 0",
-          "not op_mob > 0",
-          "not android > 0",
-          "not edge > 0",
-          "not ie > 0",
-          "not ie_mob > 0"
-        ]
-      }
-    ]
-  ],
-  "plugins": [["@babel/plugin-transform-runtime", { "version": "7.3.0" }]]
-}
diff --git a/packages/web-components/examples/codesandbox/components/content-group-cards/sandbox.config.json b/packages/web-components/examples/codesandbox/components/content-group-cards/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components/content-group-cards/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components/content-group-pictograms/.babelrc b/packages/web-components/examples/codesandbox/components/content-group-pictograms/.babelrc
deleted file mode 100644
index 74450eed94b..00000000000
--- a/packages/web-components/examples/codesandbox/components/content-group-pictograms/.babelrc
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "presets": [
-    [
-      "@babel/preset-env",
-      {
-        "modules": false,
-        "targets": [
-          "last 1 version",
-          "Firefox ESR",
-          "not opera > 0",
-          "not op_mini > 0",
-          "not op_mob > 0",
-          "not android > 0",
-          "not edge > 0",
-          "not ie > 0",
-          "not ie_mob > 0"
-        ]
-      }
-    ]
-  ],
-  "plugins": [["@babel/plugin-transform-runtime", { "version": "7.3.0" }]]
-}
diff --git a/packages/web-components/examples/codesandbox/components/content-group-pictograms/sandbox.config.json b/packages/web-components/examples/codesandbox/components/content-group-pictograms/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components/content-group-pictograms/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components/content-group-simple/.babelrc b/packages/web-components/examples/codesandbox/components/content-group-simple/.babelrc
deleted file mode 100644
index 74450eed94b..00000000000
--- a/packages/web-components/examples/codesandbox/components/content-group-simple/.babelrc
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "presets": [
-    [
-      "@babel/preset-env",
-      {
-        "modules": false,
-        "targets": [
-          "last 1 version",
-          "Firefox ESR",
-          "not opera > 0",
-          "not op_mini > 0",
-          "not op_mob > 0",
-          "not android > 0",
-          "not edge > 0",
-          "not ie > 0",
-          "not ie_mob > 0"
-        ]
-      }
-    ]
-  ],
-  "plugins": [["@babel/plugin-transform-runtime", { "version": "7.3.0" }]]
-}
diff --git a/packages/web-components/examples/codesandbox/components/content-group-simple/sandbox.config.json b/packages/web-components/examples/codesandbox/components/content-group-simple/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components/content-group-simple/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components/content-group/.babelrc b/packages/web-components/examples/codesandbox/components/content-group/.babelrc
deleted file mode 100644
index 74450eed94b..00000000000
--- a/packages/web-components/examples/codesandbox/components/content-group/.babelrc
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "presets": [
-    [
-      "@babel/preset-env",
-      {
-        "modules": false,
-        "targets": [
-          "last 1 version",
-          "Firefox ESR",
-          "not opera > 0",
-          "not op_mini > 0",
-          "not op_mob > 0",
-          "not android > 0",
-          "not edge > 0",
-          "not ie > 0",
-          "not ie_mob > 0"
-        ]
-      }
-    ]
-  ],
-  "plugins": [["@babel/plugin-transform-runtime", { "version": "7.3.0" }]]
-}
diff --git a/packages/web-components/examples/codesandbox/components/content-group/sandbox.config.json b/packages/web-components/examples/codesandbox/components/content-group/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components/content-group/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components/content-item-row/.babelrc b/packages/web-components/examples/codesandbox/components/content-item-row/.babelrc
deleted file mode 100644
index 74450eed94b..00000000000
--- a/packages/web-components/examples/codesandbox/components/content-item-row/.babelrc
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "presets": [
-    [
-      "@babel/preset-env",
-      {
-        "modules": false,
-        "targets": [
-          "last 1 version",
-          "Firefox ESR",
-          "not opera > 0",
-          "not op_mini > 0",
-          "not op_mob > 0",
-          "not android > 0",
-          "not edge > 0",
-          "not ie > 0",
-          "not ie_mob > 0"
-        ]
-      }
-    ]
-  ],
-  "plugins": [["@babel/plugin-transform-runtime", { "version": "7.3.0" }]]
-}
diff --git a/packages/web-components/examples/codesandbox/components/content-item-row/sandbox.config.json b/packages/web-components/examples/codesandbox/components/content-item-row/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components/content-item-row/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components/content-item/.babelrc b/packages/web-components/examples/codesandbox/components/content-item/.babelrc
deleted file mode 100644
index 74450eed94b..00000000000
--- a/packages/web-components/examples/codesandbox/components/content-item/.babelrc
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "presets": [
-    [
-      "@babel/preset-env",
-      {
-        "modules": false,
-        "targets": [
-          "last 1 version",
-          "Firefox ESR",
-          "not opera > 0",
-          "not op_mini > 0",
-          "not op_mob > 0",
-          "not android > 0",
-          "not edge > 0",
-          "not ie > 0",
-          "not ie_mob > 0"
-        ]
-      }
-    ]
-  ],
-  "plugins": [["@babel/plugin-transform-runtime", { "version": "7.3.0" }]]
-}
diff --git a/packages/web-components/examples/codesandbox/components/content-item/sandbox.config.json b/packages/web-components/examples/codesandbox/components/content-item/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components/content-item/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components/content-section/.babelrc b/packages/web-components/examples/codesandbox/components/content-section/.babelrc
deleted file mode 100644
index 74450eed94b..00000000000
--- a/packages/web-components/examples/codesandbox/components/content-section/.babelrc
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "presets": [
-    [
-      "@babel/preset-env",
-      {
-        "modules": false,
-        "targets": [
-          "last 1 version",
-          "Firefox ESR",
-          "not opera > 0",
-          "not op_mini > 0",
-          "not op_mob > 0",
-          "not android > 0",
-          "not edge > 0",
-          "not ie > 0",
-          "not ie_mob > 0"
-        ]
-      }
-    ]
-  ],
-  "plugins": [["@babel/plugin-transform-runtime", { "version": "7.3.0" }]]
-}
diff --git a/packages/web-components/examples/codesandbox/components/content-section/sandbox.config.json b/packages/web-components/examples/codesandbox/components/content-section/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components/content-section/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components/cta-block/.babelrc b/packages/web-components/examples/codesandbox/components/cta-block/.babelrc
deleted file mode 100644
index 74450eed94b..00000000000
--- a/packages/web-components/examples/codesandbox/components/cta-block/.babelrc
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "presets": [
-    [
-      "@babel/preset-env",
-      {
-        "modules": false,
-        "targets": [
-          "last 1 version",
-          "Firefox ESR",
-          "not opera > 0",
-          "not op_mini > 0",
-          "not op_mob > 0",
-          "not android > 0",
-          "not edge > 0",
-          "not ie > 0",
-          "not ie_mob > 0"
-        ]
-      }
-    ]
-  ],
-  "plugins": [["@babel/plugin-transform-runtime", { "version": "7.3.0" }]]
-}
diff --git a/packages/web-components/examples/codesandbox/components/cta-block/cdn.html b/packages/web-components/examples/codesandbox/components/cta-block/cdn.html
deleted file mode 100644
index 27ff5e373c1..00000000000
--- a/packages/web-components/examples/codesandbox/components/cta-block/cdn.html
+++ /dev/null
@@ -1,77 +0,0 @@
-<!--
-@license
-
-Copyright IBM Corp. 2020
-
-This source code is licensed under the Apache-2.0 license found in the
-LICENSE file in the root directory of this source tree.
--->
-
-<html>
-<head>
-  <title>@carbon/ibmdotcom-web-components example</title>
-  <meta charset="UTF-8" />
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css" />
-  <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-cta-block:not(:defined) {
-      display: none;
-    }
-  </style>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/cta-block.min.js"></script>
-</head>
-
-<body>
-<div class="cds--grid">
-  <div class="cds--row">
-    <div class="cds--col-lg-8 cds--col-sm-4 cds--offset-lg-4">
-      <cds-cta-block no-border>
-        <cds-content-block-heading>Take the next step</cds-content-block-heading>
-        <cds-content-block-copy
-        >Want to discuss your options with a DevOps expert? Contact our sales team to evaluate your
-          needs.</cds-content-block-copy
-        >
-
-        <cds-button-group slot="action" style="--cds-button-group--item-count:2">
-          <cds-button-group-item kind="tertiary" href="https://example.com">
-            Secondary Button
-          </cds-button-group-item>
-          <cds-button-group-item kind="primary" ref="https://example.com">
-            Primary button
-          </cds-button-group-item>
-        </cds-button-group>
-
-        <cds-cta-block-item-row>
-          <cds-cta-block-item>
-            <cds-content-item-heading>Get connected</cds-content-item-heading>
-            <cds-content-item-copy
-            >IBM DevOps partners have a wide range of expertise. Find one to build that right solution for you.
-            </cds-content-item-copy>
-            <cds-text-cta slot="footer" cta-type="local" icon-placement="right" href="example.com"
-            >Find a partner
-            </cds-text-cta>
-          </cds-cta-block-item>
-
-          <cds-cta-block-item>
-            <cds-content-item-heading>Learn how</cds-content-item-heading>
-            <cds-content-item-copy>Dig into more self-directed larning about DevOps methodologies.</cds-content-item-copy>
-            <cds-text-cta slot="footer" cta-type="local" icon-placement="right" href="example.com"
-            >Browse tutorials
-            </cds-text-cta>
-          </cds-cta-block-item>
-
-          <cds-cta-block-item>
-            <cds-content-item-heading>Learn how</cds-content-item-heading>
-            <cds-content-item-copy>Dig into more self-directed larning about DevOps methodologies.</cds-content-item-copy>
-            <cds-text-cta slot="footer" cta-type="local" icon-placement="right" href="example.com"
-            >Browse tutorials
-            </cds-text-cta>
-          </cds-cta-block-item>
-        </cds-cta-block-item-row>
-      </cds-cta-block>
-    </div>
-  </div>
-</div>
-</body>
-</html>
diff --git a/packages/web-components/examples/codesandbox/components/cta-block/index.html b/packages/web-components/examples/codesandbox/components/cta-block/index.html
deleted file mode 100644
index 646f898fcd5..00000000000
--- a/packages/web-components/examples/codesandbox/components/cta-block/index.html
+++ /dev/null
@@ -1,76 +0,0 @@
-<!--
-@license
-
-Copyright IBM Corp. 2020
-
-This source code is licensed under the Apache-2.0 license found in the
-LICENSE file in the root directory of this source tree.
--->
-
-<html>
-  <head>
-    <title>@carbon/ibmdotcom-web-components example</title>
-    <meta charset="UTF-8" />
-    <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-cta-block:not(:defined) {
-        display: none;
-      }
-    </style>
-    <script src="src/index.js"></script>
-  </head>
-
-  <body>
-    <div class="cds--grid">
-      <div class="cds--row">
-        <div class="cds--col-lg-8 cds--col-sm-4 cds--offset-lg-4">
-          <cds-cta-block no-border>
-            <cds-content-block-heading>Take the next step</cds-content-block-heading>
-            <cds-content-block-copy
-              >Want to discuss your options with a DevOps expert? Contact our sales team to evaluate your
-              needs.</cds-content-block-copy
-            >
-
-            <cds-button-group slot="action" style="--cds-button-group--item-count:2">
-              <cds-button-group-item kind="tertiary" href="https://example.com">
-                Secondary Button
-              </cds-button-group-item>
-              <cds-button-group-item kind="primary" ref="https://example.com">
-                Primary button
-              </cds-button-group-item>
-            </cds-button-group>
-
-            <cds-cta-block-item-row>
-              <cds-cta-block-item>
-                <cds-content-item-heading>Get connected</cds-content-item-heading>
-                <cds-content-item-copy
-                  >IBM DevOps partners have a wide range of expertise. Find one to build that right solution for you.
-                </cds-content-item-copy>
-                <cds-text-cta slot="footer" cta-type="local" icon-placement="right" href="example.com"
-                  >Find a partner
-                </cds-text-cta>
-              </cds-cta-block-item>
-
-              <cds-cta-block-item>
-                <cds-content-item-heading>Learn how</cds-content-item-heading>
-                <cds-content-item-copy>Dig into more self-directed larning about DevOps methodologies.</cds-content-item-copy>
-                <cds-text-cta slot="footer" cta-type="local" icon-placement="right" href="example.com"
-                  >Browse tutorials
-                </cds-text-cta>
-              </cds-cta-block-item>
-
-              <cds-cta-block-item>
-                <cds-content-item-heading>Learn how</cds-content-item-heading>
-                <cds-content-item-copy>Dig into more self-directed larning about DevOps methodologies.</cds-content-item-copy>
-                <cds-text-cta slot="footer" cta-type="local" icon-placement="right" href="example.com"
-                  >Browse tutorials
-                </cds-text-cta>
-              </cds-cta-block-item>
-            </cds-cta-block-item-row>
-          </cds-cta-block>
-        </div>
-      </div>
-    </div>
-  </body>
-</html>
diff --git a/packages/web-components/examples/codesandbox/components/cta-block/sandbox.config.json b/packages/web-components/examples/codesandbox/components/cta-block/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components/cta-block/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components/cta-button/.babelrc b/packages/web-components/examples/codesandbox/components/cta-button/.babelrc
deleted file mode 100644
index 74450eed94b..00000000000
--- a/packages/web-components/examples/codesandbox/components/cta-button/.babelrc
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "presets": [
-    [
-      "@babel/preset-env",
-      {
-        "modules": false,
-        "targets": [
-          "last 1 version",
-          "Firefox ESR",
-          "not opera > 0",
-          "not op_mini > 0",
-          "not op_mob > 0",
-          "not android > 0",
-          "not edge > 0",
-          "not ie > 0",
-          "not ie_mob > 0"
-        ]
-      }
-    ]
-  ],
-  "plugins": [["@babel/plugin-transform-runtime", { "version": "7.3.0" }]]
-}
diff --git a/packages/web-components/examples/codesandbox/components/cta-button/sandbox.config.json b/packages/web-components/examples/codesandbox/components/cta-button/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components/cta-button/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components/cta-card-link/.babelrc b/packages/web-components/examples/codesandbox/components/cta-card-link/.babelrc
deleted file mode 100644
index 74450eed94b..00000000000
--- a/packages/web-components/examples/codesandbox/components/cta-card-link/.babelrc
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "presets": [
-    [
-      "@babel/preset-env",
-      {
-        "modules": false,
-        "targets": [
-          "last 1 version",
-          "Firefox ESR",
-          "not opera > 0",
-          "not op_mini > 0",
-          "not op_mob > 0",
-          "not android > 0",
-          "not edge > 0",
-          "not ie > 0",
-          "not ie_mob > 0"
-        ]
-      }
-    ]
-  ],
-  "plugins": [["@babel/plugin-transform-runtime", { "version": "7.3.0" }]]
-}
diff --git a/packages/web-components/examples/codesandbox/components/cta-card-link/sandbox.config.json b/packages/web-components/examples/codesandbox/components/cta-card-link/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components/cta-card-link/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components/cta-card/.babelrc b/packages/web-components/examples/codesandbox/components/cta-card/.babelrc
deleted file mode 100644
index 74450eed94b..00000000000
--- a/packages/web-components/examples/codesandbox/components/cta-card/.babelrc
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "presets": [
-    [
-      "@babel/preset-env",
-      {
-        "modules": false,
-        "targets": [
-          "last 1 version",
-          "Firefox ESR",
-          "not opera > 0",
-          "not op_mini > 0",
-          "not op_mob > 0",
-          "not android > 0",
-          "not edge > 0",
-          "not ie > 0",
-          "not ie_mob > 0"
-        ]
-      }
-    ]
-  ],
-  "plugins": [["@babel/plugin-transform-runtime", { "version": "7.3.0" }]]
-}
diff --git a/packages/web-components/examples/codesandbox/components/cta-card/sandbox.config.json b/packages/web-components/examples/codesandbox/components/cta-card/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components/cta-card/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components/cta-feature/.babelrc b/packages/web-components/examples/codesandbox/components/cta-feature/.babelrc
deleted file mode 100644
index 74450eed94b..00000000000
--- a/packages/web-components/examples/codesandbox/components/cta-feature/.babelrc
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "presets": [
-    [
-      "@babel/preset-env",
-      {
-        "modules": false,
-        "targets": [
-          "last 1 version",
-          "Firefox ESR",
-          "not opera > 0",
-          "not op_mini > 0",
-          "not op_mob > 0",
-          "not android > 0",
-          "not edge > 0",
-          "not ie > 0",
-          "not ie_mob > 0"
-        ]
-      }
-    ]
-  ],
-  "plugins": [["@babel/plugin-transform-runtime", { "version": "7.3.0" }]]
-}
diff --git a/packages/web-components/examples/codesandbox/components/cta-feature/sandbox.config.json b/packages/web-components/examples/codesandbox/components/cta-feature/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components/cta-feature/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components/cta-section/.babelrc b/packages/web-components/examples/codesandbox/components/cta-section/.babelrc
deleted file mode 100644
index 74450eed94b..00000000000
--- a/packages/web-components/examples/codesandbox/components/cta-section/.babelrc
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "presets": [
-    [
-      "@babel/preset-env",
-      {
-        "modules": false,
-        "targets": [
-          "last 1 version",
-          "Firefox ESR",
-          "not opera > 0",
-          "not op_mini > 0",
-          "not op_mob > 0",
-          "not android > 0",
-          "not edge > 0",
-          "not ie > 0",
-          "not ie_mob > 0"
-        ]
-      }
-    ]
-  ],
-  "plugins": [["@babel/plugin-transform-runtime", { "version": "7.3.0" }]]
-}
diff --git a/packages/web-components/examples/codesandbox/components/cta-section/sandbox.config.json b/packages/web-components/examples/codesandbox/components/cta-section/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components/cta-section/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components/cta-text/.babelrc b/packages/web-components/examples/codesandbox/components/cta-text/.babelrc
deleted file mode 100644
index 74450eed94b..00000000000
--- a/packages/web-components/examples/codesandbox/components/cta-text/.babelrc
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "presets": [
-    [
-      "@babel/preset-env",
-      {
-        "modules": false,
-        "targets": [
-          "last 1 version",
-          "Firefox ESR",
-          "not opera > 0",
-          "not op_mini > 0",
-          "not op_mob > 0",
-          "not android > 0",
-          "not edge > 0",
-          "not ie > 0",
-          "not ie_mob > 0"
-        ]
-      }
-    ]
-  ],
-  "plugins": [["@babel/plugin-transform-runtime", { "version": "7.3.0" }]]
-}
diff --git a/packages/web-components/examples/codesandbox/components/cta-text/sandbox.config.json b/packages/web-components/examples/codesandbox/components/cta-text/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components/cta-text/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components/dotcom-shell/.babelrc b/packages/web-components/examples/codesandbox/components/dotcom-shell/.babelrc
deleted file mode 100644
index 74450eed94b..00000000000
--- a/packages/web-components/examples/codesandbox/components/dotcom-shell/.babelrc
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "presets": [
-    [
-      "@babel/preset-env",
-      {
-        "modules": false,
-        "targets": [
-          "last 1 version",
-          "Firefox ESR",
-          "not opera > 0",
-          "not op_mini > 0",
-          "not op_mob > 0",
-          "not android > 0",
-          "not edge > 0",
-          "not ie > 0",
-          "not ie_mob > 0"
-        ]
-      }
-    ]
-  ],
-  "plugins": [["@babel/plugin-transform-runtime", { "version": "7.3.0" }]]
-}
diff --git a/packages/web-components/examples/codesandbox/components/dotcom-shell/sandbox.config.json b/packages/web-components/examples/codesandbox/components/dotcom-shell/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components/dotcom-shell/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components/expressive-modal/.babelrc b/packages/web-components/examples/codesandbox/components/expressive-modal/.babelrc
deleted file mode 100644
index 74450eed94b..00000000000
--- a/packages/web-components/examples/codesandbox/components/expressive-modal/.babelrc
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "presets": [
-    [
-      "@babel/preset-env",
-      {
-        "modules": false,
-        "targets": [
-          "last 1 version",
-          "Firefox ESR",
-          "not opera > 0",
-          "not op_mini > 0",
-          "not op_mob > 0",
-          "not android > 0",
-          "not edge > 0",
-          "not ie > 0",
-          "not ie_mob > 0"
-        ]
-      }
-    ]
-  ],
-  "plugins": [["@babel/plugin-transform-runtime", { "version": "7.3.0" }]]
-}
diff --git a/packages/web-components/examples/codesandbox/components/expressive-modal/sandbox.config.json b/packages/web-components/examples/codesandbox/components/expressive-modal/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components/expressive-modal/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components/feature-card/.babelrc b/packages/web-components/examples/codesandbox/components/feature-card/.babelrc
deleted file mode 100644
index 74450eed94b..00000000000
--- a/packages/web-components/examples/codesandbox/components/feature-card/.babelrc
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "presets": [
-    [
-      "@babel/preset-env",
-      {
-        "modules": false,
-        "targets": [
-          "last 1 version",
-          "Firefox ESR",
-          "not opera > 0",
-          "not op_mini > 0",
-          "not op_mob > 0",
-          "not android > 0",
-          "not edge > 0",
-          "not ie > 0",
-          "not ie_mob > 0"
-        ]
-      }
-    ]
-  ],
-  "plugins": [["@babel/plugin-transform-runtime", { "version": "7.3.0" }]]
-}
diff --git a/packages/web-components/examples/codesandbox/components/feature-card/sandbox.config.json b/packages/web-components/examples/codesandbox/components/feature-card/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components/feature-card/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components/feature-section/.babelrc b/packages/web-components/examples/codesandbox/components/feature-section/.babelrc
deleted file mode 100644
index 74450eed94b..00000000000
--- a/packages/web-components/examples/codesandbox/components/feature-section/.babelrc
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "presets": [
-    [
-      "@babel/preset-env",
-      {
-        "modules": false,
-        "targets": [
-          "last 1 version",
-          "Firefox ESR",
-          "not opera > 0",
-          "not op_mini > 0",
-          "not op_mob > 0",
-          "not android > 0",
-          "not edge > 0",
-          "not ie > 0",
-          "not ie_mob > 0"
-        ]
-      }
-    ]
-  ],
-  "plugins": [["@babel/plugin-transform-runtime", { "version": "7.3.0" }]]
-}
diff --git a/packages/web-components/examples/codesandbox/components/feature-section/sandbox.config.json b/packages/web-components/examples/codesandbox/components/feature-section/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components/feature-section/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components/filter-panel/.babelrc b/packages/web-components/examples/codesandbox/components/filter-panel/.babelrc
deleted file mode 100644
index 74450eed94b..00000000000
--- a/packages/web-components/examples/codesandbox/components/filter-panel/.babelrc
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "presets": [
-    [
-      "@babel/preset-env",
-      {
-        "modules": false,
-        "targets": [
-          "last 1 version",
-          "Firefox ESR",
-          "not opera > 0",
-          "not op_mini > 0",
-          "not op_mob > 0",
-          "not android > 0",
-          "not edge > 0",
-          "not ie > 0",
-          "not ie_mob > 0"
-        ]
-      }
-    ]
-  ],
-  "plugins": [["@babel/plugin-transform-runtime", { "version": "7.3.0" }]]
-}
diff --git a/packages/web-components/examples/codesandbox/components/filter-panel/cdn.html b/packages/web-components/examples/codesandbox/components/filter-panel/cdn.html
deleted file mode 100644
index afb4d459b53..00000000000
--- a/packages/web-components/examples/codesandbox/components/filter-panel/cdn.html
+++ /dev/null
@@ -1,76 +0,0 @@
-<!--
-@license
-
-Copyright IBM Corp. 2020
-
-This source code is licensed under the Apache-2.0 license found in the
-LICENSE file in the root directory of this source tree.
--->
-
-<html>
-<head>
-  <title>@carbon/ibmdotcom-web-components example</title>
-  <meta charset="UTF-8" />
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css" />
-  <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-filter-panel:not(:defined) {
-      display: none;
-    }
-  </style>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/filter-panel.min.js"></script>
-</head>
-
-<body>
-<div class="cds--grid">
-  <div class="cds--row">
-    <div class="cds--col-lg-4">
-      <cds-filter-panel-composite>
-        <cds-filter-panel-heading slot="heading">Filter</cds-filter-panel-heading>
-        <cds-filter-group>
-          <cds-filter-group-item title="Product types">
-            <cds-filter-panel-checkbox value="API">API</cds-filter-panel-checkbox>
-            <cds-filter-panel-checkbox value="Application">Application</cds-filter-panel-checkbox>
-            <cds-filter-panel-checkbox value="Data Set">Data Set</cds-filter-panel-checkbox>
-            <cds-filter-panel-checkbox value="Free Trial">Free Trial</cds-filter-panel-checkbox>
-            <cds-filter-panel-checkbox value="Hardware">Hardware</cds-filter-panel-checkbox>
-            <cds-filter-panel-checkbox value="Service">Service</cds-filter-panel-checkbox>
-            <cds-filter-panel-checkbox value="Service Assets">Service Assets</cds-filter-panel-checkbox>
-            <cds-filter-panel-checkbox value="Software">Software</cds-filter-panel-checkbox>
-          </cds-filter-group-item>
-          <cds-filter-group-item title="Technologies">
-            <cds-filter-panel-input-select header-value="Analytics" title="Analytics"></cds-filter-panel-input-select>
-            <cds-filter-panel-input-select header-value="Artificial intelligence" title="Artificial intelligence">
-              <cds-filter-panel-input-select-item value="Machine Learning">Machine Learning</cds-filter-panel-input-select-item>
-              <cds-filter-panel-input-select-item value="Natural language processing">Natural language processing</cds-filter-panel-input-select-item>
-              <cds-filter-panel-input-select-item value="Speech recognition">Speech recognition</cds-filter-panel-input-select-item>
-            </cds-filter-panel-input-select>
-            <cds-filter-panel-input-select header-value="Automation" title="Automation"></cds-filter-panel-input-select>
-            <cds-filter-panel-input-select header-value="Blockchain" title="Blockchain"></cds-filter-panel-input-select>
-            <cds-filter-panel-input-select header-value="Cloud computing" title="Cloud computing"></cds-filter-panel-input-select>
-            <cds-filter-panel-input-select header-value="IT infrastructure" title="IT infrastructure"></cds-filter-panel-input-select>
-            <cds-filter-panel-input-select header-value="IT management" title="IT management"></cds-filter-panel-input-select>
-            <cds-filter-panel-input-select header-value="Mobile technologys" title="Mobile technology"></cds-filter-panel-input-select>
-            <cds-filter-panel-input-select header-value="Security" title="Security"></cds-filter-panel-input-select>
-            <cds-filter-panel-input-select header-value="Software development" title="Software development"></cds-filter-panel-input-select>
-          </cds-filter-group-item>
-          <cds-filter-group-item title="Business needs">
-            <cds-filter-panel-input-select header-value="Business operations" title="Business operations"></cds-filter-panel-input-select>
-            <cds-filter-panel-input-select header-value="Content Management" title="Content Management"></cds-filter-panel-input-select>
-            <cds-filter-panel-input-select header-value="Customer service" title="Customer service"></cds-filter-panel-input-select>
-            <cds-filter-panel-input-select header-value="Finance" title="Finance"></cds-filter-panel-input-select>
-            <cds-filter-panel-input-select header-value="Marketing and sales" title="Marketing and sales"></cds-filter-panel-input-select>
-            <cds-filter-panel-input-select header-value="Supply chain management" title="Supply chain management"></cds-filter-panel-input-select>
-          </cds-filter-group-item>
-          <cds-filter-group-item title="Deployment types">
-            <cds-filter-panel-checkbox value="On-premisis">On-premisis</cds-filter-panel-checkbox>
-            <cds-filter-panel-checkbox value="SaaS">SaaS</cds-filter-panel-checkbox>
-          </cds-filter-group-item>
-        </cds-filter-group>
-      </cds-filter-panel-composite>
-    </div>
-  </div>
-</div>
-</body>
-</html>
diff --git a/packages/web-components/examples/codesandbox/components/filter-panel/index.html b/packages/web-components/examples/codesandbox/components/filter-panel/index.html
deleted file mode 100644
index 3beb2e22ef3..00000000000
--- a/packages/web-components/examples/codesandbox/components/filter-panel/index.html
+++ /dev/null
@@ -1,75 +0,0 @@
-<!--
-@license
-
-Copyright IBM Corp. 2020
-
-This source code is licensed under the Apache-2.0 license found in the
-LICENSE file in the root directory of this source tree.
--->
-
-<html>
-  <head>
-    <title>@carbon/ibmdotcom-web-components example</title>
-    <meta charset="UTF-8" />
-    <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-filter-panel:not(:defined) {
-        display: none;
-      }
-    </style>
-    <script src="src/index.js"></script>
-  </head>
-
-  <body>
-    <div class="cds--grid">
-      <div class="cds--row">
-        <div class="cds--col-lg-4">
-          <cds-filter-panel-composite>
-        <cds-filter-panel-heading slot="heading">Filter</cds-filter-panel-heading>
-        <cds-filter-group>
-          <cds-filter-group-item title="Product types">
-            <cds-filter-panel-checkbox value="API">API</cds-filter-panel-checkbox>
-            <cds-filter-panel-checkbox value="Application">Application</cds-filter-panel-checkbox>
-            <cds-filter-panel-checkbox value="Data Set">Data Set</cds-filter-panel-checkbox>
-            <cds-filter-panel-checkbox value="Free Trial">Free Trial</cds-filter-panel-checkbox>
-            <cds-filter-panel-checkbox value="Hardware">Hardware</cds-filter-panel-checkbox>
-            <cds-filter-panel-checkbox value="Service">Service</cds-filter-panel-checkbox>
-            <cds-filter-panel-checkbox value="Service Assets">Service Assets</cds-filter-panel-checkbox>
-            <cds-filter-panel-checkbox value="Software">Software</cds-filter-panel-checkbox>
-          </cds-filter-group-item>
-          <cds-filter-group-item title="Technologies">
-            <cds-filter-panel-input-select header-value="Analytics" title="Analytics"></cds-filter-panel-input-select>
-            <cds-filter-panel-input-select header-value="Artificial intelligence" title="Artificial intelligence">
-              <cds-filter-panel-input-select-item value="Machine Learning">Machine Learning</cds-filter-panel-input-select-item>
-              <cds-filter-panel-input-select-item value="Natural language processing">Natural language processing</cds-filter-panel-input-select-item>
-              <cds-filter-panel-input-select-item value="Speech recognition">Speech recognition</cds-filter-panel-input-select-item>
-            </cds-filter-panel-input-select>
-            <cds-filter-panel-input-select header-value="Automation" title="Automation"></cds-filter-panel-input-select>
-            <cds-filter-panel-input-select header-value="Blockchain" title="Blockchain"></cds-filter-panel-input-select>
-            <cds-filter-panel-input-select header-value="Cloud computing" title="Cloud computing"></cds-filter-panel-input-select>
-            <cds-filter-panel-input-select header-value="IT infrastructure" title="IT infrastructure"></cds-filter-panel-input-select>
-            <cds-filter-panel-input-select header-value="IT management" title="IT management"></cds-filter-panel-input-select>
-            <cds-filter-panel-input-select header-value="Mobile technologys" title="Mobile technology"></cds-filter-panel-input-select>
-            <cds-filter-panel-input-select header-value="Security" title="Security"></cds-filter-panel-input-select>
-            <cds-filter-panel-input-select header-value="Software development" title="Software development"></cds-filter-panel-input-select>
-          </cds-filter-group-item>
-          <cds-filter-group-item title="Business needs">
-            <cds-filter-panel-input-select header-value="Business operations" title="Business operations"></cds-filter-panel-input-select>
-            <cds-filter-panel-input-select header-value="Content Management" title="Content Management"></cds-filter-panel-input-select>
-            <cds-filter-panel-input-select header-value="Customer service" title="Customer service"></cds-filter-panel-input-select>
-            <cds-filter-panel-input-select header-value="Finance" title="Finance"></cds-filter-panel-input-select>
-            <cds-filter-panel-input-select header-value="Marketing and sales" title="Marketing and sales"></cds-filter-panel-input-select>
-            <cds-filter-panel-input-select header-value="Supply chain management" title="Supply chain management"></cds-filter-panel-input-select>
-          </cds-filter-group-item>
-          <cds-filter-group-item title="Deployment types">
-            <cds-filter-panel-checkbox value="On-premisis">On-premisis</cds-filter-panel-checkbox>
-            <cds-filter-panel-checkbox value="SaaS">SaaS</cds-filter-panel-checkbox>
-          </cds-filter-group-item>
-        </cds-filter-group>
-      </cds-filter-panel-composite>
-        </div>
-      </div>
-    </div>
-  </body>
-</html>
diff --git a/packages/web-components/examples/codesandbox/components/filter-panel/sandbox.config.json b/packages/web-components/examples/codesandbox/components/filter-panel/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components/filter-panel/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components/footer-language-only/.babelrc b/packages/web-components/examples/codesandbox/components/footer-language-only/.babelrc
deleted file mode 100644
index 74450eed94b..00000000000
--- a/packages/web-components/examples/codesandbox/components/footer-language-only/.babelrc
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "presets": [
-    [
-      "@babel/preset-env",
-      {
-        "modules": false,
-        "targets": [
-          "last 1 version",
-          "Firefox ESR",
-          "not opera > 0",
-          "not op_mini > 0",
-          "not op_mob > 0",
-          "not android > 0",
-          "not edge > 0",
-          "not ie > 0",
-          "not ie_mob > 0"
-        ]
-      }
-    ]
-  ],
-  "plugins": [["@babel/plugin-transform-runtime", { "version": "7.3.0" }]]
-}
diff --git a/packages/web-components/examples/codesandbox/components/footer-language-only/sandbox.config.json b/packages/web-components/examples/codesandbox/components/footer-language-only/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components/footer-language-only/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components/footer/.babelrc b/packages/web-components/examples/codesandbox/components/footer/.babelrc
deleted file mode 100644
index 74450eed94b..00000000000
--- a/packages/web-components/examples/codesandbox/components/footer/.babelrc
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "presets": [
-    [
-      "@babel/preset-env",
-      {
-        "modules": false,
-        "targets": [
-          "last 1 version",
-          "Firefox ESR",
-          "not opera > 0",
-          "not op_mini > 0",
-          "not op_mob > 0",
-          "not android > 0",
-          "not edge > 0",
-          "not ie > 0",
-          "not ie_mob > 0"
-        ]
-      }
-    ]
-  ],
-  "plugins": [["@babel/plugin-transform-runtime", { "version": "7.3.0" }]]
-}
diff --git a/packages/web-components/examples/codesandbox/components/footer/sandbox.config.json b/packages/web-components/examples/codesandbox/components/footer/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components/footer/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components/global-banner/.babelrc b/packages/web-components/examples/codesandbox/components/global-banner/.babelrc
deleted file mode 100644
index 74450eed94b..00000000000
--- a/packages/web-components/examples/codesandbox/components/global-banner/.babelrc
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "presets": [
-    [
-      "@babel/preset-env",
-      {
-        "modules": false,
-        "targets": [
-          "last 1 version",
-          "Firefox ESR",
-          "not opera > 0",
-          "not op_mini > 0",
-          "not op_mob > 0",
-          "not android > 0",
-          "not edge > 0",
-          "not ie > 0",
-          "not ie_mob > 0"
-        ]
-      }
-    ]
-  ],
-  "plugins": [["@babel/plugin-transform-runtime", { "version": "7.3.0" }]]
-}
diff --git a/packages/web-components/examples/codesandbox/components/global-banner/sandbox.config.json b/packages/web-components/examples/codesandbox/components/global-banner/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components/global-banner/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components/horizontal-rule/.babelrc b/packages/web-components/examples/codesandbox/components/horizontal-rule/.babelrc
deleted file mode 100644
index 74450eed94b..00000000000
--- a/packages/web-components/examples/codesandbox/components/horizontal-rule/.babelrc
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "presets": [
-    [
-      "@babel/preset-env",
-      {
-        "modules": false,
-        "targets": [
-          "last 1 version",
-          "Firefox ESR",
-          "not opera > 0",
-          "not op_mini > 0",
-          "not op_mob > 0",
-          "not android > 0",
-          "not edge > 0",
-          "not ie > 0",
-          "not ie_mob > 0"
-        ]
-      }
-    ]
-  ],
-  "plugins": [["@babel/plugin-transform-runtime", { "version": "7.3.0" }]]
-}
diff --git a/packages/web-components/examples/codesandbox/components/horizontal-rule/sandbox.config.json b/packages/web-components/examples/codesandbox/components/horizontal-rule/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components/horizontal-rule/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components/image/.babelrc b/packages/web-components/examples/codesandbox/components/image/.babelrc
deleted file mode 100644
index 74450eed94b..00000000000
--- a/packages/web-components/examples/codesandbox/components/image/.babelrc
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "presets": [
-    [
-      "@babel/preset-env",
-      {
-        "modules": false,
-        "targets": [
-          "last 1 version",
-          "Firefox ESR",
-          "not opera > 0",
-          "not op_mini > 0",
-          "not op_mob > 0",
-          "not android > 0",
-          "not edge > 0",
-          "not ie > 0",
-          "not ie_mob > 0"
-        ]
-      }
-    ]
-  ],
-  "plugins": [["@babel/plugin-transform-runtime", { "version": "7.3.0" }]]
-}
diff --git a/packages/web-components/examples/codesandbox/components/image/sandbox.config.json b/packages/web-components/examples/codesandbox/components/image/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components/image/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components/in-page-banner/.babelrc b/packages/web-components/examples/codesandbox/components/in-page-banner/.babelrc
deleted file mode 100644
index 74450eed94b..00000000000
--- a/packages/web-components/examples/codesandbox/components/in-page-banner/.babelrc
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "presets": [
-    [
-      "@babel/preset-env",
-      {
-        "modules": false,
-        "targets": [
-          "last 1 version",
-          "Firefox ESR",
-          "not opera > 0",
-          "not op_mini > 0",
-          "not op_mob > 0",
-          "not android > 0",
-          "not edge > 0",
-          "not ie > 0",
-          "not ie_mob > 0"
-        ]
-      }
-    ]
-  ],
-  "plugins": [["@babel/plugin-transform-runtime", { "version": "7.3.0" }]]
-}
diff --git a/packages/web-components/examples/codesandbox/components/in-page-banner/sandbox.config.json b/packages/web-components/examples/codesandbox/components/in-page-banner/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components/in-page-banner/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components/leadspace-block/.babelrc b/packages/web-components/examples/codesandbox/components/leadspace-block/.babelrc
deleted file mode 100644
index 74450eed94b..00000000000
--- a/packages/web-components/examples/codesandbox/components/leadspace-block/.babelrc
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "presets": [
-    [
-      "@babel/preset-env",
-      {
-        "modules": false,
-        "targets": [
-          "last 1 version",
-          "Firefox ESR",
-          "not opera > 0",
-          "not op_mini > 0",
-          "not op_mob > 0",
-          "not android > 0",
-          "not edge > 0",
-          "not ie > 0",
-          "not ie_mob > 0"
-        ]
-      }
-    ]
-  ],
-  "plugins": [["@babel/plugin-transform-runtime", { "version": "7.3.0" }]]
-}
diff --git a/packages/web-components/examples/codesandbox/components/leadspace-block/sandbox.config.json b/packages/web-components/examples/codesandbox/components/leadspace-block/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components/leadspace-block/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components/leadspace-with-search/.babelrc b/packages/web-components/examples/codesandbox/components/leadspace-with-search/.babelrc
deleted file mode 100644
index 74450eed94b..00000000000
--- a/packages/web-components/examples/codesandbox/components/leadspace-with-search/.babelrc
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "presets": [
-    [
-      "@babel/preset-env",
-      {
-        "modules": false,
-        "targets": [
-          "last 1 version",
-          "Firefox ESR",
-          "not opera > 0",
-          "not op_mini > 0",
-          "not op_mob > 0",
-          "not android > 0",
-          "not edge > 0",
-          "not ie > 0",
-          "not ie_mob > 0"
-        ]
-      }
-    ]
-  ],
-  "plugins": [["@babel/plugin-transform-runtime", { "version": "7.3.0" }]]
-}
diff --git a/packages/web-components/examples/codesandbox/components/leadspace-with-search/sandbox.config.json b/packages/web-components/examples/codesandbox/components/leadspace-with-search/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components/leadspace-with-search/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components/leadspace/.babelrc b/packages/web-components/examples/codesandbox/components/leadspace/.babelrc
deleted file mode 100644
index 74450eed94b..00000000000
--- a/packages/web-components/examples/codesandbox/components/leadspace/.babelrc
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "presets": [
-    [
-      "@babel/preset-env",
-      {
-        "modules": false,
-        "targets": [
-          "last 1 version",
-          "Firefox ESR",
-          "not opera > 0",
-          "not op_mini > 0",
-          "not op_mob > 0",
-          "not android > 0",
-          "not edge > 0",
-          "not ie > 0",
-          "not ie_mob > 0"
-        ]
-      }
-    ]
-  ],
-  "plugins": [["@babel/plugin-transform-runtime", { "version": "7.3.0" }]]
-}
diff --git a/packages/web-components/examples/codesandbox/components/leadspace/sandbox.config.json b/packages/web-components/examples/codesandbox/components/leadspace/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components/leadspace/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components/leaving-ibm/.babelrc b/packages/web-components/examples/codesandbox/components/leaving-ibm/.babelrc
deleted file mode 100644
index 74450eed94b..00000000000
--- a/packages/web-components/examples/codesandbox/components/leaving-ibm/.babelrc
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "presets": [
-    [
-      "@babel/preset-env",
-      {
-        "modules": false,
-        "targets": [
-          "last 1 version",
-          "Firefox ESR",
-          "not opera > 0",
-          "not op_mini > 0",
-          "not op_mob > 0",
-          "not android > 0",
-          "not edge > 0",
-          "not ie > 0",
-          "not ie_mob > 0"
-        ]
-      }
-    ]
-  ],
-  "plugins": [["@babel/plugin-transform-runtime", { "version": "7.3.0" }]]
-}
diff --git a/packages/web-components/examples/codesandbox/components/leaving-ibm/sandbox.config.json b/packages/web-components/examples/codesandbox/components/leaving-ibm/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components/leaving-ibm/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components/lightbox-media-viewer/.babelrc b/packages/web-components/examples/codesandbox/components/lightbox-media-viewer/.babelrc
deleted file mode 100644
index 74450eed94b..00000000000
--- a/packages/web-components/examples/codesandbox/components/lightbox-media-viewer/.babelrc
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "presets": [
-    [
-      "@babel/preset-env",
-      {
-        "modules": false,
-        "targets": [
-          "last 1 version",
-          "Firefox ESR",
-          "not opera > 0",
-          "not op_mini > 0",
-          "not op_mob > 0",
-          "not android > 0",
-          "not edge > 0",
-          "not ie > 0",
-          "not ie_mob > 0"
-        ]
-      }
-    ]
-  ],
-  "plugins": [["@babel/plugin-transform-runtime", { "version": "7.3.0" }]]
-}
diff --git a/packages/web-components/examples/codesandbox/components/lightbox-media-viewer/sandbox.config.json b/packages/web-components/examples/codesandbox/components/lightbox-media-viewer/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components/lightbox-media-viewer/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components/link-list-section/.babelrc b/packages/web-components/examples/codesandbox/components/link-list-section/.babelrc
deleted file mode 100644
index 74450eed94b..00000000000
--- a/packages/web-components/examples/codesandbox/components/link-list-section/.babelrc
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "presets": [
-    [
-      "@babel/preset-env",
-      {
-        "modules": false,
-        "targets": [
-          "last 1 version",
-          "Firefox ESR",
-          "not opera > 0",
-          "not op_mini > 0",
-          "not op_mob > 0",
-          "not android > 0",
-          "not edge > 0",
-          "not ie > 0",
-          "not ie_mob > 0"
-        ]
-      }
-    ]
-  ],
-  "plugins": [["@babel/plugin-transform-runtime", { "version": "7.3.0" }]]
-}
diff --git a/packages/web-components/examples/codesandbox/components/link-list-section/sandbox.config.json b/packages/web-components/examples/codesandbox/components/link-list-section/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components/link-list-section/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components/link-list/.babelrc b/packages/web-components/examples/codesandbox/components/link-list/.babelrc
deleted file mode 100644
index 74450eed94b..00000000000
--- a/packages/web-components/examples/codesandbox/components/link-list/.babelrc
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "presets": [
-    [
-      "@babel/preset-env",
-      {
-        "modules": false,
-        "targets": [
-          "last 1 version",
-          "Firefox ESR",
-          "not opera > 0",
-          "not op_mini > 0",
-          "not op_mob > 0",
-          "not android > 0",
-          "not edge > 0",
-          "not ie > 0",
-          "not ie_mob > 0"
-        ]
-      }
-    ]
-  ],
-  "plugins": [["@babel/plugin-transform-runtime", { "version": "7.3.0" }]]
-}
diff --git a/packages/web-components/examples/codesandbox/components/link-list/sandbox.config.json b/packages/web-components/examples/codesandbox/components/link-list/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components/link-list/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components/link-with-icon/.babelrc b/packages/web-components/examples/codesandbox/components/link-with-icon/.babelrc
deleted file mode 100644
index 74450eed94b..00000000000
--- a/packages/web-components/examples/codesandbox/components/link-with-icon/.babelrc
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "presets": [
-    [
-      "@babel/preset-env",
-      {
-        "modules": false,
-        "targets": [
-          "last 1 version",
-          "Firefox ESR",
-          "not opera > 0",
-          "not op_mini > 0",
-          "not op_mob > 0",
-          "not android > 0",
-          "not edge > 0",
-          "not ie > 0",
-          "not ie_mob > 0"
-        ]
-      }
-    ]
-  ],
-  "plugins": [["@babel/plugin-transform-runtime", { "version": "7.3.0" }]]
-}
diff --git a/packages/web-components/examples/codesandbox/components/link-with-icon/sandbox.config.json b/packages/web-components/examples/codesandbox/components/link-with-icon/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components/link-with-icon/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components/locale-modal/.babelrc b/packages/web-components/examples/codesandbox/components/locale-modal/.babelrc
deleted file mode 100644
index 74450eed94b..00000000000
--- a/packages/web-components/examples/codesandbox/components/locale-modal/.babelrc
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "presets": [
-    [
-      "@babel/preset-env",
-      {
-        "modules": false,
-        "targets": [
-          "last 1 version",
-          "Firefox ESR",
-          "not opera > 0",
-          "not op_mini > 0",
-          "not op_mob > 0",
-          "not android > 0",
-          "not edge > 0",
-          "not ie > 0",
-          "not ie_mob > 0"
-        ]
-      }
-    ]
-  ],
-  "plugins": [["@babel/plugin-transform-runtime", { "version": "7.3.0" }]]
-}
diff --git a/packages/web-components/examples/codesandbox/components/locale-modal/sandbox.config.json b/packages/web-components/examples/codesandbox/components/locale-modal/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components/locale-modal/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components/logo-grid/.babelrc b/packages/web-components/examples/codesandbox/components/logo-grid/.babelrc
deleted file mode 100644
index 74450eed94b..00000000000
--- a/packages/web-components/examples/codesandbox/components/logo-grid/.babelrc
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "presets": [
-    [
-      "@babel/preset-env",
-      {
-        "modules": false,
-        "targets": [
-          "last 1 version",
-          "Firefox ESR",
-          "not opera > 0",
-          "not op_mini > 0",
-          "not op_mob > 0",
-          "not android > 0",
-          "not edge > 0",
-          "not ie > 0",
-          "not ie_mob > 0"
-        ]
-      }
-    ]
-  ],
-  "plugins": [["@babel/plugin-transform-runtime", { "version": "7.3.0" }]]
-}
diff --git a/packages/web-components/examples/codesandbox/components/logo-grid/sandbox.config.json b/packages/web-components/examples/codesandbox/components/logo-grid/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components/logo-grid/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components/masthead-l1/.babelrc b/packages/web-components/examples/codesandbox/components/masthead-l1/.babelrc
deleted file mode 100644
index 74450eed94b..00000000000
--- a/packages/web-components/examples/codesandbox/components/masthead-l1/.babelrc
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "presets": [
-    [
-      "@babel/preset-env",
-      {
-        "modules": false,
-        "targets": [
-          "last 1 version",
-          "Firefox ESR",
-          "not opera > 0",
-          "not op_mini > 0",
-          "not op_mob > 0",
-          "not android > 0",
-          "not edge > 0",
-          "not ie > 0",
-          "not ie_mob > 0"
-        ]
-      }
-    ]
-  ],
-  "plugins": [["@babel/plugin-transform-runtime", { "version": "7.3.0" }]]
-}
diff --git a/packages/web-components/examples/codesandbox/components/masthead-l1/sandbox.config.json b/packages/web-components/examples/codesandbox/components/masthead-l1/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components/masthead-l1/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components/masthead/.babelrc b/packages/web-components/examples/codesandbox/components/masthead/.babelrc
deleted file mode 100644
index 74450eed94b..00000000000
--- a/packages/web-components/examples/codesandbox/components/masthead/.babelrc
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "presets": [
-    [
-      "@babel/preset-env",
-      {
-        "modules": false,
-        "targets": [
-          "last 1 version",
-          "Firefox ESR",
-          "not opera > 0",
-          "not op_mini > 0",
-          "not op_mob > 0",
-          "not android > 0",
-          "not edge > 0",
-          "not ie > 0",
-          "not ie_mob > 0"
-        ]
-      }
-    ]
-  ],
-  "plugins": [["@babel/plugin-transform-runtime", { "version": "7.3.0" }]]
-}
diff --git a/packages/web-components/examples/codesandbox/components/masthead/sandbox.config.json b/packages/web-components/examples/codesandbox/components/masthead/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components/masthead/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components/pricing-table/.babelrc b/packages/web-components/examples/codesandbox/components/pricing-table/.babelrc
deleted file mode 100644
index 74450eed94b..00000000000
--- a/packages/web-components/examples/codesandbox/components/pricing-table/.babelrc
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "presets": [
-    [
-      "@babel/preset-env",
-      {
-        "modules": false,
-        "targets": [
-          "last 1 version",
-          "Firefox ESR",
-          "not opera > 0",
-          "not op_mini > 0",
-          "not op_mob > 0",
-          "not android > 0",
-          "not edge > 0",
-          "not ie > 0",
-          "not ie_mob > 0"
-        ]
-      }
-    ]
-  ],
-  "plugins": [["@babel/plugin-transform-runtime", { "version": "7.3.0" }]]
-}
diff --git a/packages/web-components/examples/codesandbox/components/pricing-table/cdn.html b/packages/web-components/examples/codesandbox/components/pricing-table/cdn.html
deleted file mode 100644
index a47f73533dc..00000000000
--- a/packages/web-components/examples/codesandbox/components/pricing-table/cdn.html
+++ /dev/null
@@ -1,111 +0,0 @@
-<!--
-@license
-Copyright IBM Corp. 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.
--->
-
-<html>
-<head>
-  <title>@carbon/ibmdotcom-web-components example</title>
-  <meta charset="UTF-8"/>
-  <link rel="stylesheet"
-        href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
-  <style type="text/css">
-    /* Suppress custom element until styles are loaded */
-    cds-pricing-table:not(:defined) {
-      display: none;
-    }
-
-    body {
-      padding: 2rem;
-    }
-  </style>
-  <script type="module"
-          src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/pricing-table.min.js"></script>
-</head>
-<body>
-<div class="cds--grid">
-  <div class="cds--row">
-    <div class="cds--col-sm-4 cds--col-lg-12">
-      <cds-pricing-table highlight-column="2" highlight-label="Featured">
-        <cds-pricing-table-head>
-          <cds-pricing-table-header-row>
-            <cds-pricing-table-header-cell type="simple">Optional table header</cds-pricing-table-header-cell>
-            <cds-pricing-table-header-cell>
-              <cds-pricing-table-header-cell-headline>Variation 1</cds-pricing-table-header-cell-headline>
-              <cds-pricing-table-header-cell-caption>Starting at $X.XX per user</cds-pricing-table-header-cell-caption>
-              <cds-pricing-table-header-cell-tag href="https://www.carbondesignsystem.com/all-about-carbon/what-is-carbon/">Merchandising</cds-pricing-table-header-cell-tag>
-              <cds-pricing-table-header-cell-description>
-                Lorem ipsum dolor sit amet consectetur.
-                <bx-unordered-list>
-                  <bx-list-item>Lorem ipsum dolor</bx-list-item>
-                  <bx-list-item>sit amet</bx-list-item>
-                  <bx-list-item>consectetur retention adispiscing elit sed do eiusm Eiusmod tempor</bx-list-item>
-                </bx-unordered-list>
-              </cds-pricing-table-header-cell-description>
-              <cds-pricing-table-header-cell-cta cta-type="local" href="https://www.carbondesignsystem.com/all-about-carbon/what-is-carbon/">Call to action</cds-pricing-table-header-cell-cta>
-            </cds-pricing-table-header-cell>
-            <cds-pricing-table-header-cell>
-              <cds-pricing-table-header-cell-headline>Variation 2</cds-pricing-table-header-cell-headline>
-              <cds-pricing-table-header-cell-caption>Starting at $X.XX per user</cds-pricing-table-header-cell-caption>
-              <cds-pricing-table-header-cell-description>
-                Lorem ipsum dolor sit amet consectetur.
-                <bx-unordered-list>
-                  <bx-list-item>Lorem ipsum dolor</bx-list-item>
-                  <bx-list-item>sit amet</bx-list-item>
-                  <bx-list-item>consectetur retention adispiscing elit sed do eiusm Eiusmod tempor</bx-list-item>
-                </bx-unordered-list>
-              </cds-pricing-table-header-cell-description>
-              <cds-pricing-table-header-cell-cta cta-type="local" href="https://www.carbondesignsystem.com/all-about-carbon/what-is-carbon/">Call to action</cds-pricing-table-header-cell-cta>
-            </cds-pricing-table-header-cell>
-          </cds-pricing-table-header-row>
-        </cds-pricing-table-head>
-        <cds-pricing-table-body>
-          <cds-pricing-table-row>
-            <cds-pricing-table-header-cell scope="row">Row 1</cds-pricing-table-header-cell>
-            <cds-pricing-table-cell icon="checkmark">
-              <cds-pricing-table-cell-annotation>
-                Sed quis neque ultrices, convallis augue non, scelerisque massa.
-              </cds-pricing-table-cell-annotation>
-            </cds-pricing-table-cell>
-            <cds-pricing-table-cell>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum
-              augue. Aenean posuere sem vel euismod dignissim.
-              <cds-pricing-table-cell-annotation>
-                Sed quis neque ultrices, convallis augue non, scelerisque massa.
-              </cds-pricing-table-cell-annotation>
-            </cds-pricing-table-cell>
-          </cds-pricing-table-row>
-          <cds-pricing-table-row>
-            <cds-pricing-table-header-cell scope="row">Row 2</cds-pricing-table-header-cell>
-            <cds-pricing-table-cell icon="checkmark">
-            </cds-pricing-table-cell>
-            <cds-pricing-table-cell>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum
-              augue. Aenean posuere sem vel euismod dignissim.
-            </cds-pricing-table-cell>
-          </cds-pricing-table-row>
-          <cds-pricing-table-row>
-            <cds-pricing-table-header-cell scope="row">Row 3</cds-pricing-table-header-cell>
-            <cds-pricing-table-cell>
-              <cds-pricing-table-cell-annotation>
-                Sed quis neque ultrices, convallis augue non, scelerisque massa.
-              </cds-pricing-table-cell-annotation>
-            </cds-pricing-table-cell>
-            <cds-pricing-table-cell>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum
-              augue. Aenean posuere sem vel euismod dignissim.
-              <cds-pricing-table-cell-annotation>
-                Sed quis neque ultrices, convallis augue non, scelerisque massa.
-              </cds-pricing-table-cell-annotation>
-            </cds-pricing-table-cell>
-          </cds-pricing-table-row>
-        </cds-pricing-table-body>
-      </cds-pricing-table>
-    </div>
-  </div>
-</div>
-</body>
-</html>
diff --git a/packages/web-components/examples/codesandbox/components/pricing-table/index.html b/packages/web-components/examples/codesandbox/components/pricing-table/index.html
deleted file mode 100644
index 8afd49b878f..00000000000
--- a/packages/web-components/examples/codesandbox/components/pricing-table/index.html
+++ /dev/null
@@ -1,109 +0,0 @@
-<!--
-@license
-Copyright IBM Corp. 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.
--->
-
-<html>
-<head>
-  <title>@carbon/ibmdotcom-web-components example</title>
-  <meta charset="UTF-8"/>
-  <link rel="stylesheet"
-        href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
-    /* Suppress custom element until styles are loaded */
-    cds-pricing-table:not(:defined) {
-      display: none;
-    }
-
-    body {
-      padding: 2rem;
-    }
-  </style>
-  <script src="src/index.js"></script>
-</head>
-<body>
-<div class="cds--grid">
-  <div class="cds--row">
-    <div class="cds--col-sm-4 cds--col-lg-12">
-      <cds-pricing-table highlight-column="2" highlight-label="Featured">
-        <cds-pricing-table-head>
-          <cds-pricing-table-header-row>
-            <cds-pricing-table-header-cell type="simple">Optional table header</cds-pricing-table-header-cell>
-            <cds-pricing-table-header-cell>
-              <cds-pricing-table-header-cell-headline>Variation 1</cds-pricing-table-header-cell-headline>
-              <cds-pricing-table-header-cell-caption>Starting at $X.XX per user</cds-pricing-table-header-cell-caption>
-              <cds-pricing-table-header-cell-tag href="https://www.carbondesignsystem.com/all-about-carbon/what-is-carbon/">Merchandising</cds-pricing-table-header-cell-tag>
-              <cds-pricing-table-header-cell-description>
-                Lorem ipsum dolor sit amet consectetur.
-                <bx-unordered-list>
-                  <bx-list-item>Lorem ipsum dolor</bx-list-item>
-                  <bx-list-item>sit amet</bx-list-item>
-                  <bx-list-item>consectetur retention adispiscing elit sed do eiusm Eiusmod tempor</bx-list-item>
-                </bx-unordered-list>
-              </cds-pricing-table-header-cell-description>
-              <cds-pricing-table-header-cell-cta cta-type="local" href="https://www.carbondesignsystem.com/all-about-carbon/what-is-carbon/">Call to action</cds-pricing-table-header-cell-cta>
-            </cds-pricing-table-header-cell>
-            <cds-pricing-table-header-cell>
-              <cds-pricing-table-header-cell-headline>Variation 2</cds-pricing-table-header-cell-headline>
-              <cds-pricing-table-header-cell-caption>Starting at $X.XX per user</cds-pricing-table-header-cell-caption>
-              <cds-pricing-table-header-cell-description>
-                Lorem ipsum dolor sit amet consectetur.
-                <bx-unordered-list>
-                  <bx-list-item>Lorem ipsum dolor</bx-list-item>
-                  <bx-list-item>sit amet</bx-list-item>
-                  <bx-list-item>consectetur retention adispiscing elit sed do eiusm Eiusmod tempor</bx-list-item>
-                </bx-unordered-list>
-              </cds-pricing-table-header-cell-description>
-              <cds-pricing-table-header-cell-cta cta-type="local" href="https://www.carbondesignsystem.com/all-about-carbon/what-is-carbon/">Call to action</cds-pricing-table-header-cell-cta>
-            </cds-pricing-table-header-cell>
-          </cds-pricing-table-header-row>
-        </cds-pricing-table-head>
-        <cds-pricing-table-body>
-          <cds-pricing-table-row>
-            <cds-pricing-table-header-cell scope="row">Row 1</cds-pricing-table-header-cell>
-            <cds-pricing-table-cell icon="checkmark">
-              <cds-pricing-table-cell-annotation>
-                Sed quis neque ultrices, convallis augue non, scelerisque massa.
-              </cds-pricing-table-cell-annotation>
-            </cds-pricing-table-cell>
-            <cds-pricing-table-cell>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum
-              augue. Aenean posuere sem vel euismod dignissim.
-              <cds-pricing-table-cell-annotation>
-                Sed quis neque ultrices, convallis augue non, scelerisque massa.
-              </cds-pricing-table-cell-annotation>
-            </cds-pricing-table-cell>
-          </cds-pricing-table-row>
-          <cds-pricing-table-row>
-            <cds-pricing-table-header-cell scope="row">Row 2</cds-pricing-table-header-cell>
-            <cds-pricing-table-cell icon="checkmark">
-            </cds-pricing-table-cell>
-            <cds-pricing-table-cell>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum
-              augue. Aenean posuere sem vel euismod dignissim.
-            </cds-pricing-table-cell>
-          </cds-pricing-table-row>
-          <cds-pricing-table-row>
-            <cds-pricing-table-header-cell scope="row">Row 3</cds-pricing-table-header-cell>
-            <cds-pricing-table-cell>
-              <cds-pricing-table-cell-annotation>
-                Sed quis neque ultrices, convallis augue non, scelerisque massa.
-              </cds-pricing-table-cell-annotation>
-            </cds-pricing-table-cell>
-            <cds-pricing-table-cell>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum
-              augue. Aenean posuere sem vel euismod dignissim.
-              <cds-pricing-table-cell-annotation>
-                Sed quis neque ultrices, convallis augue non, scelerisque massa.
-              </cds-pricing-table-cell-annotation>
-            </cds-pricing-table-cell>
-          </cds-pricing-table-row>
-        </cds-pricing-table-body>
-      </cds-pricing-table>
-    </div>
-  </div>
-</div>
-</body>
-</html>
diff --git a/packages/web-components/examples/codesandbox/components/pricing-table/sandbox.config.json b/packages/web-components/examples/codesandbox/components/pricing-table/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components/pricing-table/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components/quote/.babelrc b/packages/web-components/examples/codesandbox/components/quote/.babelrc
deleted file mode 100644
index 74450eed94b..00000000000
--- a/packages/web-components/examples/codesandbox/components/quote/.babelrc
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "presets": [
-    [
-      "@babel/preset-env",
-      {
-        "modules": false,
-        "targets": [
-          "last 1 version",
-          "Firefox ESR",
-          "not opera > 0",
-          "not op_mini > 0",
-          "not op_mob > 0",
-          "not android > 0",
-          "not edge > 0",
-          "not ie > 0",
-          "not ie_mob > 0"
-        ]
-      }
-    ]
-  ],
-  "plugins": [["@babel/plugin-transform-runtime", { "version": "7.3.0" }]]
-}
diff --git a/packages/web-components/examples/codesandbox/components/quote/sandbox.config.json b/packages/web-components/examples/codesandbox/components/quote/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components/quote/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components/scroll-animations/.babelrc b/packages/web-components/examples/codesandbox/components/scroll-animations/.babelrc
deleted file mode 100644
index 74450eed94b..00000000000
--- a/packages/web-components/examples/codesandbox/components/scroll-animations/.babelrc
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "presets": [
-    [
-      "@babel/preset-env",
-      {
-        "modules": false,
-        "targets": [
-          "last 1 version",
-          "Firefox ESR",
-          "not opera > 0",
-          "not op_mini > 0",
-          "not op_mob > 0",
-          "not android > 0",
-          "not edge > 0",
-          "not ie > 0",
-          "not ie_mob > 0"
-        ]
-      }
-    ]
-  ],
-  "plugins": [["@babel/plugin-transform-runtime", { "version": "7.3.0" }]]
-}
diff --git a/packages/web-components/examples/codesandbox/components/scroll-animations/sandbox.config.json b/packages/web-components/examples/codesandbox/components/scroll-animations/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components/scroll-animations/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components/search-with-typeahead/.babelrc b/packages/web-components/examples/codesandbox/components/search-with-typeahead/.babelrc
deleted file mode 100644
index 74450eed94b..00000000000
--- a/packages/web-components/examples/codesandbox/components/search-with-typeahead/.babelrc
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "presets": [
-    [
-      "@babel/preset-env",
-      {
-        "modules": false,
-        "targets": [
-          "last 1 version",
-          "Firefox ESR",
-          "not opera > 0",
-          "not op_mini > 0",
-          "not op_mob > 0",
-          "not android > 0",
-          "not edge > 0",
-          "not ie > 0",
-          "not ie_mob > 0"
-        ]
-      }
-    ]
-  ],
-  "plugins": [["@babel/plugin-transform-runtime", { "version": "7.3.0" }]]
-}
diff --git a/packages/web-components/examples/codesandbox/components/search-with-typeahead/sandbox.config.json b/packages/web-components/examples/codesandbox/components/search-with-typeahead/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components/search-with-typeahead/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components/structured-list/.babelrc b/packages/web-components/examples/codesandbox/components/structured-list/.babelrc
deleted file mode 100644
index 74450eed94b..00000000000
--- a/packages/web-components/examples/codesandbox/components/structured-list/.babelrc
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "presets": [
-    [
-      "@babel/preset-env",
-      {
-        "modules": false,
-        "targets": [
-          "last 1 version",
-          "Firefox ESR",
-          "not opera > 0",
-          "not op_mini > 0",
-          "not op_mob > 0",
-          "not android > 0",
-          "not edge > 0",
-          "not ie > 0",
-          "not ie_mob > 0"
-        ]
-      }
-    ]
-  ],
-  "plugins": [["@babel/plugin-transform-runtime", { "version": "7.3.0" }]]
-}
diff --git a/packages/web-components/examples/codesandbox/components/structured-list/sandbox.config.json b/packages/web-components/examples/codesandbox/components/structured-list/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components/structured-list/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components/table-of-contents/.babelrc b/packages/web-components/examples/codesandbox/components/table-of-contents/.babelrc
deleted file mode 100644
index 74450eed94b..00000000000
--- a/packages/web-components/examples/codesandbox/components/table-of-contents/.babelrc
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "presets": [
-    [
-      "@babel/preset-env",
-      {
-        "modules": false,
-        "targets": [
-          "last 1 version",
-          "Firefox ESR",
-          "not opera > 0",
-          "not op_mini > 0",
-          "not op_mob > 0",
-          "not android > 0",
-          "not edge > 0",
-          "not ie > 0",
-          "not ie_mob > 0"
-        ]
-      }
-    ]
-  ],
-  "plugins": [["@babel/plugin-transform-runtime", { "version": "7.3.0" }]]
-}
diff --git a/packages/web-components/examples/codesandbox/components/table-of-contents/sandbox.config.json b/packages/web-components/examples/codesandbox/components/table-of-contents/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components/table-of-contents/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components/tabs-extended-media/.babelrc b/packages/web-components/examples/codesandbox/components/tabs-extended-media/.babelrc
deleted file mode 100644
index 74450eed94b..00000000000
--- a/packages/web-components/examples/codesandbox/components/tabs-extended-media/.babelrc
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "presets": [
-    [
-      "@babel/preset-env",
-      {
-        "modules": false,
-        "targets": [
-          "last 1 version",
-          "Firefox ESR",
-          "not opera > 0",
-          "not op_mini > 0",
-          "not op_mob > 0",
-          "not android > 0",
-          "not edge > 0",
-          "not ie > 0",
-          "not ie_mob > 0"
-        ]
-      }
-    ]
-  ],
-  "plugins": [["@babel/plugin-transform-runtime", { "version": "7.3.0" }]]
-}
diff --git a/packages/web-components/examples/codesandbox/components/tabs-extended-media/sandbox.config.json b/packages/web-components/examples/codesandbox/components/tabs-extended-media/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components/tabs-extended-media/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components/tabs-extended/.babelrc b/packages/web-components/examples/codesandbox/components/tabs-extended/.babelrc
deleted file mode 100644
index 74450eed94b..00000000000
--- a/packages/web-components/examples/codesandbox/components/tabs-extended/.babelrc
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "presets": [
-    [
-      "@babel/preset-env",
-      {
-        "modules": false,
-        "targets": [
-          "last 1 version",
-          "Firefox ESR",
-          "not opera > 0",
-          "not op_mini > 0",
-          "not op_mob > 0",
-          "not android > 0",
-          "not edge > 0",
-          "not ie > 0",
-          "not ie_mob > 0"
-        ]
-      }
-    ]
-  ],
-  "plugins": [["@babel/plugin-transform-runtime", { "version": "7.3.0" }]]
-}
diff --git a/packages/web-components/examples/codesandbox/components/tabs-extended/sandbox.config.json b/packages/web-components/examples/codesandbox/components/tabs-extended/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components/tabs-extended/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components/tabs-extended/with-cta-block-item-rows.html b/packages/web-components/examples/codesandbox/components/tabs-extended/with-cta-block-item-rows.html
deleted file mode 100644
index b7446b11658..00000000000
--- a/packages/web-components/examples/codesandbox/components/tabs-extended/with-cta-block-item-rows.html
+++ /dev/null
@@ -1,345 +0,0 @@
-<!--
-@license
-
-Copyright IBM Corp. 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.
--->
-
-<html>
-<head>
-  <title>@carbon/ibmdotcom-web-components example</title>
-  <meta charset="UTF-8"/>
-  <link rel="stylesheet"
-        href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
-  <style type="text/css">
-    /* Suppress custom element until styles are loaded */
-    cds-tabs-extended:not(:defined) {
-      display: none;
-    }
-  </style>
-  <script src="src/with-cta-block-item-rows.js" type="module"></script>
-</head>
-<body>
-  <div class="cds--grid">
-    <div class="cds--row">
-      <div class="cds--col-sm-4">
-        <cds-tabs-extended orientation="horizontal">
-          <cds-tab label="Relational">
-            <cds-cta-block>
-              <cds-content-block-copy size="md">
-                <cds-content-block-paragraph>
-                  Use the relational database type for traditional applications such as enterprise resource planning, customer relationship management and e-commerce, along with ledger and audit forensics.
-                </cds-content-block-paragraph>
-              </cds-content-block-copy>
-              <cds-cta-block-item-row>
-                <cds-cta-block-item>
-                  <cds-content-item-heading>
-                    Db2
-                  </cds-content-item-heading>
-                  <cds-content-item-copy>
-                    <cds-content-item-paragraph>
-                      Cloud
-                    </cds-content-item-paragraph>
-                  </cds-content-item-copy>
-                  <cds-video-cta-container>
-                    <a href="https://www.ibm.com/cloud/db2-on-cloud">
-                      <span class="cds--link-text">IBM Db2 on Cloud</span>
-                      <span class="ibm_icon_arrowright_local"></span>
-                    </a>
-                  </cds-video-cta-container>
-                </cds-cta-block-item>
-                <cds-cta-block-item>
-                  <cds-content-item-heading>
-                  </cds-content-item-heading>
-                  <cds-content-item-copy>
-                    <cds-content-item-paragraph>
-                      Software
-                    </cds-content-item-paragraph>
-                  </cds-content-item-copy>
-                  <cds-video-cta-container>
-                    <a href="https://www.ibm.com/products/db2-database">
-                      <span class="cds--link-text">IBM Db2 Database</span>
-                      <span class="ibm_icon_arrowright_local"></span>
-                    </a>
-                  </cds-video-cta-container>
-                </cds-cta-block-item>
-                <cds-cta-block-item>
-                  <cds-content-item-heading>
-                    PostgreSQL
-                  </cds-content-item-heading>
-                  <cds-content-item-copy>
-                    <cds-content-item-paragraph>
-                      Cloud
-                    </cds-content-item-paragraph>
-                  </cds-content-item-copy>
-                  <cds-video-cta-container>
-                    <a href="https://www.ibm.com/cloud/databases-for-postgresql">
-                      <span class="cds--link-text">IBM Cloud Databases for PostgreSQL</span>
-                      <span class="ibm_icon_arrowright_local"></span>
-                    </a>
-                  </cds-video-cta-container>
-                </cds-cta-block-item>
-              </cds-cta-block-item-row>
-              <cds-cta-block-item-row>
-                <cds-cta-block-item>
-                  <cds-content-item-heading>
-                    Enterprise DB
-                  </cds-content-item-heading>
-                  <cds-content-item-copy>
-                    <cds-content-item-paragraph>
-                      Cloud
-                    </cds-content-item-paragraph>
-                  </cds-content-item-copy>
-                  <cds-video-cta-container>
-                    <a href="https://www.ibm.com/cloud/databases-for-enterprisedb">
-                      <span class="cds--link-text">IBM Cloud Databases for EnterpriseDB</span>
-                      <span class="ibm_icon_arrowright_local"></span>
-                    </a>
-                  </cds-video-cta-container>
-                </cds-cta-block-item>
-                <cds-cta-block-item>
-                  <cds-content-item-heading>
-                  </cds-content-item-heading>
-                  <cds-content-item-copy>
-                    <cds-content-item-paragraph>
-                      Software
-                    </cds-content-item-paragraph>
-                  </cds-content-item-copy>
-                  <cds-video-cta-container>
-                    <a href="https://www.ibm.com/products/postgres-enterprise">
-                      <span class="cds--link-text">EDB Postgres Enterprise and Standard with IBM</span>
-                      <span class="ibm_icon_arrowright_local"></span>
-                    </a>
-                  </cds-video-cta-container>
-                </cds-cta-block-item>
-                <cds-cta-block-item>
-                  <cds-content-item-heading>
-                    MySQL
-                  </cds-content-item-heading>
-                  <cds-content-item-copy>
-                    <cds-content-item-paragraph>
-                      Cloud
-                    </cds-content-item-paragraph>
-                  </cds-content-item-copy>
-                  <cds-video-cta-container>
-                    <a href="https://www.ibm.com/cloud/databases-for-mysql">
-                      <span class="cds--link-text">IBM Cloud Databases for MySQL</span>
-                      <span class="ibm_icon_arrowright_local"></span>
-                    </a>
-                  </cds-video-cta-container>
-                </cds-cta-block-item>
-              </cds-cta-block-item-row>
-              <cds-cta-block-item-row>
-                <cds-cta-block-item>
-                  <cds-content-item-heading>
-                    SingleStore
-                  </cds-content-item-heading>
-                  <cds-content-item-copy>
-                    <cds-content-item-paragraph>
-                      Software
-                    </cds-content-item-paragraph>
-                  </cds-content-item-copy>
-                  <cds-video-cta-container>
-                    <a href="https://www.ibm.com/products/singlestore">
-                      <span class="cds--link-text">SingleStore DB with IBM</span>
-                      <span class="ibm_icon_arrowright_local"></span>
-                    </a>
-                  </cds-video-cta-container>
-                </cds-cta-block-item>
-              </cds-cta-block-item-row>
-            </cds-cta-block>
-          </cds-tab>
-          <cds-tab label="Data warehouse">
-            <cds-cta-block>
-              <cds-content-block-copy size="md">
-                <cds-content-block-paragraph>
-                  Use the data warehouse database type for analytical use cases such as data warehouses, data lakes and business intelligence.
-                </cds-content-block-paragraph>
-              </cds-content-block-copy>
-              <cds-cta-block-item-row>
-                <cds-cta-block-item>
-                  <cds-content-item-heading>
-                    Db2 Warehouse
-                  </cds-content-item-heading>
-                  <cds-content-item-copy>
-                    <cds-content-item-paragraph>
-                      Cloud
-                    </cds-content-item-paragraph>
-                  </cds-content-item-copy>
-                  <cds-video-cta-container>
-                    <a href="https://www.ibm.com/cloud/db2-warehouse-on-cloud">
-                      <span class="cds--link-text">IBM Db2 Data Warehouse on Cloud</span>
-                      <span class="ibm_icon_arrowright_local"></span>
-                    </a>
-                  </cds-video-cta-container>
-                </cds-cta-block-item>
-                <cds-cta-block-item>
-                  <cds-content-item-heading>
-                  </cds-content-item-heading>
-                  <cds-content-item-copy>
-                    <cds-content-item-paragraph>
-                      Software
-                    </cds-content-item-paragraph>
-                  </cds-content-item-copy>
-                  <cds-video-cta-container>
-                    <a href="https://www.ibm.com/products/db2-warehouse">
-                      <span class="cds--link-text">IBM Db2 Data Warehouse</span>
-                      <span class="ibm_icon_arrowright_local"></span>
-                    </a>
-                  </cds-video-cta-container>
-                </cds-cta-block-item>
-                <cds-cta-block-item>
-                  <cds-content-item-heading>
-                    Netezza
-                  </cds-content-item-heading>
-                  <cds-content-item-copy>
-                    <cds-content-item-paragraph>
-                      Software
-                    </cds-content-item-paragraph>
-                  </cds-content-item-copy>
-                  <cds-video-cta-container>
-                    <a href="https://www.ibm.com/products/netezza">
-                      <span class="cds--link-text">IBM Netezza Performance Server</span>
-                      <span class="ibm_icon_arrowright_local"></span>
-                    </a>
-                  </cds-video-cta-container>
-                </cds-cta-block-item>
-              </cds-cta-block-item-row>
-            </cds-cta-block>
-          </cds-tab>
-          <cds-tab label="Document">
-            <cds-cta-block>
-              <cds-content-block-copy size="md">
-                <cds-content-block-paragraph>
-                  Use the document database type for content management, catalogs and user profiles, in addition to web and mobile apps.
-                </cds-content-block-paragraph>
-              </cds-content-block-copy>
-              <cds-cta-block-item-row>
-                <cds-cta-block-item>
-                  <cds-content-item-heading>
-                    MongoDB
-                  </cds-content-item-heading>
-                  <cds-content-item-copy>
-                    <cds-content-item-paragraph>
-                      Cloud
-                    </cds-content-item-paragraph>
-                  </cds-content-item-copy>
-                  <cds-video-cta-container>
-                    <a href="https://www.ibm.com/cloud/databases-for-mongodb">
-                      <span class="cds--link-text">IBM Cloud Databases for MongoDB</span>
-                      <span class="ibm_icon_arrowright_local"></span>
-                    </a>
-                  </cds-video-cta-container>
-                </cds-cta-block-item>
-                <cds-cta-block-item>
-                  <cds-content-item-heading>
-                  </cds-content-item-heading>
-                  <cds-content-item-copy>
-                    <cds-content-item-paragraph>
-                      Software
-                    </cds-content-item-paragraph>
-                  </cds-content-item-copy>
-                  <cds-video-cta-container>
-                    <a href="https://www.ibm.com/products/mongodb-enterprise-advanced">
-                      <span class="cds--link-text">MongoDB Enterprise Advanced with IBM</span>
-                      <span class="ibm_icon_arrowright_local"></span>
-                    </a>
-                  </cds-video-cta-container>
-                </cds-cta-block-item>
-                <cds-cta-block-item>
-                  <cds-content-item-heading>
-                    IBM Cloudant
-                  </cds-content-item-heading>
-                  <cds-content-item-copy>
-                    <cds-content-item-paragraph>
-                      Cloud
-                    </cds-content-item-paragraph>
-                  </cds-content-item-copy>
-                  <cds-video-cta-container>
-                    <a href="https://www.ibm.com/cloud/cloudant">
-                      <span class="cds--link-text">IBM Cloudant</span>
-                      <span class="ibm_icon_arrowright_local"></span>
-                    </a>
-                  </cds-video-cta-container>
-                </cds-cta-block-item>
-              </cds-cta-block-item-row>
-            </cds-cta-block>
-          </cds-tab>
-          <cds-tab label="Key value">
-            <cds-cta-block>
-              <cds-content-block-copy size="md">
-                <cds-content-block-paragraph>
-                  Use the key value database type for distributed systems consensus.
-                </cds-content-block-paragraph>
-              </cds-content-block-copy>
-              <cds-cta-block-item-row>
-                <cds-cta-block-item>
-                  <cds-content-item-heading>
-                    etcd
-                  </cds-content-item-heading>
-                  <cds-content-item-copy>
-                    <cds-content-item-paragraph>
-                      Cloud
-                    </cds-content-item-paragraph>
-                  </cds-content-item-copy>
-                  <cds-video-cta-container>
-                    <a href="https://www.ibm.com/cloud/databases-for-etcd">
-                      <span class="cds--link-text">IBM Databases for etcd</span>
-                      <span class="ibm_icon_arrowright_local"></span>
-                    </a>
-                  </cds-video-cta-container>
-                </cds-cta-block-item>
-              </cds-cta-block-item-row>
-            </cds-cta-block>
-          </cds-tab>
-          <cds-tab label="Wide columnar">
-            <cds-cta-block>
-              <cds-content-block-copy size="md">
-                <cds-content-block-paragraph>
-                  Use the wide columnar database type for high-scale industrial purposes, including logistics, transaction logging, equipment maintenance, fleet management and route optimization.
-                </cds-content-block-paragraph>
-              </cds-content-block-copy>
-              <cds-cta-block-item-row>
-                <cds-cta-block-item>
-                  <cds-content-item-heading>
-                    DataStax
-                  </cds-content-item-heading>
-                  <cds-content-item-copy>
-                    <cds-content-item-paragraph>
-                      Cloud
-                    </cds-content-item-paragraph>
-                  </cds-content-item-copy>
-                  <cds-video-cta-container>
-                    <a href="https://www.ibm.com/cloud/databases-for-datastax?mhsrc=ibmsearch_a&amp;mhq=datastax">
-                      <span class="cds--link-text">IBM Cloud Databases for DataStax</span>
-                      <span class="ibm_icon_arrowright_local"></span>
-                    </a>
-                  </cds-video-cta-container>
-                </cds-cta-block-item>
-                <cds-cta-block-item>
-                  <cds-content-item-heading>
-                  </cds-content-item-heading>
-                  <cds-content-item-copy>
-                    <cds-content-item-paragraph>
-                      Software
-                    </cds-content-item-paragraph>
-                  </cds-content-item-copy>
-                  <cds-video-cta-container>
-                    <a href="https://www.ibm.com/products/datastax-enterprise">
-                      <span class="cds--link-text">DataStax Enterprise with IBM</span>
-                      <span class="ibm_icon_arrowright_local"></span>
-                    </a>
-                  </cds-video-cta-container>
-                </cds-cta-block-item>
-              </cds-cta-block-item-row>
-            </cds-cta-block>
-          </cds-tab>
-        </cds-tabs-extended>
-      </div>
-    </div>
-  </div>
-</body>
-</html>
diff --git a/packages/web-components/examples/codesandbox/components/video-player/.babelrc b/packages/web-components/examples/codesandbox/components/video-player/.babelrc
deleted file mode 100644
index 74450eed94b..00000000000
--- a/packages/web-components/examples/codesandbox/components/video-player/.babelrc
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "presets": [
-    [
-      "@babel/preset-env",
-      {
-        "modules": false,
-        "targets": [
-          "last 1 version",
-          "Firefox ESR",
-          "not opera > 0",
-          "not op_mini > 0",
-          "not op_mob > 0",
-          "not android > 0",
-          "not edge > 0",
-          "not ie > 0",
-          "not ie_mob > 0"
-        ]
-      }
-    ]
-  ],
-  "plugins": [["@babel/plugin-transform-runtime", { "version": "7.3.0" }]]
-}
diff --git a/packages/web-components/examples/codesandbox/components/video-player/sandbox.config.json b/packages/web-components/examples/codesandbox/components/video-player/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components/video-player/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/usage/dotcom-shell-cdn-with-handlebars/sandbox.config.json b/packages/web-components/examples/codesandbox/usage/dotcom-shell-cdn-with-handlebars/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/usage/dotcom-shell-cdn-with-handlebars/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/usage/dotcom-shell-cdn-with-rtl/sandbox.config.json b/packages/web-components/examples/codesandbox/usage/dotcom-shell-cdn-with-rtl/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/usage/dotcom-shell-cdn-with-rtl/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/usage/dotcom-shell-cdn/sandbox.config.json b/packages/web-components/examples/codesandbox/usage/dotcom-shell-cdn/sandbox.config.json
deleted file mode 100644
index 5866ed74455..00000000000
--- a/packages/web-components/examples/codesandbox/usage/dotcom-shell-cdn/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "static"
-}
diff --git a/packages/web-components/examples/codesandbox/usage/markdown-handlebars/sandbox.config.json b/packages/web-components/examples/codesandbox/usage/markdown-handlebars/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/usage/markdown-handlebars/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/usage/react-ssr/sandbox.config.json b/packages/web-components/examples/codesandbox/usage/react-ssr/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/usage/react-ssr/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/usage/v18/sandbox.config.json b/packages/web-components/examples/codesandbox/usage/v18/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/usage/v18/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/usage/webpack-basic/sandbox.config.json b/packages/web-components/examples/codesandbox/usage/webpack-basic/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/usage/webpack-basic/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/usage/webpack-handlebars/sandbox.config.json b/packages/web-components/examples/codesandbox/usage/webpack-handlebars/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/usage/webpack-handlebars/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/usage/webpack-rtl/sandbox.config.json b/packages/web-components/examples/codesandbox/usage/webpack-rtl/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/usage/webpack-rtl/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/usage/webpack-sass/sandbox.config.json b/packages/web-components/examples/codesandbox/usage/webpack-sass/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/usage/webpack-sass/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components-react/background-media/.gitignore b/packages/web-components/examples/stackblitz/components-react/background-media/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/background-media/.gitignore
rename to packages/web-components/examples/stackblitz/components-react/background-media/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components-react/background-media/index.html b/packages/web-components/examples/stackblitz/components-react/background-media/index.html
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/background-media/index.html
rename to packages/web-components/examples/stackblitz/components-react/background-media/index.html
diff --git a/packages/web-components/examples/codesandbox/components-react/background-media/package.json b/packages/web-components/examples/stackblitz/components-react/background-media/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/background-media/package.json
rename to packages/web-components/examples/stackblitz/components-react/background-media/package.json
diff --git a/packages/web-components/examples/codesandbox/components-react/background-media/src/index.css b/packages/web-components/examples/stackblitz/components-react/background-media/src/index.css
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/background-media/src/index.css
rename to packages/web-components/examples/stackblitz/components-react/background-media/src/index.css
diff --git a/packages/web-components/examples/codesandbox/components-react/background-media/src/index.js b/packages/web-components/examples/stackblitz/components-react/background-media/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/background-media/src/index.js
rename to packages/web-components/examples/stackblitz/components-react/background-media/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components-react/background-media/webpack.config.js b/packages/web-components/examples/stackblitz/components-react/background-media/webpack.config.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/background-media/webpack.config.js
rename to packages/web-components/examples/stackblitz/components-react/background-media/webpack.config.js
diff --git a/packages/web-components/examples/codesandbox/components-react/button-group/.gitignore b/packages/web-components/examples/stackblitz/components-react/button-group/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/button-group/.gitignore
rename to packages/web-components/examples/stackblitz/components-react/button-group/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components-react/button-group/index.html b/packages/web-components/examples/stackblitz/components-react/button-group/index.html
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/button-group/index.html
rename to packages/web-components/examples/stackblitz/components-react/button-group/index.html
diff --git a/packages/web-components/examples/codesandbox/components-react/button-group/package.json b/packages/web-components/examples/stackblitz/components-react/button-group/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/button-group/package.json
rename to packages/web-components/examples/stackblitz/components-react/button-group/package.json
diff --git a/packages/web-components/examples/codesandbox/components-react/button-group/src/index.css b/packages/web-components/examples/stackblitz/components-react/button-group/src/index.css
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/button-group/src/index.css
rename to packages/web-components/examples/stackblitz/components-react/button-group/src/index.css
diff --git a/packages/web-components/examples/codesandbox/components-react/button-group/src/index.js b/packages/web-components/examples/stackblitz/components-react/button-group/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/button-group/src/index.js
rename to packages/web-components/examples/stackblitz/components-react/button-group/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components-react/button-group/webpack.config.js b/packages/web-components/examples/stackblitz/components-react/button-group/webpack.config.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/button-group/webpack.config.js
rename to packages/web-components/examples/stackblitz/components-react/button-group/webpack.config.js
diff --git a/packages/web-components/examples/codesandbox/components-react/button/.gitignore b/packages/web-components/examples/stackblitz/components-react/button/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/button/.gitignore
rename to packages/web-components/examples/stackblitz/components-react/button/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components-react/button/index.html b/packages/web-components/examples/stackblitz/components-react/button/index.html
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/button/index.html
rename to packages/web-components/examples/stackblitz/components-react/button/index.html
diff --git a/packages/web-components/examples/codesandbox/components-react/button/package.json b/packages/web-components/examples/stackblitz/components-react/button/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/button/package.json
rename to packages/web-components/examples/stackblitz/components-react/button/package.json
diff --git a/packages/web-components/examples/codesandbox/components-react/button/src/index.css b/packages/web-components/examples/stackblitz/components-react/button/src/index.css
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/button/src/index.css
rename to packages/web-components/examples/stackblitz/components-react/button/src/index.css
diff --git a/packages/web-components/examples/codesandbox/components-react/button/src/index.js b/packages/web-components/examples/stackblitz/components-react/button/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/button/src/index.js
rename to packages/web-components/examples/stackblitz/components-react/button/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components-react/button/webpack.config.js b/packages/web-components/examples/stackblitz/components-react/button/webpack.config.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/button/webpack.config.js
rename to packages/web-components/examples/stackblitz/components-react/button/webpack.config.js
diff --git a/packages/web-components/examples/codesandbox/components-react/callout-quote/.gitignore b/packages/web-components/examples/stackblitz/components-react/callout-quote/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/callout-quote/.gitignore
rename to packages/web-components/examples/stackblitz/components-react/callout-quote/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components-react/callout-quote/index.html b/packages/web-components/examples/stackblitz/components-react/callout-quote/index.html
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/callout-quote/index.html
rename to packages/web-components/examples/stackblitz/components-react/callout-quote/index.html
diff --git a/packages/web-components/examples/codesandbox/components-react/callout-quote/package.json b/packages/web-components/examples/stackblitz/components-react/callout-quote/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/callout-quote/package.json
rename to packages/web-components/examples/stackblitz/components-react/callout-quote/package.json
diff --git a/packages/web-components/examples/codesandbox/components-react/callout-quote/src/index.css b/packages/web-components/examples/stackblitz/components-react/callout-quote/src/index.css
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/callout-quote/src/index.css
rename to packages/web-components/examples/stackblitz/components-react/callout-quote/src/index.css
diff --git a/packages/web-components/examples/codesandbox/components-react/callout-quote/src/index.js b/packages/web-components/examples/stackblitz/components-react/callout-quote/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/callout-quote/src/index.js
rename to packages/web-components/examples/stackblitz/components-react/callout-quote/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components-react/callout-quote/webpack.config.js b/packages/web-components/examples/stackblitz/components-react/callout-quote/webpack.config.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/callout-quote/webpack.config.js
rename to packages/web-components/examples/stackblitz/components-react/callout-quote/webpack.config.js
diff --git a/packages/web-components/examples/codesandbox/components-react/callout-with-media/.gitignore b/packages/web-components/examples/stackblitz/components-react/callout-with-media/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/callout-with-media/.gitignore
rename to packages/web-components/examples/stackblitz/components-react/callout-with-media/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components-react/callout-with-media/index.html b/packages/web-components/examples/stackblitz/components-react/callout-with-media/index.html
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/callout-with-media/index.html
rename to packages/web-components/examples/stackblitz/components-react/callout-with-media/index.html
diff --git a/packages/web-components/examples/codesandbox/components-react/callout-with-media/package.json b/packages/web-components/examples/stackblitz/components-react/callout-with-media/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/callout-with-media/package.json
rename to packages/web-components/examples/stackblitz/components-react/callout-with-media/package.json
diff --git a/packages/web-components/examples/codesandbox/components-react/callout-with-media/src/index.css b/packages/web-components/examples/stackblitz/components-react/callout-with-media/src/index.css
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/callout-with-media/src/index.css
rename to packages/web-components/examples/stackblitz/components-react/callout-with-media/src/index.css
diff --git a/packages/web-components/examples/codesandbox/components-react/callout-with-media/src/index.js b/packages/web-components/examples/stackblitz/components-react/callout-with-media/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/callout-with-media/src/index.js
rename to packages/web-components/examples/stackblitz/components-react/callout-with-media/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components-react/callout-with-media/webpack.config.js b/packages/web-components/examples/stackblitz/components-react/callout-with-media/webpack.config.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/callout-with-media/webpack.config.js
rename to packages/web-components/examples/stackblitz/components-react/callout-with-media/webpack.config.js
diff --git a/packages/web-components/examples/codesandbox/components-react/card-group/.gitignore b/packages/web-components/examples/stackblitz/components-react/card-group/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/card-group/.gitignore
rename to packages/web-components/examples/stackblitz/components-react/card-group/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components-react/card-group/index.html b/packages/web-components/examples/stackblitz/components-react/card-group/index.html
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/card-group/index.html
rename to packages/web-components/examples/stackblitz/components-react/card-group/index.html
diff --git a/packages/web-components/examples/codesandbox/components-react/card-group/package.json b/packages/web-components/examples/stackblitz/components-react/card-group/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/card-group/package.json
rename to packages/web-components/examples/stackblitz/components-react/card-group/package.json
diff --git a/packages/web-components/examples/codesandbox/components-react/card-group/src/index.css b/packages/web-components/examples/stackblitz/components-react/card-group/src/index.css
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/card-group/src/index.css
rename to packages/web-components/examples/stackblitz/components-react/card-group/src/index.css
diff --git a/packages/web-components/examples/codesandbox/components-react/card-group/src/index.js b/packages/web-components/examples/stackblitz/components-react/card-group/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/card-group/src/index.js
rename to packages/web-components/examples/stackblitz/components-react/card-group/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components-react/card-group/webpack.config.js b/packages/web-components/examples/stackblitz/components-react/card-group/webpack.config.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/card-group/webpack.config.js
rename to packages/web-components/examples/stackblitz/components-react/card-group/webpack.config.js
diff --git a/packages/web-components/examples/codesandbox/components-react/card-in-card/.gitignore b/packages/web-components/examples/stackblitz/components-react/card-in-card/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/card-in-card/.gitignore
rename to packages/web-components/examples/stackblitz/components-react/card-in-card/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components-react/card-in-card/index.html b/packages/web-components/examples/stackblitz/components-react/card-in-card/index.html
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/card-in-card/index.html
rename to packages/web-components/examples/stackblitz/components-react/card-in-card/index.html
diff --git a/packages/web-components/examples/codesandbox/components-react/card-in-card/package.json b/packages/web-components/examples/stackblitz/components-react/card-in-card/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/card-in-card/package.json
rename to packages/web-components/examples/stackblitz/components-react/card-in-card/package.json
diff --git a/packages/web-components/examples/codesandbox/components-react/card-in-card/src/index.css b/packages/web-components/examples/stackblitz/components-react/card-in-card/src/index.css
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/card-in-card/src/index.css
rename to packages/web-components/examples/stackblitz/components-react/card-in-card/src/index.css
diff --git a/packages/web-components/examples/codesandbox/components-react/card-in-card/src/index.js b/packages/web-components/examples/stackblitz/components-react/card-in-card/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/card-in-card/src/index.js
rename to packages/web-components/examples/stackblitz/components-react/card-in-card/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components-react/card-in-card/webpack.config.js b/packages/web-components/examples/stackblitz/components-react/card-in-card/webpack.config.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/card-in-card/webpack.config.js
rename to packages/web-components/examples/stackblitz/components-react/card-in-card/webpack.config.js
diff --git a/packages/web-components/examples/codesandbox/components-react/card-link/.gitignore b/packages/web-components/examples/stackblitz/components-react/card-link/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/card-link/.gitignore
rename to packages/web-components/examples/stackblitz/components-react/card-link/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components-react/card-link/index.html b/packages/web-components/examples/stackblitz/components-react/card-link/index.html
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/card-link/index.html
rename to packages/web-components/examples/stackblitz/components-react/card-link/index.html
diff --git a/packages/web-components/examples/codesandbox/components-react/card-link/package.json b/packages/web-components/examples/stackblitz/components-react/card-link/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/card-link/package.json
rename to packages/web-components/examples/stackblitz/components-react/card-link/package.json
diff --git a/packages/web-components/examples/codesandbox/components-react/card-link/src/index.css b/packages/web-components/examples/stackblitz/components-react/card-link/src/index.css
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/card-link/src/index.css
rename to packages/web-components/examples/stackblitz/components-react/card-link/src/index.css
diff --git a/packages/web-components/examples/codesandbox/components-react/card-link/src/index.js b/packages/web-components/examples/stackblitz/components-react/card-link/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/card-link/src/index.js
rename to packages/web-components/examples/stackblitz/components-react/card-link/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components-react/card-link/webpack.config.js b/packages/web-components/examples/stackblitz/components-react/card-link/webpack.config.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/card-link/webpack.config.js
rename to packages/web-components/examples/stackblitz/components-react/card-link/webpack.config.js
diff --git a/packages/web-components/examples/codesandbox/components-react/card-section-offset/.gitignore b/packages/web-components/examples/stackblitz/components-react/card-section-offset/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/card-section-offset/.gitignore
rename to packages/web-components/examples/stackblitz/components-react/card-section-offset/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components-react/card-section-offset/index.html b/packages/web-components/examples/stackblitz/components-react/card-section-offset/index.html
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/card-section-offset/index.html
rename to packages/web-components/examples/stackblitz/components-react/card-section-offset/index.html
diff --git a/packages/web-components/examples/codesandbox/components-react/card-section-offset/package.json b/packages/web-components/examples/stackblitz/components-react/card-section-offset/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/card-section-offset/package.json
rename to packages/web-components/examples/stackblitz/components-react/card-section-offset/package.json
diff --git a/packages/web-components/examples/codesandbox/components-react/card-section-offset/src/index.css b/packages/web-components/examples/stackblitz/components-react/card-section-offset/src/index.css
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/card-section-offset/src/index.css
rename to packages/web-components/examples/stackblitz/components-react/card-section-offset/src/index.css
diff --git a/packages/web-components/examples/codesandbox/components-react/card-section-offset/src/index.js b/packages/web-components/examples/stackblitz/components-react/card-section-offset/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/card-section-offset/src/index.js
rename to packages/web-components/examples/stackblitz/components-react/card-section-offset/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components-react/card-section-offset/webpack.config.js b/packages/web-components/examples/stackblitz/components-react/card-section-offset/webpack.config.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/card-section-offset/webpack.config.js
rename to packages/web-components/examples/stackblitz/components-react/card-section-offset/webpack.config.js
diff --git a/packages/web-components/examples/codesandbox/components-react/card-section-simple/.gitignore b/packages/web-components/examples/stackblitz/components-react/card-section-simple/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/card-section-simple/.gitignore
rename to packages/web-components/examples/stackblitz/components-react/card-section-simple/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components-react/card-section-simple/index.html b/packages/web-components/examples/stackblitz/components-react/card-section-simple/index.html
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/card-section-simple/index.html
rename to packages/web-components/examples/stackblitz/components-react/card-section-simple/index.html
diff --git a/packages/web-components/examples/codesandbox/components-react/card-section-simple/package.json b/packages/web-components/examples/stackblitz/components-react/card-section-simple/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/card-section-simple/package.json
rename to packages/web-components/examples/stackblitz/components-react/card-section-simple/package.json
diff --git a/packages/web-components/examples/codesandbox/components-react/card-section-simple/src/index.css b/packages/web-components/examples/stackblitz/components-react/card-section-simple/src/index.css
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/card-section-simple/src/index.css
rename to packages/web-components/examples/stackblitz/components-react/card-section-simple/src/index.css
diff --git a/packages/web-components/examples/codesandbox/components-react/card-section-simple/src/index.js b/packages/web-components/examples/stackblitz/components-react/card-section-simple/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/card-section-simple/src/index.js
rename to packages/web-components/examples/stackblitz/components-react/card-section-simple/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components-react/card-section-simple/webpack.config.js b/packages/web-components/examples/stackblitz/components-react/card-section-simple/webpack.config.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/card-section-simple/webpack.config.js
rename to packages/web-components/examples/stackblitz/components-react/card-section-simple/webpack.config.js
diff --git a/packages/web-components/examples/codesandbox/components-react/card/.gitignore b/packages/web-components/examples/stackblitz/components-react/card/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/card/.gitignore
rename to packages/web-components/examples/stackblitz/components-react/card/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components-react/card/index.html b/packages/web-components/examples/stackblitz/components-react/card/index.html
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/card/index.html
rename to packages/web-components/examples/stackblitz/components-react/card/index.html
diff --git a/packages/web-components/examples/codesandbox/components-react/card/package.json b/packages/web-components/examples/stackblitz/components-react/card/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/card/package.json
rename to packages/web-components/examples/stackblitz/components-react/card/package.json
diff --git a/packages/web-components/examples/codesandbox/components-react/card/src/index.css b/packages/web-components/examples/stackblitz/components-react/card/src/index.css
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/card/src/index.css
rename to packages/web-components/examples/stackblitz/components-react/card/src/index.css
diff --git a/packages/web-components/examples/codesandbox/components-react/card/src/index.js b/packages/web-components/examples/stackblitz/components-react/card/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/card/src/index.js
rename to packages/web-components/examples/stackblitz/components-react/card/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components-react/card/webpack.config.js b/packages/web-components/examples/stackblitz/components-react/card/webpack.config.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/card/webpack.config.js
rename to packages/web-components/examples/stackblitz/components-react/card/webpack.config.js
diff --git a/packages/web-components/examples/codesandbox/components-react/carousel/.gitignore b/packages/web-components/examples/stackblitz/components-react/carousel/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/carousel/.gitignore
rename to packages/web-components/examples/stackblitz/components-react/carousel/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components-react/carousel/index.html b/packages/web-components/examples/stackblitz/components-react/carousel/index.html
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/carousel/index.html
rename to packages/web-components/examples/stackblitz/components-react/carousel/index.html
diff --git a/packages/web-components/examples/codesandbox/components-react/carousel/package.json b/packages/web-components/examples/stackblitz/components-react/carousel/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/carousel/package.json
rename to packages/web-components/examples/stackblitz/components-react/carousel/package.json
diff --git a/packages/web-components/examples/codesandbox/components-react/carousel/src/index.css b/packages/web-components/examples/stackblitz/components-react/carousel/src/index.css
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/carousel/src/index.css
rename to packages/web-components/examples/stackblitz/components-react/carousel/src/index.css
diff --git a/packages/web-components/examples/codesandbox/components-react/carousel/src/index.js b/packages/web-components/examples/stackblitz/components-react/carousel/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/carousel/src/index.js
rename to packages/web-components/examples/stackblitz/components-react/carousel/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components-react/carousel/webpack.config.js b/packages/web-components/examples/stackblitz/components-react/carousel/webpack.config.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/carousel/webpack.config.js
rename to packages/web-components/examples/stackblitz/components-react/carousel/webpack.config.js
diff --git a/packages/web-components/examples/codesandbox/components-react/content-block-cards/.gitignore b/packages/web-components/examples/stackblitz/components-react/content-block-cards/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/content-block-cards/.gitignore
rename to packages/web-components/examples/stackblitz/components-react/content-block-cards/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components-react/content-block-cards/index.html b/packages/web-components/examples/stackblitz/components-react/content-block-cards/index.html
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/content-block-cards/index.html
rename to packages/web-components/examples/stackblitz/components-react/content-block-cards/index.html
diff --git a/packages/web-components/examples/codesandbox/components-react/content-block-cards/package.json b/packages/web-components/examples/stackblitz/components-react/content-block-cards/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/content-block-cards/package.json
rename to packages/web-components/examples/stackblitz/components-react/content-block-cards/package.json
diff --git a/packages/web-components/examples/codesandbox/components-react/content-block-cards/src/index.css b/packages/web-components/examples/stackblitz/components-react/content-block-cards/src/index.css
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/content-block-cards/src/index.css
rename to packages/web-components/examples/stackblitz/components-react/content-block-cards/src/index.css
diff --git a/packages/web-components/examples/codesandbox/components-react/content-block-cards/src/index.js b/packages/web-components/examples/stackblitz/components-react/content-block-cards/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/content-block-cards/src/index.js
rename to packages/web-components/examples/stackblitz/components-react/content-block-cards/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components-react/content-block-cards/webpack.config.js b/packages/web-components/examples/stackblitz/components-react/content-block-cards/webpack.config.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/content-block-cards/webpack.config.js
rename to packages/web-components/examples/stackblitz/components-react/content-block-cards/webpack.config.js
diff --git a/packages/web-components/examples/codesandbox/components-react/content-block-horizontal/.gitignore b/packages/web-components/examples/stackblitz/components-react/content-block-horizontal/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/content-block-horizontal/.gitignore
rename to packages/web-components/examples/stackblitz/components-react/content-block-horizontal/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components-react/content-block-horizontal/index.html b/packages/web-components/examples/stackblitz/components-react/content-block-horizontal/index.html
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/content-block-horizontal/index.html
rename to packages/web-components/examples/stackblitz/components-react/content-block-horizontal/index.html
diff --git a/packages/web-components/examples/codesandbox/components-react/content-block-horizontal/package.json b/packages/web-components/examples/stackblitz/components-react/content-block-horizontal/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/content-block-horizontal/package.json
rename to packages/web-components/examples/stackblitz/components-react/content-block-horizontal/package.json
diff --git a/packages/web-components/examples/codesandbox/components-react/content-block-horizontal/src/index.css b/packages/web-components/examples/stackblitz/components-react/content-block-horizontal/src/index.css
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/content-block-horizontal/src/index.css
rename to packages/web-components/examples/stackblitz/components-react/content-block-horizontal/src/index.css
diff --git a/packages/web-components/examples/codesandbox/components-react/content-block-horizontal/src/index.js b/packages/web-components/examples/stackblitz/components-react/content-block-horizontal/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/content-block-horizontal/src/index.js
rename to packages/web-components/examples/stackblitz/components-react/content-block-horizontal/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components-react/content-block-horizontal/webpack.config.js b/packages/web-components/examples/stackblitz/components-react/content-block-horizontal/webpack.config.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/content-block-horizontal/webpack.config.js
rename to packages/web-components/examples/stackblitz/components-react/content-block-horizontal/webpack.config.js
diff --git a/packages/web-components/examples/codesandbox/components-react/content-block-media/.gitignore b/packages/web-components/examples/stackblitz/components-react/content-block-media/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/content-block-media/.gitignore
rename to packages/web-components/examples/stackblitz/components-react/content-block-media/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components-react/content-block-media/index.html b/packages/web-components/examples/stackblitz/components-react/content-block-media/index.html
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/content-block-media/index.html
rename to packages/web-components/examples/stackblitz/components-react/content-block-media/index.html
diff --git a/packages/web-components/examples/codesandbox/components-react/content-block-media/package.json b/packages/web-components/examples/stackblitz/components-react/content-block-media/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/content-block-media/package.json
rename to packages/web-components/examples/stackblitz/components-react/content-block-media/package.json
diff --git a/packages/web-components/examples/codesandbox/components-react/content-block-media/src/index.css b/packages/web-components/examples/stackblitz/components-react/content-block-media/src/index.css
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/content-block-media/src/index.css
rename to packages/web-components/examples/stackblitz/components-react/content-block-media/src/index.css
diff --git a/packages/web-components/examples/codesandbox/components-react/content-block-media/src/index.js b/packages/web-components/examples/stackblitz/components-react/content-block-media/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/content-block-media/src/index.js
rename to packages/web-components/examples/stackblitz/components-react/content-block-media/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components-react/content-block-media/webpack.config.js b/packages/web-components/examples/stackblitz/components-react/content-block-media/webpack.config.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/content-block-media/webpack.config.js
rename to packages/web-components/examples/stackblitz/components-react/content-block-media/webpack.config.js
diff --git a/packages/web-components/examples/codesandbox/components-react/content-block-mixed/.gitignore b/packages/web-components/examples/stackblitz/components-react/content-block-mixed/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/content-block-mixed/.gitignore
rename to packages/web-components/examples/stackblitz/components-react/content-block-mixed/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components-react/content-block-mixed/index.html b/packages/web-components/examples/stackblitz/components-react/content-block-mixed/index.html
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/content-block-mixed/index.html
rename to packages/web-components/examples/stackblitz/components-react/content-block-mixed/index.html
diff --git a/packages/web-components/examples/codesandbox/components-react/content-block-mixed/package.json b/packages/web-components/examples/stackblitz/components-react/content-block-mixed/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/content-block-mixed/package.json
rename to packages/web-components/examples/stackblitz/components-react/content-block-mixed/package.json
diff --git a/packages/web-components/examples/codesandbox/components-react/content-block-mixed/src/index.css b/packages/web-components/examples/stackblitz/components-react/content-block-mixed/src/index.css
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/content-block-mixed/src/index.css
rename to packages/web-components/examples/stackblitz/components-react/content-block-mixed/src/index.css
diff --git a/packages/web-components/examples/codesandbox/components-react/content-block-mixed/src/index.js b/packages/web-components/examples/stackblitz/components-react/content-block-mixed/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/content-block-mixed/src/index.js
rename to packages/web-components/examples/stackblitz/components-react/content-block-mixed/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components-react/content-block-mixed/webpack.config.js b/packages/web-components/examples/stackblitz/components-react/content-block-mixed/webpack.config.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/content-block-mixed/webpack.config.js
rename to packages/web-components/examples/stackblitz/components-react/content-block-mixed/webpack.config.js
diff --git a/packages/web-components/examples/codesandbox/components-react/content-block-segmented/.gitignore b/packages/web-components/examples/stackblitz/components-react/content-block-segmented/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/content-block-segmented/.gitignore
rename to packages/web-components/examples/stackblitz/components-react/content-block-segmented/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components-react/content-block-segmented/index.html b/packages/web-components/examples/stackblitz/components-react/content-block-segmented/index.html
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/content-block-segmented/index.html
rename to packages/web-components/examples/stackblitz/components-react/content-block-segmented/index.html
diff --git a/packages/web-components/examples/codesandbox/components-react/content-block-segmented/package.json b/packages/web-components/examples/stackblitz/components-react/content-block-segmented/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/content-block-segmented/package.json
rename to packages/web-components/examples/stackblitz/components-react/content-block-segmented/package.json
diff --git a/packages/web-components/examples/codesandbox/components-react/content-block-segmented/src/index.css b/packages/web-components/examples/stackblitz/components-react/content-block-segmented/src/index.css
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/content-block-segmented/src/index.css
rename to packages/web-components/examples/stackblitz/components-react/content-block-segmented/src/index.css
diff --git a/packages/web-components/examples/codesandbox/components-react/content-block-segmented/src/index.js b/packages/web-components/examples/stackblitz/components-react/content-block-segmented/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/content-block-segmented/src/index.js
rename to packages/web-components/examples/stackblitz/components-react/content-block-segmented/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components-react/content-block-segmented/webpack.config.js b/packages/web-components/examples/stackblitz/components-react/content-block-segmented/webpack.config.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/content-block-segmented/webpack.config.js
rename to packages/web-components/examples/stackblitz/components-react/content-block-segmented/webpack.config.js
diff --git a/packages/web-components/examples/codesandbox/components-react/content-block/.gitignore b/packages/web-components/examples/stackblitz/components-react/content-block/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/content-block/.gitignore
rename to packages/web-components/examples/stackblitz/components-react/content-block/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components-react/content-block/index.html b/packages/web-components/examples/stackblitz/components-react/content-block/index.html
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/content-block/index.html
rename to packages/web-components/examples/stackblitz/components-react/content-block/index.html
diff --git a/packages/web-components/examples/codesandbox/components-react/content-block/package.json b/packages/web-components/examples/stackblitz/components-react/content-block/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/content-block/package.json
rename to packages/web-components/examples/stackblitz/components-react/content-block/package.json
diff --git a/packages/web-components/examples/codesandbox/components-react/content-block/src/index.css b/packages/web-components/examples/stackblitz/components-react/content-block/src/index.css
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/content-block/src/index.css
rename to packages/web-components/examples/stackblitz/components-react/content-block/src/index.css
diff --git a/packages/web-components/examples/codesandbox/components-react/content-block/src/index.js b/packages/web-components/examples/stackblitz/components-react/content-block/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/content-block/src/index.js
rename to packages/web-components/examples/stackblitz/components-react/content-block/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components-react/content-block/webpack.config.js b/packages/web-components/examples/stackblitz/components-react/content-block/webpack.config.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/content-block/webpack.config.js
rename to packages/web-components/examples/stackblitz/components-react/content-block/webpack.config.js
diff --git a/packages/web-components/examples/codesandbox/components-react/content-group-cards/.gitignore b/packages/web-components/examples/stackblitz/components-react/content-group-cards/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/content-group-cards/.gitignore
rename to packages/web-components/examples/stackblitz/components-react/content-group-cards/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components-react/content-group-cards/index.html b/packages/web-components/examples/stackblitz/components-react/content-group-cards/index.html
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/content-group-cards/index.html
rename to packages/web-components/examples/stackblitz/components-react/content-group-cards/index.html
diff --git a/packages/web-components/examples/codesandbox/components-react/content-group-cards/package.json b/packages/web-components/examples/stackblitz/components-react/content-group-cards/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/content-group-cards/package.json
rename to packages/web-components/examples/stackblitz/components-react/content-group-cards/package.json
diff --git a/packages/web-components/examples/codesandbox/components-react/content-group-cards/src/index.css b/packages/web-components/examples/stackblitz/components-react/content-group-cards/src/index.css
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/content-group-cards/src/index.css
rename to packages/web-components/examples/stackblitz/components-react/content-group-cards/src/index.css
diff --git a/packages/web-components/examples/codesandbox/components-react/content-group-cards/src/index.js b/packages/web-components/examples/stackblitz/components-react/content-group-cards/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/content-group-cards/src/index.js
rename to packages/web-components/examples/stackblitz/components-react/content-group-cards/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components-react/content-group-cards/webpack.config.js b/packages/web-components/examples/stackblitz/components-react/content-group-cards/webpack.config.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/content-group-cards/webpack.config.js
rename to packages/web-components/examples/stackblitz/components-react/content-group-cards/webpack.config.js
diff --git a/packages/web-components/examples/codesandbox/components-react/content-group-pictograms/.gitignore b/packages/web-components/examples/stackblitz/components-react/content-group-pictograms/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/content-group-pictograms/.gitignore
rename to packages/web-components/examples/stackblitz/components-react/content-group-pictograms/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components-react/content-group-pictograms/index.html b/packages/web-components/examples/stackblitz/components-react/content-group-pictograms/index.html
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/content-group-pictograms/index.html
rename to packages/web-components/examples/stackblitz/components-react/content-group-pictograms/index.html
diff --git a/packages/web-components/examples/codesandbox/components-react/content-group-pictograms/package.json b/packages/web-components/examples/stackblitz/components-react/content-group-pictograms/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/content-group-pictograms/package.json
rename to packages/web-components/examples/stackblitz/components-react/content-group-pictograms/package.json
diff --git a/packages/web-components/examples/codesandbox/components-react/content-group-pictograms/src/index.css b/packages/web-components/examples/stackblitz/components-react/content-group-pictograms/src/index.css
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/content-group-pictograms/src/index.css
rename to packages/web-components/examples/stackblitz/components-react/content-group-pictograms/src/index.css
diff --git a/packages/web-components/examples/codesandbox/components-react/content-group-pictograms/src/index.js b/packages/web-components/examples/stackblitz/components-react/content-group-pictograms/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/content-group-pictograms/src/index.js
rename to packages/web-components/examples/stackblitz/components-react/content-group-pictograms/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components-react/content-group-pictograms/webpack.config.js b/packages/web-components/examples/stackblitz/components-react/content-group-pictograms/webpack.config.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/content-group-pictograms/webpack.config.js
rename to packages/web-components/examples/stackblitz/components-react/content-group-pictograms/webpack.config.js
diff --git a/packages/web-components/examples/codesandbox/components-react/content-group-simple/.gitignore b/packages/web-components/examples/stackblitz/components-react/content-group-simple/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/content-group-simple/.gitignore
rename to packages/web-components/examples/stackblitz/components-react/content-group-simple/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components-react/content-group-simple/index.html b/packages/web-components/examples/stackblitz/components-react/content-group-simple/index.html
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/content-group-simple/index.html
rename to packages/web-components/examples/stackblitz/components-react/content-group-simple/index.html
diff --git a/packages/web-components/examples/codesandbox/components-react/content-group-simple/package.json b/packages/web-components/examples/stackblitz/components-react/content-group-simple/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/content-group-simple/package.json
rename to packages/web-components/examples/stackblitz/components-react/content-group-simple/package.json
diff --git a/packages/web-components/examples/codesandbox/components-react/content-group-simple/src/index.css b/packages/web-components/examples/stackblitz/components-react/content-group-simple/src/index.css
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/content-group-simple/src/index.css
rename to packages/web-components/examples/stackblitz/components-react/content-group-simple/src/index.css
diff --git a/packages/web-components/examples/codesandbox/components-react/content-group-simple/src/index.js b/packages/web-components/examples/stackblitz/components-react/content-group-simple/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/content-group-simple/src/index.js
rename to packages/web-components/examples/stackblitz/components-react/content-group-simple/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components-react/content-group-simple/webpack.config.js b/packages/web-components/examples/stackblitz/components-react/content-group-simple/webpack.config.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/content-group-simple/webpack.config.js
rename to packages/web-components/examples/stackblitz/components-react/content-group-simple/webpack.config.js
diff --git a/packages/web-components/examples/codesandbox/components-react/content-group/.gitignore b/packages/web-components/examples/stackblitz/components-react/content-group/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/content-group/.gitignore
rename to packages/web-components/examples/stackblitz/components-react/content-group/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components-react/content-group/index.html b/packages/web-components/examples/stackblitz/components-react/content-group/index.html
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/content-group/index.html
rename to packages/web-components/examples/stackblitz/components-react/content-group/index.html
diff --git a/packages/web-components/examples/codesandbox/components-react/content-group/package.json b/packages/web-components/examples/stackblitz/components-react/content-group/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/content-group/package.json
rename to packages/web-components/examples/stackblitz/components-react/content-group/package.json
diff --git a/packages/web-components/examples/codesandbox/components-react/content-group/src/index.css b/packages/web-components/examples/stackblitz/components-react/content-group/src/index.css
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/content-group/src/index.css
rename to packages/web-components/examples/stackblitz/components-react/content-group/src/index.css
diff --git a/packages/web-components/examples/codesandbox/components-react/content-group/src/index.js b/packages/web-components/examples/stackblitz/components-react/content-group/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/content-group/src/index.js
rename to packages/web-components/examples/stackblitz/components-react/content-group/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components-react/content-group/webpack.config.js b/packages/web-components/examples/stackblitz/components-react/content-group/webpack.config.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/content-group/webpack.config.js
rename to packages/web-components/examples/stackblitz/components-react/content-group/webpack.config.js
diff --git a/packages/web-components/examples/codesandbox/components-react/content-item-row/.gitignore b/packages/web-components/examples/stackblitz/components-react/content-item-row/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/content-item-row/.gitignore
rename to packages/web-components/examples/stackblitz/components-react/content-item-row/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components-react/content-item-row/index.html b/packages/web-components/examples/stackblitz/components-react/content-item-row/index.html
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/content-item-row/index.html
rename to packages/web-components/examples/stackblitz/components-react/content-item-row/index.html
diff --git a/packages/web-components/examples/codesandbox/components-react/content-item-row/package.json b/packages/web-components/examples/stackblitz/components-react/content-item-row/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/content-item-row/package.json
rename to packages/web-components/examples/stackblitz/components-react/content-item-row/package.json
diff --git a/packages/web-components/examples/codesandbox/components-react/content-item-row/src/index.css b/packages/web-components/examples/stackblitz/components-react/content-item-row/src/index.css
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/content-item-row/src/index.css
rename to packages/web-components/examples/stackblitz/components-react/content-item-row/src/index.css
diff --git a/packages/web-components/examples/codesandbox/components-react/content-item-row/src/index.js b/packages/web-components/examples/stackblitz/components-react/content-item-row/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/content-item-row/src/index.js
rename to packages/web-components/examples/stackblitz/components-react/content-item-row/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components-react/content-item-row/webpack.config.js b/packages/web-components/examples/stackblitz/components-react/content-item-row/webpack.config.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/content-item-row/webpack.config.js
rename to packages/web-components/examples/stackblitz/components-react/content-item-row/webpack.config.js
diff --git a/packages/web-components/examples/codesandbox/components-react/content-item/.gitignore b/packages/web-components/examples/stackblitz/components-react/content-item/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/content-item/.gitignore
rename to packages/web-components/examples/stackblitz/components-react/content-item/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components-react/content-item/index.html b/packages/web-components/examples/stackblitz/components-react/content-item/index.html
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/content-item/index.html
rename to packages/web-components/examples/stackblitz/components-react/content-item/index.html
diff --git a/packages/web-components/examples/codesandbox/components-react/content-item/package.json b/packages/web-components/examples/stackblitz/components-react/content-item/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/content-item/package.json
rename to packages/web-components/examples/stackblitz/components-react/content-item/package.json
diff --git a/packages/web-components/examples/codesandbox/components-react/content-item/src/index.css b/packages/web-components/examples/stackblitz/components-react/content-item/src/index.css
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/content-item/src/index.css
rename to packages/web-components/examples/stackblitz/components-react/content-item/src/index.css
diff --git a/packages/web-components/examples/codesandbox/components-react/content-item/src/index.js b/packages/web-components/examples/stackblitz/components-react/content-item/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/content-item/src/index.js
rename to packages/web-components/examples/stackblitz/components-react/content-item/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components-react/content-item/webpack.config.js b/packages/web-components/examples/stackblitz/components-react/content-item/webpack.config.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/content-item/webpack.config.js
rename to packages/web-components/examples/stackblitz/components-react/content-item/webpack.config.js
diff --git a/packages/web-components/examples/codesandbox/components-react/content-section/.gitignore b/packages/web-components/examples/stackblitz/components-react/content-section/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/content-section/.gitignore
rename to packages/web-components/examples/stackblitz/components-react/content-section/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components-react/content-section/index.html b/packages/web-components/examples/stackblitz/components-react/content-section/index.html
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/content-section/index.html
rename to packages/web-components/examples/stackblitz/components-react/content-section/index.html
diff --git a/packages/web-components/examples/codesandbox/components-react/content-section/package.json b/packages/web-components/examples/stackblitz/components-react/content-section/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/content-section/package.json
rename to packages/web-components/examples/stackblitz/components-react/content-section/package.json
diff --git a/packages/web-components/examples/codesandbox/components-react/content-section/src/index.css b/packages/web-components/examples/stackblitz/components-react/content-section/src/index.css
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/content-section/src/index.css
rename to packages/web-components/examples/stackblitz/components-react/content-section/src/index.css
diff --git a/packages/web-components/examples/codesandbox/components-react/content-section/src/index.js b/packages/web-components/examples/stackblitz/components-react/content-section/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/content-section/src/index.js
rename to packages/web-components/examples/stackblitz/components-react/content-section/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components-react/content-section/webpack.config.js b/packages/web-components/examples/stackblitz/components-react/content-section/webpack.config.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/content-section/webpack.config.js
rename to packages/web-components/examples/stackblitz/components-react/content-section/webpack.config.js
diff --git a/packages/web-components/examples/codesandbox/components-react/cta-block/.gitignore b/packages/web-components/examples/stackblitz/components-react/cta-block/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/cta-block/.gitignore
rename to packages/web-components/examples/stackblitz/components-react/cta-block/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components-react/cta-block/index.html b/packages/web-components/examples/stackblitz/components-react/cta-block/index.html
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/cta-block/index.html
rename to packages/web-components/examples/stackblitz/components-react/cta-block/index.html
diff --git a/packages/web-components/examples/codesandbox/components-react/cta-block/package.json b/packages/web-components/examples/stackblitz/components-react/cta-block/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/cta-block/package.json
rename to packages/web-components/examples/stackblitz/components-react/cta-block/package.json
diff --git a/packages/web-components/examples/codesandbox/components-react/cta-block/src/index.css b/packages/web-components/examples/stackblitz/components-react/cta-block/src/index.css
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/cta-block/src/index.css
rename to packages/web-components/examples/stackblitz/components-react/cta-block/src/index.css
diff --git a/packages/web-components/examples/codesandbox/components-react/cta-block/src/index.js b/packages/web-components/examples/stackblitz/components-react/cta-block/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/cta-block/src/index.js
rename to packages/web-components/examples/stackblitz/components-react/cta-block/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components-react/cta-block/webpack.config.js b/packages/web-components/examples/stackblitz/components-react/cta-block/webpack.config.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/cta-block/webpack.config.js
rename to packages/web-components/examples/stackblitz/components-react/cta-block/webpack.config.js
diff --git a/packages/web-components/examples/codesandbox/components-react/cta-button/.gitignore b/packages/web-components/examples/stackblitz/components-react/cta-button/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/cta-button/.gitignore
rename to packages/web-components/examples/stackblitz/components-react/cta-button/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components-react/cta-button/index.html b/packages/web-components/examples/stackblitz/components-react/cta-button/index.html
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/cta-button/index.html
rename to packages/web-components/examples/stackblitz/components-react/cta-button/index.html
diff --git a/packages/web-components/examples/codesandbox/components-react/cta-button/package.json b/packages/web-components/examples/stackblitz/components-react/cta-button/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/cta-button/package.json
rename to packages/web-components/examples/stackblitz/components-react/cta-button/package.json
diff --git a/packages/web-components/examples/codesandbox/components-react/cta-button/src/index.css b/packages/web-components/examples/stackblitz/components-react/cta-button/src/index.css
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/cta-button/src/index.css
rename to packages/web-components/examples/stackblitz/components-react/cta-button/src/index.css
diff --git a/packages/web-components/examples/codesandbox/components-react/cta-button/src/index.js b/packages/web-components/examples/stackblitz/components-react/cta-button/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/cta-button/src/index.js
rename to packages/web-components/examples/stackblitz/components-react/cta-button/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components-react/cta-button/webpack.config.js b/packages/web-components/examples/stackblitz/components-react/cta-button/webpack.config.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/cta-button/webpack.config.js
rename to packages/web-components/examples/stackblitz/components-react/cta-button/webpack.config.js
diff --git a/packages/web-components/examples/codesandbox/components-react/cta-card-link/.gitignore b/packages/web-components/examples/stackblitz/components-react/cta-card-link/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/cta-card-link/.gitignore
rename to packages/web-components/examples/stackblitz/components-react/cta-card-link/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components-react/cta-card-link/index.html b/packages/web-components/examples/stackblitz/components-react/cta-card-link/index.html
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/cta-card-link/index.html
rename to packages/web-components/examples/stackblitz/components-react/cta-card-link/index.html
diff --git a/packages/web-components/examples/codesandbox/components-react/cta-card-link/package.json b/packages/web-components/examples/stackblitz/components-react/cta-card-link/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/cta-card-link/package.json
rename to packages/web-components/examples/stackblitz/components-react/cta-card-link/package.json
diff --git a/packages/web-components/examples/codesandbox/components-react/cta-card-link/src/index.css b/packages/web-components/examples/stackblitz/components-react/cta-card-link/src/index.css
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/cta-card-link/src/index.css
rename to packages/web-components/examples/stackblitz/components-react/cta-card-link/src/index.css
diff --git a/packages/web-components/examples/codesandbox/components-react/cta-card-link/src/index.js b/packages/web-components/examples/stackblitz/components-react/cta-card-link/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/cta-card-link/src/index.js
rename to packages/web-components/examples/stackblitz/components-react/cta-card-link/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components-react/cta-card-link/webpack.config.js b/packages/web-components/examples/stackblitz/components-react/cta-card-link/webpack.config.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/cta-card-link/webpack.config.js
rename to packages/web-components/examples/stackblitz/components-react/cta-card-link/webpack.config.js
diff --git a/packages/web-components/examples/codesandbox/components-react/cta-card/.gitignore b/packages/web-components/examples/stackblitz/components-react/cta-card/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/cta-card/.gitignore
rename to packages/web-components/examples/stackblitz/components-react/cta-card/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components-react/cta-card/index.html b/packages/web-components/examples/stackblitz/components-react/cta-card/index.html
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/cta-card/index.html
rename to packages/web-components/examples/stackblitz/components-react/cta-card/index.html
diff --git a/packages/web-components/examples/codesandbox/components-react/cta-card/package.json b/packages/web-components/examples/stackblitz/components-react/cta-card/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/cta-card/package.json
rename to packages/web-components/examples/stackblitz/components-react/cta-card/package.json
diff --git a/packages/web-components/examples/codesandbox/components-react/cta-card/src/index.css b/packages/web-components/examples/stackblitz/components-react/cta-card/src/index.css
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/cta-card/src/index.css
rename to packages/web-components/examples/stackblitz/components-react/cta-card/src/index.css
diff --git a/packages/web-components/examples/codesandbox/components-react/cta-card/src/index.js b/packages/web-components/examples/stackblitz/components-react/cta-card/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/cta-card/src/index.js
rename to packages/web-components/examples/stackblitz/components-react/cta-card/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components-react/cta-card/webpack.config.js b/packages/web-components/examples/stackblitz/components-react/cta-card/webpack.config.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/cta-card/webpack.config.js
rename to packages/web-components/examples/stackblitz/components-react/cta-card/webpack.config.js
diff --git a/packages/web-components/examples/codesandbox/components-react/cta-feature/.gitignore b/packages/web-components/examples/stackblitz/components-react/cta-feature/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/cta-feature/.gitignore
rename to packages/web-components/examples/stackblitz/components-react/cta-feature/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components-react/cta-feature/index.html b/packages/web-components/examples/stackblitz/components-react/cta-feature/index.html
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/cta-feature/index.html
rename to packages/web-components/examples/stackblitz/components-react/cta-feature/index.html
diff --git a/packages/web-components/examples/codesandbox/components-react/cta-feature/package.json b/packages/web-components/examples/stackblitz/components-react/cta-feature/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/cta-feature/package.json
rename to packages/web-components/examples/stackblitz/components-react/cta-feature/package.json
diff --git a/packages/web-components/examples/codesandbox/components-react/cta-feature/src/index.css b/packages/web-components/examples/stackblitz/components-react/cta-feature/src/index.css
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/cta-feature/src/index.css
rename to packages/web-components/examples/stackblitz/components-react/cta-feature/src/index.css
diff --git a/packages/web-components/examples/codesandbox/components-react/cta-feature/src/index.js b/packages/web-components/examples/stackblitz/components-react/cta-feature/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/cta-feature/src/index.js
rename to packages/web-components/examples/stackblitz/components-react/cta-feature/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components-react/cta-feature/webpack.config.js b/packages/web-components/examples/stackblitz/components-react/cta-feature/webpack.config.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/cta-feature/webpack.config.js
rename to packages/web-components/examples/stackblitz/components-react/cta-feature/webpack.config.js
diff --git a/packages/web-components/examples/codesandbox/components-react/cta-section/.gitignore b/packages/web-components/examples/stackblitz/components-react/cta-section/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/cta-section/.gitignore
rename to packages/web-components/examples/stackblitz/components-react/cta-section/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components-react/cta-section/index.html b/packages/web-components/examples/stackblitz/components-react/cta-section/index.html
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/cta-section/index.html
rename to packages/web-components/examples/stackblitz/components-react/cta-section/index.html
diff --git a/packages/web-components/examples/codesandbox/components-react/cta-section/package.json b/packages/web-components/examples/stackblitz/components-react/cta-section/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/cta-section/package.json
rename to packages/web-components/examples/stackblitz/components-react/cta-section/package.json
diff --git a/packages/web-components/examples/codesandbox/components-react/cta-section/src/index.css b/packages/web-components/examples/stackblitz/components-react/cta-section/src/index.css
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/cta-section/src/index.css
rename to packages/web-components/examples/stackblitz/components-react/cta-section/src/index.css
diff --git a/packages/web-components/examples/codesandbox/components-react/cta-section/src/index.js b/packages/web-components/examples/stackblitz/components-react/cta-section/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/cta-section/src/index.js
rename to packages/web-components/examples/stackblitz/components-react/cta-section/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components-react/cta-section/webpack.config.js b/packages/web-components/examples/stackblitz/components-react/cta-section/webpack.config.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/cta-section/webpack.config.js
rename to packages/web-components/examples/stackblitz/components-react/cta-section/webpack.config.js
diff --git a/packages/web-components/examples/codesandbox/components-react/cta-text/.gitignore b/packages/web-components/examples/stackblitz/components-react/cta-text/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/cta-text/.gitignore
rename to packages/web-components/examples/stackblitz/components-react/cta-text/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components-react/cta-text/index.html b/packages/web-components/examples/stackblitz/components-react/cta-text/index.html
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/cta-text/index.html
rename to packages/web-components/examples/stackblitz/components-react/cta-text/index.html
diff --git a/packages/web-components/examples/codesandbox/components-react/cta-text/package.json b/packages/web-components/examples/stackblitz/components-react/cta-text/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/cta-text/package.json
rename to packages/web-components/examples/stackblitz/components-react/cta-text/package.json
diff --git a/packages/web-components/examples/codesandbox/components-react/cta-text/src/index.css b/packages/web-components/examples/stackblitz/components-react/cta-text/src/index.css
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/cta-text/src/index.css
rename to packages/web-components/examples/stackblitz/components-react/cta-text/src/index.css
diff --git a/packages/web-components/examples/codesandbox/components-react/cta-text/src/index.js b/packages/web-components/examples/stackblitz/components-react/cta-text/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/cta-text/src/index.js
rename to packages/web-components/examples/stackblitz/components-react/cta-text/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components-react/cta-text/webpack.config.js b/packages/web-components/examples/stackblitz/components-react/cta-text/webpack.config.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/cta-text/webpack.config.js
rename to packages/web-components/examples/stackblitz/components-react/cta-text/webpack.config.js
diff --git a/packages/web-components/examples/codesandbox/components-react/dotcom-shell/.gitignore b/packages/web-components/examples/stackblitz/components-react/dotcom-shell/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/dotcom-shell/.gitignore
rename to packages/web-components/examples/stackblitz/components-react/dotcom-shell/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components-react/dotcom-shell/index.html b/packages/web-components/examples/stackblitz/components-react/dotcom-shell/index.html
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/dotcom-shell/index.html
rename to packages/web-components/examples/stackblitz/components-react/dotcom-shell/index.html
diff --git a/packages/web-components/examples/codesandbox/components-react/dotcom-shell/package.json b/packages/web-components/examples/stackblitz/components-react/dotcom-shell/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/dotcom-shell/package.json
rename to packages/web-components/examples/stackblitz/components-react/dotcom-shell/package.json
diff --git a/packages/web-components/examples/codesandbox/components-react/dotcom-shell/src/index.css b/packages/web-components/examples/stackblitz/components-react/dotcom-shell/src/index.css
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/dotcom-shell/src/index.css
rename to packages/web-components/examples/stackblitz/components-react/dotcom-shell/src/index.css
diff --git a/packages/web-components/examples/codesandbox/components-react/dotcom-shell/src/index.js b/packages/web-components/examples/stackblitz/components-react/dotcom-shell/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/dotcom-shell/src/index.js
rename to packages/web-components/examples/stackblitz/components-react/dotcom-shell/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components-react/dotcom-shell/webpack.config.js b/packages/web-components/examples/stackblitz/components-react/dotcom-shell/webpack.config.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/dotcom-shell/webpack.config.js
rename to packages/web-components/examples/stackblitz/components-react/dotcom-shell/webpack.config.js
diff --git a/packages/web-components/examples/codesandbox/components-react/expressive-modal/.gitignore b/packages/web-components/examples/stackblitz/components-react/expressive-modal/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/expressive-modal/.gitignore
rename to packages/web-components/examples/stackblitz/components-react/expressive-modal/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components-react/expressive-modal/index.html b/packages/web-components/examples/stackblitz/components-react/expressive-modal/index.html
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/expressive-modal/index.html
rename to packages/web-components/examples/stackblitz/components-react/expressive-modal/index.html
diff --git a/packages/web-components/examples/codesandbox/components-react/expressive-modal/package.json b/packages/web-components/examples/stackblitz/components-react/expressive-modal/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/expressive-modal/package.json
rename to packages/web-components/examples/stackblitz/components-react/expressive-modal/package.json
diff --git a/packages/web-components/examples/codesandbox/components-react/expressive-modal/src/index.css b/packages/web-components/examples/stackblitz/components-react/expressive-modal/src/index.css
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/expressive-modal/src/index.css
rename to packages/web-components/examples/stackblitz/components-react/expressive-modal/src/index.css
diff --git a/packages/web-components/examples/codesandbox/components-react/expressive-modal/src/index.js b/packages/web-components/examples/stackblitz/components-react/expressive-modal/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/expressive-modal/src/index.js
rename to packages/web-components/examples/stackblitz/components-react/expressive-modal/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components-react/expressive-modal/webpack.config.js b/packages/web-components/examples/stackblitz/components-react/expressive-modal/webpack.config.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/expressive-modal/webpack.config.js
rename to packages/web-components/examples/stackblitz/components-react/expressive-modal/webpack.config.js
diff --git a/packages/web-components/examples/codesandbox/components-react/feature-card/.gitignore b/packages/web-components/examples/stackblitz/components-react/feature-card/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/feature-card/.gitignore
rename to packages/web-components/examples/stackblitz/components-react/feature-card/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components-react/feature-card/index.html b/packages/web-components/examples/stackblitz/components-react/feature-card/index.html
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/feature-card/index.html
rename to packages/web-components/examples/stackblitz/components-react/feature-card/index.html
diff --git a/packages/web-components/examples/codesandbox/components-react/feature-card/package.json b/packages/web-components/examples/stackblitz/components-react/feature-card/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/feature-card/package.json
rename to packages/web-components/examples/stackblitz/components-react/feature-card/package.json
diff --git a/packages/web-components/examples/codesandbox/components-react/feature-card/src/index.css b/packages/web-components/examples/stackblitz/components-react/feature-card/src/index.css
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/feature-card/src/index.css
rename to packages/web-components/examples/stackblitz/components-react/feature-card/src/index.css
diff --git a/packages/web-components/examples/codesandbox/components-react/feature-card/src/index.js b/packages/web-components/examples/stackblitz/components-react/feature-card/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/feature-card/src/index.js
rename to packages/web-components/examples/stackblitz/components-react/feature-card/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components-react/feature-card/webpack.config.js b/packages/web-components/examples/stackblitz/components-react/feature-card/webpack.config.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/feature-card/webpack.config.js
rename to packages/web-components/examples/stackblitz/components-react/feature-card/webpack.config.js
diff --git a/packages/web-components/examples/codesandbox/components-react/feature-section/.gitignore b/packages/web-components/examples/stackblitz/components-react/feature-section/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/feature-section/.gitignore
rename to packages/web-components/examples/stackblitz/components-react/feature-section/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components-react/feature-section/index.html b/packages/web-components/examples/stackblitz/components-react/feature-section/index.html
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/feature-section/index.html
rename to packages/web-components/examples/stackblitz/components-react/feature-section/index.html
diff --git a/packages/web-components/examples/codesandbox/components-react/feature-section/package.json b/packages/web-components/examples/stackblitz/components-react/feature-section/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/feature-section/package.json
rename to packages/web-components/examples/stackblitz/components-react/feature-section/package.json
diff --git a/packages/web-components/examples/codesandbox/components-react/feature-section/src/index.css b/packages/web-components/examples/stackblitz/components-react/feature-section/src/index.css
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/feature-section/src/index.css
rename to packages/web-components/examples/stackblitz/components-react/feature-section/src/index.css
diff --git a/packages/web-components/examples/codesandbox/components-react/feature-section/src/index.js b/packages/web-components/examples/stackblitz/components-react/feature-section/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/feature-section/src/index.js
rename to packages/web-components/examples/stackblitz/components-react/feature-section/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components-react/feature-section/webpack.config.js b/packages/web-components/examples/stackblitz/components-react/feature-section/webpack.config.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/feature-section/webpack.config.js
rename to packages/web-components/examples/stackblitz/components-react/feature-section/webpack.config.js
diff --git a/packages/web-components/examples/codesandbox/components-react/filter-panel/.gitignore b/packages/web-components/examples/stackblitz/components-react/filter-panel/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/filter-panel/.gitignore
rename to packages/web-components/examples/stackblitz/components-react/filter-panel/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components-react/filter-panel/index.html b/packages/web-components/examples/stackblitz/components-react/filter-panel/index.html
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/filter-panel/index.html
rename to packages/web-components/examples/stackblitz/components-react/filter-panel/index.html
diff --git a/packages/web-components/examples/codesandbox/components-react/filter-panel/package.json b/packages/web-components/examples/stackblitz/components-react/filter-panel/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/filter-panel/package.json
rename to packages/web-components/examples/stackblitz/components-react/filter-panel/package.json
diff --git a/packages/web-components/examples/codesandbox/components-react/filter-panel/src/index.css b/packages/web-components/examples/stackblitz/components-react/filter-panel/src/index.css
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/filter-panel/src/index.css
rename to packages/web-components/examples/stackblitz/components-react/filter-panel/src/index.css
diff --git a/packages/web-components/examples/codesandbox/components-react/filter-panel/src/index.js b/packages/web-components/examples/stackblitz/components-react/filter-panel/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/filter-panel/src/index.js
rename to packages/web-components/examples/stackblitz/components-react/filter-panel/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components-react/filter-panel/webpack.config.js b/packages/web-components/examples/stackblitz/components-react/filter-panel/webpack.config.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/filter-panel/webpack.config.js
rename to packages/web-components/examples/stackblitz/components-react/filter-panel/webpack.config.js
diff --git a/packages/web-components/examples/codesandbox/components-react/footer/.gitignore b/packages/web-components/examples/stackblitz/components-react/footer/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/footer/.gitignore
rename to packages/web-components/examples/stackblitz/components-react/footer/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components-react/footer/index.html b/packages/web-components/examples/stackblitz/components-react/footer/index.html
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/footer/index.html
rename to packages/web-components/examples/stackblitz/components-react/footer/index.html
diff --git a/packages/web-components/examples/codesandbox/components-react/footer/package.json b/packages/web-components/examples/stackblitz/components-react/footer/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/footer/package.json
rename to packages/web-components/examples/stackblitz/components-react/footer/package.json
diff --git a/packages/web-components/examples/codesandbox/components-react/footer/src/index.css b/packages/web-components/examples/stackblitz/components-react/footer/src/index.css
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/footer/src/index.css
rename to packages/web-components/examples/stackblitz/components-react/footer/src/index.css
diff --git a/packages/web-components/examples/codesandbox/components-react/footer/src/index.js b/packages/web-components/examples/stackblitz/components-react/footer/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/footer/src/index.js
rename to packages/web-components/examples/stackblitz/components-react/footer/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components-react/footer/webpack.config.js b/packages/web-components/examples/stackblitz/components-react/footer/webpack.config.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/footer/webpack.config.js
rename to packages/web-components/examples/stackblitz/components-react/footer/webpack.config.js
diff --git a/packages/web-components/examples/codesandbox/components-react/global-banner/.gitignore b/packages/web-components/examples/stackblitz/components-react/global-banner/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/global-banner/.gitignore
rename to packages/web-components/examples/stackblitz/components-react/global-banner/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components-react/global-banner/index.html b/packages/web-components/examples/stackblitz/components-react/global-banner/index.html
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/global-banner/index.html
rename to packages/web-components/examples/stackblitz/components-react/global-banner/index.html
diff --git a/packages/web-components/examples/codesandbox/components-react/global-banner/package.json b/packages/web-components/examples/stackblitz/components-react/global-banner/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/global-banner/package.json
rename to packages/web-components/examples/stackblitz/components-react/global-banner/package.json
diff --git a/packages/web-components/examples/codesandbox/components-react/global-banner/src/index.css b/packages/web-components/examples/stackblitz/components-react/global-banner/src/index.css
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/global-banner/src/index.css
rename to packages/web-components/examples/stackblitz/components-react/global-banner/src/index.css
diff --git a/packages/web-components/examples/codesandbox/components-react/global-banner/src/index.js b/packages/web-components/examples/stackblitz/components-react/global-banner/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/global-banner/src/index.js
rename to packages/web-components/examples/stackblitz/components-react/global-banner/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components-react/global-banner/webpack.config.js b/packages/web-components/examples/stackblitz/components-react/global-banner/webpack.config.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/global-banner/webpack.config.js
rename to packages/web-components/examples/stackblitz/components-react/global-banner/webpack.config.js
diff --git a/packages/web-components/examples/codesandbox/components-react/horizontal-rule/.gitignore b/packages/web-components/examples/stackblitz/components-react/horizontal-rule/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/horizontal-rule/.gitignore
rename to packages/web-components/examples/stackblitz/components-react/horizontal-rule/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components-react/horizontal-rule/index.html b/packages/web-components/examples/stackblitz/components-react/horizontal-rule/index.html
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/horizontal-rule/index.html
rename to packages/web-components/examples/stackblitz/components-react/horizontal-rule/index.html
diff --git a/packages/web-components/examples/codesandbox/components-react/horizontal-rule/package.json b/packages/web-components/examples/stackblitz/components-react/horizontal-rule/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/horizontal-rule/package.json
rename to packages/web-components/examples/stackblitz/components-react/horizontal-rule/package.json
diff --git a/packages/web-components/examples/codesandbox/components-react/horizontal-rule/src/index.css b/packages/web-components/examples/stackblitz/components-react/horizontal-rule/src/index.css
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/horizontal-rule/src/index.css
rename to packages/web-components/examples/stackblitz/components-react/horizontal-rule/src/index.css
diff --git a/packages/web-components/examples/codesandbox/components-react/horizontal-rule/src/index.js b/packages/web-components/examples/stackblitz/components-react/horizontal-rule/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/horizontal-rule/src/index.js
rename to packages/web-components/examples/stackblitz/components-react/horizontal-rule/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components-react/horizontal-rule/webpack.config.js b/packages/web-components/examples/stackblitz/components-react/horizontal-rule/webpack.config.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/horizontal-rule/webpack.config.js
rename to packages/web-components/examples/stackblitz/components-react/horizontal-rule/webpack.config.js
diff --git a/packages/web-components/examples/codesandbox/components-react/image/.gitignore b/packages/web-components/examples/stackblitz/components-react/image/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/image/.gitignore
rename to packages/web-components/examples/stackblitz/components-react/image/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components-react/image/index.html b/packages/web-components/examples/stackblitz/components-react/image/index.html
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/image/index.html
rename to packages/web-components/examples/stackblitz/components-react/image/index.html
diff --git a/packages/web-components/examples/codesandbox/components-react/image/package.json b/packages/web-components/examples/stackblitz/components-react/image/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/image/package.json
rename to packages/web-components/examples/stackblitz/components-react/image/package.json
diff --git a/packages/web-components/examples/codesandbox/components-react/image/src/index.css b/packages/web-components/examples/stackblitz/components-react/image/src/index.css
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/image/src/index.css
rename to packages/web-components/examples/stackblitz/components-react/image/src/index.css
diff --git a/packages/web-components/examples/codesandbox/components-react/image/src/index.js b/packages/web-components/examples/stackblitz/components-react/image/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/image/src/index.js
rename to packages/web-components/examples/stackblitz/components-react/image/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components-react/image/webpack.config.js b/packages/web-components/examples/stackblitz/components-react/image/webpack.config.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/image/webpack.config.js
rename to packages/web-components/examples/stackblitz/components-react/image/webpack.config.js
diff --git a/packages/web-components/examples/codesandbox/components-react/in-page-banner/.gitignore b/packages/web-components/examples/stackblitz/components-react/in-page-banner/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/in-page-banner/.gitignore
rename to packages/web-components/examples/stackblitz/components-react/in-page-banner/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components-react/in-page-banner/index.html b/packages/web-components/examples/stackblitz/components-react/in-page-banner/index.html
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/in-page-banner/index.html
rename to packages/web-components/examples/stackblitz/components-react/in-page-banner/index.html
diff --git a/packages/web-components/examples/codesandbox/components-react/in-page-banner/package.json b/packages/web-components/examples/stackblitz/components-react/in-page-banner/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/in-page-banner/package.json
rename to packages/web-components/examples/stackblitz/components-react/in-page-banner/package.json
diff --git a/packages/web-components/examples/codesandbox/components-react/in-page-banner/src/index.css b/packages/web-components/examples/stackblitz/components-react/in-page-banner/src/index.css
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/in-page-banner/src/index.css
rename to packages/web-components/examples/stackblitz/components-react/in-page-banner/src/index.css
diff --git a/packages/web-components/examples/codesandbox/components-react/in-page-banner/src/index.js b/packages/web-components/examples/stackblitz/components-react/in-page-banner/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/in-page-banner/src/index.js
rename to packages/web-components/examples/stackblitz/components-react/in-page-banner/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components-react/in-page-banner/webpack.config.js b/packages/web-components/examples/stackblitz/components-react/in-page-banner/webpack.config.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/in-page-banner/webpack.config.js
rename to packages/web-components/examples/stackblitz/components-react/in-page-banner/webpack.config.js
diff --git a/packages/web-components/examples/codesandbox/components-react/leadspace-block/.gitignore b/packages/web-components/examples/stackblitz/components-react/leadspace-block/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/leadspace-block/.gitignore
rename to packages/web-components/examples/stackblitz/components-react/leadspace-block/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components-react/leadspace-block/index.html b/packages/web-components/examples/stackblitz/components-react/leadspace-block/index.html
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/leadspace-block/index.html
rename to packages/web-components/examples/stackblitz/components-react/leadspace-block/index.html
diff --git a/packages/web-components/examples/codesandbox/components-react/leadspace-block/package.json b/packages/web-components/examples/stackblitz/components-react/leadspace-block/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/leadspace-block/package.json
rename to packages/web-components/examples/stackblitz/components-react/leadspace-block/package.json
diff --git a/packages/web-components/examples/codesandbox/components-react/leadspace-block/src/index.css b/packages/web-components/examples/stackblitz/components-react/leadspace-block/src/index.css
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/leadspace-block/src/index.css
rename to packages/web-components/examples/stackblitz/components-react/leadspace-block/src/index.css
diff --git a/packages/web-components/examples/codesandbox/components-react/leadspace-block/src/index.js b/packages/web-components/examples/stackblitz/components-react/leadspace-block/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/leadspace-block/src/index.js
rename to packages/web-components/examples/stackblitz/components-react/leadspace-block/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components-react/leadspace-block/webpack.config.js b/packages/web-components/examples/stackblitz/components-react/leadspace-block/webpack.config.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/leadspace-block/webpack.config.js
rename to packages/web-components/examples/stackblitz/components-react/leadspace-block/webpack.config.js
diff --git a/packages/web-components/examples/codesandbox/components-react/leadspace-with-search/.gitignore b/packages/web-components/examples/stackblitz/components-react/leadspace-with-search/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/leadspace-with-search/.gitignore
rename to packages/web-components/examples/stackblitz/components-react/leadspace-with-search/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components-react/leadspace-with-search/index.html b/packages/web-components/examples/stackblitz/components-react/leadspace-with-search/index.html
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/leadspace-with-search/index.html
rename to packages/web-components/examples/stackblitz/components-react/leadspace-with-search/index.html
diff --git a/packages/web-components/examples/codesandbox/components-react/leadspace-with-search/package.json b/packages/web-components/examples/stackblitz/components-react/leadspace-with-search/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/leadspace-with-search/package.json
rename to packages/web-components/examples/stackblitz/components-react/leadspace-with-search/package.json
diff --git a/packages/web-components/examples/codesandbox/components-react/leadspace-with-search/src/index.css b/packages/web-components/examples/stackblitz/components-react/leadspace-with-search/src/index.css
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/leadspace-with-search/src/index.css
rename to packages/web-components/examples/stackblitz/components-react/leadspace-with-search/src/index.css
diff --git a/packages/web-components/examples/codesandbox/components-react/leadspace-with-search/src/index.js b/packages/web-components/examples/stackblitz/components-react/leadspace-with-search/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/leadspace-with-search/src/index.js
rename to packages/web-components/examples/stackblitz/components-react/leadspace-with-search/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components-react/leadspace-with-search/webpack.config.js b/packages/web-components/examples/stackblitz/components-react/leadspace-with-search/webpack.config.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/leadspace-with-search/webpack.config.js
rename to packages/web-components/examples/stackblitz/components-react/leadspace-with-search/webpack.config.js
diff --git a/packages/web-components/examples/codesandbox/components-react/leadspace/.gitignore b/packages/web-components/examples/stackblitz/components-react/leadspace/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/leadspace/.gitignore
rename to packages/web-components/examples/stackblitz/components-react/leadspace/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components-react/leadspace/index.html b/packages/web-components/examples/stackblitz/components-react/leadspace/index.html
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/leadspace/index.html
rename to packages/web-components/examples/stackblitz/components-react/leadspace/index.html
diff --git a/packages/web-components/examples/codesandbox/components-react/leadspace/package.json b/packages/web-components/examples/stackblitz/components-react/leadspace/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/leadspace/package.json
rename to packages/web-components/examples/stackblitz/components-react/leadspace/package.json
diff --git a/packages/web-components/examples/codesandbox/components-react/leadspace/src/index.css b/packages/web-components/examples/stackblitz/components-react/leadspace/src/index.css
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/leadspace/src/index.css
rename to packages/web-components/examples/stackblitz/components-react/leadspace/src/index.css
diff --git a/packages/web-components/examples/codesandbox/components-react/leadspace/src/index.js b/packages/web-components/examples/stackblitz/components-react/leadspace/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/leadspace/src/index.js
rename to packages/web-components/examples/stackblitz/components-react/leadspace/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components-react/leadspace/webpack.config.js b/packages/web-components/examples/stackblitz/components-react/leadspace/webpack.config.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/leadspace/webpack.config.js
rename to packages/web-components/examples/stackblitz/components-react/leadspace/webpack.config.js
diff --git a/packages/web-components/examples/codesandbox/components-react/leaving-ibm/.gitignore b/packages/web-components/examples/stackblitz/components-react/leaving-ibm/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/leaving-ibm/.gitignore
rename to packages/web-components/examples/stackblitz/components-react/leaving-ibm/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components-react/leaving-ibm/index.html b/packages/web-components/examples/stackblitz/components-react/leaving-ibm/index.html
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/leaving-ibm/index.html
rename to packages/web-components/examples/stackblitz/components-react/leaving-ibm/index.html
diff --git a/packages/web-components/examples/codesandbox/components-react/leaving-ibm/package.json b/packages/web-components/examples/stackblitz/components-react/leaving-ibm/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/leaving-ibm/package.json
rename to packages/web-components/examples/stackblitz/components-react/leaving-ibm/package.json
diff --git a/packages/web-components/examples/codesandbox/components-react/leaving-ibm/src/index.css b/packages/web-components/examples/stackblitz/components-react/leaving-ibm/src/index.css
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/leaving-ibm/src/index.css
rename to packages/web-components/examples/stackblitz/components-react/leaving-ibm/src/index.css
diff --git a/packages/web-components/examples/codesandbox/components-react/leaving-ibm/src/index.js b/packages/web-components/examples/stackblitz/components-react/leaving-ibm/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/leaving-ibm/src/index.js
rename to packages/web-components/examples/stackblitz/components-react/leaving-ibm/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components-react/leaving-ibm/webpack.config.js b/packages/web-components/examples/stackblitz/components-react/leaving-ibm/webpack.config.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/leaving-ibm/webpack.config.js
rename to packages/web-components/examples/stackblitz/components-react/leaving-ibm/webpack.config.js
diff --git a/packages/web-components/examples/codesandbox/components-react/lightbox-media-viewer/.gitignore b/packages/web-components/examples/stackblitz/components-react/lightbox-media-viewer/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/lightbox-media-viewer/.gitignore
rename to packages/web-components/examples/stackblitz/components-react/lightbox-media-viewer/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components-react/lightbox-media-viewer/index.html b/packages/web-components/examples/stackblitz/components-react/lightbox-media-viewer/index.html
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/lightbox-media-viewer/index.html
rename to packages/web-components/examples/stackblitz/components-react/lightbox-media-viewer/index.html
diff --git a/packages/web-components/examples/codesandbox/components-react/lightbox-media-viewer/package.json b/packages/web-components/examples/stackblitz/components-react/lightbox-media-viewer/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/lightbox-media-viewer/package.json
rename to packages/web-components/examples/stackblitz/components-react/lightbox-media-viewer/package.json
diff --git a/packages/web-components/examples/codesandbox/components-react/lightbox-media-viewer/src/index.css b/packages/web-components/examples/stackblitz/components-react/lightbox-media-viewer/src/index.css
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/lightbox-media-viewer/src/index.css
rename to packages/web-components/examples/stackblitz/components-react/lightbox-media-viewer/src/index.css
diff --git a/packages/web-components/examples/codesandbox/components-react/lightbox-media-viewer/src/index.js b/packages/web-components/examples/stackblitz/components-react/lightbox-media-viewer/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/lightbox-media-viewer/src/index.js
rename to packages/web-components/examples/stackblitz/components-react/lightbox-media-viewer/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components-react/lightbox-media-viewer/webpack.config.js b/packages/web-components/examples/stackblitz/components-react/lightbox-media-viewer/webpack.config.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/lightbox-media-viewer/webpack.config.js
rename to packages/web-components/examples/stackblitz/components-react/lightbox-media-viewer/webpack.config.js
diff --git a/packages/web-components/examples/codesandbox/components-react/link-list-section/.gitignore b/packages/web-components/examples/stackblitz/components-react/link-list-section/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/link-list-section/.gitignore
rename to packages/web-components/examples/stackblitz/components-react/link-list-section/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components-react/link-list-section/index.html b/packages/web-components/examples/stackblitz/components-react/link-list-section/index.html
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/link-list-section/index.html
rename to packages/web-components/examples/stackblitz/components-react/link-list-section/index.html
diff --git a/packages/web-components/examples/codesandbox/components-react/link-list-section/package.json b/packages/web-components/examples/stackblitz/components-react/link-list-section/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/link-list-section/package.json
rename to packages/web-components/examples/stackblitz/components-react/link-list-section/package.json
diff --git a/packages/web-components/examples/codesandbox/components-react/link-list-section/src/index.css b/packages/web-components/examples/stackblitz/components-react/link-list-section/src/index.css
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/link-list-section/src/index.css
rename to packages/web-components/examples/stackblitz/components-react/link-list-section/src/index.css
diff --git a/packages/web-components/examples/codesandbox/components-react/link-list-section/src/index.js b/packages/web-components/examples/stackblitz/components-react/link-list-section/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/link-list-section/src/index.js
rename to packages/web-components/examples/stackblitz/components-react/link-list-section/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components-react/link-list-section/webpack.config.js b/packages/web-components/examples/stackblitz/components-react/link-list-section/webpack.config.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/link-list-section/webpack.config.js
rename to packages/web-components/examples/stackblitz/components-react/link-list-section/webpack.config.js
diff --git a/packages/web-components/examples/codesandbox/components-react/link-list/.gitignore b/packages/web-components/examples/stackblitz/components-react/link-list/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/link-list/.gitignore
rename to packages/web-components/examples/stackblitz/components-react/link-list/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components-react/link-list/index.html b/packages/web-components/examples/stackblitz/components-react/link-list/index.html
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/link-list/index.html
rename to packages/web-components/examples/stackblitz/components-react/link-list/index.html
diff --git a/packages/web-components/examples/codesandbox/components-react/link-list/package.json b/packages/web-components/examples/stackblitz/components-react/link-list/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/link-list/package.json
rename to packages/web-components/examples/stackblitz/components-react/link-list/package.json
diff --git a/packages/web-components/examples/codesandbox/components-react/link-list/src/index.css b/packages/web-components/examples/stackblitz/components-react/link-list/src/index.css
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/link-list/src/index.css
rename to packages/web-components/examples/stackblitz/components-react/link-list/src/index.css
diff --git a/packages/web-components/examples/codesandbox/components-react/link-list/src/index.js b/packages/web-components/examples/stackblitz/components-react/link-list/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/link-list/src/index.js
rename to packages/web-components/examples/stackblitz/components-react/link-list/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components-react/link-list/webpack.config.js b/packages/web-components/examples/stackblitz/components-react/link-list/webpack.config.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/link-list/webpack.config.js
rename to packages/web-components/examples/stackblitz/components-react/link-list/webpack.config.js
diff --git a/packages/web-components/examples/codesandbox/components-react/locale-modal/.gitignore b/packages/web-components/examples/stackblitz/components-react/locale-modal/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/locale-modal/.gitignore
rename to packages/web-components/examples/stackblitz/components-react/locale-modal/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components-react/locale-modal/index.html b/packages/web-components/examples/stackblitz/components-react/locale-modal/index.html
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/locale-modal/index.html
rename to packages/web-components/examples/stackblitz/components-react/locale-modal/index.html
diff --git a/packages/web-components/examples/codesandbox/components-react/locale-modal/package.json b/packages/web-components/examples/stackblitz/components-react/locale-modal/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/locale-modal/package.json
rename to packages/web-components/examples/stackblitz/components-react/locale-modal/package.json
diff --git a/packages/web-components/examples/codesandbox/components-react/locale-modal/src/index.css b/packages/web-components/examples/stackblitz/components-react/locale-modal/src/index.css
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/locale-modal/src/index.css
rename to packages/web-components/examples/stackblitz/components-react/locale-modal/src/index.css
diff --git a/packages/web-components/examples/codesandbox/components-react/locale-modal/src/index.js b/packages/web-components/examples/stackblitz/components-react/locale-modal/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/locale-modal/src/index.js
rename to packages/web-components/examples/stackblitz/components-react/locale-modal/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components-react/locale-modal/webpack.config.js b/packages/web-components/examples/stackblitz/components-react/locale-modal/webpack.config.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/locale-modal/webpack.config.js
rename to packages/web-components/examples/stackblitz/components-react/locale-modal/webpack.config.js
diff --git a/packages/web-components/examples/codesandbox/components-react/logo-grid/.gitignore b/packages/web-components/examples/stackblitz/components-react/logo-grid/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/logo-grid/.gitignore
rename to packages/web-components/examples/stackblitz/components-react/logo-grid/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components-react/logo-grid/index.html b/packages/web-components/examples/stackblitz/components-react/logo-grid/index.html
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/logo-grid/index.html
rename to packages/web-components/examples/stackblitz/components-react/logo-grid/index.html
diff --git a/packages/web-components/examples/codesandbox/components-react/logo-grid/package.json b/packages/web-components/examples/stackblitz/components-react/logo-grid/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/logo-grid/package.json
rename to packages/web-components/examples/stackblitz/components-react/logo-grid/package.json
diff --git a/packages/web-components/examples/codesandbox/components-react/logo-grid/src/index.css b/packages/web-components/examples/stackblitz/components-react/logo-grid/src/index.css
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/logo-grid/src/index.css
rename to packages/web-components/examples/stackblitz/components-react/logo-grid/src/index.css
diff --git a/packages/web-components/examples/codesandbox/components-react/logo-grid/src/index.js b/packages/web-components/examples/stackblitz/components-react/logo-grid/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/logo-grid/src/index.js
rename to packages/web-components/examples/stackblitz/components-react/logo-grid/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components-react/logo-grid/webpack.config.js b/packages/web-components/examples/stackblitz/components-react/logo-grid/webpack.config.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/logo-grid/webpack.config.js
rename to packages/web-components/examples/stackblitz/components-react/logo-grid/webpack.config.js
diff --git a/packages/web-components/examples/codesandbox/components-react/masthead-l1/.gitignore b/packages/web-components/examples/stackblitz/components-react/masthead-l1/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/masthead-l1/.gitignore
rename to packages/web-components/examples/stackblitz/components-react/masthead-l1/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components-react/masthead-l1/index.html b/packages/web-components/examples/stackblitz/components-react/masthead-l1/index.html
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/masthead-l1/index.html
rename to packages/web-components/examples/stackblitz/components-react/masthead-l1/index.html
diff --git a/packages/web-components/examples/codesandbox/components-react/masthead-l1/package.json b/packages/web-components/examples/stackblitz/components-react/masthead-l1/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/masthead-l1/package.json
rename to packages/web-components/examples/stackblitz/components-react/masthead-l1/package.json
diff --git a/packages/web-components/examples/codesandbox/components-react/masthead-l1/src/index.css b/packages/web-components/examples/stackblitz/components-react/masthead-l1/src/index.css
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/masthead-l1/src/index.css
rename to packages/web-components/examples/stackblitz/components-react/masthead-l1/src/index.css
diff --git a/packages/web-components/examples/codesandbox/components-react/masthead-l1/src/index.js b/packages/web-components/examples/stackblitz/components-react/masthead-l1/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/masthead-l1/src/index.js
rename to packages/web-components/examples/stackblitz/components-react/masthead-l1/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components-react/masthead-l1/webpack.config.js b/packages/web-components/examples/stackblitz/components-react/masthead-l1/webpack.config.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/masthead-l1/webpack.config.js
rename to packages/web-components/examples/stackblitz/components-react/masthead-l1/webpack.config.js
diff --git a/packages/web-components/examples/codesandbox/components-react/masthead/.gitignore b/packages/web-components/examples/stackblitz/components-react/masthead/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/masthead/.gitignore
rename to packages/web-components/examples/stackblitz/components-react/masthead/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components-react/masthead/index.html b/packages/web-components/examples/stackblitz/components-react/masthead/index.html
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/masthead/index.html
rename to packages/web-components/examples/stackblitz/components-react/masthead/index.html
diff --git a/packages/web-components/examples/codesandbox/components-react/masthead/package.json b/packages/web-components/examples/stackblitz/components-react/masthead/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/masthead/package.json
rename to packages/web-components/examples/stackblitz/components-react/masthead/package.json
diff --git a/packages/web-components/examples/codesandbox/components-react/masthead/src/index.css b/packages/web-components/examples/stackblitz/components-react/masthead/src/index.css
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/masthead/src/index.css
rename to packages/web-components/examples/stackblitz/components-react/masthead/src/index.css
diff --git a/packages/web-components/examples/codesandbox/components-react/masthead/src/index.js b/packages/web-components/examples/stackblitz/components-react/masthead/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/masthead/src/index.js
rename to packages/web-components/examples/stackblitz/components-react/masthead/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components-react/masthead/webpack.config.js b/packages/web-components/examples/stackblitz/components-react/masthead/webpack.config.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/masthead/webpack.config.js
rename to packages/web-components/examples/stackblitz/components-react/masthead/webpack.config.js
diff --git a/packages/web-components/examples/codesandbox/components-react/quote/.gitignore b/packages/web-components/examples/stackblitz/components-react/quote/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/quote/.gitignore
rename to packages/web-components/examples/stackblitz/components-react/quote/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components-react/quote/index.html b/packages/web-components/examples/stackblitz/components-react/quote/index.html
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/quote/index.html
rename to packages/web-components/examples/stackblitz/components-react/quote/index.html
diff --git a/packages/web-components/examples/codesandbox/components-react/quote/package.json b/packages/web-components/examples/stackblitz/components-react/quote/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/quote/package.json
rename to packages/web-components/examples/stackblitz/components-react/quote/package.json
diff --git a/packages/web-components/examples/codesandbox/components-react/quote/src/index.css b/packages/web-components/examples/stackblitz/components-react/quote/src/index.css
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/quote/src/index.css
rename to packages/web-components/examples/stackblitz/components-react/quote/src/index.css
diff --git a/packages/web-components/examples/codesandbox/components-react/quote/src/index.js b/packages/web-components/examples/stackblitz/components-react/quote/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/quote/src/index.js
rename to packages/web-components/examples/stackblitz/components-react/quote/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components-react/quote/webpack.config.js b/packages/web-components/examples/stackblitz/components-react/quote/webpack.config.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/quote/webpack.config.js
rename to packages/web-components/examples/stackblitz/components-react/quote/webpack.config.js
diff --git a/packages/web-components/examples/codesandbox/components-react/search-with-typeahead/.gitignore b/packages/web-components/examples/stackblitz/components-react/search-with-typeahead/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/search-with-typeahead/.gitignore
rename to packages/web-components/examples/stackblitz/components-react/search-with-typeahead/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components-react/search-with-typeahead/index.html b/packages/web-components/examples/stackblitz/components-react/search-with-typeahead/index.html
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/search-with-typeahead/index.html
rename to packages/web-components/examples/stackblitz/components-react/search-with-typeahead/index.html
diff --git a/packages/web-components/examples/codesandbox/components-react/search-with-typeahead/package.json b/packages/web-components/examples/stackblitz/components-react/search-with-typeahead/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/search-with-typeahead/package.json
rename to packages/web-components/examples/stackblitz/components-react/search-with-typeahead/package.json
diff --git a/packages/web-components/examples/codesandbox/components-react/search-with-typeahead/src/index.css b/packages/web-components/examples/stackblitz/components-react/search-with-typeahead/src/index.css
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/search-with-typeahead/src/index.css
rename to packages/web-components/examples/stackblitz/components-react/search-with-typeahead/src/index.css
diff --git a/packages/web-components/examples/codesandbox/components-react/search-with-typeahead/src/index.js b/packages/web-components/examples/stackblitz/components-react/search-with-typeahead/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/search-with-typeahead/src/index.js
rename to packages/web-components/examples/stackblitz/components-react/search-with-typeahead/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components-react/search-with-typeahead/webpack.config.js b/packages/web-components/examples/stackblitz/components-react/search-with-typeahead/webpack.config.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/search-with-typeahead/webpack.config.js
rename to packages/web-components/examples/stackblitz/components-react/search-with-typeahead/webpack.config.js
diff --git a/packages/web-components/examples/codesandbox/components-react/structured-list/.gitignore b/packages/web-components/examples/stackblitz/components-react/structured-list/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/structured-list/.gitignore
rename to packages/web-components/examples/stackblitz/components-react/structured-list/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components-react/structured-list/index.html b/packages/web-components/examples/stackblitz/components-react/structured-list/index.html
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/structured-list/index.html
rename to packages/web-components/examples/stackblitz/components-react/structured-list/index.html
diff --git a/packages/web-components/examples/codesandbox/components-react/structured-list/package.json b/packages/web-components/examples/stackblitz/components-react/structured-list/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/structured-list/package.json
rename to packages/web-components/examples/stackblitz/components-react/structured-list/package.json
diff --git a/packages/web-components/examples/codesandbox/components-react/structured-list/src/index.css b/packages/web-components/examples/stackblitz/components-react/structured-list/src/index.css
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/structured-list/src/index.css
rename to packages/web-components/examples/stackblitz/components-react/structured-list/src/index.css
diff --git a/packages/web-components/examples/codesandbox/components-react/structured-list/src/index.js b/packages/web-components/examples/stackblitz/components-react/structured-list/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/structured-list/src/index.js
rename to packages/web-components/examples/stackblitz/components-react/structured-list/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components-react/structured-list/webpack.config.js b/packages/web-components/examples/stackblitz/components-react/structured-list/webpack.config.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/structured-list/webpack.config.js
rename to packages/web-components/examples/stackblitz/components-react/structured-list/webpack.config.js
diff --git a/packages/web-components/examples/codesandbox/components-react/table-of-contents/.gitignore b/packages/web-components/examples/stackblitz/components-react/table-of-contents/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/table-of-contents/.gitignore
rename to packages/web-components/examples/stackblitz/components-react/table-of-contents/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components-react/table-of-contents/index.html b/packages/web-components/examples/stackblitz/components-react/table-of-contents/index.html
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/table-of-contents/index.html
rename to packages/web-components/examples/stackblitz/components-react/table-of-contents/index.html
diff --git a/packages/web-components/examples/codesandbox/components-react/table-of-contents/package.json b/packages/web-components/examples/stackblitz/components-react/table-of-contents/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/table-of-contents/package.json
rename to packages/web-components/examples/stackblitz/components-react/table-of-contents/package.json
diff --git a/packages/web-components/examples/codesandbox/components-react/table-of-contents/src/index.css b/packages/web-components/examples/stackblitz/components-react/table-of-contents/src/index.css
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/table-of-contents/src/index.css
rename to packages/web-components/examples/stackblitz/components-react/table-of-contents/src/index.css
diff --git a/packages/web-components/examples/codesandbox/components-react/table-of-contents/src/index.js b/packages/web-components/examples/stackblitz/components-react/table-of-contents/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/table-of-contents/src/index.js
rename to packages/web-components/examples/stackblitz/components-react/table-of-contents/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components-react/table-of-contents/webpack.config.js b/packages/web-components/examples/stackblitz/components-react/table-of-contents/webpack.config.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/table-of-contents/webpack.config.js
rename to packages/web-components/examples/stackblitz/components-react/table-of-contents/webpack.config.js
diff --git a/packages/web-components/examples/codesandbox/components-react/tabs-extended-media/.gitignore b/packages/web-components/examples/stackblitz/components-react/tabs-extended-media/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/tabs-extended-media/.gitignore
rename to packages/web-components/examples/stackblitz/components-react/tabs-extended-media/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components-react/tabs-extended-media/index.html b/packages/web-components/examples/stackblitz/components-react/tabs-extended-media/index.html
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/tabs-extended-media/index.html
rename to packages/web-components/examples/stackblitz/components-react/tabs-extended-media/index.html
diff --git a/packages/web-components/examples/codesandbox/components-react/tabs-extended-media/package.json b/packages/web-components/examples/stackblitz/components-react/tabs-extended-media/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/tabs-extended-media/package.json
rename to packages/web-components/examples/stackblitz/components-react/tabs-extended-media/package.json
diff --git a/packages/web-components/examples/codesandbox/components-react/tabs-extended-media/src/index.css b/packages/web-components/examples/stackblitz/components-react/tabs-extended-media/src/index.css
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/tabs-extended-media/src/index.css
rename to packages/web-components/examples/stackblitz/components-react/tabs-extended-media/src/index.css
diff --git a/packages/web-components/examples/codesandbox/components-react/tabs-extended-media/src/index.js b/packages/web-components/examples/stackblitz/components-react/tabs-extended-media/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/tabs-extended-media/src/index.js
rename to packages/web-components/examples/stackblitz/components-react/tabs-extended-media/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components-react/tabs-extended-media/webpack.config.js b/packages/web-components/examples/stackblitz/components-react/tabs-extended-media/webpack.config.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/tabs-extended-media/webpack.config.js
rename to packages/web-components/examples/stackblitz/components-react/tabs-extended-media/webpack.config.js
diff --git a/packages/web-components/examples/codesandbox/components-react/tabs-extended/.gitignore b/packages/web-components/examples/stackblitz/components-react/tabs-extended/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/tabs-extended/.gitignore
rename to packages/web-components/examples/stackblitz/components-react/tabs-extended/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components-react/tabs-extended/index.html b/packages/web-components/examples/stackblitz/components-react/tabs-extended/index.html
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/tabs-extended/index.html
rename to packages/web-components/examples/stackblitz/components-react/tabs-extended/index.html
diff --git a/packages/web-components/examples/codesandbox/components-react/tabs-extended/package.json b/packages/web-components/examples/stackblitz/components-react/tabs-extended/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/tabs-extended/package.json
rename to packages/web-components/examples/stackblitz/components-react/tabs-extended/package.json
diff --git a/packages/web-components/examples/codesandbox/components-react/tabs-extended/src/index.css b/packages/web-components/examples/stackblitz/components-react/tabs-extended/src/index.css
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/tabs-extended/src/index.css
rename to packages/web-components/examples/stackblitz/components-react/tabs-extended/src/index.css
diff --git a/packages/web-components/examples/codesandbox/components-react/tabs-extended/src/index.js b/packages/web-components/examples/stackblitz/components-react/tabs-extended/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/tabs-extended/src/index.js
rename to packages/web-components/examples/stackblitz/components-react/tabs-extended/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components-react/tabs-extended/webpack.config.js b/packages/web-components/examples/stackblitz/components-react/tabs-extended/webpack.config.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/tabs-extended/webpack.config.js
rename to packages/web-components/examples/stackblitz/components-react/tabs-extended/webpack.config.js
diff --git a/packages/web-components/examples/codesandbox/components-react/video-player/.gitignore b/packages/web-components/examples/stackblitz/components-react/video-player/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/video-player/.gitignore
rename to packages/web-components/examples/stackblitz/components-react/video-player/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components-react/video-player/index.html b/packages/web-components/examples/stackblitz/components-react/video-player/index.html
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/video-player/index.html
rename to packages/web-components/examples/stackblitz/components-react/video-player/index.html
diff --git a/packages/web-components/examples/codesandbox/components-react/video-player/package.json b/packages/web-components/examples/stackblitz/components-react/video-player/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/video-player/package.json
rename to packages/web-components/examples/stackblitz/components-react/video-player/package.json
diff --git a/packages/web-components/examples/codesandbox/components-react/video-player/src/index.css b/packages/web-components/examples/stackblitz/components-react/video-player/src/index.css
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/video-player/src/index.css
rename to packages/web-components/examples/stackblitz/components-react/video-player/src/index.css
diff --git a/packages/web-components/examples/codesandbox/components-react/video-player/src/index.js b/packages/web-components/examples/stackblitz/components-react/video-player/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/video-player/src/index.js
rename to packages/web-components/examples/stackblitz/components-react/video-player/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components-react/video-player/webpack.config.js b/packages/web-components/examples/stackblitz/components-react/video-player/webpack.config.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/video-player/webpack.config.js
rename to packages/web-components/examples/stackblitz/components-react/video-player/webpack.config.js
diff --git a/packages/web-components/examples/codesandbox/components/back-to-top/.gitignore b/packages/web-components/examples/stackblitz/components/back-to-top/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/back-to-top/.gitignore
rename to packages/web-components/examples/stackblitz/components/back-to-top/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components/back-to-top/cdn.html b/packages/web-components/examples/stackblitz/components/back-to-top/cdn.html
similarity index 96%
rename from packages/web-components/examples/codesandbox/components/back-to-top/cdn.html
rename to packages/web-components/examples/stackblitz/components/back-to-top/cdn.html
index 72391fd2a10..9d3effc78b4 100644
--- a/packages/web-components/examples/codesandbox/components/back-to-top/cdn.html
+++ b/packages/web-components/examples/stackblitz/components/back-to-top/cdn.html
@@ -29,6 +29,6 @@ <h1>Scroll down! 👋</h1>
     </div>
   </div>
 </div>
-<cds-back-to-top></cds-back-to-top>
+<c4d-back-to-top></c4d-back-to-top>
 </body>
 </html>
diff --git a/packages/web-components/examples/codesandbox/components/back-to-top/index.html b/packages/web-components/examples/stackblitz/components/back-to-top/index.html
similarity index 95%
rename from packages/web-components/examples/codesandbox/components/back-to-top/index.html
rename to packages/web-components/examples/stackblitz/components/back-to-top/index.html
index 0f561f0caca..c7389423a19 100644
--- a/packages/web-components/examples/codesandbox/components/back-to-top/index.html
+++ b/packages/web-components/examples/stackblitz/components/back-to-top/index.html
@@ -30,6 +30,6 @@ <h1>Scroll down! 👋</h1>
     </div>
   </div>
 </div>
-<cds-back-to-top></cds-back-to-top>
+<c4d-back-to-top></c4d-back-to-top>
 </body>
 </html>
diff --git a/packages/web-components/examples/codesandbox/components/back-to-top/package.json b/packages/web-components/examples/stackblitz/components/back-to-top/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/back-to-top/package.json
rename to packages/web-components/examples/stackblitz/components/back-to-top/package.json
diff --git a/packages/web-components/examples/codesandbox/components/back-to-top/src/index.js b/packages/web-components/examples/stackblitz/components/back-to-top/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/back-to-top/src/index.js
rename to packages/web-components/examples/stackblitz/components/back-to-top/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components/background-media/.gitignore b/packages/web-components/examples/stackblitz/components/background-media/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/background-media/.gitignore
rename to packages/web-components/examples/stackblitz/components/background-media/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components/background-media/cdn.html b/packages/web-components/examples/stackblitz/components/background-media/cdn.html
similarity index 78%
rename from packages/web-components/examples/codesandbox/components/background-media/cdn.html
rename to packages/web-components/examples/stackblitz/components/background-media/cdn.html
index 92029a2987c..59f73ea2584 100644
--- a/packages/web-components/examples/codesandbox/components/background-media/cdn.html
+++ b/packages/web-components/examples/stackblitz/components/background-media/cdn.html
@@ -14,7 +14,7 @@
   <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style type="text/css">
     /* Suppress custom element until styles are loaded */
-    cds-background-media:not(:defined) {
+    c4d-background-media:not(:defined) {
       display: none;
     }
   </style>
@@ -25,30 +25,30 @@
   <div class="cds--grid">
     <div class="cds--row">
       <div class="cds--col-sm-4 cds--no-gutter">
-        <cds-background-media
+        <c4d-background-media
           alt="alt-text"
           default-src="https://fpoimg.com/672x672?text=1:1&bg_color=ee5396&text_color=161616"
         >
-          <cds-image-item
+          <c4d-image-item
             media="(min-width: 1312px)"
             srcset="https://fpoimg.com/672x672?text=1:1&bg_color=ee5396&text_color=161616"
           >
-          </cds-image-item>
-          <cds-image-item
+          </c4d-image-item>
+          <c4d-image-item
             media="(min-width: 1056px)"
             srcset="https://fpoimg.com/600x300?text=2:1&bg_color=ee5396&text_color=161616"
           >
-          </cds-image-item>
-          <cds-image-item media="(min-width: 991px)"
+          </c4d-image-item>
+          <c4d-image-item media="(min-width: 991px)"
                           srcset="https://fpoimg.com/600x600?text=1:1&bg_color=ee5396&text_color=161616">
-          </cds-image-item>
-          <cds-image-item media="(min-width: 672px)"
+          </c4d-image-item>
+          <c4d-image-item media="(min-width: 672px)"
                           srcset="https://fpoimg.com/400x200?text=2:1&bg_color=ee5396&text_color=161616">
-          </cds-image-item>
-          <cds-image-item media="(min-width: 320px)"
+          </c4d-image-item>
+          <c4d-image-item media="(min-width: 320px)"
                           srcset="https://fpoimg.com/320x160?text=2:1&bg_color=ee5396&text_color=161616">
-          </cds-image-item>
-        </cds-background-media>
+          </c4d-image-item>
+        </c4d-background-media>
       </div>
     </div>
   </div>
diff --git a/packages/web-components/examples/codesandbox/components/background-media/index.html b/packages/web-components/examples/stackblitz/components/background-media/index.html
similarity index 77%
rename from packages/web-components/examples/codesandbox/components/background-media/index.html
rename to packages/web-components/examples/stackblitz/components/background-media/index.html
index d6f600b94ae..63298261a01 100644
--- a/packages/web-components/examples/codesandbox/components/background-media/index.html
+++ b/packages/web-components/examples/stackblitz/components/background-media/index.html
@@ -14,7 +14,7 @@
   <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style type="text/css">
     /* Suppress custom element until styles are loaded */
-    cds-background-media:not(:defined) {
+    c4d-background-media:not(:defined) {
       display: none;
     }
   </style>
@@ -24,30 +24,30 @@
   <div class="cds--grid">
     <div class="cds--row">
       <div class="cds--col-sm-4 cds--no-gutter">
-        <cds-background-media
+        <c4d-background-media
           alt="alt-text"
           default-src="https://fpoimg.com/672x672?text=1:1&bg_color=ee5396&text_color=161616"
         >
-          <cds-image-item
+          <c4d-image-item
             media="(min-width: 1312px)"
             srcset="https://fpoimg.com/672x672?text=1:1&bg_color=ee5396&text_color=161616"
           >
-          </cds-image-item>
-          <cds-image-item
+          </c4d-image-item>
+          <c4d-image-item
             media="(min-width: 1056px)"
             srcset="https://fpoimg.com/600x300?text=2:1&bg_color=ee5396&text_color=161616"
           >
-          </cds-image-item>
-          <cds-image-item media="(min-width: 991px)"
+          </c4d-image-item>
+          <c4d-image-item media="(min-width: 991px)"
                           srcset="https://fpoimg.com/600x600?text=1:1&bg_color=ee5396&text_color=161616">
-          </cds-image-item>
-          <cds-image-item media="(min-width: 672px)"
+          </c4d-image-item>
+          <c4d-image-item media="(min-width: 672px)"
                           srcset="https://fpoimg.com/400x200?text=2:1&bg_color=ee5396&text_color=161616">
-          </cds-image-item>
-          <cds-image-item media="(min-width: 320px)"
+          </c4d-image-item>
+          <c4d-image-item media="(min-width: 320px)"
                           srcset="https://fpoimg.com/320x160?text=2:1&bg_color=ee5396&text_color=161616">
-          </cds-image-item>
-        </cds-background-media>
+          </c4d-image-item>
+        </c4d-background-media>
       </div>
     </div>
   </div>
diff --git a/packages/web-components/examples/codesandbox/components/background-media/package.json b/packages/web-components/examples/stackblitz/components/background-media/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/background-media/package.json
rename to packages/web-components/examples/stackblitz/components/background-media/package.json
diff --git a/packages/web-components/examples/codesandbox/components/background-media/src/index.js b/packages/web-components/examples/stackblitz/components/background-media/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/background-media/src/index.js
rename to packages/web-components/examples/stackblitz/components/background-media/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components/button-group/.gitignore b/packages/web-components/examples/stackblitz/components/button-group/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/button-group/.gitignore
rename to packages/web-components/examples/stackblitz/components/button-group/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components/button-group/cdn.html b/packages/web-components/examples/stackblitz/components/button-group/cdn.html
similarity index 96%
rename from packages/web-components/examples/codesandbox/components/button-group/cdn.html
rename to packages/web-components/examples/stackblitz/components/button-group/cdn.html
index fa9aab9a566..57a7f9860eb 100644
--- a/packages/web-components/examples/codesandbox/components/button-group/cdn.html
+++ b/packages/web-components/examples/stackblitz/components/button-group/cdn.html
@@ -16,7 +16,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-button-group:not(:defined) {
+    c4d-button-group:not(:defined) {
       display: none;
     }
   </style>
diff --git a/packages/web-components/examples/codesandbox/components/button-group/index.html b/packages/web-components/examples/stackblitz/components/button-group/index.html
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/button-group/index.html
rename to packages/web-components/examples/stackblitz/components/button-group/index.html
diff --git a/packages/web-components/examples/codesandbox/components/button-group/package.json b/packages/web-components/examples/stackblitz/components/button-group/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/button-group/package.json
rename to packages/web-components/examples/stackblitz/components/button-group/package.json
diff --git a/packages/web-components/examples/codesandbox/components/button-group/src/index.js b/packages/web-components/examples/stackblitz/components/button-group/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/button-group/src/index.js
rename to packages/web-components/examples/stackblitz/components/button-group/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components/button/.gitignore b/packages/web-components/examples/stackblitz/components/button/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/button/.gitignore
rename to packages/web-components/examples/stackblitz/components/button/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components/button/cdn.html b/packages/web-components/examples/stackblitz/components/button/cdn.html
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/button/cdn.html
rename to packages/web-components/examples/stackblitz/components/button/cdn.html
diff --git a/packages/web-components/examples/codesandbox/components/button/index.html b/packages/web-components/examples/stackblitz/components/button/index.html
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/button/index.html
rename to packages/web-components/examples/stackblitz/components/button/index.html
diff --git a/packages/web-components/examples/codesandbox/components/button/package.json b/packages/web-components/examples/stackblitz/components/button/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/button/package.json
rename to packages/web-components/examples/stackblitz/components/button/package.json
diff --git a/packages/web-components/examples/codesandbox/components/button/src/index.js b/packages/web-components/examples/stackblitz/components/button/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/button/src/index.js
rename to packages/web-components/examples/stackblitz/components/button/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components/callout-quote/.gitignore b/packages/web-components/examples/stackblitz/components/callout-quote/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/callout-quote/.gitignore
rename to packages/web-components/examples/stackblitz/components/callout-quote/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components/callout-quote/cdn.html b/packages/web-components/examples/stackblitz/components/callout-quote/cdn.html
similarity index 78%
rename from packages/web-components/examples/codesandbox/components/callout-quote/cdn.html
rename to packages/web-components/examples/stackblitz/components/callout-quote/cdn.html
index 831f0d61bc0..dbcbd58a98a 100644
--- a/packages/web-components/examples/codesandbox/components/callout-quote/cdn.html
+++ b/packages/web-components/examples/stackblitz/components/callout-quote/cdn.html
@@ -16,7 +16,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-callout-quote:not(:defined) {
+    c4d-callout-quote:not(:defined) {
       display: none;
     }
   </style>
@@ -27,13 +27,13 @@
 <div class="cds--grid">
   <div class="cds--row">
     <div class="cds--col-sm-4 cds--col-lg-12">
-      <cds-callout-quote>
+      <c4d-callout-quote>
         Callout Quote: Duis aute irure dolor in reprehenderit
-        <cds-quote-source-heading>Lorem ipsum</cds-quote-source-heading>
-        <cds-quote-source-copy>consectetur adipiscing elit
-        </cds-quote-source-copy>
-        <cds-quote-source-bottom-copy>IBM Cloud</cds-quote-source-bottom-copy>
-        <cds-callout-link-with-icon slot="footer" href="https//example/com">
+        <c4d-quote-source-heading>Lorem ipsum</c4d-quote-source-heading>
+        <c4d-quote-source-copy>consectetur adipiscing elit
+        </c4d-quote-source-copy>
+        <c4d-quote-source-bottom-copy>IBM Cloud</c4d-quote-source-bottom-copy>
+        <c4d-callout-link-with-icon slot="footer" href="https//example/com">
           Link with Icon
           <svg
             slot="icon"
@@ -49,8 +49,8 @@
             <path
               d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
           </svg>
-        </cds-callout-link-with-icon>
-      </cds-callout-quote>
+        </c4d-callout-link-with-icon>
+      </c4d-callout-quote>
     </div>
   </div>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/callout-quote/index.html b/packages/web-components/examples/stackblitz/components/callout-quote/index.html
similarity index 76%
rename from packages/web-components/examples/codesandbox/components/callout-quote/index.html
rename to packages/web-components/examples/stackblitz/components/callout-quote/index.html
index 4dc0ded1e25..ba8f2c7e362 100644
--- a/packages/web-components/examples/codesandbox/components/callout-quote/index.html
+++ b/packages/web-components/examples/stackblitz/components/callout-quote/index.html
@@ -16,7 +16,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-callout-quote:not(:defined) {
+    c4d-callout-quote:not(:defined) {
       display: none;
     }
   </style>
@@ -26,13 +26,13 @@
 <div class="cds--grid">
   <div class="cds--row">
     <div class="cds--col-sm-4 cds--col-lg-12">
-      <cds-callout-quote>
+      <c4d-callout-quote>
         Callout Quote: Duis aute irure dolor in reprehenderit
-        <cds-quote-source-heading>Lorem ipsum</cds-quote-source-heading>
-        <cds-quote-source-copy>consectetur adipiscing elit
-        </cds-quote-source-copy>
-        <cds-quote-source-bottom-copy>IBM Cloud</cds-quote-source-bottom-copy>
-        <cds-callout-link-with-icon slot="footer" href="https//example/com">
+        <c4d-quote-source-heading>Lorem ipsum</c4d-quote-source-heading>
+        <c4d-quote-source-copy>consectetur adipiscing elit
+        </c4d-quote-source-copy>
+        <c4d-quote-source-bottom-copy>IBM Cloud</c4d-quote-source-bottom-copy>
+        <c4d-callout-link-with-icon slot="footer" href="https//example/com">
           Link with Icon
           <svg
             slot="icon"
@@ -48,8 +48,8 @@
             <path
               d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
           </svg>
-        </cds-callout-link-with-icon>
-      </cds-callout-quote>
+        </c4d-callout-link-with-icon>
+      </c4d-callout-quote>
     </div>
   </div>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/callout-quote/package.json b/packages/web-components/examples/stackblitz/components/callout-quote/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/callout-quote/package.json
rename to packages/web-components/examples/stackblitz/components/callout-quote/package.json
diff --git a/packages/web-components/examples/codesandbox/components/callout-quote/src/index.js b/packages/web-components/examples/stackblitz/components/callout-quote/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/callout-quote/src/index.js
rename to packages/web-components/examples/stackblitz/components/callout-quote/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components/callout-with-media/.gitignore b/packages/web-components/examples/stackblitz/components/callout-with-media/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/callout-with-media/.gitignore
rename to packages/web-components/examples/stackblitz/components/callout-with-media/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components/callout-with-media/cdn.html b/packages/web-components/examples/stackblitz/components/callout-with-media/cdn.html
similarity index 76%
rename from packages/web-components/examples/codesandbox/components/callout-with-media/cdn.html
rename to packages/web-components/examples/stackblitz/components/callout-with-media/cdn.html
index 524610f8b35..b00f1120a21 100644
--- a/packages/web-components/examples/codesandbox/components/callout-with-media/cdn.html
+++ b/packages/web-components/examples/stackblitz/components/callout-with-media/cdn.html
@@ -16,7 +16,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-callout-with-media:not(:defined) {
+    c4d-callout-with-media:not(:defined) {
       display: none;
     }
   </style>
@@ -27,26 +27,26 @@
 <div class="cds--grid">
   <div class="cds--row">
     <div class="cds--col-sm-4 cds--col-lg-12">
-      <cds-callout-with-media>
-        <cds-content-block-heading>Curabitur malesuada varius mi eu posuere
-        </cds-content-block-heading>
-        <cds-callout-with-media-copy size="sm">
-          <cds-content-block-paragraph
+      <c4d-callout-with-media>
+        <c4d-content-block-heading>Curabitur malesuada varius mi eu posuere
+        </c4d-content-block-heading>
+        <c4d-callout-with-media-copy size="sm">
+          <c4d-content-block-paragraph
           >Lorem ipsum <em>dolor</em> sit amet, consectetur adipiscing elit.
             Aenean et ultricies est. Mauris iaculis eget dolor
             nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis,
             <em>consequat</em> libero. Here are some common
             categories:
-          </cds-content-block-paragraph
+          </c4d-content-block-paragraph
           >
-        </cds-callout-with-media-copy>
-        <cds-callout-with-media-image
+        </c4d-callout-with-media-copy>
+        <c4d-callout-with-media-image
           alt="Image alt text"
           default-src="https://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616"
           heading="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
         >
-        </cds-callout-with-media-image>
-      </cds-callout-with-media>
+        </c4d-callout-with-media-image>
+      </c4d-callout-with-media>
     </div>
   </div>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/callout-with-media/index.html b/packages/web-components/examples/stackblitz/components/callout-with-media/index.html
similarity index 74%
rename from packages/web-components/examples/codesandbox/components/callout-with-media/index.html
rename to packages/web-components/examples/stackblitz/components/callout-with-media/index.html
index 0952ede5674..11de682d740 100644
--- a/packages/web-components/examples/codesandbox/components/callout-with-media/index.html
+++ b/packages/web-components/examples/stackblitz/components/callout-with-media/index.html
@@ -16,7 +16,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-callout-with-media:not(:defined) {
+    c4d-callout-with-media:not(:defined) {
       display: none;
     }
   </style>
@@ -26,26 +26,26 @@
 <div class="cds--grid">
   <div class="cds--row">
     <div class="cds--col-sm-4 cds--col-lg-12">
-      <cds-callout-with-media>
-        <cds-content-block-heading>Curabitur malesuada varius mi eu posuere
-        </cds-content-block-heading>
-        <cds-callout-with-media-copy size="sm">
-          <cds-content-block-paragraph
+      <c4d-callout-with-media>
+        <c4d-content-block-heading>Curabitur malesuada varius mi eu posuere
+        </c4d-content-block-heading>
+        <c4d-callout-with-media-copy size="sm">
+          <c4d-content-block-paragraph
           >Lorem ipsum <em>dolor</em> sit amet, consectetur adipiscing elit.
             Aenean et ultricies est. Mauris iaculis eget dolor
             nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis,
             <em>consequat</em> libero. Here are some common
             categories:
-          </cds-content-block-paragraph
+          </c4d-content-block-paragraph
           >
-        </cds-callout-with-media-copy>
-        <cds-callout-with-media-image
+        </c4d-callout-with-media-copy>
+        <c4d-callout-with-media-image
           alt="Image alt text"
           default-src="https://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616"
           heading="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
         >
-        </cds-callout-with-media-image>
-      </cds-callout-with-media>
+        </c4d-callout-with-media-image>
+      </c4d-callout-with-media>
     </div>
   </div>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/callout-with-media/package.json b/packages/web-components/examples/stackblitz/components/callout-with-media/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/callout-with-media/package.json
rename to packages/web-components/examples/stackblitz/components/callout-with-media/package.json
diff --git a/packages/web-components/examples/codesandbox/components/callout-with-media/src/index.js b/packages/web-components/examples/stackblitz/components/callout-with-media/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/callout-with-media/src/index.js
rename to packages/web-components/examples/stackblitz/components/callout-with-media/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components/card-group/.gitignore b/packages/web-components/examples/stackblitz/components/card-group/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/card-group/.gitignore
rename to packages/web-components/examples/stackblitz/components/card-group/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components/card-group/cdn.html b/packages/web-components/examples/stackblitz/components/card-group/cdn.html
similarity index 77%
rename from packages/web-components/examples/codesandbox/components/card-group/cdn.html
rename to packages/web-components/examples/stackblitz/components/card-group/cdn.html
index 70eaba276e7..36b29cccc4d 100644
--- a/packages/web-components/examples/codesandbox/components/card-group/cdn.html
+++ b/packages/web-components/examples/stackblitz/components/card-group/cdn.html
@@ -16,7 +16,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-card-group:not(:defined) {
+    c4d-card-group:not(:defined) {
       display: none;
     }
   </style>
@@ -27,9 +27,9 @@
 <div class="cds--grid">
   <div class="cds--row">
     <div class="cds--col-sm-4 cds--col-lg-12">
-      <cds-card-group>
-        <cds-card-group-item href="https://example.com">
-          <cds-card-heading>Nunc convallis lobortis</cds-card-heading>
+      <c4d-card-group>
+        <c4d-card-group-item href="https://example.com">
+          <c4d-card-heading>Nunc convallis lobortis</c4d-card-heading>
           <p>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
             ultricies est. Mauris iaculis eget dolor nec
@@ -37,7 +37,7 @@
             consequat
             libero.
           </p>
-          <cds-card-cta-footer slot="footer">
+          <c4d-card-footer slot="footer">
             <svg
               slot="icon"
               focusable="false"
@@ -51,10 +51,10 @@
               <path
                 d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
             </svg>
-          </cds-card-cta-footer>
-        </cds-card-group-item>
-        <cds-card-group-item href="https://example.com">
-          <cds-card-heading>Nunc convallis lobortis</cds-card-heading>
+          </c4d-card-footer>
+        </c4d-card-group-item>
+        <c4d-card-group-item href="https://example.com">
+          <c4d-card-heading>Nunc convallis lobortis</c4d-card-heading>
           <p>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
             ultricies est. Mauris iaculis eget dolor nec
@@ -62,7 +62,7 @@
             consequat
             libero.
           </p>
-          <cds-card-cta-footer slot="footer">
+          <c4d-card-footer slot="footer">
             <svg
               slot="icon"
               focusable="false"
@@ -76,10 +76,10 @@
               <path
                 d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
             </svg>
-          </cds-card-cta-footer>
-        </cds-card-group-item>
-        <cds-card-group-item href="https://example.com">
-          <cds-card-heading>Nunc convallis lobortis</cds-card-heading>
+          </c4d-card-footer>
+        </c4d-card-group-item>
+        <c4d-card-group-item href="https://example.com">
+          <c4d-card-heading>Nunc convallis lobortis</c4d-card-heading>
           <p>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
             ultricies est. Mauris iaculis eget dolor nec
@@ -87,7 +87,7 @@
             consequat
             libero.
           </p>
-          <cds-card-cta-footer slot="footer">
+          <c4d-card-footer slot="footer">
             <svg
               slot="icon"
               focusable="false"
@@ -101,10 +101,10 @@
               <path
                 d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
             </svg>
-          </cds-card-cta-footer>
-        </cds-card-group-item>
-        <cds-card-group-item href="https://example.com">
-          <cds-card-heading>Nunc convallis lobortis</cds-card-heading>
+          </c4d-card-footer>
+        </c4d-card-group-item>
+        <c4d-card-group-item href="https://example.com">
+          <c4d-card-heading>Nunc convallis lobortis</c4d-card-heading>
           <p>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
             ultricies est. Mauris iaculis eget dolor nec
@@ -112,7 +112,7 @@
             consequat
             libero.
           </p>
-          <cds-card-cta-footer slot="footer">
+          <c4d-card-footer slot="footer">
             <svg
               slot="icon"
               focusable="false"
@@ -126,10 +126,10 @@
               <path
                 d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
             </svg>
-          </cds-card-cta-footer>
-        </cds-card-group-item>
-        <cds-card-group-item href="https://example.com">
-          <cds-card-heading>Nunc convallis lobortis</cds-card-heading>
+          </c4d-card-footer>
+        </c4d-card-group-item>
+        <c4d-card-group-item href="https://example.com">
+          <c4d-card-heading>Nunc convallis lobortis</c4d-card-heading>
           <p>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
             ultricies est. Mauris iaculis eget dolor nec
@@ -137,7 +137,7 @@
             consequat
             libero.
           </p>
-          <cds-card-cta-footer slot="footer">
+          <c4d-card-footer slot="footer">
             <svg
               slot="icon"
               focusable="false"
@@ -151,11 +151,11 @@
               <path
                 d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
             </svg>
-          </cds-card-cta-footer>
-        </cds-card-group-item>
-        <cds-card-group-item href="https://example.com" color-scheme="inverse">
-          <cds-card-heading>Top level card link</cds-card-heading>
-          <cds-card-cta-footer slot="footer" color-scheme="inverse">
+          </c4d-card-footer>
+        </c4d-card-group-item>
+        <c4d-card-group-item href="https://example.com" color-scheme="inverse">
+          <c4d-card-heading>Top level card link</c4d-card-heading>
+          <c4d-card-footer slot="footer" color-scheme="inverse">
             <svg
               slot="icon"
               focusable="false"
@@ -169,9 +169,9 @@
               <path
                 d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
             </svg>
-          </cds-card-cta-footer>
-        </cds-card-group-item>
-      </cds-card-group>
+          </c4d-card-footer>
+        </c4d-card-group-item>
+      </c4d-card-group>
     </div>
   </div>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/card-group/index.html b/packages/web-components/examples/stackblitz/components/card-group/index.html
similarity index 76%
rename from packages/web-components/examples/codesandbox/components/card-group/index.html
rename to packages/web-components/examples/stackblitz/components/card-group/index.html
index f59c42cba97..c30ad888f4d 100644
--- a/packages/web-components/examples/codesandbox/components/card-group/index.html
+++ b/packages/web-components/examples/stackblitz/components/card-group/index.html
@@ -16,7 +16,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-card-group:not(:defined) {
+    c4d-card-group:not(:defined) {
       display: none;
     }
   </style>
@@ -26,9 +26,9 @@
 <div class="cds--grid">
   <div class="cds--row">
     <div class="cds--col-sm-4 cds--col-lg-12">
-      <cds-card-group>
-        <cds-card-group-item href="https://example.com">
-          <cds-card-heading>Nunc convallis lobortis</cds-card-heading>
+      <c4d-card-group>
+        <c4d-card-group-item href="https://example.com">
+          <c4d-card-heading>Nunc convallis lobortis</c4d-card-heading>
           <p>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
             ultricies est. Mauris iaculis eget dolor nec
@@ -36,7 +36,7 @@
             consequat
             libero.
           </p>
-          <cds-card-cta-footer slot="footer">
+          <c4d-card-footer slot="footer">
             <svg
               slot="icon"
               focusable="false"
@@ -50,10 +50,10 @@
               <path
                 d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
             </svg>
-          </cds-card-cta-footer>
-        </cds-card-group-item>
-        <cds-card-group-item href="https://example.com">
-          <cds-card-heading>Nunc convallis lobortis</cds-card-heading>
+          </c4d-card-footer>
+        </c4d-card-group-item>
+        <c4d-card-group-item href="https://example.com">
+          <c4d-card-heading>Nunc convallis lobortis</c4d-card-heading>
           <p>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
             ultricies est. Mauris iaculis eget dolor nec
@@ -61,7 +61,7 @@
             consequat
             libero.
           </p>
-          <cds-card-cta-footer slot="footer">
+          <c4d-card-footer slot="footer">
             <svg
               slot="icon"
               focusable="false"
@@ -75,10 +75,10 @@
               <path
                 d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
             </svg>
-          </cds-card-cta-footer>
-        </cds-card-group-item>
-        <cds-card-group-item href="https://example.com">
-          <cds-card-heading>Nunc convallis lobortis</cds-card-heading>
+          </c4d-card-footer>
+        </c4d-card-group-item>
+        <c4d-card-group-item href="https://example.com">
+          <c4d-card-heading>Nunc convallis lobortis</c4d-card-heading>
           <p>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
             ultricies est. Mauris iaculis eget dolor nec
@@ -86,7 +86,7 @@
             consequat
             libero.
           </p>
-          <cds-card-cta-footer slot="footer">
+          <c4d-card-footer slot="footer">
             <svg
               slot="icon"
               focusable="false"
@@ -100,10 +100,10 @@
               <path
                 d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
             </svg>
-          </cds-card-cta-footer>
-        </cds-card-group-item>
-        <cds-card-group-item href="https://example.com">
-          <cds-card-heading>Nunc convallis lobortis</cds-card-heading>
+          </c4d-card-footer>
+        </c4d-card-group-item>
+        <c4d-card-group-item href="https://example.com">
+          <c4d-card-heading>Nunc convallis lobortis</c4d-card-heading>
           <p>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
             ultricies est. Mauris iaculis eget dolor nec
@@ -111,7 +111,7 @@
             consequat
             libero.
           </p>
-          <cds-card-cta-footer slot="footer">
+          <c4d-card-footer slot="footer">
             <svg
               slot="icon"
               focusable="false"
@@ -125,10 +125,10 @@
               <path
                 d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
             </svg>
-          </cds-card-cta-footer>
-        </cds-card-group-item>
-        <cds-card-group-item href="https://example.com">
-          <cds-card-heading>Nunc convallis lobortis</cds-card-heading>
+          </c4d-card-footer>
+        </c4d-card-group-item>
+        <c4d-card-group-item href="https://example.com">
+          <c4d-card-heading>Nunc convallis lobortis</c4d-card-heading>
           <p>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
             ultricies est. Mauris iaculis eget dolor nec
@@ -136,7 +136,7 @@
             consequat
             libero.
           </p>
-          <cds-card-cta-footer slot="footer">
+          <c4d-card-footer slot="footer">
             <svg
               slot="icon"
               focusable="false"
@@ -150,11 +150,11 @@
               <path
                 d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
             </svg>
-          </cds-card-cta-footer>
-        </cds-card-group-item>
-        <cds-card-group-item href="https://example.com" color-scheme="inverse">
-          <cds-card-heading>Top level card link</cds-card-heading>
-          <cds-card-cta-footer slot="footer" color-scheme="inverse">
+          </c4d-card-footer>
+        </c4d-card-group-item>
+        <c4d-card-group-item href="https://example.com" color-scheme="inverse">
+          <c4d-card-heading>Top level card link</c4d-card-heading>
+          <c4d-card-footer slot="footer" color-scheme="inverse">
             <svg
               slot="icon"
               focusable="false"
@@ -168,9 +168,9 @@
               <path
                 d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
             </svg>
-          </cds-card-cta-footer>
-        </cds-card-group-item>
-      </cds-card-group>
+          </c4d-card-footer>
+        </c4d-card-group-item>
+      </c4d-card-group>
     </div>
   </div>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/card-group/package.json b/packages/web-components/examples/stackblitz/components/card-group/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/card-group/package.json
rename to packages/web-components/examples/stackblitz/components/card-group/package.json
diff --git a/packages/web-components/examples/codesandbox/components/card-group/src/index.js b/packages/web-components/examples/stackblitz/components/card-group/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/card-group/src/index.js
rename to packages/web-components/examples/stackblitz/components/card-group/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components/card-in-card/.gitignore b/packages/web-components/examples/stackblitz/components/card-in-card/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/card-in-card/.gitignore
rename to packages/web-components/examples/stackblitz/components/card-in-card/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components/card-in-card/cdn.html b/packages/web-components/examples/stackblitz/components/card-in-card/cdn.html
similarity index 69%
rename from packages/web-components/examples/codesandbox/components/card-in-card/cdn.html
rename to packages/web-components/examples/stackblitz/components/card-in-card/cdn.html
index 196c6671100..11f36f5ad34 100644
--- a/packages/web-components/examples/codesandbox/components/card-in-card/cdn.html
+++ b/packages/web-components/examples/stackblitz/components/card-in-card/cdn.html
@@ -16,7 +16,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-card-in-card:not(:defined) {
+    c4d-card-in-card:not(:defined) {
       display: none;
     }
   </style>
@@ -28,21 +28,21 @@
   <div class="cds--row">
     <div class="cds--col-sm-4 cds--col-lg-12">
       <h1>Hello World! 👋</h1>
-      <cds-card-in-card href="https://example.com">
-        <cds-card-in-card-image slot="image" alt="Image alt text"
+      <c4d-card-in-card href="https://example.com">
+        <c4d-card-in-card-image slot="image" alt="Image alt text"
                                 default-src="https://fpoimg.com/480x360?text=4:3&bg_color=ee5396&text_color=161616">
-          <cds-image-item media="(min-width: 1312px)"
-                          srcset="https://fpoimg.com/1312x738?text=16:9&bg_color=ee5396&text_color=161616"></cds-image-item>
-          <cds-image-item media="(min-width: 672px)"
-                          srcset="https://fpoimg.com/960x540?text=16:9&bg_color=ee5396&text_color=161616"></cds-image-item>
-          <cds-image-item media="(min-width: 320px)"
-                          srcset="https://fpoimg.com/480x360?text=4:3&bg_color=ee5396&text_color=161616"></cds-image-item>
-        </cds-card-in-card-image>
-        <cds-card-eyebrow>Label</cds-card-eyebrow>
-        <cds-card-heading>Standard Bank Group prepares to embrace Africa’s AI
+          <c4d-image-item media="(min-width: 1312px)"
+                          srcset="https://fpoimg.com/1312x738?text=16:9&bg_color=ee5396&text_color=161616"></c4d-image-item>
+          <c4d-image-item media="(min-width: 672px)"
+                          srcset="https://fpoimg.com/960x540?text=16:9&bg_color=ee5396&text_color=161616"></c4d-image-item>
+          <c4d-image-item media="(min-width: 320px)"
+                          srcset="https://fpoimg.com/480x360?text=4:3&bg_color=ee5396&text_color=161616"></c4d-image-item>
+        </c4d-card-in-card-image>
+        <c4d-card-eyebrow>Label</c4d-card-eyebrow>
+        <c4d-card-heading>Standard Bank Group prepares to embrace Africa’s AI
           opportunity
-        </cds-card-heading>
-        <cds-card-cta-footer>
+        </c4d-card-heading>
+        <c4d-card-footer>
           <svg
             slot="icon"
             focusable="false"
@@ -57,8 +57,8 @@ <h1>Hello World! 👋</h1>
             <path
               d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
           </svg>
-        </cds-card-cta-footer>
-      </cds-card-in-card>
+        </c4d-card-footer>
+      </c4d-card-in-card>
     </div>
   </div>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/card-in-card/index.html b/packages/web-components/examples/stackblitz/components/card-in-card/index.html
similarity index 75%
rename from packages/web-components/examples/codesandbox/components/card-in-card/index.html
rename to packages/web-components/examples/stackblitz/components/card-in-card/index.html
index aebbbe877ad..2b9884ca93b 100644
--- a/packages/web-components/examples/codesandbox/components/card-in-card/index.html
+++ b/packages/web-components/examples/stackblitz/components/card-in-card/index.html
@@ -16,7 +16,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-card-in-card:not(:defined) {
+    c4d-card-in-card:not(:defined) {
       display: none;
     }
   </style>
@@ -27,30 +27,30 @@
   <div class="cds--row">
     <div class="cds--col-sm-4 cds--col-lg-12">
       <h1>Hello World! 👋</h1>
-      <cds-card-in-card cta-type="external" href="https://example.com">
-        <cds-card-in-card-image
+      <c4d-card-in-card cta-type="external" href="https://example.com">
+        <c4d-card-in-card-image
           slot="image"
           alt="Image alt text"
           default-src="https://fpoimg.com/480x360?text=4:3&bg_color=ee5396&text_color=161616"
         >
-          <cds-image-item
+          <c4d-image-item
             media="(min-width: 1312px)"
             srcset="https://fpoimg.com/1312x738?text=16:9&bg_color=ee5396&text_color=161616"
-          ></cds-image-item>
-          <cds-image-item
+          ></c4d-image-item>
+          <c4d-image-item
             media="(min-width: 672px)"
             srcset="https://fpoimg.com/960x540?text=16:9&bg_color=ee5396&text_color=161616"
-          ></cds-image-item>
-          <cds-image-item
+          ></c4d-image-item>
+          <c4d-image-item
             media="(min-width: 320px)"
             srcset="https://fpoimg.com/480x360?text=4:3&bg_color=ee5396&text_color=161616"
-          ></cds-image-item>
-        </cds-card-in-card-image>
-        <cds-card-heading
+          ></c4d-image-item>
+        </c4d-card-in-card-image>
+        <c4d-card-heading
           >Standard Bank Group prepares to embrace Africa’s AI opportunity
-        </cds-card-heading>
-        <cds-card-cta-footer> </cds-card-cta-footer>
-      </cds-card-in-card>
+        </c4d-card-heading>
+        <c4d-card-footer> </c4d-card-footer>
+      </c4d-card-in-card>
     </div>
   </div>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/card-in-card/package.json b/packages/web-components/examples/stackblitz/components/card-in-card/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/card-in-card/package.json
rename to packages/web-components/examples/stackblitz/components/card-in-card/package.json
diff --git a/packages/web-components/examples/codesandbox/components/card-in-card/src/index.js b/packages/web-components/examples/stackblitz/components/card-in-card/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/card-in-card/src/index.js
rename to packages/web-components/examples/stackblitz/components/card-in-card/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components/card-link/.gitignore b/packages/web-components/examples/stackblitz/components/card-link/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/card-link/.gitignore
rename to packages/web-components/examples/stackblitz/components/card-link/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components/card-link/cdn.html b/packages/web-components/examples/stackblitz/components/card-link/cdn.html
similarity index 88%
rename from packages/web-components/examples/codesandbox/components/card-link/cdn.html
rename to packages/web-components/examples/stackblitz/components/card-link/cdn.html
index 9517f9eba30..3c8d98c93f6 100644
--- a/packages/web-components/examples/codesandbox/components/card-link/cdn.html
+++ b/packages/web-components/examples/stackblitz/components/card-link/cdn.html
@@ -16,7 +16,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-card-link:not(:defined) {
+    c4d-card-link:not(:defined) {
       display: none;
     }
   </style>
@@ -26,9 +26,9 @@
 <div class="cds--grid">
   <div class="cds--row">
     <div class="cds--col-sm-4 cds--col-lg-12">
-      <cds-card-link href="https://example.com">
+      <c4d-card link href="https://example.com">
         <p>Explore AI use cases in all industries</p>
-        <cds-card-footer slot="footer">
+        <c4d-card-footer slot="footer">
           <svg
             slot="icon"
             focusable="false"
@@ -41,8 +41,8 @@
           >
             <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
           </svg>
-        </cds-card-footer>
-      </cds-card-link>
+        </c4d-card-footer>
+      </c4d-card>
     </div>
   </div>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/card-link/index.html b/packages/web-components/examples/stackblitz/components/card-link/index.html
similarity index 87%
rename from packages/web-components/examples/codesandbox/components/card-link/index.html
rename to packages/web-components/examples/stackblitz/components/card-link/index.html
index dc24d2098cc..3859df6af0a 100644
--- a/packages/web-components/examples/codesandbox/components/card-link/index.html
+++ b/packages/web-components/examples/stackblitz/components/card-link/index.html
@@ -15,7 +15,7 @@
   <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css"/>
   <style>
     /* Suppress custom element until styles are loaded */
-    cds-card-link:not(:defined) {
+    c4d-card-link:not(:defined) {
       display: none;
     }
   </style>
@@ -25,9 +25,9 @@
 <div class="cds--grid">
   <div class="cds--row">
     <div class="cds--col-sm-4 cds--col-lg-12">
-      <cds-card-link href="https://example.com">
+      <c4d-card link href="https://example.com">
         <p>Explore AI use cases in all industries</p>
-        <cds-card-footer slot="footer">
+        <c4d-card-footer slot="footer">
           <svg
             slot="icon"
             focusable="false"
@@ -41,8 +41,8 @@
             <path
               d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
           </svg>
-        </cds-card-footer>
-      </cds-card-link>
+        </c4d-card-footer>
+      </c4d-card>
     </div>
   </div>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/card-link/package.json b/packages/web-components/examples/stackblitz/components/card-link/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/card-link/package.json
rename to packages/web-components/examples/stackblitz/components/card-link/package.json
diff --git a/packages/web-components/examples/codesandbox/components/card-link/src/index.js b/packages/web-components/examples/stackblitz/components/card-link/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/card-link/src/index.js
rename to packages/web-components/examples/stackblitz/components/card-link/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components/card-section-carousel/.gitignore b/packages/web-components/examples/stackblitz/components/card-section-carousel/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/card-section-carousel/.gitignore
rename to packages/web-components/examples/stackblitz/components/card-section-carousel/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components/card-section-carousel/cdn.html b/packages/web-components/examples/stackblitz/components/card-section-carousel/cdn.html
similarity index 75%
rename from packages/web-components/examples/codesandbox/components/card-section-carousel/cdn.html
rename to packages/web-components/examples/stackblitz/components/card-section-carousel/cdn.html
index 9917198dd61..ad9324e89f7 100644
--- a/packages/web-components/examples/codesandbox/components/card-section-carousel/cdn.html
+++ b/packages/web-components/examples/stackblitz/components/card-section-carousel/cdn.html
@@ -16,7 +16,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-card-section-carousel:not(:defined) {
+    c4d-card-section-carousel:not(:defined) {
       display: none;
     }
   </style>
@@ -26,12 +26,12 @@
 <body>
   <div class="cds--grid">
     <div class="cds--row">
-      <cds-card-section-carousel>
-        <cds-content-section-heading>Card Section - Carousel</cds-content-section-heading>
-        <cds-content-section-copy
+      <c4d-card-section-carousel>
+        <c4d-content-section-heading>Card Section - Carousel</c4d-content-section-heading>
+        <c4d-content-section-copy
           >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est.
-        </cds-content-section-copy>
-        <cds-link-with-icon slot="footer"
+        </c4d-content-section-copy>
+        <c4d-link-with-icon slot="footer"
           href="https://www.ibm.com/standards/carbon">
           Link text
           <svg
@@ -47,12 +47,12 @@
             <path
               d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
           </svg>
-        </cds-link-with-icon>
-        <cds-carousel>
-          <cds-card href="https://www.example.com">
-            <cds-card-heading>Lorem ipsum dolor sit amet</cds-card-heading>
+        </c4d-link-with-icon>
+        <c4d-carousel>
+          <c4d-card href="https://www.example.com">
+            <c4d-card-heading>Lorem ipsum dolor sit amet</c4d-card-heading>
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est.</p>
-            <cds-card-footer>
+            <c4d-card-footer>
               <svg
                 slot="icon"
                 focusable="false"
@@ -66,12 +66,12 @@
                 <path
                   d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
               </svg>
-            </cds-card-footer>
-          </cds-card>
-          <cds-card href="https://www.example.com">
-            <cds-card-heading>Lorem ipsum dolor sit amet</cds-card-heading>
+            </c4d-card-footer>
+          </c4d-card>
+          <c4d-card href="https://www.example.com">
+            <c4d-card-heading>Lorem ipsum dolor sit amet</c4d-card-heading>
             <p>Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.</p>
-            <cds-card-footer>
+            <c4d-card-footer>
               <svg
                 slot="icon"
                 focusable="false"
@@ -85,12 +85,12 @@
                 <path
                   d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
               </svg>
-            </cds-card-footer>
-          </cds-card>
-          <cds-card href="https://www.example.com">
-            <cds-card-heading>Lorem ipsum dolor sit amet</cds-card-heading>
+            </c4d-card-footer>
+          </c4d-card>
+          <c4d-card href="https://www.example.com">
+            <c4d-card-heading>Lorem ipsum dolor sit amet</c4d-card-heading>
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est.</p>
-            <cds-card-footer>
+            <c4d-card-footer>
               <svg
                 slot="icon"
                 focusable="false"
@@ -104,12 +104,12 @@
                 <path
                   d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
               </svg>
-            </cds-card-footer>
-          </cds-card>
-          <cds-card href="https://www.example.com">
-            <cds-card-heading>Lorem ipsum dolor sit amet</cds-card-heading>
+            </c4d-card-footer>
+          </c4d-card>
+          <c4d-card href="https://www.example.com">
+            <c4d-card-heading>Lorem ipsum dolor sit amet</c4d-card-heading>
             <p>Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.</p>
-            <cds-card-footer>
+            <c4d-card-footer>
               <svg
                 slot="icon"
                 focusable="false"
@@ -123,12 +123,12 @@
                 <path
                   d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
               </svg>
-            </cds-card-footer>
-          </cds-card>
-          <cds-card href="https://www.example.com">
-            <cds-card-heading>Lorem ipsum dolor sit amet</cds-card-heading>
+            </c4d-card-footer>
+          </c4d-card>
+          <c4d-card href="https://www.example.com">
+            <c4d-card-heading>Lorem ipsum dolor sit amet</c4d-card-heading>
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est.</p>
-            <cds-card-footer>
+            <c4d-card-footer>
               <svg
                 slot="icon"
                 focusable="false"
@@ -142,12 +142,12 @@
                 <path
                   d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
               </svg>
-            </cds-card-footer>
-          </cds-card>
-          <cds-card href="https://www.example.com">
-            <cds-card-heading>Lorem ipsum dolor sit amet</cds-card-heading>
+            </c4d-card-footer>
+          </c4d-card>
+          <c4d-card href="https://www.example.com">
+            <c4d-card-heading>Lorem ipsum dolor sit amet</c4d-card-heading>
             <p>Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.</p>
-            <cds-card-footer>
+            <c4d-card-footer>
               <svg
                 slot="icon"
                 focusable="false"
@@ -161,12 +161,12 @@
                 <path
                   d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
               </svg>
-            </cds-card-footer>
-          </cds-card>
-          <cds-card href="https://www.example.com">
-            <cds-card-heading>Lorem ipsum dolor sit amet</cds-card-heading>
+            </c4d-card-footer>
+          </c4d-card>
+          <c4d-card href="https://www.example.com">
+            <c4d-card-heading>Lorem ipsum dolor sit amet</c4d-card-heading>
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est.</p>
-            <cds-card-footer>
+            <c4d-card-footer>
               <svg
                 slot="icon"
                 focusable="false"
@@ -180,12 +180,12 @@
                 <path
                   d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
               </svg>
-            </cds-card-footer>
-          </cds-card>
-          <cds-card href="https://www.example.com">
-            <cds-card-heading>Lorem ipsum dolor sit amet</cds-card-heading>
+            </c4d-card-footer>
+          </c4d-card>
+          <c4d-card href="https://www.example.com">
+            <c4d-card-heading>Lorem ipsum dolor sit amet</c4d-card-heading>
             <p>Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.</p>
-            <cds-card-footer>
+            <c4d-card-footer>
               <svg
                 slot="icon"
                 focusable="false"
@@ -199,12 +199,12 @@
                 <path
                   d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
               </svg>
-            </cds-card-footer>
-          </cds-card>
-          <cds-card href="https://www.example.com">
-            <cds-card-heading>Lorem ipsum dolor sit amet</cds-card-heading>
+            </c4d-card-footer>
+          </c4d-card>
+          <c4d-card href="https://www.example.com">
+            <c4d-card-heading>Lorem ipsum dolor sit amet</c4d-card-heading>
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est.</p>
-            <cds-card-footer>
+            <c4d-card-footer>
               <svg
                 slot="icon"
                 focusable="false"
@@ -218,10 +218,10 @@
                 <path
                   d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
               </svg>
-            </cds-card-footer>
-          </cds-card>
-        </cds-carousel>
-      </cds-card-section-carousel>
+            </c4d-card-footer>
+          </c4d-card>
+        </c4d-carousel>
+      </c4d-card-section-carousel>
     </div>
   </div>
 </body>
diff --git a/packages/web-components/examples/codesandbox/components/card-section-carousel/index.html b/packages/web-components/examples/stackblitz/components/card-section-carousel/index.html
similarity index 75%
rename from packages/web-components/examples/codesandbox/components/card-section-carousel/index.html
rename to packages/web-components/examples/stackblitz/components/card-section-carousel/index.html
index 2f31dd96a15..d8d140f94aa 100644
--- a/packages/web-components/examples/codesandbox/components/card-section-carousel/index.html
+++ b/packages/web-components/examples/stackblitz/components/card-section-carousel/index.html
@@ -16,7 +16,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-card-section-carousel:not(:defined) {
+    c4d-card-section-carousel:not(:defined) {
       display: none;
     }
   </style>
@@ -25,12 +25,12 @@
 <body>
 <div class="cds--grid">
   <div class="cds--row">
-    <cds-card-section-carousel>
-      <cds-content-section-heading>Card Section - Carousel</cds-content-section-heading>
-      <cds-content-section-copy
+    <c4d-card-section-carousel>
+      <c4d-content-section-heading>Card Section - Carousel</c4d-content-section-heading>
+      <c4d-content-section-copy
         >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. CDN
-      </cds-content-section-copy>
-      <cds-link-with-icon slot="footer"
+      </c4d-content-section-copy>
+      <c4d-link-with-icon slot="footer"
         href="https://www.ibm.com/standards/carbon">
         Link text
         <svg
@@ -46,12 +46,12 @@
           <path
             d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
         </svg>
-      </cds-link-with-icon>
-      <cds-carousel>
-        <cds-card href="https://www.example.com">
-          <cds-card-heading>Lorem ipsum dolor sit amet</cds-card-heading>
+      </c4d-link-with-icon>
+      <c4d-carousel>
+        <c4d-card href="https://www.example.com">
+          <c4d-card-heading>Lorem ipsum dolor sit amet</c4d-card-heading>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est.</p>
-          <cds-card-footer>
+          <c4d-card-footer>
             <svg
               slot="icon"
               focusable="false"
@@ -65,12 +65,12 @@
               <path
                 d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
             </svg>
-          </cds-card-footer>
-        </cds-card>
-        <cds-card href="https://www.example.com">
-          <cds-card-heading>Lorem ipsum dolor sit amet</cds-card-heading>
+          </c4d-card-footer>
+        </c4d-card>
+        <c4d-card href="https://www.example.com">
+          <c4d-card-heading>Lorem ipsum dolor sit amet</c4d-card-heading>
           <p>Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.</p>
-          <cds-card-footer>
+          <c4d-card-footer>
             <svg
               slot="icon"
               focusable="false"
@@ -84,12 +84,12 @@
               <path
                 d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
             </svg>
-          </cds-card-footer>
-        </cds-card>
-        <cds-card href="https://www.example.com">
-          <cds-card-heading>Lorem ipsum dolor sit amet</cds-card-heading>
+          </c4d-card-footer>
+        </c4d-card>
+        <c4d-card href="https://www.example.com">
+          <c4d-card-heading>Lorem ipsum dolor sit amet</c4d-card-heading>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est.</p>
-          <cds-card-footer>
+          <c4d-card-footer>
             <svg
               slot="icon"
               focusable="false"
@@ -103,12 +103,12 @@
               <path
                 d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
             </svg>
-          </cds-card-footer>
-        </cds-card>
-        <cds-card href="https://www.example.com">
-          <cds-card-heading>Lorem ipsum dolor sit amet</cds-card-heading>
+          </c4d-card-footer>
+        </c4d-card>
+        <c4d-card href="https://www.example.com">
+          <c4d-card-heading>Lorem ipsum dolor sit amet</c4d-card-heading>
           <p>Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.</p>
-          <cds-card-footer>
+          <c4d-card-footer>
             <svg
               slot="icon"
               focusable="false"
@@ -122,12 +122,12 @@
               <path
                 d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
             </svg>
-          </cds-card-footer>
-        </cds-card>
-        <cds-card href="https://www.example.com">
-          <cds-card-heading>Lorem ipsum dolor sit amet</cds-card-heading>
+          </c4d-card-footer>
+        </c4d-card>
+        <c4d-card href="https://www.example.com">
+          <c4d-card-heading>Lorem ipsum dolor sit amet</c4d-card-heading>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est.</p>
-          <cds-card-footer>
+          <c4d-card-footer>
             <svg
               slot="icon"
               focusable="false"
@@ -141,12 +141,12 @@
               <path
                 d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
             </svg>
-          </cds-card-footer>
-        </cds-card>
-        <cds-card href="https://www.example.com">
-          <cds-card-heading>Lorem ipsum dolor sit amet</cds-card-heading>
+          </c4d-card-footer>
+        </c4d-card>
+        <c4d-card href="https://www.example.com">
+          <c4d-card-heading>Lorem ipsum dolor sit amet</c4d-card-heading>
           <p>Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.</p>
-          <cds-card-footer>
+          <c4d-card-footer>
             <svg
               slot="icon"
               focusable="false"
@@ -160,12 +160,12 @@
               <path
                 d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
             </svg>
-          </cds-card-footer>
-        </cds-card>
-        <cds-card href="https://www.example.com">
-          <cds-card-heading>Lorem ipsum dolor sit amet</cds-card-heading>
+          </c4d-card-footer>
+        </c4d-card>
+        <c4d-card href="https://www.example.com">
+          <c4d-card-heading>Lorem ipsum dolor sit amet</c4d-card-heading>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est.</p>
-          <cds-card-footer>
+          <c4d-card-footer>
             <svg
               slot="icon"
               focusable="false"
@@ -179,12 +179,12 @@
               <path
                 d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
             </svg>
-          </cds-card-footer>
-        </cds-card>
-        <cds-card href="https://www.example.com">
-          <cds-card-heading>Lorem ipsum dolor sit amet</cds-card-heading>
+          </c4d-card-footer>
+        </c4d-card>
+        <c4d-card href="https://www.example.com">
+          <c4d-card-heading>Lorem ipsum dolor sit amet</c4d-card-heading>
           <p>Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.</p>
-          <cds-card-footer>
+          <c4d-card-footer>
             <svg
               slot="icon"
               focusable="false"
@@ -198,12 +198,12 @@
               <path
                 d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
             </svg>
-          </cds-card-footer>
-        </cds-card>
-        <cds-card href="https://www.example.com">
-          <cds-card-heading>Lorem ipsum dolor sit amet</cds-card-heading>
+          </c4d-card-footer>
+        </c4d-card>
+        <c4d-card href="https://www.example.com">
+          <c4d-card-heading>Lorem ipsum dolor sit amet</c4d-card-heading>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est.</p>
-          <cds-card-footer>
+          <c4d-card-footer>
             <svg
               slot="icon"
               focusable="false"
@@ -217,10 +217,10 @@
               <path
                 d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
             </svg>
-          </cds-card-footer>
-        </cds-card>
-      </cds-carousel>
-    </cds-card-section-carousel>
+          </c4d-card-footer>
+        </c4d-card>
+      </c4d-carousel>
+    </c4d-card-section-carousel>
   </div>
 </div>
 </body>
diff --git a/packages/web-components/examples/codesandbox/components/card-section-carousel/package.json b/packages/web-components/examples/stackblitz/components/card-section-carousel/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/card-section-carousel/package.json
rename to packages/web-components/examples/stackblitz/components/card-section-carousel/package.json
diff --git a/packages/web-components/examples/codesandbox/components/card-section-carousel/src/index.js b/packages/web-components/examples/stackblitz/components/card-section-carousel/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/card-section-carousel/src/index.js
rename to packages/web-components/examples/stackblitz/components/card-section-carousel/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components/card-section-offset/.gitignore b/packages/web-components/examples/stackblitz/components/card-section-offset/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/card-section-offset/.gitignore
rename to packages/web-components/examples/stackblitz/components/card-section-offset/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components/card-section-offset/cdn.html b/packages/web-components/examples/stackblitz/components/card-section-offset/cdn.html
similarity index 68%
rename from packages/web-components/examples/codesandbox/components/card-section-offset/cdn.html
rename to packages/web-components/examples/stackblitz/components/card-section-offset/cdn.html
index e072424e42c..0334b2b6dcf 100644
--- a/packages/web-components/examples/codesandbox/components/card-section-offset/cdn.html
+++ b/packages/web-components/examples/stackblitz/components/card-section-offset/cdn.html
@@ -15,7 +15,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-card-section-offset:not(:defined) {
+    c4d-card-section-offset:not(:defined) {
       display: none;
     }
   </style>
@@ -24,32 +24,32 @@
 <body>
   <div class="cds--grid">
     <div class="cds--row">
-      <cds-card-section-offset>
-        <cds-content-block-heading slot="heading">heading</cds-content-block-heading>
-        <cds-background-media
+      <c4d-card-section-offset>
+        <c4d-content-block-heading slot="heading">heading</c4d-content-block-heading>
+        <c4d-background-media
           gradient-direction="left-to-right"
           slot="image-top"
           alt="alt text"
           default-src="https://fpoimg.com/1584x891?bg_color=ee5396&text_color=161616"
         >
-        </cds-background-media>
-        <cds-text-cta
+        </c4d-background-media>
+        <c4d-text-cta
           slot="action"
           cta-type="local"
           icon-placement="right"
           href="https://example.com"
         >
           CTA copy
-        </cds-text-cta>
-        <cds-card-group slot="card-group" cards-per-row="2">
-          <cds-card-group-item empty></cds-card-group-item>
-          <cds-card-group-item href="https://example.com">
-            <cds-card-eyebrow>Label</cds-card-eyebrow>
-            <cds-card-heading>Lorem ipsum dolor sit amet, pro graeco tibique an</cds-card-heading>
+        </c4d-text-cta>
+        <c4d-card-group slot="card-group" cards-per-row="2">
+          <c4d-card-group-item empty></c4d-card-group-item>
+          <c4d-card-group-item href="https://example.com">
+            <c4d-card-eyebrow>Label</c4d-card-eyebrow>
+            <c4d-card-heading>Lorem ipsum dolor sit amet, pro graeco tibique an</c4d-card-heading>
             <p>
               Lorem ipsum dolor sit amet, habeo iisque eum ex. Vel postea singulis democritum ex. Illud ullum graecis
             </p>
-            <cds-card-cta-footer slot="footer">
+            <c4d-card-footer slot="footer">
               <svg
                 slot="icon"
                 focusable="false"
@@ -62,15 +62,15 @@
               >
                 <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
               </svg>
-            </cds-card-cta-footer>
-          </cds-card-group-item>
-          <cds-card-group-item href="https://example.com">
-            <cds-card-eyebrow>Label</cds-card-eyebrow>
-            <cds-card-heading>Lorem ipsum dolor sit amet, pro graeco tibique an</cds-card-heading>
+            </c4d-card-footer>
+          </c4d-card-group-item>
+          <c4d-card-group-item href="https://example.com">
+            <c4d-card-eyebrow>Label</c4d-card-eyebrow>
+            <c4d-card-heading>Lorem ipsum dolor sit amet, pro graeco tibique an</c4d-card-heading>
             <p>
               Lorem ipsum dolor sit amet, habeo iisque eum ex. Vel postea singulis democritum ex. Illud ullum graecis
             </p>
-            <cds-card-cta-footer slot="footer">
+            <c4d-card-footer slot="footer">
               <svg
                 slot="icon"
                 focusable="false"
@@ -83,15 +83,15 @@
               >
                 <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
               </svg>
-            </cds-card-cta-footer>
-          </cds-card-group-item>
-          <cds-card-group-item href="https://example.com">
-            <cds-card-eyebrow>Label</cds-card-eyebrow>
-            <cds-card-heading>Lorem ipsum dolor sit amet, pro graeco tibique an</cds-card-heading>
+            </c4d-card-footer>
+          </c4d-card-group-item>
+          <c4d-card-group-item href="https://example.com">
+            <c4d-card-eyebrow>Label</c4d-card-eyebrow>
+            <c4d-card-heading>Lorem ipsum dolor sit amet, pro graeco tibique an</c4d-card-heading>
             <p>
               Lorem ipsum dolor sit amet, habeo iisque eum ex. Vel postea singulis democritum ex. Illud ullum graecis
             </p>
-            <cds-card-cta-footer slot="footer">
+            <c4d-card-footer slot="footer">
               <svg
                 slot="icon"
                 focusable="false"
@@ -104,10 +104,10 @@
               >
                 <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
               </svg>
-            </cds-card-cta-footer>
-          </cds-card-group-item>
-        </cds-card-group>
-      </cds-card-section-offset>
+            </c4d-card-footer>
+          </c4d-card-group-item>
+        </c4d-card-group>
+      </c4d-card-section-offset>
     </div>
   </div>
 </body>
diff --git a/packages/web-components/examples/codesandbox/components/card-section-offset/index.html b/packages/web-components/examples/stackblitz/components/card-section-offset/index.html
similarity index 68%
rename from packages/web-components/examples/codesandbox/components/card-section-offset/index.html
rename to packages/web-components/examples/stackblitz/components/card-section-offset/index.html
index f5cd5033224..0ffec50b251 100644
--- a/packages/web-components/examples/codesandbox/components/card-section-offset/index.html
+++ b/packages/web-components/examples/stackblitz/components/card-section-offset/index.html
@@ -25,32 +25,32 @@
   <body>
     <div class="cds--grid">
       <div class="cds--row">
-        <cds-card-section-offset>
-          <cds-background-media
+        <c4d-card-section-offset>
+          <c4d-background-media
             gradient-direction="left-to-right"
             slot="image-top"
             alt="alt text"
             default-src="https://fpoimg.com/1584x891?bg_color=ee5396&text_color=161616"
           >
-          </cds-background-media>
-          <cds-content-block-heading slot="heading">heading</cds-content-block-heading>
-          <cds-text-cta
+          </c4d-background-media>
+          <c4d-content-block-heading slot="heading">heading</c4d-content-block-heading>
+          <c4d-text-cta
             slot="action"
             cta-type="local"
             icon-placement="right"
             href="https://example.com"
           >
             CTA copy
-          </cds-text-cta>
-          <cds-card-group slot="card-group" cards-per-row="2">
-            <cds-card-group-item empty></cds-card-group-item>
-            <cds-card-group-item href="https://example.com">
-              <cds-card-eyebrow>Label</cds-card-eyebrow>
-              <cds-card-heading>Lorem ipsum dolor sit amet, pro graeco tibique an</cds-card-heading>
+          </c4d-text-cta>
+          <c4d-card-group slot="card-group" cards-per-row="2">
+            <c4d-card-group-item empty></c4d-card-group-item>
+            <c4d-card-group-item href="https://example.com">
+              <c4d-card-eyebrow>Label</c4d-card-eyebrow>
+              <c4d-card-heading>Lorem ipsum dolor sit amet, pro graeco tibique an</c4d-card-heading>
               <p>
                 Lorem ipsum dolor sit amet, habeo iisque eum ex. Vel postea singulis democritum ex. Illud ullum graecis
               </p>
-              <cds-card-cta-footer slot="footer">
+              <c4d-card-footer slot="footer">
                 <svg
                   slot="icon"
                   focusable="false"
@@ -63,15 +63,15 @@
                 >
                   <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
                 </svg>
-              </cds-card-cta-footer>
-            </cds-card-group-item>
-            <cds-card-group-item href="https://example.com">
-              <cds-card-eyebrow>Label</cds-card-eyebrow>
-              <cds-card-heading>Lorem ipsum dolor sit amet, pro graeco tibique an</cds-card-heading>
+              </c4d-card-footer>
+            </c4d-card-group-item>
+            <c4d-card-group-item href="https://example.com">
+              <c4d-card-eyebrow>Label</c4d-card-eyebrow>
+              <c4d-card-heading>Lorem ipsum dolor sit amet, pro graeco tibique an</c4d-card-heading>
               <p>
                 Lorem ipsum dolor sit amet, habeo iisque eum ex. Vel postea singulis democritum ex. Illud ullum graecis
               </p>
-              <cds-card-cta-footer slot="footer">
+              <c4d-card-footer slot="footer">
                 <svg
                   slot="icon"
                   focusable="false"
@@ -84,15 +84,15 @@
                 >
                   <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
                 </svg>
-              </cds-card-cta-footer>
-            </cds-card-group-item>
-            <cds-card-group-item href="https://example.com">
-              <cds-card-eyebrow>Label</cds-card-eyebrow>
-              <cds-card-heading>Lorem ipsum dolor sit amet, pro graeco tibique an</cds-card-heading>
+              </c4d-card-footer>
+            </c4d-card-group-item>
+            <c4d-card-group-item href="https://example.com">
+              <c4d-card-eyebrow>Label</c4d-card-eyebrow>
+              <c4d-card-heading>Lorem ipsum dolor sit amet, pro graeco tibique an</c4d-card-heading>
               <p>
                 Lorem ipsum dolor sit amet, habeo iisque eum ex. Vel postea singulis democritum ex. Illud ullum graecis
               </p>
-              <cds-card-cta-footer slot="footer">
+              <c4d-card-footer slot="footer">
                 <svg
                   slot="icon"
                   focusable="false"
@@ -105,10 +105,10 @@
                 >
                   <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
                 </svg>
-              </cds-card-cta-footer>
-            </cds-card-group-item>
-          </cds-card-group>
-        </cds-card-section-offset>
+              </c4d-card-footer>
+            </c4d-card-group-item>
+          </c4d-card-group>
+        </c4d-card-section-offset>
       </div>
     </div>
   </body>
diff --git a/packages/web-components/examples/codesandbox/components/card-section-offset/package.json b/packages/web-components/examples/stackblitz/components/card-section-offset/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/card-section-offset/package.json
rename to packages/web-components/examples/stackblitz/components/card-section-offset/package.json
diff --git a/packages/web-components/examples/codesandbox/components/card-section-offset/src/index.js b/packages/web-components/examples/stackblitz/components/card-section-offset/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/card-section-offset/src/index.js
rename to packages/web-components/examples/stackblitz/components/card-section-offset/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components/card-section-simple/.gitignore b/packages/web-components/examples/stackblitz/components/card-section-simple/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/card-section-simple/.gitignore
rename to packages/web-components/examples/stackblitz/components/card-section-simple/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components/card-section-simple/.sassrc b/packages/web-components/examples/stackblitz/components/card-section-simple/.sassrc
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/card-section-simple/.sassrc
rename to packages/web-components/examples/stackblitz/components/card-section-simple/.sassrc
diff --git a/packages/web-components/examples/codesandbox/components/card-section-simple/cdn.html b/packages/web-components/examples/stackblitz/components/card-section-simple/cdn.html
similarity index 75%
rename from packages/web-components/examples/codesandbox/components/card-section-simple/cdn.html
rename to packages/web-components/examples/stackblitz/components/card-section-simple/cdn.html
index 81fcf81699b..0ce21ae20fd 100644
--- a/packages/web-components/examples/codesandbox/components/card-section-simple/cdn.html
+++ b/packages/web-components/examples/stackblitz/components/card-section-simple/cdn.html
@@ -15,7 +15,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-card-section-simple:not(:defined) {
+    c4d-card-section-simple:not(:defined) {
       display: none;
     }
   </style>
@@ -25,16 +25,16 @@
 <div class="cds--grid">
   <div class="cds--row">
     <div class="cds--col-sm-4">
-      <cds-card-section-simple heading="Aliquam condimentum interdum">
-        <cds-content-section-heading>Aliquam condimentum interdum</cds-content-section-heading>
-        <cds-card-group>
-          <cds-card-group-item href="https://example.com">
-            <cds-card-heading>Nunc convallis lobortis</cds-card-heading>
+      <c4d-card-section-simple heading="Aliquam condimentum interdum">
+        <c4d-content-section-heading>Aliquam condimentum interdum</c4d-content-section-heading>
+        <c4d-card-group>
+          <c4d-card-group-item href="https://example.com">
+            <c4d-card-heading>Nunc convallis lobortis</c4d-card-heading>
             <p>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec
               hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
             </p>
-            <cds-card-cta-footer slot="footer">
+            <c4d-card-footer slot="footer">
               <svg
                 slot="icon"
                 focusable="false"
@@ -47,15 +47,15 @@
               >
                 <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
               </svg>
-            </cds-card-cta-footer>
-          </cds-card-group-item>
-          <cds-card-group-item href="https://example.com">
-            <cds-card-heading>Nunc convallis lobortis</cds-card-heading>
+            </c4d-card-footer>
+          </c4d-card-group-item>
+          <c4d-card-group-item href="https://example.com">
+            <c4d-card-heading>Nunc convallis lobortis</c4d-card-heading>
             <p>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec
               hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
             </p>
-            <cds-card-cta-footer slot="footer">
+            <c4d-card-footer slot="footer">
               <svg
                 slot="icon"
                 focusable="false"
@@ -68,15 +68,15 @@
               >
                 <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
               </svg>
-            </cds-card-cta-footer>
-          </cds-card-group-item>
-          <cds-card-group-item href="https://example.com">
-            <cds-card-heading>Nunc convallis lobortis</cds-card-heading>
+            </c4d-card-footer>
+          </c4d-card-group-item>
+          <c4d-card-group-item href="https://example.com">
+            <c4d-card-heading>Nunc convallis lobortis</c4d-card-heading>
             <p>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec
               hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
             </p>
-            <cds-card-cta-footer slot="footer">
+            <c4d-card-footer slot="footer">
               <svg
                 slot="icon"
                 focusable="false"
@@ -89,15 +89,15 @@
               >
                 <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
               </svg>
-            </cds-card-cta-footer>
-          </cds-card-group-item>
-          <cds-card-group-item href="https://example.com">
-            <cds-card-heading>Nunc convallis lobortis</cds-card-heading>
+            </c4d-card-footer>
+          </c4d-card-group-item>
+          <c4d-card-group-item href="https://example.com">
+            <c4d-card-heading>Nunc convallis lobortis</c4d-card-heading>
             <p>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec
               hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
             </p>
-            <cds-card-cta-footer slot="footer">
+            <c4d-card-footer slot="footer">
               <svg
                 slot="icon"
                 focusable="false"
@@ -110,15 +110,15 @@
               >
                 <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
               </svg>
-            </cds-card-cta-footer>
-          </cds-card-group-item>
-          <cds-card-group-item href="https://example.com">
-            <cds-card-heading>Nunc convallis lobortis</cds-card-heading>
+            </c4d-card-footer>
+          </c4d-card-group-item>
+          <c4d-card-group-item href="https://example.com">
+            <c4d-card-heading>Nunc convallis lobortis</c4d-card-heading>
             <p>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec
               hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
             </p>
-            <cds-card-cta-footer slot="footer">
+            <c4d-card-footer slot="footer">
               <svg
                 slot="icon"
                 focusable="false"
@@ -131,10 +131,10 @@
               >
                 <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
               </svg>
-            </cds-card-cta-footer>
-          </cds-card-group-item>
-        </cds-card-group>
-      </cds-card-section-simple>
+            </c4d-card-footer>
+          </c4d-card-group-item>
+        </c4d-card-group>
+      </c4d-card-section-simple>
     </div>
   </div>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/card-section-simple/index.html b/packages/web-components/examples/stackblitz/components/card-section-simple/index.html
similarity index 75%
rename from packages/web-components/examples/codesandbox/components/card-section-simple/index.html
rename to packages/web-components/examples/stackblitz/components/card-section-simple/index.html
index 47ee9e1e2a9..d3dda6f75cb 100644
--- a/packages/web-components/examples/codesandbox/components/card-section-simple/index.html
+++ b/packages/web-components/examples/stackblitz/components/card-section-simple/index.html
@@ -24,16 +24,16 @@
     <div class="cds--grid">
       <div class="cds--row">
         <div class="cds--col-sm-4">
-          <cds-card-section-simple>
-            <cds-content-section-heading>Aliquam condimentum interdum</cds-content-section-heading>
-            <cds-card-group>
-              <cds-card-group-item href="https://example.com">
-                <cds-card-heading>Nunc convallis lobortis</cds-card-heading>
+          <c4d-card-section-simple>
+            <c4d-content-section-heading>Aliquam condimentum interdum</c4d-content-section-heading>
+            <c4d-card-group>
+              <c4d-card-group-item href="https://example.com">
+                <c4d-card-heading>Nunc convallis lobortis</c4d-card-heading>
                 <p>
                   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec
                   hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
                 </p>
-                <cds-card-cta-footer slot="footer">
+                <c4d-card-footer slot="footer">
                   <svg
                     slot="icon"
                     focusable="false"
@@ -46,15 +46,15 @@
                   >
                     <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
                   </svg>
-                </cds-card-cta-footer>
-              </cds-card-group-item>
-              <cds-card-group-item href="https://example.com">
-                <cds-card-heading>Nunc convallis lobortis</cds-card-heading>
+                </c4d-card-footer>
+              </c4d-card-group-item>
+              <c4d-card-group-item href="https://example.com">
+                <c4d-card-heading>Nunc convallis lobortis</c4d-card-heading>
                 <p>
                   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec
                   hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
                 </p>
-                <cds-card-cta-footer slot="footer">
+                <c4d-card-footer slot="footer">
                   <svg
                     slot="icon"
                     focusable="false"
@@ -67,15 +67,15 @@
                   >
                     <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
                   </svg>
-                </cds-card-cta-footer>
-              </cds-card-group-item>
-              <cds-card-group-item href="https://example.com">
-                <cds-card-heading>Nunc convallis lobortis</cds-card-heading>
+                </c4d-card-footer>
+              </c4d-card-group-item>
+              <c4d-card-group-item href="https://example.com">
+                <c4d-card-heading>Nunc convallis lobortis</c4d-card-heading>
                 <p>
                   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec
                   hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
                 </p>
-                <cds-card-cta-footer slot="footer">
+                <c4d-card-footer slot="footer">
                   <svg
                     slot="icon"
                     focusable="false"
@@ -88,15 +88,15 @@
                   >
                     <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
                   </svg>
-                </cds-card-cta-footer>
-              </cds-card-group-item>
-              <cds-card-group-item href="https://example.com">
-                <cds-card-heading>Nunc convallis lobortis</cds-card-heading>
+                </c4d-card-footer>
+              </c4d-card-group-item>
+              <c4d-card-group-item href="https://example.com">
+                <c4d-card-heading>Nunc convallis lobortis</c4d-card-heading>
                 <p>
                   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec
                   hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
                 </p>
-                <cds-card-cta-footer slot="footer">
+                <c4d-card-footer slot="footer">
                   <svg
                     slot="icon"
                     focusable="false"
@@ -109,15 +109,15 @@
                   >
                     <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
                   </svg>
-                </cds-card-cta-footer>
-              </cds-card-group-item>
-              <cds-card-group-item href="https://example.com">
-                <cds-card-heading>Nunc convallis lobortis</cds-card-heading>
+                </c4d-card-footer>
+              </c4d-card-group-item>
+              <c4d-card-group-item href="https://example.com">
+                <c4d-card-heading>Nunc convallis lobortis</c4d-card-heading>
                 <p>
                   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec
                   hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
                 </p>
-                <cds-card-cta-footer slot="footer">
+                <c4d-card-footer slot="footer">
                   <svg
                     slot="icon"
                     focusable="false"
@@ -130,10 +130,10 @@
                   >
                     <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
                   </svg>
-                </cds-card-cta-footer>
-              </cds-card-group-item>
-            </cds-card-group>
-          </cds-card-section-simple>
+                </c4d-card-footer>
+              </c4d-card-group-item>
+            </c4d-card-group>
+          </c4d-card-section-simple>
         </div>
       </div>
     </div>
diff --git a/packages/web-components/examples/codesandbox/components/card-section-simple/package.json b/packages/web-components/examples/stackblitz/components/card-section-simple/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/card-section-simple/package.json
rename to packages/web-components/examples/stackblitz/components/card-section-simple/package.json
diff --git a/packages/web-components/examples/codesandbox/components/card-section-simple/src/index.js b/packages/web-components/examples/stackblitz/components/card-section-simple/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/card-section-simple/src/index.js
rename to packages/web-components/examples/stackblitz/components/card-section-simple/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components/card-section-simple/src/index.scss b/packages/web-components/examples/stackblitz/components/card-section-simple/src/index.scss
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/card-section-simple/src/index.scss
rename to packages/web-components/examples/stackblitz/components/card-section-simple/src/index.scss
diff --git a/packages/web-components/examples/codesandbox/components/card/.gitignore b/packages/web-components/examples/stackblitz/components/card/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/card/.gitignore
rename to packages/web-components/examples/stackblitz/components/card/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components/card/cdn.html b/packages/web-components/examples/stackblitz/components/card/cdn.html
similarity index 83%
rename from packages/web-components/examples/codesandbox/components/card/cdn.html
rename to packages/web-components/examples/stackblitz/components/card/cdn.html
index 392d6cbf58d..4db605bf2fe 100644
--- a/packages/web-components/examples/codesandbox/components/card/cdn.html
+++ b/packages/web-components/examples/stackblitz/components/card/cdn.html
@@ -14,7 +14,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-card:not(:defined) {
+    c4d-card:not(:defined) {
       display: none;
     }
   </style>
@@ -24,10 +24,10 @@
 <div class="cds--grid">
   <div class="cds--row">
     <div class="cds--col-sm-4 cds--col-lg-12">
-      <cds-card href="https://example.com">
-        <cds-card-eyebrow>eyebrow text</cds-card-eyebrow>
-        <cds-card-heading>Lorem ipsum dolor sit amet</cds-card-heading>
-        <cds-card-footer>
+      <c4d-card href="https://example.com">
+        <c4d-card-eyebrow>eyebrow text</c4d-card-eyebrow>
+        <c4d-card-heading>Lorem ipsum dolor sit amet</c4d-card-heading>
+        <c4d-card-footer>
           Card cta text
           <svg
             slot="icon"
@@ -42,8 +42,8 @@
             <path
               d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
           </svg>
-        </cds-card-footer>
-      </cds-card>
+        </c4d-card-footer>
+      </c4d-card>
     </div>
   </div>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/card/index.html b/packages/web-components/examples/stackblitz/components/card/index.html
similarity index 82%
rename from packages/web-components/examples/codesandbox/components/card/index.html
rename to packages/web-components/examples/stackblitz/components/card/index.html
index b4baf2742a8..d21ffcec26d 100644
--- a/packages/web-components/examples/codesandbox/components/card/index.html
+++ b/packages/web-components/examples/stackblitz/components/card/index.html
@@ -14,7 +14,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-card:not(:defined) {
+    c4d-card:not(:defined) {
       display: none;
     }
   </style>
@@ -24,10 +24,10 @@
 <div class="cds--grid">
   <div class="cds--row">
     <div class="cds--col-sm-4 cds--col-lg-12">
-      <cds-card href="https://example.com">
-        <cds-card-eyebrow>eyebrow text</cds-card-eyebrow>
-        <cds-card-heading>Lorem ipsum dolor sit amet</cds-card-heading>
-        <cds-card-footer>
+      <c4d-card href="https://example.com">
+        <c4d-card-eyebrow>eyebrow text</c4d-card-eyebrow>
+        <c4d-card-heading>Lorem ipsum dolor sit amet</c4d-card-heading>
+        <c4d-card-footer>
           Card cta text
           <svg
             slot="icon"
@@ -42,8 +42,8 @@
             <path
               d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
           </svg>
-        </cds-card-footer>
-      </cds-card>
+        </c4d-card-footer>
+      </c4d-card>
     </div>
   </div>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/card/package.json b/packages/web-components/examples/stackblitz/components/card/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/card/package.json
rename to packages/web-components/examples/stackblitz/components/card/package.json
diff --git a/packages/web-components/examples/codesandbox/components/card/src/index.js b/packages/web-components/examples/stackblitz/components/card/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/card/src/index.js
rename to packages/web-components/examples/stackblitz/components/card/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components/carousel/.gitignore b/packages/web-components/examples/stackblitz/components/carousel/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/carousel/.gitignore
rename to packages/web-components/examples/stackblitz/components/carousel/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components/carousel/cdn.html b/packages/web-components/examples/stackblitz/components/carousel/cdn.html
similarity index 98%
rename from packages/web-components/examples/codesandbox/components/carousel/cdn.html
rename to packages/web-components/examples/stackblitz/components/carousel/cdn.html
index 215b2074fcd..fa5264d1a62 100644
--- a/packages/web-components/examples/codesandbox/components/carousel/cdn.html
+++ b/packages/web-components/examples/stackblitz/components/carousel/cdn.html
@@ -16,7 +16,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-carousel:not(:defined) {
+    c4d-carousel:not(:defined) {
       display: none;
     }
   </style>
diff --git a/packages/web-components/examples/codesandbox/components/carousel/index.html b/packages/web-components/examples/stackblitz/components/carousel/index.html
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/carousel/index.html
rename to packages/web-components/examples/stackblitz/components/carousel/index.html
diff --git a/packages/web-components/examples/codesandbox/components/carousel/package.json b/packages/web-components/examples/stackblitz/components/carousel/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/carousel/package.json
rename to packages/web-components/examples/stackblitz/components/carousel/package.json
diff --git a/packages/web-components/examples/codesandbox/components/carousel/src/index.js b/packages/web-components/examples/stackblitz/components/carousel/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/carousel/src/index.js
rename to packages/web-components/examples/stackblitz/components/carousel/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components/cloud-masthead/.gitignore b/packages/web-components/examples/stackblitz/components/cloud-masthead/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/cloud-masthead/.gitignore
rename to packages/web-components/examples/stackblitz/components/cloud-masthead/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components/cloud-masthead/.sassrc b/packages/web-components/examples/stackblitz/components/cloud-masthead/.sassrc
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/cloud-masthead/.sassrc
rename to packages/web-components/examples/stackblitz/components/cloud-masthead/.sassrc
diff --git a/packages/web-components/examples/codesandbox/components/cloud-masthead/cdn-rtl.html b/packages/web-components/examples/stackblitz/components/cloud-masthead/cdn-rtl.html
similarity index 96%
rename from packages/web-components/examples/codesandbox/components/cloud-masthead/cdn-rtl.html
rename to packages/web-components/examples/stackblitz/components/cloud-masthead/cdn-rtl.html
index e4da074490d..be161cfb984 100644
--- a/packages/web-components/examples/codesandbox/components/cloud-masthead/cdn-rtl.html
+++ b/packages/web-components/examples/stackblitz/components/cloud-masthead/cdn-rtl.html
@@ -15,7 +15,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-cloud-masthead-container:not(:defined) {
+    c4d-cloud-masthead-container:not(:defined) {
       display: none;
     }
 
@@ -41,7 +41,7 @@
   <script src="src/index-cdn.js"></script>
 </head>
 <body>
-<cds-cloud-masthead-container data-endpoint="/common/carbon-for-ibm-dotcom/translations/cloud-masthead" id="cloud-masthead-container"></cds-cloud-masthead-container>
+<c4d-cloud-masthead-container data-endpoint="/common/carbon-for-ibm-dotcom/translations/cloud-masthead" id="cloud-masthead-container"></c4d-cloud-masthead-container>
 <main class="cds--content cds-ce-demo--ui-shell-content">
   <div class="cds--grid">
     <div class="cds--row">
diff --git a/packages/web-components/examples/codesandbox/components/cloud-masthead/cdn.html b/packages/web-components/examples/stackblitz/components/cloud-masthead/cdn.html
similarity index 96%
rename from packages/web-components/examples/codesandbox/components/cloud-masthead/cdn.html
rename to packages/web-components/examples/stackblitz/components/cloud-masthead/cdn.html
index 554efd867e0..b0d8957e2d5 100644
--- a/packages/web-components/examples/codesandbox/components/cloud-masthead/cdn.html
+++ b/packages/web-components/examples/stackblitz/components/cloud-masthead/cdn.html
@@ -15,7 +15,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-cloud-masthead-container:not(:defined) {
+    c4d-cloud-masthead-container:not(:defined) {
       display: none;
     }
 
@@ -41,7 +41,7 @@
   <script src="src/index-cdn.js"></script>
 </head>
 <body>
-<cds-cloud-masthead-container data-endpoint="/common/carbon-for-ibm-dotcom/translations/cloud-masthead" id="cloud-masthead-container"></cds-cloud-masthead-container>
+<c4d-cloud-masthead-container data-endpoint="/common/carbon-for-ibm-dotcom/translations/cloud-masthead" id="cloud-masthead-container"></c4d-cloud-masthead-container>
 <main class="cds--content cds-ce-demo--ui-shell-content">
   <div class="cds--grid">
     <div class="cds--row">
diff --git a/packages/web-components/examples/codesandbox/components/cloud-masthead/index.html b/packages/web-components/examples/stackblitz/components/cloud-masthead/index.html
similarity index 97%
rename from packages/web-components/examples/codesandbox/components/cloud-masthead/index.html
rename to packages/web-components/examples/stackblitz/components/cloud-masthead/index.html
index 38119f74993..981e6c2caf7 100644
--- a/packages/web-components/examples/codesandbox/components/cloud-masthead/index.html
+++ b/packages/web-components/examples/stackblitz/components/cloud-masthead/index.html
@@ -21,7 +21,7 @@
     <script src="src/index.js"></script>
   </head>
   <body>
-  <cds-cloud-masthead-container data-endpoint="/common/carbon-for-ibm-dotcom/translations/cloud-masthead" id="cloud-masthead-container"></cds-cloud-masthead-container>
+  <c4d-cloud-masthead-container data-endpoint="/common/carbon-for-ibm-dotcom/translations/cloud-masthead" id="cloud-masthead-container"></c4d-cloud-masthead-container>
   <main class="cds--content cds-ce-demo--ui-shell-content">
       <div class="cds--grid">
         <div class="cds--row">
diff --git a/packages/web-components/examples/codesandbox/components/cloud-masthead/package.json b/packages/web-components/examples/stackblitz/components/cloud-masthead/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/cloud-masthead/package.json
rename to packages/web-components/examples/stackblitz/components/cloud-masthead/package.json
diff --git a/packages/web-components/examples/codesandbox/components/cloud-masthead/src/index-cdn.js b/packages/web-components/examples/stackblitz/components/cloud-masthead/src/index-cdn.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/cloud-masthead/src/index-cdn.js
rename to packages/web-components/examples/stackblitz/components/cloud-masthead/src/index-cdn.js
diff --git a/packages/web-components/examples/codesandbox/components/cloud-masthead/src/index.js b/packages/web-components/examples/stackblitz/components/cloud-masthead/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/cloud-masthead/src/index.js
rename to packages/web-components/examples/stackblitz/components/cloud-masthead/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components/cloud-masthead/src/index.scss b/packages/web-components/examples/stackblitz/components/cloud-masthead/src/index.scss
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/cloud-masthead/src/index.scss
rename to packages/web-components/examples/stackblitz/components/cloud-masthead/src/index.scss
diff --git a/packages/web-components/examples/codesandbox/components/content-block-card-static/.env.local b/packages/web-components/examples/stackblitz/components/content-block-card-static/.env.local
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/content-block-card-static/.env.local
rename to packages/web-components/examples/stackblitz/components/content-block-card-static/.env.local
diff --git a/packages/web-components/examples/codesandbox/components/content-block-card-static/.gitignore b/packages/web-components/examples/stackblitz/components/content-block-card-static/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/content-block-card-static/.gitignore
rename to packages/web-components/examples/stackblitz/components/content-block-card-static/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components/content-block-card-static/cdn.html b/packages/web-components/examples/stackblitz/components/content-block-card-static/cdn.html
similarity index 60%
rename from packages/web-components/examples/codesandbox/components/content-block-card-static/cdn.html
rename to packages/web-components/examples/stackblitz/components/content-block-card-static/cdn.html
index b242abc838c..da4be595292 100644
--- a/packages/web-components/examples/codesandbox/components/content-block-card-static/cdn.html
+++ b/packages/web-components/examples/stackblitz/components/content-block-card-static/cdn.html
@@ -15,7 +15,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-block-card-static:not(:defined) {
+    c4d-content-block-card-static:not(:defined) {
       display: none;
     }
   </style>
@@ -25,65 +25,65 @@
 <div class="cds--grid">
   <div class="cds--row">
     <div class="cds--col-sm-4 cds--col-lg-8 cds--offset-lg-4">
-      <cds-content-block-card-static>
-        <cds-content-block-heading>Lorem ipsum dolor sit amet.</cds-content-block-heading>
+      <c4d-content-block-card-static>
+        <c4d-content-block-heading>Lorem ipsum dolor sit amet.</c4d-content-block-heading>
 
-        <cds-card-group grid-mode="border">
-          <cds-card-group-item>
-            <cds-card-heading>Nunc convallis lobortis Nunc convallis lobortis Nunc convallis lobortis</cds-card-heading>
+        <c4d-card-group grid-mode="border">
+          <c4d-card-group-item>
+            <c4d-card-heading>Nunc convallis lobortis Nunc convallis lobortis Nunc convallis lobortis</c4d-card-heading>
             <p>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.
               Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
             </p>
-          </cds-card-group-item>
+          </c4d-card-group-item>
 
-          <cds-card-group-item>
-            <cds-card-heading>Nunc convallis lobortis Nunc convallis lobortis Nunc convallis lobortis</cds-card-heading>
+          <c4d-card-group-item>
+            <c4d-card-heading>Nunc convallis lobortis Nunc convallis lobortis Nunc convallis lobortis</c4d-card-heading>
             <p>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.
               Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
             </p>
-          </cds-card-group-item>
+          </c4d-card-group-item>
 
-          <cds-card-group-item>
-            <cds-card-heading>Nunc convallis lobortis Nunc convallis lobortis Nunc convallis lobortis</cds-card-heading>
+          <c4d-card-group-item>
+            <c4d-card-heading>Nunc convallis lobortis Nunc convallis lobortis Nunc convallis lobortis</c4d-card-heading>
             <p>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.
               Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
             </p>
-          </cds-card-group-item>
+          </c4d-card-group-item>
 
-          <cds-card-group-item>
-            <cds-card-heading>Nunc convallis lobortis Nunc convallis lobortis Nunc convallis lobortis</cds-card-heading>
+          <c4d-card-group-item>
+            <c4d-card-heading>Nunc convallis lobortis Nunc convallis lobortis Nunc convallis lobortis</c4d-card-heading>
             <p>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.
               Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
             </p>
-          </cds-card-group-item>
+          </c4d-card-group-item>
 
-          <cds-card-group-item>
-            <cds-card-heading>Nunc convallis lobortis Nunc convallis lobortis Nunc convallis lobortis</cds-card-heading>
+          <c4d-card-group-item>
+            <c4d-card-heading>Nunc convallis lobortis Nunc convallis lobortis Nunc convallis lobortis</c4d-card-heading>
             <p>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.
               Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
             </p>
-          </cds-card-group-item>
-        </cds-card-group>
+          </c4d-card-group-item>
+        </c4d-card-group>
 
-        <cds-content-item>
-          <cds-content-item-heading>Vivamus suscipit scelerisque arcu sed.</cds-content-item-heading>
-          <cds-content-item-copy>Donec convallis magna ut urna aliquam, cursus iaculis mi commodo. Donec ut quam tincidunt, pharetra urna eget, sollicitudin sem. Donec odio mauris, tristique non venenatis nec, egestas at odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Quisque eu purus aliquet, vulputate massa sit amet, suscipit arcu. Pellentesque tincidunt faucibus lacinia. Aliquam consequat pretium ultrices. Curabitur non nunc ac ipsum porta tempus rhoncus ac metus.</cds-content-item-copy>
-        </cds-content-item>
+        <c4d-content-item>
+          <c4d-content-item-heading>Vivamus suscipit scelerisque arcu sed.</c4d-content-item-heading>
+          <c4d-content-item-copy>Donec convallis magna ut urna aliquam, cursus iaculis mi commodo. Donec ut quam tincidunt, pharetra urna eget, sollicitudin sem. Donec odio mauris, tristique non venenatis nec, egestas at odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Quisque eu purus aliquet, vulputate massa sit amet, suscipit arcu. Pellentesque tincidunt faucibus lacinia. Aliquam consequat pretium ultrices. Curabitur non nunc ac ipsum porta tempus rhoncus ac metus.</c4d-content-item-copy>
+        </c4d-content-item>
 
-        <cds-button-group slot="footer">
-          <cds-button-group-item href="https://example.com">
+        <c4d-button-group slot="footer">
+          <c4d-button-group-item href="https://example.com">
             Contact us
-          </cds-button-group-item>
-          <cds-button-group-item href="https://example.com">
+          </c4d-button-group-item>
+          <c4d-button-group-item href="https://example.com">
             Free trial
-          </cds-button-group-item>
-        </cds-button-group>
-      </cds-content-block-card-static>
+          </c4d-button-group-item>
+        </c4d-button-group>
+      </c4d-content-block-card-static>
     </div>
   </div>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/content-block-card-static/index.html b/packages/web-components/examples/stackblitz/components/content-block-card-static/index.html
similarity index 60%
rename from packages/web-components/examples/codesandbox/components/content-block-card-static/index.html
rename to packages/web-components/examples/stackblitz/components/content-block-card-static/index.html
index 0abc06c6083..55a11b86a10 100644
--- a/packages/web-components/examples/codesandbox/components/content-block-card-static/index.html
+++ b/packages/web-components/examples/stackblitz/components/content-block-card-static/index.html
@@ -26,65 +26,65 @@
     <div class="cds--grid">
       <div class="cds--row">
         <div class="cds--col-sm-4 cds--col-lg-cds--s--offset-lg-4">
-          <cds-content-block-card-static>
-            <cds-content-block-heading>Morbi consectetur vulputate faucibus. Proin.</cds-content-block-heading>
+          <c4d-content-block-card-static>
+            <c4d-content-block-heading>Morbi consectetur vulputate faucibus. Proin.</c4d-content-block-heading>
 
-            <cds-card-group grid-mode="border">
-              <cds-card-group-item>
-                <cds-card-heading>Nunc convallis lobortis Nunc convallis lobortis Nunc convallis lobortis</cds-card-heading>
+            <c4d-card-group grid-mode="border">
+              <c4d-card-group-item>
+                <c4d-card-heading>Nunc convallis lobortis Nunc convallis lobortis Nunc convallis lobortis</c4d-card-heading>
                 <p>
                   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.
                   Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
                 </p>
-              </cds-card-group-item>
+              </c4d-card-group-item>
 
-              <cds-card-group-item>
-                <cds-card-heading>Nunc convallis lobortis Nunc convallis lobortis Nunc convallis lobortis</cds-card-heading>
+              <c4d-card-group-item>
+                <c4d-card-heading>Nunc convallis lobortis Nunc convallis lobortis Nunc convallis lobortis</c4d-card-heading>
                 <p>
                   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.
                   Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
                 </p>
-              </cds-card-group-item>
+              </c4d-card-group-item>
 
-              <cds-card-group-item>
-                <cds-card-heading>Nunc convallis lobortis Nunc convallis lobortis Nunc convallis lobortis</cds-card-heading>
+              <c4d-card-group-item>
+                <c4d-card-heading>Nunc convallis lobortis Nunc convallis lobortis Nunc convallis lobortis</c4d-card-heading>
                 <p>
                   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.
                   Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
                 </p>
-              </cds-card-group-item>
+              </c4d-card-group-item>
 
-              <cds-card-group-item>
-                <cds-card-heading>Nunc convallis lobortis Nunc convallis lobortis Nunc convallis lobortis</cds-card-heading>
+              <c4d-card-group-item>
+                <c4d-card-heading>Nunc convallis lobortis Nunc convallis lobortis Nunc convallis lobortis</c4d-card-heading>
                 <p>
                   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.
                   Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
                 </p>
-              </cds-card-group-item>
+              </c4d-card-group-item>
 
-              <cds-card-group-item>
-                <cds-card-heading>Nunc convallis lobortis Nunc convallis lobortis Nunc convallis lobortis</cds-card-heading>
+              <c4d-card-group-item>
+                <c4d-card-heading>Nunc convallis lobortis Nunc convallis lobortis Nunc convallis lobortis</c4d-card-heading>
                 <p>
                   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.
                   Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
                 </p>
-              </cds-card-group-item>
-            </cds-card-group>
+              </c4d-card-group-item>
+            </c4d-card-group>
 
-            <cds-content-item>
-              <cds-content-item-heading>Vivamus suscipit scelerisque arcu sed.</cds-content-item-heading>
-              <cds-content-item-copy>Donec convallis magna ut urna aliquam, cursus iaculis mi commodo. Donec ut quam tincidunt, pharetra urna eget, sollicitudin sem. Donec odio mauris, tristique non venenatis nec, egestas at odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Quisque eu purus aliquet, vulputate massa sit amet, suscipit arcu. Pellentesque tincidunt faucibus lacinia. Aliquam consequat pretium ultrices. Curabitur non nunc ac ipsum porta tempus rhoncus ac metus.</cds-content-item-copy>
-            </cds-content-item>
+            <c4d-content-item>
+              <c4d-content-item-heading>Vivamus suscipit scelerisque arcu sed.</c4d-content-item-heading>
+              <c4d-content-item-copy>Donec convallis magna ut urna aliquam, cursus iaculis mi commodo. Donec ut quam tincidunt, pharetra urna eget, sollicitudin sem. Donec odio mauris, tristique non venenatis nec, egestas at odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Quisque eu purus aliquet, vulputate massa sit amet, suscipit arcu. Pellentesque tincidunt faucibus lacinia. Aliquam consequat pretium ultrices. Curabitur non nunc ac ipsum porta tempus rhoncus ac metus.</c4d-content-item-copy>
+            </c4d-content-item>
 
-            <cds-button-group slot="footer">
-              <cds-button-group-item href="https://example.com">
+            <c4d-button-group slot="footer">
+              <c4d-button-group-item href="https://example.com">
                 Contact us
-              </cds-button-group-item>
-              <cds-button-group-item href="https://example.com">
+              </c4d-button-group-item>
+              <c4d-button-group-item href="https://example.com">
                 Free trial
-              </cds-button-group-item>
-            </cds-button-group>
-          </cds-content-block-card-static>
+              </c4d-button-group-item>
+            </c4d-button-group>
+          </c4d-content-block-card-static>
         </div>
       </div>
     </div>
diff --git a/packages/web-components/examples/codesandbox/components/content-block-card-static/package.json b/packages/web-components/examples/stackblitz/components/content-block-card-static/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/content-block-card-static/package.json
rename to packages/web-components/examples/stackblitz/components/content-block-card-static/package.json
diff --git a/packages/web-components/examples/codesandbox/components/content-block-card-static/src/index.js b/packages/web-components/examples/stackblitz/components/content-block-card-static/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/content-block-card-static/src/index.js
rename to packages/web-components/examples/stackblitz/components/content-block-card-static/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components/content-block-cards/.gitignore b/packages/web-components/examples/stackblitz/components/content-block-cards/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/content-block-cards/.gitignore
rename to packages/web-components/examples/stackblitz/components/content-block-cards/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components/content-block-cards/cdn.html b/packages/web-components/examples/stackblitz/components/content-block-cards/cdn.html
similarity index 76%
rename from packages/web-components/examples/codesandbox/components/content-block-cards/cdn.html
rename to packages/web-components/examples/stackblitz/components/content-block-cards/cdn.html
index a3e5ab99240..6e20dc5af2f 100644
--- a/packages/web-components/examples/codesandbox/components/content-block-cards/cdn.html
+++ b/packages/web-components/examples/stackblitz/components/content-block-cards/cdn.html
@@ -15,7 +15,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-block-cards:not(:defined) {
+    c4d-content-block-cards:not(:defined) {
       display: none;
     }
   </style>
@@ -25,16 +25,16 @@
 <div class="cds--grid">
   <div class="cds--row">
     <div class="cds--col-sm-4 cds--col-lg-12 cds--offset-lg-4 cds--no-gutter">
-      <cds-content-block-cards>
-        <cds-content-block-heading>Lorem ipsum dolor sit amet</cds-content-block-heading>
-        <cds-card-group>
-          <cds-card-group-item href="https://example.com">
-            <cds-card-heading>Nunc convallis lobortis</cds-card-heading>
+      <c4d-content-block-cards>
+        <c4d-content-block-heading>Lorem ipsum dolor sit amet</c4d-content-block-heading>
+        <c4d-card-group>
+          <c4d-card-group-item href="https://example.com">
+            <c4d-card-heading>Nunc convallis lobortis</c4d-card-heading>
             <p>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec
               hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
             </p>
-            <cds-card-cta-footer slot="footer">
+            <c4d-card-footer slot="footer">
               <svg
                 slot="icon"
                 focusable="false"
@@ -48,15 +48,15 @@
               >
                 <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
               </svg>
-            </cds-card-cta-footer>
-          </cds-card-group-item>
-          <cds-card-group-item href="https://example.com">
-            <cds-card-heading>Nunc convallis lobortis</cds-card-heading>
+            </c4d-card-footer>
+          </c4d-card-group-item>
+          <c4d-card-group-item href="https://example.com">
+            <c4d-card-heading>Nunc convallis lobortis</c4d-card-heading>
             <p>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec
               hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
             </p>
-            <cds-card-cta-footer slot="footer">
+            <c4d-card-footer slot="footer">
               <svg
                 slot="icon"
                 focusable="false"
@@ -70,15 +70,15 @@
               >
                 <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
               </svg>
-            </cds-card-cta-footer>
-          </cds-card-group-item>
-          <cds-card-group-item href="https://example.com">
-            <cds-card-heading>Nunc convallis lobortis</cds-card-heading>
+            </c4d-card-footer>
+          </c4d-card-group-item>
+          <c4d-card-group-item href="https://example.com">
+            <c4d-card-heading>Nunc convallis lobortis</c4d-card-heading>
             <p>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec
               hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
             </p>
-            <cds-card-cta-footer slot="footer">
+            <c4d-card-footer slot="footer">
               <svg
                 slot="icon"
                 focusable="false"
@@ -92,15 +92,15 @@
               >
                 <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
               </svg>
-            </cds-card-cta-footer>
-          </cds-card-group-item>
-          <cds-card-group-item href="https://example.com">
-            <cds-card-heading>Nunc convallis lobortis</cds-card-heading>
+            </c4d-card-footer>
+          </c4d-card-group-item>
+          <c4d-card-group-item href="https://example.com">
+            <c4d-card-heading>Nunc convallis lobortis</c4d-card-heading>
             <p>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec
               hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
             </p>
-            <cds-card-cta-footer slot="footer">
+            <c4d-card-footer slot="footer">
               <svg
                 slot="icon"
                 focusable="false"
@@ -114,15 +114,15 @@
               >
                 <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
               </svg>
-            </cds-card-cta-footer>
-          </cds-card-group-item>
-          <cds-card-group-item href="https://example.com">
-            <cds-card-heading>Nunc convallis lobortis</cds-card-heading>
+            </c4d-card-footer>
+          </c4d-card-group-item>
+          <c4d-card-group-item href="https://example.com">
+            <c4d-card-heading>Nunc convallis lobortis</c4d-card-heading>
             <p>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec
               hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
             </p>
-            <cds-card-cta-footer slot="footer">
+            <c4d-card-footer slot="footer">
               <svg
                 slot="icon"
                 focusable="false"
@@ -136,12 +136,12 @@
               >
                 <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
               </svg>
-            </cds-card-cta-footer>
-          </cds-card-group-item>
-        </cds-card-group>
-        <cds-card-cta slot="footer" cta-type="local" href="https://www.ibm.com">
+            </c4d-card-footer>
+          </c4d-card-group-item>
+        </c4d-card-group>
+        <c4d-card slot="footer" cta-type="local" href="https://www.ibm.com">
           <p>Lorem ipsum dolor sit ametttt</p>
-          <cds-card-cta-footer>
+          <c4d-card-footer>
             <svg
               slot="footer"
               focusable="false"
@@ -155,9 +155,9 @@
             >
               <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
             </svg>
-          </cds-card-cta-footer>
-        </cds-card-cta>
-      </cds-content-block-cards>
+          </c4d-card-footer>
+        </c4d-card>
+      </c4d-content-block-cards>
     </div>
   </div>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/content-block-cards/index.html b/packages/web-components/examples/stackblitz/components/content-block-cards/index.html
similarity index 76%
rename from packages/web-components/examples/codesandbox/components/content-block-cards/index.html
rename to packages/web-components/examples/stackblitz/components/content-block-cards/index.html
index 39eafcf4ec2..3a581cf2654 100644
--- a/packages/web-components/examples/codesandbox/components/content-block-cards/index.html
+++ b/packages/web-components/examples/stackblitz/components/content-block-cards/index.html
@@ -24,16 +24,16 @@
     <div class="cds--grid">
       <div class="cds--row">
         <div class="cds--col-sm-4 cds--col-lg-12 cds--offset-lg-4 cds--no-gutter">
-          <cds-content-block-cards>
-            <cds-content-block-heading>Lorem ipsum dolor sit amet</cds-content-block-heading>
-            <cds-card-group>
-              <cds-card-group-item href="https://example.com">
-                <cds-card-heading>Nunc convallis lobortis</cds-card-heading>
+          <c4d-content-block-cards>
+            <c4d-content-block-heading>Lorem ipsum dolor sit amet</c4d-content-block-heading>
+            <c4d-card-group>
+              <c4d-card-group-item href="https://example.com">
+                <c4d-card-heading>Nunc convallis lobortis</c4d-card-heading>
                 <p>
                   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec
                   hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
                 </p>
-                <cds-card-cta-footer slot="footer">
+                <c4d-card-footer slot="footer">
                   <svg
                     slot="icon"
                     focusable="false"
@@ -47,15 +47,15 @@
                   >
                     <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
                   </svg>
-                </cds-card-cta-footer>
-              </cds-card-group-item>
-              <cds-card-group-item href="https://example.com">
-                <cds-card-heading>Nunc convallis lobortis</cds-card-heading>
+                </c4d-card-footer>
+              </c4d-card-group-item>
+              <c4d-card-group-item href="https://example.com">
+                <c4d-card-heading>Nunc convallis lobortis</c4d-card-heading>
                 <p>
                   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec
                   hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
                 </p>
-                <cds-card-cta-footer slot="footer">
+                <c4d-card-footer slot="footer">
                   <svg
                     slot="icon"
                     focusable="false"
@@ -69,15 +69,15 @@
                   >
                     <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
                   </svg>
-                </cds-card-cta-footer>
-              </cds-card-group-item>
-              <cds-card-group-item href="https://example.com">
-                <cds-card-heading>Nunc convallis lobortis</cds-card-heading>
+                </c4d-card-footer>
+              </c4d-card-group-item>
+              <c4d-card-group-item href="https://example.com">
+                <c4d-card-heading>Nunc convallis lobortis</c4d-card-heading>
                 <p>
                   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec
                   hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
                 </p>
-                <cds-card-cta-footer slot="footer">
+                <c4d-card-footer slot="footer">
                   <svg
                     slot="icon"
                     focusable="false"
@@ -91,15 +91,15 @@
                   >
                     <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
                   </svg>
-                </cds-card-cta-footer>
-              </cds-card-group-item>
-              <cds-card-group-item href="https://example.com">
-                <cds-card-heading>Nunc convallis lobortis</cds-card-heading>
+                </c4d-card-footer>
+              </c4d-card-group-item>
+              <c4d-card-group-item href="https://example.com">
+                <c4d-card-heading>Nunc convallis lobortis</c4d-card-heading>
                 <p>
                   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec
                   hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
                 </p>
-                <cds-card-cta-footer slot="footer">
+                <c4d-card-footer slot="footer">
                   <svg
                     slot="icon"
                     focusable="false"
@@ -113,15 +113,15 @@
                   >
                     <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
                   </svg>
-                </cds-card-cta-footer>
-              </cds-card-group-item>
-              <cds-card-group-item href="https://example.com">
-                <cds-card-heading>Nunc convallis lobortis</cds-card-heading>
+                </c4d-card-footer>
+              </c4d-card-group-item>
+              <c4d-card-group-item href="https://example.com">
+                <c4d-card-heading>Nunc convallis lobortis</c4d-card-heading>
                 <p>
                   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec
                   hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
                 </p>
-                <cds-card-cta-footer slot="footer">
+                <c4d-card-footer slot="footer">
                   <svg
                     slot="icon"
                     focusable="false"
@@ -135,12 +135,12 @@
                   >
                     <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
                   </svg>
-                </cds-card-cta-footer>
-              </cds-card-group-item>
-            </cds-card-group>
-            <cds-card-cta slot="footer" cta-type="local" href="https://www.ibm.com">
+                </c4d-card-footer>
+              </c4d-card-group-item>
+            </c4d-card-group>
+            <c4d-card slot="footer" cta-type="local" href="https://www.ibm.com">
               <p>Lorem ipsum dolor sit ametttt</p>
-              <cds-card-cta-footer>
+              <c4d-card-footer>
                 <svg
                   slot="footer"
                   focusable="false"
@@ -154,9 +154,9 @@
                 >
                   <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
                 </svg>
-              </cds-card-cta-footer>
-            </cds-card-cta>
-          </cds-content-block-cards>
+              </c4d-card-footer>
+            </c4d-card>
+          </c4d-content-block-cards>
         </div>
       </div>
     </div>
diff --git a/packages/web-components/examples/codesandbox/components/content-block-cards/package.json b/packages/web-components/examples/stackblitz/components/content-block-cards/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/content-block-cards/package.json
rename to packages/web-components/examples/stackblitz/components/content-block-cards/package.json
diff --git a/packages/web-components/examples/codesandbox/components/content-block-cards/src/index.js b/packages/web-components/examples/stackblitz/components/content-block-cards/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/content-block-cards/src/index.js
rename to packages/web-components/examples/stackblitz/components/content-block-cards/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components/content-block-headlines/.env.local b/packages/web-components/examples/stackblitz/components/content-block-headlines/.env.local
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/content-block-headlines/.env.local
rename to packages/web-components/examples/stackblitz/components/content-block-headlines/.env.local
diff --git a/packages/web-components/examples/codesandbox/components/content-block-headlines/.gitignore b/packages/web-components/examples/stackblitz/components/content-block-headlines/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/content-block-headlines/.gitignore
rename to packages/web-components/examples/stackblitz/components/content-block-headlines/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components/content-block-headlines/.sassrc b/packages/web-components/examples/stackblitz/components/content-block-headlines/.sassrc
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/content-block-headlines/.sassrc
rename to packages/web-components/examples/stackblitz/components/content-block-headlines/.sassrc
diff --git a/packages/web-components/examples/stackblitz/components/content-block-headlines/cdn.html b/packages/web-components/examples/stackblitz/components/content-block-headlines/cdn.html
new file mode 100644
index 00000000000..c346361bc4a
--- /dev/null
+++ b/packages/web-components/examples/stackblitz/components/content-block-headlines/cdn.html
@@ -0,0 +1,86 @@
+<!--
+@license
+
+Copyright IBM Corp. 2020
+
+This source code is licensed under the Apache-2.0 license found in the
+LICENSE file in the root directory of this source tree.
+-->
+
+<html>
+<head>
+  <title>@carbon/ibmdotcom-web-components example</title>
+  <meta charset="UTF-8" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css" />
+  <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 */
+    c4d-content-block-headlines:not(:defined) {
+      display: none;
+    }
+  </style>
+  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/content-block-headlines.min.js"></script>
+</head>
+<body>
+<div class="cds--grid">
+  <div class="cds--row">
+    <div class="cds--col-sm-4 cds--col-lg-12 cds--offset-lg-4 cds--no-gutter">
+      <c4d-content-block-headlines>
+        <c4d-content-block-heading>Aliquam condimentum</c4d-content-block-heading>
+        <c4d-content-block-copy
+        >Lorem ipsum *dolor* sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec
+          hendrerit.</c4d-content-block-copy
+        >
+        <c4d-content-block-headlines-item>
+          <c4d-content-block-headlines-heading>25%</c4d-content-block-headlines-heading>
+          <c4d-content-item-copy slot="copy"
+          >Modernize mission-critical applications and infrastructure in a hybrid multicloud environment up to 25 percent
+            faster.</c4d-content-item-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
+            </c4d-link-list-item-cta>
+          </c4d-link-list>
+        </c4d-content-block-headlines-item>
+        <c4d-content-block-headlines-item>
+          <c4d-content-block-headlines-heading>25%</c4d-content-block-headlines-heading>
+          <c4d-content-item-copy slot="copy"
+          >Modernize mission-critical applications and infrastructure in a hybrid multicloud environment up to 25 percent
+            faster.</c4d-content-item-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
+            </c4d-link-list-item-cta>
+          </c4d-link-list>
+        </c4d-content-block-headlines-item>
+        <c4d-content-block-headlines-item>
+          <c4d-content-block-headlines-heading>1.34M</c4d-content-block-headlines-heading>
+          <c4d-content-item-copy slot="copy"
+          >Save 1.34M per year by optimizing your time and IT expenses.</c4d-content-item-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
+            </c4d-link-list-item-cta>
+          </c4d-link-list>
+        </c4d-content-block-headlines-item>
+        <c4d-content-block-headlines-item>
+          <c4d-content-block-headlines-heading>25%</c4d-content-block-headlines-heading>
+          <c4d-content-item-copy slot="copy"
+          >Modernize mission-critical applications and infrastructure in a hybrid multicloud environment up to 25 percent
+            faster.</c4d-content-item-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
+            </c4d-link-list-item-cta>
+          </c4d-link-list>
+        </c4d-content-block-headlines-item>
+      </c4d-content-block-headlines>
+    </div>
+  </div>
+</div>
+</body>
+</html>
diff --git a/packages/web-components/examples/stackblitz/components/content-block-headlines/index.html b/packages/web-components/examples/stackblitz/components/content-block-headlines/index.html
new file mode 100644
index 00000000000..46631a0ff54
--- /dev/null
+++ b/packages/web-components/examples/stackblitz/components/content-block-headlines/index.html
@@ -0,0 +1,85 @@
+<!--
+@license
+
+Copyright IBM Corp. 2020
+
+This source code is licensed under the Apache-2.0 license found in the
+LICENSE file in the root directory of this source tree.
+-->
+
+<html>
+  <head>
+    <title>@carbon/ibmdotcom-web-components example</title>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css" />
+    <style type="text/css">
+      /* Suppress custom element until styles are loaded */
+      cds-content-block-headlines:not(:defined) {
+        display: none;
+      }
+    </style>
+    <script src="src/index.js"></script>
+  </head>
+  <body>
+    <div class="cds--grid">
+      <div class="cds--row">
+        <div class="cds--col-sm-4 cds--col-lg-12 cds--offset-lg-4 cds--no-gutter">
+          <c4d-content-block-headlines>
+            <c4d-content-block-heading>Aliquam condimentum</c4d-content-block-heading>
+            <c4d-content-block-copy
+              >Lorem ipsum *dolor* sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec
+              hendrerit.</c4d-content-block-copy
+            >
+            <c4d-content-block-headlines-item>
+              <c4d-content-block-headlines-heading>25%</c4d-content-block-headlines-heading>
+              <c4d-content-item-copy slot="copy"
+                >Modernize mission-critical applications and infrastructure in a hybrid multicloud environment up to 25 percent
+                faster.</c4d-content-item-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
+                </c4d-link-list-item-cta>
+              </c4d-link-list>
+            </c4d-content-block-headlines-item>
+            <c4d-content-block-headlines-item>
+              <c4d-content-block-headlines-heading>25%</c4d-content-block-headlines-heading>
+              <c4d-content-item-copy slot="copy"
+                >Modernize mission-critical applications and infrastructure in a hybrid multicloud environment up to 25 percent
+                faster.</c4d-content-item-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
+                </c4d-link-list-item-cta>
+              </c4d-link-list>
+            </c4d-content-block-headlines-item>
+            <c4d-content-block-headlines-item>
+              <c4d-content-block-headlines-heading>1.34M</c4d-content-block-headlines-heading>
+              <c4d-content-item-copy slot="copy"
+                >Save 1.34M per year by optimizing your time and IT expenses.</c4d-content-item-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
+                </c4d-link-list-item-cta>
+              </c4d-link-list>
+            </c4d-content-block-headlines-item>
+            <c4d-content-block-headlines-item>
+              <c4d-content-block-headlines-heading>25%</c4d-content-block-headlines-heading>
+              <c4d-content-item-copy slot="copy"
+                >Modernize mission-critical applications and infrastructure in a hybrid multicloud environment up to 25 percent
+                faster.</c4d-content-item-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
+                </c4d-link-list-item-cta>
+              </c4d-link-list>
+            </c4d-content-block-headlines-item>
+          </c4d-content-block-headlines>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/packages/web-components/examples/codesandbox/components/content-block-headlines/package.json b/packages/web-components/examples/stackblitz/components/content-block-headlines/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/content-block-headlines/package.json
rename to packages/web-components/examples/stackblitz/components/content-block-headlines/package.json
diff --git a/packages/web-components/examples/codesandbox/components/content-block-headlines/src/index.js b/packages/web-components/examples/stackblitz/components/content-block-headlines/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/content-block-headlines/src/index.js
rename to packages/web-components/examples/stackblitz/components/content-block-headlines/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components/content-block-headlines/src/index.scss b/packages/web-components/examples/stackblitz/components/content-block-headlines/src/index.scss
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/content-block-headlines/src/index.scss
rename to packages/web-components/examples/stackblitz/components/content-block-headlines/src/index.scss
diff --git a/packages/web-components/examples/codesandbox/components/content-block-media/.gitignore b/packages/web-components/examples/stackblitz/components/content-block-media/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/content-block-media/.gitignore
rename to packages/web-components/examples/stackblitz/components/content-block-media/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components/content-block-media/.sassrc b/packages/web-components/examples/stackblitz/components/content-block-media/.sassrc
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/content-block-media/.sassrc
rename to packages/web-components/examples/stackblitz/components/content-block-media/.sassrc
diff --git a/packages/web-components/examples/codesandbox/components/content-block-media/cdn.html b/packages/web-components/examples/stackblitz/components/content-block-media/cdn.html
similarity index 70%
rename from packages/web-components/examples/codesandbox/components/content-block-media/cdn.html
rename to packages/web-components/examples/stackblitz/components/content-block-media/cdn.html
index a9f347ec148..72d3566b9f6 100644
--- a/packages/web-components/examples/codesandbox/components/content-block-media/cdn.html
+++ b/packages/web-components/examples/stackblitz/components/content-block-media/cdn.html
@@ -15,7 +15,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-block-media:not(:defined) {
+    c4d-content-block-media:not(:defined) {
       display: none;
     }
   </style>
@@ -26,56 +26,56 @@
 <div class="cds--grid">
   <div class="cds--row">
     <div class="cds--col-sm-4 cds--col-lg-12 cds--offset-lg-4">
-      <cds-content-block-media>
-        <cds-content-block-heading>
+      <c4d-content-block-media>
+        <c4d-content-block-heading>
           Curabitur malesuada varius mi eu posuere
-        </cds-content-block-heading>
-        <cds-content-block-copy size="lg">
+        </c4d-content-block-heading>
+        <c4d-content-block-copy size="lg">
           Lorem ipsum dolor sit amet, *consectetur* adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec
           hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero. Phasellus at elit sollicitudin,
           sodales nulla quis, consequat libero.
-        </cds-content-block-copy>
-        <cds-content-block-media-content>
-          <cds-content-group-heading>
+        </c4d-content-block-copy>
+        <c4d-content-block-media-content>
+          <c4d-content-group-heading>
             Lorem ipsum dolor sit amet
-          </cds-content-group-heading>
-          <cds-image
+          </c4d-content-group-heading>
+          <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"
             heading="Lorem ipsum"
           >
-            <cds-image-item
+            <c4d-image-item
               media="(min-width: 672px)"
               srcset="https://fpoimg.com/672x378?text=16:9&amp;bg_color=ee5396&amp;text_color=161616"
             >
-            </cds-image-item>
-            <cds-image-item
+            </c4d-image-item>
+            <c4d-image-item
               media="(min-width: 400px)"
               srcset="https://fpoimg.com/400x225?text=16:9&amp;bg_color=ee5396&amp;text_color=161616"
             >
-            </cds-image-item>
-            <cds-image-item
+            </c4d-image-item>
+            <c4d-image-item
               media="(min-width: 320px)"
               srcset="https://fpoimg.com/320x180?text=16:9&amp;bg_color=ee5396&amp;text_color=161616"
             >
-            </cds-image-item>
-          </cds-image>
-          <cds-content-item>
-            <cds-content-item-heading>Lorem ipsum dolor sit amet.</cds-content-item-heading>
-            <cds-content-item-copy>
+            </c4d-image-item>
+          </c4d-image>
+          <c4d-content-item>
+            <c4d-content-item-heading>Lorem ipsum dolor sit amet.</c4d-content-item-heading>
+            <c4d-content-item-copy>
               Lorem ipsum dolor sit amet, *consectetur* adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque
               diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et,
               tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim
               sapien.
-            </cds-content-item-copy>
-          </cds-content-item>
-          <cds-card-link-cta cta-type="local" slot="footer" href="https://example.com">
+            </c4d-content-item-copy>
+          </c4d-content-item>
+          <c4d-card link cta-type="local" slot="footer" href="https://example.com">
             <p>Lorem ipsum dolor sit amet</p>
-            <cds-card-cta-footer></cds-card-cta-footer>
-          </cds-card-link-cta>
-        </cds-content-block-media-content>
-      </cds-content-block-media>
+            <c4d-card-footer></c4d-card-footer>
+          </c4d-card>
+        </c4d-content-block-media-content>
+      </c4d-content-block-media>
     </div>
   </div>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/content-block-media/index.html b/packages/web-components/examples/stackblitz/components/content-block-media/index.html
similarity index 66%
rename from packages/web-components/examples/codesandbox/components/content-block-media/index.html
rename to packages/web-components/examples/stackblitz/components/content-block-media/index.html
index f80922ed372..6dfe3db44c0 100644
--- a/packages/web-components/examples/codesandbox/components/content-block-media/index.html
+++ b/packages/web-components/examples/stackblitz/components/content-block-media/index.html
@@ -24,56 +24,56 @@
     <div class="cds--grid">
       <div class="cds--row">
         <div class="cds--col-sm-4 cds--col-lg-12 cds--offset-lg-4">
-          <cds-content-block-media>
-            <cds-content-block-heading>
+          <c4d-content-block-media>
+            <c4d-content-block-heading>
               Curabitur malesuada varius mi eu posuere
-            </cds-content-block-heading>
-            <cds-content-block-copy size="lg">
+            </c4d-content-block-heading>
+            <c4d-content-block-copy size="lg">
               Lorem ipsum dolor sit amet, *consectetur* adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec
               hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero. Phasellus at elit sollicitudin,
               sodales nulla quis, consequat libero.
-            </cds-content-block-copy>
-            <cds-content-block-media-content>
-              <cds-content-group-heading>
+            </c4d-content-block-copy>
+            <c4d-content-block-media-content>
+              <c4d-content-group-heading>
                 Lorem ipsum dolor sit amet
-              </cds-content-group-heading>
-              <cds-image
+              </c4d-content-group-heading>
+              <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"
                 heading="Lorem ipsum"
               >
-                <cds-image-item
+                <c4d-image-item
                   media="(min-width: 672px)"
                   srcset="https://fpoimg.com/672x378?text=16:9&amp;bg_color=ee5396&amp;text_color=161616"
                 >
-                </cds-image-item>
-                <cds-image-item
+                </c4d-image-item>
+                <c4d-image-item
                   media="(min-width: 400px)"
                   srcset="https://fpoimg.com/400x225?text=16:9&amp;bg_color=ee5396&amp;text_color=161616"
                 >
-                </cds-image-item>
-                <cds-image-item
+                </c4d-image-item>
+                <c4d-image-item
                   media="(min-width: 320px)"
                   srcset="https://fpoimg.com/320x180?text=16:9&amp;bg_color=ee5396&amp;text_color=161616"
                 >
-                </cds-image-item>
-              </cds-image>
-              <cds-content-item>
-                <cds-content-item-heading>Lorem ipsum dolor sit amet.</cds-content-item-heading>
-                <cds-content-item-copy>
+                </c4d-image-item>
+              </c4d-image>
+              <c4d-content-item>
+                <c4d-content-item-heading>Lorem ipsum dolor sit amet.</c4d-content-item-heading>
+                <c4d-content-item-copy>
                   Lorem ipsum dolor sit amet, *consectetur* adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque
                   diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et,
                   tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim
                   sapien.
-                </cds-content-item-copy>
-              </cds-content-item>
-              <cds-card-link-cta cta-type="local" slot="footer" href="https://example.com">
-                <cds-card-link-heading>Lorem ipsum dolor sit amet</cds-card-link-heading>
-                <cds-card-cta-footer></cds-card-cta-footer>
-              </cds-card-link-cta>
-            </cds-content-block-media-content>
-          </cds-content-block-media>
+                </c4d-content-item-copy>
+              </c4d-content-item>
+              <c4d-card link cta-type="local" slot="footer" href="https://example.com">
+                <c4d-card link-heading>Lorem ipsum dolor sit amet</c4d-card-heading>
+                <c4d-card-footer></c4d-card-footer>
+              </c4d-card>
+            </c4d-content-block-media-content>
+          </c4d-content-block-media>
         </div>
       </div>
     </div>
diff --git a/packages/web-components/examples/codesandbox/components/content-block-media/package.json b/packages/web-components/examples/stackblitz/components/content-block-media/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/content-block-media/package.json
rename to packages/web-components/examples/stackblitz/components/content-block-media/package.json
diff --git a/packages/web-components/examples/codesandbox/components/content-block-media/src/index.js b/packages/web-components/examples/stackblitz/components/content-block-media/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/content-block-media/src/index.js
rename to packages/web-components/examples/stackblitz/components/content-block-media/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components/content-block-media/src/index.scss b/packages/web-components/examples/stackblitz/components/content-block-media/src/index.scss
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/content-block-media/src/index.scss
rename to packages/web-components/examples/stackblitz/components/content-block-media/src/index.scss
diff --git a/packages/web-components/examples/codesandbox/components/content-block-mixed/.gitignore b/packages/web-components/examples/stackblitz/components/content-block-mixed/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/content-block-mixed/.gitignore
rename to packages/web-components/examples/stackblitz/components/content-block-mixed/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components/content-block-mixed/.sassrc b/packages/web-components/examples/stackblitz/components/content-block-mixed/.sassrc
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/content-block-mixed/.sassrc
rename to packages/web-components/examples/stackblitz/components/content-block-mixed/.sassrc
diff --git a/packages/web-components/examples/codesandbox/components/content-block-mixed/cdn.html b/packages/web-components/examples/stackblitz/components/content-block-mixed/cdn.html
similarity index 74%
rename from packages/web-components/examples/codesandbox/components/content-block-mixed/cdn.html
rename to packages/web-components/examples/stackblitz/components/content-block-mixed/cdn.html
index 3cf718e1e86..7db3e916c91 100644
--- a/packages/web-components/examples/codesandbox/components/content-block-mixed/cdn.html
+++ b/packages/web-components/examples/stackblitz/components/content-block-mixed/cdn.html
@@ -15,7 +15,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-block-mixed:not(:defined) {
+    c4d-content-block-mixed:not(:defined) {
       display: none;
     }
   </style>
@@ -28,24 +28,24 @@
 <div class="cds--grid">
   <div class="cds--row">
     <div class="cds--col-sm-4 cds--col-lg-8 cds--offset-lg-4">
-      <cds-content-block-mixed>
-        <cds-content-block-heading>Lorem ipsum dolor sit amet</cds-content-block-heading>
-        <cds-content-block-copy>
+      <c4d-content-block-mixed>
+        <c4d-content-block-heading>Lorem ipsum dolor sit amet</c4d-content-block-heading>
+        <c4d-content-block-copy>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec
           hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
-        </cds-content-block-copy>
+        </c4d-content-block-copy>
 
-        <cds-content-group-cards>
-          <cds-content-group-heading>Lorem ipsum dolor sit amet</cds-content-group-heading>
-          <cds-content-group-cards-item href="www.ibm.com">
-            <cds-card-heading>
+        <c4d-content-group-cards>
+          <c4d-content-group-heading>Lorem ipsum dolor sit amet</c4d-content-group-heading>
+          <c4d-content-group-cards-item href="www.ibm.com">
+            <c4d-card-heading>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
-            </cds-card-heading>
+            </c4d-card-heading>
             <p>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
               magna aliqua.
             </p>
-            <cds-card-footer icon-placement="left">
+            <c4d-card-footer icon-placement="left">
               <svg
                 slot="icon"
                 focusable="false"
@@ -59,17 +59,17 @@
               >
                 <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
               </svg>
-            </cds-card-footer>
-          </cds-content-group-cards-item>
-          <cds-content-group-cards-item href="www.ibm.com">
-            <cds-card-heading>
+            </c4d-card-footer>
+          </c4d-content-group-cards-item>
+          <c4d-content-group-cards-item href="www.ibm.com">
+            <c4d-card-heading>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
-            </cds-card-heading>
+            </c4d-card-heading>
             <p>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
               magna aliqua.
             </p>
-            <cds-card-footer icon-placement="left">
+            <c4d-card-footer icon-placement="left">
               <svg
                 slot="icon"
                 focusable="false"
@@ -83,19 +83,19 @@
               >
                 <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
               </svg>
-            </cds-card-footer>
-          </cds-content-group-cards-item>
-        </cds-content-group-cards>
+            </c4d-card-footer>
+          </c4d-content-group-cards-item>
+        </c4d-content-group-cards>
 
-        <cds-content-group-pictograms>
-          <cds-content-group-heading>Curabitur malesuada varius mi eu posuere</cds-content-group-heading>
-          <cds-content-block-copy size="sm"
+        <c4d-content-group-pictograms>
+          <c4d-content-group-heading>Curabitur malesuada varius mi eu posuere</c4d-content-group-heading>
+          <c4d-content-block-copy size="sm"
           >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec
             hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero. Lorem ipsum dolor sit amet,
             consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit
-            sollicitudin, sodales nulla quis, consequat libero.</cds-content-block-copy
+            sollicitudin, sodales nulla quis, consequat libero.</c4d-content-block-copy
           >
-          <cds-pictogram-item>
+          <c4d-pictogram-item>
             <svg
               slot="pictogram"
               focusable="false"
@@ -119,12 +119,12 @@
                   0,2,0.9,2,2v17C39,31.1,38.1,32,37,32z M17,37h14 M24,32v5 M9,27h30"
               ></path>
             </svg>
-            <cds-content-item-heading>Aliquam condimentum interdum</cds-content-item-heading>
-            <cds-content-item-copy
+            <c4d-content-item-heading>Aliquam condimentum interdum</c4d-content-item-heading>
+            <c4d-content-item-copy
             >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non porttitor libero, in venenatis
-              magna.</cds-content-item-copy
+              magna.</c4d-content-item-copy
             >
-            <cds-link-with-icon href="https://www.ibm.com/" slot="footer">
+            <c4d-link-with-icon href="https://www.ibm.com/" slot="footer">
               Link text
               <svg
                 slot="icon"
@@ -138,43 +138,43 @@
               >
                 <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
               </svg>
-            </cds-link-with-icon>
-          </cds-pictogram-item>
-        </cds-content-group-pictograms>
+            </c4d-link-with-icon>
+          </c4d-pictogram-item>
+        </c4d-content-group-pictograms>
 
-        <cds-content-group-simple>
-          <cds-content-group-heading>Curabitur malesuada varius mi eu posuere</cds-content-group-heading>
-          <cds-content-group-copy size="sm">
+        <c4d-content-group-simple>
+          <c4d-content-group-heading>Curabitur malesuada varius mi eu posuere</c4d-content-group-heading>
+          <c4d-content-group-copy size="sm">
             Lorem ipsum *dolor* sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec
             hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero. Lorem ipsum dolor sit amet,
             consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit
             sollicitudin, sodales nulla quis, consequat libero.
-          </cds-content-group-copy>
-          <cds-image
+          </c4d-content-group-copy>
+          <c4d-image
             slot="media"
             alt="Image alt text"
             default-src="http://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616"
             heading="Curabitur malesuada varius mi eu posuere"
           >
-            <cds-image-item
+            <c4d-image-item
               media="(min-width: 672px)"
               srcset="http://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616"
             >
-            </cds-image-item>
-            <cds-image-item
+            </c4d-image-item>
+            <c4d-image-item
               media="(min-width: 400px)"
               srcset="http://fpoimg.com/400x225?text=16:9&bg_color=ee5396&text_color=161616"
             >
-            </cds-image-item>
-            <cds-image-item
+            </c4d-image-item>
+            <c4d-image-item
               media="(min-width: 320px)"
               srcset="http://fpoimg.com/672x672?text=16:9&bg_color=ee5396&text_color=161616"
             >
-            </cds-image-item>
-          </cds-image>
-          <cds-card-link-cta slot="footer" href="https://www.ibm.com/" cta-type="local">
-            <cds-card-link-heading>Lorem ipsum dolor sit amet</cds-card-link-heading>
-            <cds-card-cta-footer>
+            </c4d-image-item>
+          </c4d-image>
+          <c4d-card link slot="footer" href="https://www.ibm.com/" cta-type="local">
+            <c4d-card link-heading>Lorem ipsum dolor sit amet</c4d-card-heading>
+            <c4d-card-footer>
               <svg
                 slot="icon"
                 focusable="false"
@@ -187,10 +187,10 @@
               >
                 <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
               </svg>
-            </cds-card-cta-footer>
-          </cds-card-link-cta>
-        </cds-content-group-simple>
-      </cds-content-block-mixed>
+            </c4d-card-footer>
+          </c4d-card>
+        </c4d-content-group-simple>
+      </c4d-content-block-mixed>
     </div>
   </div>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/content-block-mixed/index.html b/packages/web-components/examples/stackblitz/components/content-block-mixed/index.html
similarity index 72%
rename from packages/web-components/examples/codesandbox/components/content-block-mixed/index.html
rename to packages/web-components/examples/stackblitz/components/content-block-mixed/index.html
index 3313ecc7ab6..6244f703822 100644
--- a/packages/web-components/examples/codesandbox/components/content-block-mixed/index.html
+++ b/packages/web-components/examples/stackblitz/components/content-block-mixed/index.html
@@ -24,24 +24,24 @@
     <div class="cds--grid">
       <div class="cds--row">
         <div class="cds--col-sm-4 cds--col-lg-8 cds--offset-lg-4">
-          <cds-content-block-mixed>
-            <cds-content-block-heading>Lorem ipsum dolor sit amet</cds-content-block-heading>
-            <cds-content-block-copy>
+          <c4d-content-block-mixed>
+            <c4d-content-block-heading>Lorem ipsum dolor sit amet</c4d-content-block-heading>
+            <c4d-content-block-copy>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec
               hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
-            </cds-content-block-copy>
+            </c4d-content-block-copy>
 
-            <cds-content-group-cards>
-              <cds-content-group-heading>Lorem ipsum dolor sit amet</cds-content-group-heading>
-              <cds-content-group-cards-item href="www.ibm.com">
-                <cds-card-heading>
+            <c4d-content-group-cards>
+              <c4d-content-group-heading>Lorem ipsum dolor sit amet</c4d-content-group-heading>
+              <c4d-content-group-cards-item href="www.ibm.com">
+                <c4d-card-heading>
                   Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
-                </cds-card-heading>
+                </c4d-card-heading>
                 <p>
                   Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
                   magna aliqua.
                 </p>
-                <cds-card-footer icon-placement="left">
+                <c4d-card-footer icon-placement="left">
                   <svg
                     slot="icon"
                     focusable="false"
@@ -55,17 +55,17 @@
                   >
                     <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
                   </svg>
-                </cds-card-footer>
-              </cds-content-group-cards-item>
-              <cds-content-group-cards-item href="www.ibm.com">
-                <cds-card-heading>
+                </c4d-card-footer>
+              </c4d-content-group-cards-item>
+              <c4d-content-group-cards-item href="www.ibm.com">
+                <c4d-card-heading>
                   Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
-                </cds-card-heading>
+                </c4d-card-heading>
                 <p>
                   Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
                   magna aliqua.
                 </p>
-                <cds-card-footer icon-placement="left">
+                <c4d-card-footer icon-placement="left">
                   <svg
                     slot="icon"
                     focusable="false"
@@ -79,19 +79,19 @@
                   >
                     <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
                   </svg>
-                </cds-card-footer>
-              </cds-content-group-cards-item>
-            </cds-content-group-cards>
+                </c4d-card-footer>
+              </c4d-content-group-cards-item>
+            </c4d-content-group-cards>
 
-            <cds-content-group-pictograms>
-              <cds-content-group-heading>Curabitur malesuada varius mi eu posuere</cds-content-group-heading>
-              <cds-content-block-copy size="sm"
+            <c4d-content-group-pictograms>
+              <c4d-content-group-heading>Curabitur malesuada varius mi eu posuere</c4d-content-group-heading>
+              <c4d-content-block-copy size="sm"
                 >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec
                 hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero. Lorem ipsum dolor sit amet,
                 consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit
-                sollicitudin, sodales nulla quis, consequat libero.</cds-content-block-copy
+                sollicitudin, sodales nulla quis, consequat libero.</c4d-content-block-copy
               >
-              <cds-pictogram-item>
+              <c4d-pictogram-item>
                 <svg
                   slot="pictogram"
                   focusable="false"
@@ -115,12 +115,12 @@
                   0,2,0.9,2,2v17C39,31.1,38.1,32,37,32z M17,37h14 M24,32v5 M9,27h30"
                   ></path>
                 </svg>
-                <cds-content-item-heading>Aliquam condimentum interdum</cds-content-item-heading>
-                <cds-content-item-copy
+                <c4d-content-item-heading>Aliquam condimentum interdum</c4d-content-item-heading>
+                <c4d-content-item-copy
                   >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non porttitor libero, in venenatis
-                  magna.</cds-content-item-copy
+                  magna.</c4d-content-item-copy
                 >
-                <cds-link-with-icon href="https://www.ibm.com/" slot="footer">
+                <c4d-link-with-icon href="https://www.ibm.com/" slot="footer">
                   Link text
                   <svg
                     slot="icon"
@@ -134,43 +134,43 @@
                   >
                     <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
                   </svg>
-                </cds-link-with-icon>
-              </cds-pictogram-item>
-            </cds-content-group-pictograms>
+                </c4d-link-with-icon>
+              </c4d-pictogram-item>
+            </c4d-content-group-pictograms>
 
-            <cds-content-group-simple>
-              <cds-content-group-heading>Curabitur malesuada varius mi eu posuere</cds-content-group-heading>
-              <cds-content-group-copy size="sm">
+            <c4d-content-group-simple>
+              <c4d-content-group-heading>Curabitur malesuada varius mi eu posuere</c4d-content-group-heading>
+              <c4d-content-group-copy size="sm">
                 Lorem ipsum *dolor* sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec
                 hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero. Lorem ipsum dolor sit amet,
                 consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit
                 sollicitudin, sodales nulla quis, consequat libero.
-              </cds-content-group-copy>
-              <cds-image
+              </c4d-content-group-copy>
+              <c4d-image
                 slot="media"
                 alt="Image alt text"
                 default-src="http://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616"
                 heading="Curabitur malesuada varius mi eu posuere"
               >
-                <cds-image-item
+                <c4d-image-item
                   media="(min-width: 672px)"
                   srcset="http://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616"
                 >
-                </cds-image-item>
-                <cds-image-item
+                </c4d-image-item>
+                <c4d-image-item
                   media="(min-width: 400px)"
                   srcset="http://fpoimg.com/400x225?text=16:9&bg_color=ee5396&text_color=161616"
                 >
-                </cds-image-item>
-                <cds-image-item
+                </c4d-image-item>
+                <c4d-image-item
                   media="(min-width: 320px)"
                   srcset="http://fpoimg.com/672x672?text=16:9&bg_color=ee5396&text_color=161616"
                 >
-                </cds-image-item>
-              </cds-image>
-              <cds-card-link-cta slot="footer" href="https://www.ibm.com/" cta-type="local">
-                <cds-card-link-heading>Lorem ipsum dolor sit amet</cds-card-link-heading>
-                <cds-card-cta-footer>
+                </c4d-image-item>
+              </c4d-image>
+              <c4d-card link slot="footer" href="https://www.ibm.com/" cta-type="local">
+                <c4d-card link-heading>Lorem ipsum dolor sit amet</c4d-card-heading>
+                <c4d-card-footer>
                   <svg
                     slot="icon"
                     focusable="false"
@@ -183,11 +183,11 @@
                   >
                     <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
                   </svg>
-                </cds-card-cta-footer>
-              </cds-card-link-cta>
-              </cds-card-cta>
-            </cds-content-group-simple>
-          </cds-content-block-mixed>
+                </c4d-card-footer>
+              </c4d-card>
+              </c4d-card>
+            </c4d-content-group-simple>
+          </c4d-content-block-mixed>
         </div>
       </div>
     </div>
diff --git a/packages/web-components/examples/codesandbox/components/content-block-mixed/package.json b/packages/web-components/examples/stackblitz/components/content-block-mixed/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/content-block-mixed/package.json
rename to packages/web-components/examples/stackblitz/components/content-block-mixed/package.json
diff --git a/packages/web-components/examples/codesandbox/components/content-block-mixed/src/index.js b/packages/web-components/examples/stackblitz/components/content-block-mixed/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/content-block-mixed/src/index.js
rename to packages/web-components/examples/stackblitz/components/content-block-mixed/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components/content-block-mixed/src/index.scss b/packages/web-components/examples/stackblitz/components/content-block-mixed/src/index.scss
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/content-block-mixed/src/index.scss
rename to packages/web-components/examples/stackblitz/components/content-block-mixed/src/index.scss
diff --git a/packages/web-components/examples/codesandbox/components/content-block-segmented/.gitignore b/packages/web-components/examples/stackblitz/components/content-block-segmented/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/content-block-segmented/.gitignore
rename to packages/web-components/examples/stackblitz/components/content-block-segmented/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components/content-block-segmented/.sassrc b/packages/web-components/examples/stackblitz/components/content-block-segmented/.sassrc
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/content-block-segmented/.sassrc
rename to packages/web-components/examples/stackblitz/components/content-block-segmented/.sassrc
diff --git a/packages/web-components/examples/codesandbox/components/content-block-segmented/cdn.html b/packages/web-components/examples/stackblitz/components/content-block-segmented/cdn.html
similarity index 73%
rename from packages/web-components/examples/codesandbox/components/content-block-segmented/cdn.html
rename to packages/web-components/examples/stackblitz/components/content-block-segmented/cdn.html
index 2bc4d73f202..ab9c767f2c5 100644
--- a/packages/web-components/examples/codesandbox/components/content-block-segmented/cdn.html
+++ b/packages/web-components/examples/stackblitz/components/content-block-segmented/cdn.html
@@ -15,7 +15,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-block-segmented:not(:defined) {
+    c4d-content-block-segmented:not(:defined) {
       display: none;
     }
   </style>
@@ -27,61 +27,61 @@
 <div class="cds--grid">
   <div class="cds--row">
     <div class="cds--col-sm-4 cds--col-lg-8 cds--offset-lg-4">
-      <cds-content-block-segmented>
-        <cds-content-block-heading>Lorem ipsum dolor sit amet</cds-content-block-heading>
-        <cds-content-block-copy>
+      <c4d-content-block-segmented>
+        <c4d-content-block-heading>Lorem ipsum dolor sit amet</c4d-content-block-heading>
+        <c4d-content-block-copy>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec
           hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
-        </cds-content-block-copy>
-        <cds-image
+        </c4d-content-block-copy>
+        <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"
           heading="Mauris iaculis eget dolor nec hendrerit."
         >
-        </cds-image>
-        <cds-content-block-segmented-item>
-          <cds-content-group-heading>Lorem ipsum dolor sit amet.</cds-content-group-heading>
-          <cds-content-item-copy
+        </c4d-image>
+        <c4d-content-block-segmented-item>
+          <c4d-content-group-heading>Lorem ipsum dolor sit amet.</c4d-content-group-heading>
+          <c4d-content-item-copy
           >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam.
             In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt
             bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien. Lorem
             ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut
             quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum
             sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim
-            sapien.</cds-content-item-copy
+            sapien.</c4d-content-item-copy
           >
-          <cds-text-cta slot="footer" cta-type="local" icon-placement="right" href="https://example.com"
-          >Lorem Ipsum dolor sit</cds-text-cta
+          <c4d-text-cta slot="footer" cta-type="local" icon-placement="right" href="https://example.com"
+          >Lorem Ipsum dolor sit</c4d-text-cta
           >
-        </cds-content-block-segmented-item>
-        <cds-content-block-segmented-item>
-          <cds-content-group-heading>Lorem ipsum dolor sit amet.</cds-content-group-heading>
-          <cds-content-item-copy
+        </c4d-content-block-segmented-item>
+        <c4d-content-block-segmented-item>
+          <c4d-content-group-heading>Lorem ipsum dolor sit amet.</c4d-content-group-heading>
+          <c4d-content-item-copy
           >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam.
             In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt
             bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien. Lorem
             ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut
             quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum
             sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim
-            sapien.</cds-content-item-copy
+            sapien.</c4d-content-item-copy
           >
-          <cds-image
+          <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"
             heading="Mauris iaculis eget dolor nec hendrerit."
           >
-          </cds-image>
-          <cds-text-cta slot="footer" cta-type="local" icon-placement="right" href="https://example.com"
-          >Lorem Ipsum dolor sit</cds-text-cta
+          </c4d-image>
+          <c4d-text-cta slot="footer" cta-type="local" icon-placement="right" href="https://example.com"
+          >Lorem Ipsum dolor sit</c4d-text-cta
           >
-        </cds-content-block-segmented-item>
-        <cds-card-cta slot="footer" cta-type="local" href="https://example.com">
+        </c4d-content-block-segmented-item>
+        <c4d-card slot="footer" cta-type="local" href="https://example.com">
           Lorem ipsum dolor
-          <cds-card-cta-footer></cds-card-cta-footer>
-        </cds-card-cta>
-      </cds-content-block-segmented>
+          <c4d-card-footer></c4d-card-footer>
+        </c4d-card>
+      </c4d-content-block-segmented>
     </div>
   </div>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/content-block-segmented/index.html b/packages/web-components/examples/stackblitz/components/content-block-segmented/index.html
similarity index 71%
rename from packages/web-components/examples/codesandbox/components/content-block-segmented/index.html
rename to packages/web-components/examples/stackblitz/components/content-block-segmented/index.html
index 10f3ca91800..4b1c02aaf67 100644
--- a/packages/web-components/examples/codesandbox/components/content-block-segmented/index.html
+++ b/packages/web-components/examples/stackblitz/components/content-block-segmented/index.html
@@ -24,61 +24,61 @@
     <div class="cds--grid">
       <div class="cds--row">
         <div class="cds--col-sm-4 cds--col-lg-8 cds--offset-lg-4">
-          <cds-content-block-segmented>
-            <cds-content-block-heading>Lorem ipsum dolor sit amet</cds-content-block-heading>
-            <cds-content-block-copy>
+          <c4d-content-block-segmented>
+            <c4d-content-block-heading>Lorem ipsum dolor sit amet</c4d-content-block-heading>
+            <c4d-content-block-copy>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec
               hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
-            </cds-content-block-copy>
-            <cds-image
+            </c4d-content-block-copy>
+            <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"
               heading="Mauris iaculis eget dolor nec hendrerit."
             >
-            </cds-image>
-            <cds-content-block-segmented-item>
-              <cds-content-group-heading>Lorem ipsum dolor sit amet.</cds-content-group-heading>
-              <cds-content-item-copy
+            </c4d-image>
+            <c4d-content-block-segmented-item>
+              <c4d-content-group-heading>Lorem ipsum dolor sit amet.</c4d-content-group-heading>
+              <c4d-content-item-copy
                 >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam.
                 In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt
                 bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien. Lorem
                 ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut
                 quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum
                 sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim
-                sapien.</cds-content-item-copy
+                sapien.</c4d-content-item-copy
               >
-              <cds-text-cta slot="footer" cta-type="local" icon-placement="right" href="https://example.com"
-                >Lorem Ipsum dolor sit</cds-text-cta
+              <c4d-text-cta slot="footer" cta-type="local" icon-placement="right" href="https://example.com"
+                >Lorem Ipsum dolor sit</c4d-text-cta
               >
-            </cds-content-block-segmented-item>
-            <cds-content-block-segmented-item>
-              <cds-content-group-heading>Lorem ipsum dolor sit amet.</cds-content-group-heading>
-              <cds-content-item-copy
+            </c4d-content-block-segmented-item>
+            <c4d-content-block-segmented-item>
+              <c4d-content-group-heading>Lorem ipsum dolor sit amet.</c4d-content-group-heading>
+              <c4d-content-item-copy
                 >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam.
                 In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt
                 bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien. Lorem
                 ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut
                 quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum
                 sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim
-                sapien.</cds-content-item-copy
+                sapien.</c4d-content-item-copy
               >
-              <cds-image
+              <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"
                 heading="Mauris iaculis eget dolor nec hendrerit."
               >
-              </cds-image>
-              <cds-text-cta slot="footer" cta-type="local" icon-placement="right" href="https://example.com"
-                >Lorem Ipsum dolor sit</cds-text-cta
+              </c4d-image>
+              <c4d-text-cta slot="footer" cta-type="local" icon-placement="right" href="https://example.com"
+                >Lorem Ipsum dolor sit</c4d-text-cta
               >
-            </cds-content-block-segmented-item>
-            <cds-card-cta slot="footer" cta-type="local" href="https://example.com">
+            </c4d-content-block-segmented-item>
+            <c4d-card slot="footer" cta-type="local" href="https://example.com">
               Lorem ipsum dolor
-              <cds-card-cta-footer></cds-card-cta-footer>
-            </cds-card-cta>
-          </cds-content-block-segmented>
+              <c4d-card-footer></c4d-card-footer>
+            </c4d-card>
+          </c4d-content-block-segmented>
         </div>
       </div>
     </div>
diff --git a/packages/web-components/examples/codesandbox/components/content-block-segmented/package.json b/packages/web-components/examples/stackblitz/components/content-block-segmented/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/content-block-segmented/package.json
rename to packages/web-components/examples/stackblitz/components/content-block-segmented/package.json
diff --git a/packages/web-components/examples/codesandbox/components/content-block-segmented/src/index.js b/packages/web-components/examples/stackblitz/components/content-block-segmented/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/content-block-segmented/src/index.js
rename to packages/web-components/examples/stackblitz/components/content-block-segmented/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components/content-block-segmented/src/index.scss b/packages/web-components/examples/stackblitz/components/content-block-segmented/src/index.scss
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/content-block-segmented/src/index.scss
rename to packages/web-components/examples/stackblitz/components/content-block-segmented/src/index.scss
diff --git a/packages/web-components/examples/codesandbox/components/content-block-simple/.gitignore b/packages/web-components/examples/stackblitz/components/content-block-simple/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/content-block-simple/.gitignore
rename to packages/web-components/examples/stackblitz/components/content-block-simple/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components/content-block-simple/.sassrc b/packages/web-components/examples/stackblitz/components/content-block-simple/.sassrc
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/content-block-simple/.sassrc
rename to packages/web-components/examples/stackblitz/components/content-block-simple/.sassrc
diff --git a/packages/web-components/examples/codesandbox/components/content-block-simple/cdn.html b/packages/web-components/examples/stackblitz/components/content-block-simple/cdn.html
similarity index 72%
rename from packages/web-components/examples/codesandbox/components/content-block-simple/cdn.html
rename to packages/web-components/examples/stackblitz/components/content-block-simple/cdn.html
index 50a41c80198..9c90dc553a8 100644
--- a/packages/web-components/examples/codesandbox/components/content-block-simple/cdn.html
+++ b/packages/web-components/examples/stackblitz/components/content-block-simple/cdn.html
@@ -15,7 +15,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-block-simple:not(:defined) {
+    c4d-content-block-simple:not(:defined) {
       display: none;
     }
   </style>
@@ -25,28 +25,28 @@
 <div class="cds--grid">
   <div class="cds--row">
     <div class="cds--col-sm-4 cds--col-lg-8 cds--offset-lg-4">
-      <cds-content-block-simple>
-        <cds-content-block-heading>Curabitur malesuada varius mi eu posuere</cds-content-block-heading>
-        <cds-content-block-copy>
+      <c4d-content-block-simple>
+        <c4d-content-block-heading>Curabitur malesuada varius mi eu posuere</c4d-content-block-heading>
+        <c4d-content-block-copy>
           Lorem ipsum *dolor* sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec
           hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, *consequat* libero. Here are some common categories:
-        </cds-content-block-copy>
-        <cds-content-block-copy>
+        </c4d-content-block-copy>
+        <c4d-content-block-copy>
           Lorem ipsum dolor sit amet, [consectetur adipiscing](https://www.ibm.com) elit. Aenean et ultricies est. Mauris
           iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
-        </cds-content-block-copy>
-        <cds-content-block-copy>
+        </c4d-content-block-copy>
+        <c4d-content-block-copy>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec
           hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
-        </cds-content-block-copy>
-        <cds-content-block-copy>
+        </c4d-content-block-copy>
+        <c4d-content-block-copy>
           - [list item](https://www.ibm.com) - list item 1a 1. list item 2 1. list item 2a
-        </cds-content-block-copy>
-        <cds-card-cta slot="footer" cta-type="local" href="https://example.com">
+        </c4d-content-block-copy>
+        <c4d-card slot="footer" cta-type="local" href="https://example.com">
           Lorem ipsum dolor
-          <cds-card-cta-footer></cds-card-cta-footer>
-        </cds-card-cta>
-      </cds-content-block-simple>
+          <c4d-card-footer></c4d-card-footer>
+        </c4d-card>
+      </c4d-content-block-simple>
     </div>
   </div>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/content-block-simple/index.html b/packages/web-components/examples/stackblitz/components/content-block-simple/index.html
similarity index 71%
rename from packages/web-components/examples/codesandbox/components/content-block-simple/index.html
rename to packages/web-components/examples/stackblitz/components/content-block-simple/index.html
index ae0313e9d1c..eda9ef72edd 100644
--- a/packages/web-components/examples/codesandbox/components/content-block-simple/index.html
+++ b/packages/web-components/examples/stackblitz/components/content-block-simple/index.html
@@ -24,28 +24,28 @@
     <div class="cds--grid">
       <div class="cds--row">
         <div class="cds--col-sm-4 cds--col-lg-8 cds--offset-lg-4">
-          <cds-content-block-simple>
-            <cds-content-block-heading>Curabitur malesuada varius mi eu posuere</cds-content-block-heading>
-            <cds-content-block-copy>
+          <c4d-content-block-simple>
+            <c4d-content-block-heading>Curabitur malesuada varius mi eu posuere</c4d-content-block-heading>
+            <c4d-content-block-copy>
               Lorem ipsum *dolor* sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec
               hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, *consequat* libero. Here are some common categories:
-            </cds-content-block-copy>
-            <cds-content-block-copy>
+            </c4d-content-block-copy>
+            <c4d-content-block-copy>
               Lorem ipsum dolor sit amet, [consectetur adipiscing](https://www.ibm.com) elit. Aenean et ultricies est. Mauris
               iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
-            </cds-content-block-copy>
-            <cds-content-block-copy>
+            </c4d-content-block-copy>
+            <c4d-content-block-copy>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec
               hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
-            </cds-content-block-copy>
-            <cds-content-block-copy>
+            </c4d-content-block-copy>
+            <c4d-content-block-copy>
               - [list item](https://www.ibm.com) - list item 1a 1. list item 2 1. list item 2a
-            </cds-content-block-copy>
-            <cds-card-cta slot="footer" cta-type="local" href="https://example.com">
+            </c4d-content-block-copy>
+            <c4d-card slot="footer" cta-type="local" href="https://example.com">
               Lorem ipsum dolor
-              <cds-card-cta-footer></cds-card-cta-footer>
-            </cds-card-cta>
-          </cds-content-block-simple>
+              <c4d-card-footer></c4d-card-footer>
+            </c4d-card>
+          </c4d-content-block-simple>
         </div>
       </div>
     </div>
diff --git a/packages/web-components/examples/codesandbox/components/content-block-simple/package.json b/packages/web-components/examples/stackblitz/components/content-block-simple/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/content-block-simple/package.json
rename to packages/web-components/examples/stackblitz/components/content-block-simple/package.json
diff --git a/packages/web-components/examples/codesandbox/components/content-block-simple/src/index.js b/packages/web-components/examples/stackblitz/components/content-block-simple/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/content-block-simple/src/index.js
rename to packages/web-components/examples/stackblitz/components/content-block-simple/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components/content-block-simple/src/index.scss b/packages/web-components/examples/stackblitz/components/content-block-simple/src/index.scss
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/content-block-simple/src/index.scss
rename to packages/web-components/examples/stackblitz/components/content-block-simple/src/index.scss
diff --git a/packages/web-components/examples/codesandbox/components/content-block/.gitignore b/packages/web-components/examples/stackblitz/components/content-block/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/content-block/.gitignore
rename to packages/web-components/examples/stackblitz/components/content-block/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components/content-block/.sassrc b/packages/web-components/examples/stackblitz/components/content-block/.sassrc
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/content-block/.sassrc
rename to packages/web-components/examples/stackblitz/components/content-block/.sassrc
diff --git a/packages/web-components/examples/codesandbox/components/content-block/cdn.html b/packages/web-components/examples/stackblitz/components/content-block/cdn.html
similarity index 68%
rename from packages/web-components/examples/codesandbox/components/content-block/cdn.html
rename to packages/web-components/examples/stackblitz/components/content-block/cdn.html
index 23b340572b6..23db296d75f 100644
--- a/packages/web-components/examples/codesandbox/components/content-block/cdn.html
+++ b/packages/web-components/examples/stackblitz/components/content-block/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-block:not(:defined) {
+    c4d-content-block:not(:defined) {
       display: none;
     }
   </style>
@@ -24,16 +24,16 @@
 <div class="cds--grid">
   <div class="cds--row">
     <div class="cds--col-sm-4 cds--col-lg-12 cds--offset-lg-4">
-      <cds-content-block>
-        <cds-content-block-heading>Curabitur malesuada varius mi eu posuere</cds-content-block-heading>
-        <cds-content-block-copy>
+      <c4d-content-block>
+        <c4d-content-block-heading>Curabitur malesuada varius mi eu posuere</c4d-content-block-heading>
+        <c4d-content-block-copy>
           Lorem ipsum *dolor* sit amet, consectetur adipiscing elit. Vestibulum non porttitor libero, in venenatis magna.
-        </cds-content-block-copy>
-        <cds-card-link-cta slot="footer" cta-type="local" href="https://www.example.com">
-          <cds-card-link-heading>cta copy</cds-card-link-heading>
-          <cds-card-cta-footer cta-type="local"></cds-card-cta-footer>
-        </cds-card-link-cta>
-      </cds-content-block>
+        </c4d-content-block-copy>
+        <c4d-card link slot="footer" cta-type="local" href="https://www.example.com">
+          <c4d-card link-heading>cta copy</c4d-card-heading>
+          <c4d-card-footer cta-type="local"></c4d-card-footer>
+        </c4d-card>
+      </c4d-content-block>
     </div>
   </div>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/content-block/index.html b/packages/web-components/examples/stackblitz/components/content-block/index.html
similarity index 63%
rename from packages/web-components/examples/codesandbox/components/content-block/index.html
rename to packages/web-components/examples/stackblitz/components/content-block/index.html
index 2636b917feb..d3a1ffe5a8b 100644
--- a/packages/web-components/examples/codesandbox/components/content-block/index.html
+++ b/packages/web-components/examples/stackblitz/components/content-block/index.html
@@ -22,16 +22,16 @@
     <div class="cds--grid">
       <div class="cds--row">
         <div class="cds--col-sm-4 cds--col-lg-12 cds--offset-lg-4">
-          <cds-content-block>
-            <cds-content-block-heading>Curabitur malesuada varius mi eu posuere</cds-content-block-heading>
-            <cds-content-block-copy>
+          <c4d-content-block>
+            <c4d-content-block-heading>Curabitur malesuada varius mi eu posuere</c4d-content-block-heading>
+            <c4d-content-block-copy>
               Lorem ipsum *dolor* sit amet, consectetur adipiscing elit. Vestibulum non porttitor libero, in venenatis magna.
-            </cds-content-block-copy>
-            <cds-card-link-cta slot="footer" cta-type="local" href="https://www.example.com">
-              <cds-card-link-heading>cta copy</cds-card-link-heading>
-              <cds-card-cta-footer cta-type="local"></cds-card-cta-footer>
-            </cds-card-link-cta>
-          </cds-content-block>
+            </c4d-content-block-copy>
+            <c4d-card link slot="footer" cta-type="local" href="https://www.example.com">
+              <c4d-card link-heading>cta copy</c4d-card-heading>
+              <c4d-card-footer cta-type="local"></c4d-card-footer>
+            </c4d-card>
+          </c4d-content-block>
         </div>
       </div>
     </div>
diff --git a/packages/web-components/examples/codesandbox/components/content-block/package.json b/packages/web-components/examples/stackblitz/components/content-block/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/content-block/package.json
rename to packages/web-components/examples/stackblitz/components/content-block/package.json
diff --git a/packages/web-components/examples/codesandbox/components/content-block/src/index.js b/packages/web-components/examples/stackblitz/components/content-block/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/content-block/src/index.js
rename to packages/web-components/examples/stackblitz/components/content-block/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components/content-block/src/index.scss b/packages/web-components/examples/stackblitz/components/content-block/src/index.scss
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/content-block/src/index.scss
rename to packages/web-components/examples/stackblitz/components/content-block/src/index.scss
diff --git a/packages/web-components/examples/codesandbox/components/content-group-cards/.gitignore b/packages/web-components/examples/stackblitz/components/content-group-cards/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/content-group-cards/.gitignore
rename to packages/web-components/examples/stackblitz/components/content-group-cards/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components/content-group-cards/.sassrc b/packages/web-components/examples/stackblitz/components/content-group-cards/.sassrc
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/content-group-cards/.sassrc
rename to packages/web-components/examples/stackblitz/components/content-group-cards/.sassrc
diff --git a/packages/web-components/examples/codesandbox/components/content-group-cards/cdn.html b/packages/web-components/examples/stackblitz/components/content-group-cards/cdn.html
similarity index 73%
rename from packages/web-components/examples/codesandbox/components/content-group-cards/cdn.html
rename to packages/web-components/examples/stackblitz/components/content-group-cards/cdn.html
index ee131cbaa87..7c5f1ed7b8a 100644
--- a/packages/web-components/examples/codesandbox/components/content-group-cards/cdn.html
+++ b/packages/web-components/examples/stackblitz/components/content-group-cards/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-group-cards:not(:defined) {
+    c4d-content-group-cards:not(:defined) {
       display: none;
     }
   </style>
@@ -23,18 +23,18 @@
 <div class="cds--grid">
   <div class="cds--row">
     <div class="cds--col-lg-8 cds--col-sm-4 cds--offset-lg-4">
-      <cds-content-group-cards>
-        <cds-content-group-heading>Curabitur malesuada varius mi eu posuere</cds-content-group-heading>
-        <cds-content-group-copy>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</cds-content-group-copy>
-        <cds-content-group-cards-item href="https://www.example.com">
-          <cds-card-heading
-          >Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt</cds-card-heading
+      <c4d-content-group-cards>
+        <c4d-content-group-heading>Curabitur malesuada varius mi eu posuere</c4d-content-group-heading>
+        <c4d-content-group-copy>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</c4d-content-group-copy>
+        <c4d-content-group-cards-item href="https://www.example.com">
+          <c4d-card-heading
+          >Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt</c4d-card-heading
           >
           <p>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
             magna aliqua.
           </p>
-          <cds-card-footer icon-placement="left">
+          <c4d-card-footer icon-placement="left">
             <svg
               slot="icon"
               focusable="false"
@@ -48,17 +48,17 @@
             >
               <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
             </svg>
-          </cds-card-footer>
-        </cds-content-group-cards-item>
-        <cds-content-group-cards-item href="https://www.example.com">
-          <cds-card-heading
-          >Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt</cds-card-heading
+          </c4d-card-footer>
+        </c4d-content-group-cards-item>
+        <c4d-content-group-cards-item href="https://www.example.com">
+          <c4d-card-heading
+          >Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt</c4d-card-heading
           >
           <p>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
             magna aliqua.
           </p>
-          <cds-card-footer icon-placement="left">
+          <c4d-card-footer icon-placement="left">
             <svg
               slot="icon"
               focusable="false"
@@ -72,17 +72,17 @@
             >
               <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
             </svg>
-          </cds-card-footer>
-        </cds-content-group-cards-item>
-        <cds-content-group-cards-item href="https://www.example.com">
-          <cds-card-heading
-          >Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt</cds-card-heading
+          </c4d-card-footer>
+        </c4d-content-group-cards-item>
+        <c4d-content-group-cards-item href="https://www.example.com">
+          <c4d-card-heading
+          >Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt</c4d-card-heading
           >
           <p>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
             magna aliqua.
           </p>
-          <cds-card-footer icon-placement="left">
+          <c4d-card-footer icon-placement="left">
             <svg
               slot="icon"
               focusable="false"
@@ -96,17 +96,17 @@
             >
               <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
             </svg>
-          </cds-card-footer>
-        </cds-content-group-cards-item>
-        <cds-content-group-cards-item href="https://www.example.com">
-          <cds-card-heading
-          >Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt</cds-card-heading
+          </c4d-card-footer>
+        </c4d-content-group-cards-item>
+        <c4d-content-group-cards-item href="https://www.example.com">
+          <c4d-card-heading
+          >Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt</c4d-card-heading
           >
           <p>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
             magna aliqua.
           </p>
-          <cds-card-footer icon-placement="left">
+          <c4d-card-footer icon-placement="left">
             <svg
               slot="icon"
               focusable="false"
@@ -120,9 +120,9 @@
             >
               <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
             </svg>
-          </cds-card-footer>
-        </cds-content-group-cards-item>
-      </cds-content-group-cards>
+          </c4d-card-footer>
+        </c4d-content-group-cards-item>
+      </c4d-content-group-cards>
     </div>
   </div>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/content-group-cards/index.html b/packages/web-components/examples/stackblitz/components/content-group-cards/index.html
similarity index 73%
rename from packages/web-components/examples/codesandbox/components/content-group-cards/index.html
rename to packages/web-components/examples/stackblitz/components/content-group-cards/index.html
index 156e682b647..880c22e6c58 100644
--- a/packages/web-components/examples/codesandbox/components/content-group-cards/index.html
+++ b/packages/web-components/examples/stackblitz/components/content-group-cards/index.html
@@ -22,18 +22,18 @@
     <div class="cds--grid">
       <div class="cds--row">
         <div class="cds--col-lg-8 cds--col-sm-4 cds--offset-lg-4">
-          <cds-content-group-cards>
-            <cds-content-group-heading>Curabitur malesuada varius mi eu posuere</cds-content-group-heading>
-            <cds-content-group-copy>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</cds-content-group-copy>
-            <cds-content-group-cards-item href="https://www.example.com">
-              <cds-card-heading
-                >Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt</cds-card-heading
+          <c4d-content-group-cards>
+            <c4d-content-group-heading>Curabitur malesuada varius mi eu posuere</c4d-content-group-heading>
+            <c4d-content-group-copy>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</c4d-content-group-copy>
+            <c4d-content-group-cards-item href="https://www.example.com">
+              <c4d-card-heading
+                >Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt</c4d-card-heading
               >
               <p>
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
                 magna aliqua.
               </p>
-              <cds-card-footer icon-placement="left">
+              <c4d-card-footer icon-placement="left">
                 <svg
                   slot="icon"
                   focusable="false"
@@ -47,17 +47,17 @@
                 >
                   <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
                 </svg>
-              </cds-card-footer>
-            </cds-content-group-cards-item>
-            <cds-content-group-cards-item href="https://www.example.com">
-              <cds-card-heading
-                >Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt</cds-card-heading
+              </c4d-card-footer>
+            </c4d-content-group-cards-item>
+            <c4d-content-group-cards-item href="https://www.example.com">
+              <c4d-card-heading
+                >Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt</c4d-card-heading
               >
               <p>
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
                 magna aliqua.
               </p>
-              <cds-card-footer icon-placement="left">
+              <c4d-card-footer icon-placement="left">
                 <svg
                   slot="icon"
                   focusable="false"
@@ -71,17 +71,17 @@
                 >
                   <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
                 </svg>
-              </cds-card-footer>
-            </cds-content-group-cards-item>
-            <cds-content-group-cards-item href="https://www.example.com">
-              <cds-card-heading
-                >Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt</cds-card-heading
+              </c4d-card-footer>
+            </c4d-content-group-cards-item>
+            <c4d-content-group-cards-item href="https://www.example.com">
+              <c4d-card-heading
+                >Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt</c4d-card-heading
               >
               <p>
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
                 magna aliqua.
               </p>
-              <cds-card-footer icon-placement="left">
+              <c4d-card-footer icon-placement="left">
                 <svg
                   slot="icon"
                   focusable="false"
@@ -95,17 +95,17 @@
                 >
                   <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
                 </svg>
-              </cds-card-footer>
-            </cds-content-group-cards-item>
-            <cds-content-group-cards-item href="https://www.example.com">
-              <cds-card-heading
-                >Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt</cds-card-heading
+              </c4d-card-footer>
+            </c4d-content-group-cards-item>
+            <c4d-content-group-cards-item href="https://www.example.com">
+              <c4d-card-heading
+                >Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt</c4d-card-heading
               >
               <p>
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
                 magna aliqua.
               </p>
-              <cds-card-footer icon-placement="left">
+              <c4d-card-footer icon-placement="left">
                 <svg
                   slot="icon"
                   focusable="false"
@@ -119,9 +119,9 @@
                 >
                   <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
                 </svg>
-              </cds-card-footer>
-            </cds-content-group-cards-item>
-          </cds-content-group-cards>
+              </c4d-card-footer>
+            </c4d-content-group-cards-item>
+          </c4d-content-group-cards>
         </div>
       </div>
     </div>
diff --git a/packages/web-components/examples/codesandbox/components/content-group-cards/package.json b/packages/web-components/examples/stackblitz/components/content-group-cards/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/content-group-cards/package.json
rename to packages/web-components/examples/stackblitz/components/content-group-cards/package.json
diff --git a/packages/web-components/examples/codesandbox/components/content-group-cards/src/index.js b/packages/web-components/examples/stackblitz/components/content-group-cards/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/content-group-cards/src/index.js
rename to packages/web-components/examples/stackblitz/components/content-group-cards/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components/content-group-cards/src/index.scss b/packages/web-components/examples/stackblitz/components/content-group-cards/src/index.scss
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/content-group-cards/src/index.scss
rename to packages/web-components/examples/stackblitz/components/content-group-cards/src/index.scss
diff --git a/packages/web-components/examples/codesandbox/components/content-group-pictograms/.gitignore b/packages/web-components/examples/stackblitz/components/content-group-pictograms/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/content-group-pictograms/.gitignore
rename to packages/web-components/examples/stackblitz/components/content-group-pictograms/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components/content-group-pictograms/.sassrc b/packages/web-components/examples/stackblitz/components/content-group-pictograms/.sassrc
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/content-group-pictograms/.sassrc
rename to packages/web-components/examples/stackblitz/components/content-group-pictograms/.sassrc
diff --git a/packages/web-components/examples/codesandbox/components/content-group-pictograms/cdn.html b/packages/web-components/examples/stackblitz/components/content-group-pictograms/cdn.html
similarity index 82%
rename from packages/web-components/examples/codesandbox/components/content-group-pictograms/cdn.html
rename to packages/web-components/examples/stackblitz/components/content-group-pictograms/cdn.html
index 033dde306f3..e044f84aaf9 100644
--- a/packages/web-components/examples/codesandbox/components/content-group-pictograms/cdn.html
+++ b/packages/web-components/examples/stackblitz/components/content-group-pictograms/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-group-pictograms:not(:defined) {
+    c4d-content-group-pictograms:not(:defined) {
       display: none;
     }
   </style>
@@ -23,14 +23,14 @@
 <div class="cds--grid">
   <div class="cds--row">
     <div class="cds--col-sm-4 cds--col-lg-8 cds--offset-lg-4">
-      <cds-content-group-pictograms>
-        <cds-content-group-heading>Lorem ipsum dolor sit amet</cds-content-group-heading>
-        <cds-content-group-copy>
+      <c4d-content-group-pictograms>
+        <c4d-content-group-heading>Lorem ipsum dolor sit amet</c4d-content-group-heading>
+        <c4d-content-group-copy>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nonporttitor libero, in venenatis magna. Lorem
           ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non porttitor libero, in venenatis magna. Lorem ipsum
           dolor sit amet, consectetur adipiscing elit. Vestibulum non porttitor libero, in venenatis magna.
-        </cds-content-group-copy>
-        <cds-pictogram-item>
+        </c4d-content-group-copy>
+        <c4d-pictogram-item>
           <svg
             slot="pictogram"
             focusable="false"
@@ -54,13 +54,13 @@
                   0,2,0.9,2,2v17C39,31.1,38.1,32,37,32z M17,37h14 M24,32v5 M9,27h30"
             ></path>
           </svg>
-          <cds-content-item-heading>
+          <c4d-content-item-heading>
             Aliquam condimentum interdum
-          </cds-content-item-heading>
-          <cds-content-item-copy>
+          </c4d-content-item-heading>
+          <c4d-content-item-copy>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non porttitor libero, in venenatis magna.
-          </cds-content-item-copy>
-          <cds-link-with-icon href="https://www.example.com" slot="footer">
+          </c4d-content-item-copy>
+          <c4d-link-with-icon href="https://www.example.com" slot="footer">
             Aliquam condimentum interdum
             <svg
               slot="icon"
@@ -75,9 +75,9 @@
             >
               <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
             </svg>
-          </cds-link-with-icon>
-        </cds-pictogram-item>
-      </cds-content-group-pictograms>
+          </c4d-link-with-icon>
+        </c4d-pictogram-item>
+      </c4d-content-group-pictograms>
     </div>
   </div>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/content-group-pictograms/index.html b/packages/web-components/examples/stackblitz/components/content-group-pictograms/index.html
similarity index 83%
rename from packages/web-components/examples/codesandbox/components/content-group-pictograms/index.html
rename to packages/web-components/examples/stackblitz/components/content-group-pictograms/index.html
index 8330f4f3257..9d7958f7a7c 100644
--- a/packages/web-components/examples/codesandbox/components/content-group-pictograms/index.html
+++ b/packages/web-components/examples/stackblitz/components/content-group-pictograms/index.html
@@ -22,14 +22,14 @@
     <div class="cds--grid">
       <div class="cds--row">
         <div class="cds--col-sm-4 cds--col-lg-8 cds--offset-lg-4">
-          <cds-content-group-pictograms>
-            <cds-content-group-heading>Lorem ipsum dolor sit amet</cds-content-group-heading>
-            <cds-content-group-copy>
+          <c4d-content-group-pictograms>
+            <c4d-content-group-heading>Lorem ipsum dolor sit amet</c4d-content-group-heading>
+            <c4d-content-group-copy>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nonporttitor libero, in venenatis magna. Lorem
               ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non porttitor libero, in venenatis magna. Lorem ipsum
               dolor sit amet, consectetur adipiscing elit. Vestibulum non porttitor libero, in venenatis magna.
-            </cds-content-group-copy>
-            <cds-pictogram-item>
+            </c4d-content-group-copy>
+            <c4d-pictogram-item>
               <svg
                 slot="pictogram"
                 focusable="false"
@@ -53,13 +53,13 @@
                   0,2,0.9,2,2v17C39,31.1,38.1,32,37,32z M17,37h14 M24,32v5 M9,27h30"
                 ></path>
               </svg>
-              <cds-content-item-heading>
+              <c4d-content-item-heading>
                 Aliquam condimentum interdum
-              </cds-content-item-heading>
-              <cds-content-item-copy>
+              </c4d-content-item-heading>
+              <c4d-content-item-copy>
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non porttitor libero, in venenatis magna.
-              </cds-content-item-copy>
-              <cds-link-with-icon href="https://www.example.com" slot="footer">
+              </c4d-content-item-copy>
+              <c4d-link-with-icon href="https://www.example.com" slot="footer">
                 Aliquam condimentum interdum
                 <svg
                   slot="icon"
@@ -74,9 +74,9 @@
                 >
                   <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
                 </svg>
-              </cds-link-with-icon>
-            </cds-pictogram-item>
-          </cds-content-group-pictograms>
+              </c4d-link-with-icon>
+            </c4d-pictogram-item>
+          </c4d-content-group-pictograms>
         </div>
       </div>
     </div>
diff --git a/packages/web-components/examples/codesandbox/components/content-group-pictograms/package.json b/packages/web-components/examples/stackblitz/components/content-group-pictograms/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/content-group-pictograms/package.json
rename to packages/web-components/examples/stackblitz/components/content-group-pictograms/package.json
diff --git a/packages/web-components/examples/codesandbox/components/content-group-pictograms/src/index.js b/packages/web-components/examples/stackblitz/components/content-group-pictograms/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/content-group-pictograms/src/index.js
rename to packages/web-components/examples/stackblitz/components/content-group-pictograms/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components/content-group-pictograms/src/index.scss b/packages/web-components/examples/stackblitz/components/content-group-pictograms/src/index.scss
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/content-group-pictograms/src/index.scss
rename to packages/web-components/examples/stackblitz/components/content-group-pictograms/src/index.scss
diff --git a/packages/web-components/examples/codesandbox/components/content-group-simple/.gitignore b/packages/web-components/examples/stackblitz/components/content-group-simple/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/content-group-simple/.gitignore
rename to packages/web-components/examples/stackblitz/components/content-group-simple/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components/content-group-simple/.sassrc b/packages/web-components/examples/stackblitz/components/content-group-simple/.sassrc
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/content-group-simple/.sassrc
rename to packages/web-components/examples/stackblitz/components/content-group-simple/.sassrc
diff --git a/packages/web-components/examples/codesandbox/components/content-group-simple/cdn.html b/packages/web-components/examples/stackblitz/components/content-group-simple/cdn.html
similarity index 72%
rename from packages/web-components/examples/codesandbox/components/content-group-simple/cdn.html
rename to packages/web-components/examples/stackblitz/components/content-group-simple/cdn.html
index 25d328185a7..48b785edf8e 100644
--- a/packages/web-components/examples/codesandbox/components/content-group-simple/cdn.html
+++ b/packages/web-components/examples/stackblitz/components/content-group-simple/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-group-simple:not(:defined) {
+    c4d-content-group-simple:not(:defined) {
       display: none;
     }
   </style>
@@ -23,41 +23,41 @@
 <div class="cds--grid">
   <div class="cds--row">
     <div class="cds--col-sm-4 cds--col-lg-12 cds--offset-lg-4">
-      <cds-content-group-simple>
-        <cds-content-group-heading>Curabitur malesuada varius mi eu posuere</cds-content-group-heading>
-        <cds-content-group-copy>
+      <c4d-content-group-simple>
+        <c4d-content-group-heading>Curabitur malesuada varius mi eu posuere</c4d-content-group-heading>
+        <c4d-content-group-copy>
           Lorem ipsum *dolor* sit amet, consectetur adipiscing elit. Vestibulum non porttitor libero, in venenatis magna.
-        </cds-content-group-copy>
-        <cds-content-item>
-          <cds-content-item-heading>Lorem ipsum dolor sit amet.</cds-content-item-heading>
-          <cds-content-item-copy
+        </c4d-content-group-copy>
+        <c4d-content-item>
+          <c4d-content-item-heading>Lorem ipsum dolor sit amet.</c4d-content-item-heading>
+          <c4d-content-item-copy
           >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam.
             In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt
             bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim
-            sapien.</cds-content-item-copy
+            sapien.</c4d-content-item-copy
           >
-        </cds-content-item>
-        <cds-content-item>
-          <cds-content-item-heading>Lorem ipsum dolor sit amet.</cds-content-item-heading>
-          <cds-content-item-copy
+        </c4d-content-item>
+        <c4d-content-item>
+          <c4d-content-item-heading>Lorem ipsum dolor sit amet.</c4d-content-item-heading>
+          <c4d-content-item-copy
           >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam.
             In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt
             bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim
-            sapien.</cds-content-item-copy
+            sapien.</c4d-content-item-copy
           >
-          <cds-content-item-copy
+          <c4d-content-item-copy
           >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam.
             In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt
             bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim
-            sapien.</cds-content-item-copy
+            sapien.</c4d-content-item-copy
           >
-          <cds-content-item-copy>
+          <c4d-content-item-copy>
             - [list item](https://www.ibm.com) - list item 1a 1. list item 2 1. list item 2a
-          </cds-content-item-copy>
-        </cds-content-item>
-        <cds-card-cta slot="footer" href="https://www.ibm.com/" cta-type="local">
+          </c4d-content-item-copy>
+        </c4d-content-item>
+        <c4d-card slot="footer" href="https://www.ibm.com/" cta-type="local">
           Lorem ipsum dolor sit amet
-          <cds-card-cta-footer>
+          <c4d-card-footer>
             <svg
               slot="icon"
               focusable="false"
@@ -71,9 +71,9 @@
             >
               <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
             </svg>
-          </cds-card-cta-footer>
-        </cds-card-cta>
-      </cds-content-group-simple>
+          </c4d-card-footer>
+        </c4d-card>
+      </c4d-content-group-simple>
     </div>
   </div>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/content-group-simple/index.html b/packages/web-components/examples/stackblitz/components/content-group-simple/index.html
similarity index 71%
rename from packages/web-components/examples/codesandbox/components/content-group-simple/index.html
rename to packages/web-components/examples/stackblitz/components/content-group-simple/index.html
index e013bc7634a..ae57ad9ae16 100644
--- a/packages/web-components/examples/codesandbox/components/content-group-simple/index.html
+++ b/packages/web-components/examples/stackblitz/components/content-group-simple/index.html
@@ -22,41 +22,41 @@
     <div class="cds--grid">
       <div class="cds--row">
         <div class="cds--col-sm-4 cds--col-lg-12 cds--offset-lg-4">
-          <cds-content-group-simple>
-            <cds-content-group-heading>Curabitur malesuada varius mi eu posuere</cds-content-group-heading>
-            <cds-content-group-copy>
+          <c4d-content-group-simple>
+            <c4d-content-group-heading>Curabitur malesuada varius mi eu posuere</c4d-content-group-heading>
+            <c4d-content-group-copy>
               Lorem ipsum *dolor* sit amet, consectetur adipiscing elit. Vestibulum non porttitor libero, in venenatis magna.
-            </cds-content-group-copy>
-            <cds-content-item>
-              <cds-content-item-heading>Lorem ipsum dolor sit amet.</cds-content-item-heading>
-              <cds-content-item-copy
+            </c4d-content-group-copy>
+            <c4d-content-item>
+              <c4d-content-item-heading>Lorem ipsum dolor sit amet.</c4d-content-item-heading>
+              <c4d-content-item-copy
                 >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam.
                 In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt
                 bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim
-                sapien.</cds-content-item-copy
+                sapien.</c4d-content-item-copy
               >
-            </cds-content-item>
-            <cds-content-item>
-              <cds-content-item-heading>Lorem ipsum dolor sit amet.</cds-content-item-heading>
-              <cds-content-item-copy
+            </c4d-content-item>
+            <c4d-content-item>
+              <c4d-content-item-heading>Lorem ipsum dolor sit amet.</c4d-content-item-heading>
+              <c4d-content-item-copy
                 >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam.
                 In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt
                 bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim
-                sapien.</cds-content-item-copy
+                sapien.</c4d-content-item-copy
               >
-              <cds-content-item-copy
+              <c4d-content-item-copy
                 >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam.
                 In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt
                 bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim
-                sapien.</cds-content-item-copy
+                sapien.</c4d-content-item-copy
               >
-              <cds-content-item-copy>
+              <c4d-content-item-copy>
                 - [list item](https://www.ibm.com) - list item 1a 1. list item 2 1. list item 2a
-              </cds-content-item-copy>
-            </cds-content-item>
-            <cds-card-cta slot="footer" href="https://www.ibm.com/" cta-type="local">
+              </c4d-content-item-copy>
+            </c4d-content-item>
+            <c4d-card slot="footer" href="https://www.ibm.com/" cta-type="local">
               Lorem ipsum dolor sit amet
-              <cds-card-cta-footer>
+              <c4d-card-footer>
                 <svg
                   slot="icon"
                   focusable="false"
@@ -70,9 +70,9 @@
                 >
                   <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
                 </svg>
-              </cds-card-cta-footer>
-            </cds-card-cta>
-          </cds-content-group-simple>
+              </c4d-card-footer>
+            </c4d-card>
+          </c4d-content-group-simple>
         </div>
       </div>
     </div>
diff --git a/packages/web-components/examples/codesandbox/components/content-group-simple/package.json b/packages/web-components/examples/stackblitz/components/content-group-simple/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/content-group-simple/package.json
rename to packages/web-components/examples/stackblitz/components/content-group-simple/package.json
diff --git a/packages/web-components/examples/codesandbox/components/content-group-simple/src/index.js b/packages/web-components/examples/stackblitz/components/content-group-simple/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/content-group-simple/src/index.js
rename to packages/web-components/examples/stackblitz/components/content-group-simple/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components/content-group-simple/src/index.scss b/packages/web-components/examples/stackblitz/components/content-group-simple/src/index.scss
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/content-group-simple/src/index.scss
rename to packages/web-components/examples/stackblitz/components/content-group-simple/src/index.scss
diff --git a/packages/web-components/examples/codesandbox/components/content-group/.gitignore b/packages/web-components/examples/stackblitz/components/content-group/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/content-group/.gitignore
rename to packages/web-components/examples/stackblitz/components/content-group/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components/content-group/.sassrc b/packages/web-components/examples/stackblitz/components/content-group/.sassrc
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/content-group/.sassrc
rename to packages/web-components/examples/stackblitz/components/content-group/.sassrc
diff --git a/packages/web-components/examples/codesandbox/components/content-group/cdn.html b/packages/web-components/examples/stackblitz/components/content-group/cdn.html
similarity index 66%
rename from packages/web-components/examples/codesandbox/components/content-group/cdn.html
rename to packages/web-components/examples/stackblitz/components/content-group/cdn.html
index 15530222768..ca3abce48d0 100644
--- a/packages/web-components/examples/codesandbox/components/content-group/cdn.html
+++ b/packages/web-components/examples/stackblitz/components/content-group/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-group:not(:defined) {
+    c4d-content-group:not(:defined) {
       display: none;
     }
   </style>
@@ -23,16 +23,16 @@
 <div class="cds--grid">
   <div class="cds--row">
     <div class="cds--col-sm-4 cds--col-lg-12 cds--offset-lg-4">
-      <cds-content-group>
-        <cds-content-group-heading>Curabitur malesuada varius mi eu posuere</cds-content-group-heading>
-        <cds-content-group-copy>
+      <c4d-content-group>
+        <c4d-content-group-heading>Curabitur malesuada varius mi eu posuere</c4d-content-group-heading>
+        <c4d-content-group-copy>
           Lorem ipsum *dolor* sit amet, consectetur adipiscing elit. Vestibulum non porttitor libero, in venenatis magna.
-        </cds-content-group-copy>
-        <cds-card-link-cta slot="footer" cta-type="local" href="https://www.example.com">
-          <cds-card-link-heading>cta copy</cds-card-link-heading>
-          <cds-card-cta-footer cta-type="local"></cds-card-cta-footer>
-        </cds-card-link-cta>
-      </cds-content-group>
+        </c4d-content-group-copy>
+        <c4d-card link slot="footer" cta-type="local" href="https://www.example.com">
+          <c4d-card link-heading>cta copy</c4d-card-heading>
+          <c4d-card-footer cta-type="local"></c4d-card-footer>
+        </c4d-card>
+      </c4d-content-group>
     </div>
   </div>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/content-group/index.html b/packages/web-components/examples/stackblitz/components/content-group/index.html
similarity index 63%
rename from packages/web-components/examples/codesandbox/components/content-group/index.html
rename to packages/web-components/examples/stackblitz/components/content-group/index.html
index 9508568544e..50a76239dae 100644
--- a/packages/web-components/examples/codesandbox/components/content-group/index.html
+++ b/packages/web-components/examples/stackblitz/components/content-group/index.html
@@ -22,16 +22,16 @@
     <div class="cds--grid">
       <div class="cds--row">
         <div class="cds--col-sm-4 cds--col-lg-12 cds--offset-lg-4">
-          <cds-content-group>
-            <cds-content-group-heading>Curabitur malesuada varius mi eu posuere</cds-content-group-heading>
-            <cds-content-group-copy>
+          <c4d-content-group>
+            <c4d-content-group-heading>Curabitur malesuada varius mi eu posuere</c4d-content-group-heading>
+            <c4d-content-group-copy>
               Lorem ipsum *dolor* sit amet, consectetur adipiscing elit. Vestibulum non porttitor libero, in venenatis magna.
-            </cds-content-group-copy>
-            <cds-card-link-cta slot="footer" cta-type="local" href="https://www.example.com">
-              <cds-card-link-heading>cta copy</cds-card-link-heading>
-              <cds-card-cta-footer cta-type="local"></cds-card-cta-footer>
-            </cds-card-link-cta>
-          </cds-content-group>
+            </c4d-content-group-copy>
+            <c4d-card link slot="footer" cta-type="local" href="https://www.example.com">
+              <c4d-card link-heading>cta copy</c4d-card-heading>
+              <c4d-card-footer cta-type="local"></c4d-card-footer>
+            </c4d-card>
+          </c4d-content-group>
         </div>
       </div>
     </div>
diff --git a/packages/web-components/examples/codesandbox/components/content-group/package.json b/packages/web-components/examples/stackblitz/components/content-group/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/content-group/package.json
rename to packages/web-components/examples/stackblitz/components/content-group/package.json
diff --git a/packages/web-components/examples/codesandbox/components/content-group/src/index.js b/packages/web-components/examples/stackblitz/components/content-group/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/content-group/src/index.js
rename to packages/web-components/examples/stackblitz/components/content-group/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components/content-group/src/index.scss b/packages/web-components/examples/stackblitz/components/content-group/src/index.scss
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/content-group/src/index.scss
rename to packages/web-components/examples/stackblitz/components/content-group/src/index.scss
diff --git a/packages/web-components/examples/codesandbox/components/content-item-row/.gitignore b/packages/web-components/examples/stackblitz/components/content-item-row/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/content-item-row/.gitignore
rename to packages/web-components/examples/stackblitz/components/content-item-row/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components/content-item-row/.sassrc b/packages/web-components/examples/stackblitz/components/content-item-row/.sassrc
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/content-item-row/.sassrc
rename to packages/web-components/examples/stackblitz/components/content-item-row/.sassrc
diff --git a/packages/web-components/examples/codesandbox/components/content-item-row/cdn.html b/packages/web-components/examples/stackblitz/components/content-item-row/cdn.html
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/content-item-row/cdn.html
rename to packages/web-components/examples/stackblitz/components/content-item-row/cdn.html
diff --git a/packages/web-components/examples/codesandbox/components/content-item-row/index.html b/packages/web-components/examples/stackblitz/components/content-item-row/index.html
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/content-item-row/index.html
rename to packages/web-components/examples/stackblitz/components/content-item-row/index.html
diff --git a/packages/web-components/examples/codesandbox/components/content-item-row/package.json b/packages/web-components/examples/stackblitz/components/content-item-row/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/content-item-row/package.json
rename to packages/web-components/examples/stackblitz/components/content-item-row/package.json
diff --git a/packages/web-components/examples/codesandbox/components/content-item-row/src/index.js b/packages/web-components/examples/stackblitz/components/content-item-row/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/content-item-row/src/index.js
rename to packages/web-components/examples/stackblitz/components/content-item-row/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components/content-item-row/src/index.scss b/packages/web-components/examples/stackblitz/components/content-item-row/src/index.scss
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/content-item-row/src/index.scss
rename to packages/web-components/examples/stackblitz/components/content-item-row/src/index.scss
diff --git a/packages/web-components/examples/codesandbox/components/content-item/.gitignore b/packages/web-components/examples/stackblitz/components/content-item/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/content-item/.gitignore
rename to packages/web-components/examples/stackblitz/components/content-item/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components/content-item/.sassrc b/packages/web-components/examples/stackblitz/components/content-item/.sassrc
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/content-item/.sassrc
rename to packages/web-components/examples/stackblitz/components/content-item/.sassrc
diff --git a/packages/web-components/examples/codesandbox/components/content-item/cdn.html b/packages/web-components/examples/stackblitz/components/content-item/cdn.html
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/content-item/cdn.html
rename to packages/web-components/examples/stackblitz/components/content-item/cdn.html
diff --git a/packages/web-components/examples/codesandbox/components/content-item/index.html b/packages/web-components/examples/stackblitz/components/content-item/index.html
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/content-item/index.html
rename to packages/web-components/examples/stackblitz/components/content-item/index.html
diff --git a/packages/web-components/examples/codesandbox/components/content-item/package.json b/packages/web-components/examples/stackblitz/components/content-item/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/content-item/package.json
rename to packages/web-components/examples/stackblitz/components/content-item/package.json
diff --git a/packages/web-components/examples/codesandbox/components/content-item/src/index.js b/packages/web-components/examples/stackblitz/components/content-item/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/content-item/src/index.js
rename to packages/web-components/examples/stackblitz/components/content-item/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components/content-item/src/index.scss b/packages/web-components/examples/stackblitz/components/content-item/src/index.scss
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/content-item/src/index.scss
rename to packages/web-components/examples/stackblitz/components/content-item/src/index.scss
diff --git a/packages/web-components/examples/codesandbox/components/content-section/.gitignore b/packages/web-components/examples/stackblitz/components/content-section/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/content-section/.gitignore
rename to packages/web-components/examples/stackblitz/components/content-section/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components/content-section/.sassrc b/packages/web-components/examples/stackblitz/components/content-section/.sassrc
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/content-section/.sassrc
rename to packages/web-components/examples/stackblitz/components/content-section/.sassrc
diff --git a/packages/web-components/examples/codesandbox/components/content-section/cdn.html b/packages/web-components/examples/stackblitz/components/content-section/cdn.html
similarity index 74%
rename from packages/web-components/examples/codesandbox/components/content-section/cdn.html
rename to packages/web-components/examples/stackblitz/components/content-section/cdn.html
index 259ab3201c7..4f0dd6e81d4 100644
--- a/packages/web-components/examples/codesandbox/components/content-section/cdn.html
+++ b/packages/web-components/examples/stackblitz/components/content-section/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-section:not(:defined) {
+    c4d-content-section:not(:defined) {
       display: none;
     }
   </style>
@@ -25,11 +25,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-section>
-          <cds-content-section-heading>Content section heading</cds-content-section-heading>
-          <cds-content-section-copy>Copy text</cds-content-section-copy>
-          <cds-text-cta slot="footer" cta-type="local" href="https://www.example.com">Link action</cds-text-cta>
-        </cds-content-section>
+        <c4d-content-section>
+          <c4d-content-section-heading>Content section heading</c4d-content-section-heading>
+          <c4d-content-section-copy>Copy text</c4d-content-section-copy>
+          <c4d-text-cta slot="footer" cta-type="local" href="https://www.example.com">Link action</c4d-text-cta>
+        </c4d-content-section>
       </div>
     </div>
   </div>
diff --git a/packages/web-components/examples/codesandbox/components/content-section/index.html b/packages/web-components/examples/stackblitz/components/content-section/index.html
similarity index 73%
rename from packages/web-components/examples/codesandbox/components/content-section/index.html
rename to packages/web-components/examples/stackblitz/components/content-section/index.html
index 4502764b3aa..362390c6e58 100644
--- a/packages/web-components/examples/codesandbox/components/content-section/index.html
+++ b/packages/web-components/examples/stackblitz/components/content-section/index.html
@@ -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-section>
-              <cds-content-section-heading>Content section heading</cds-content-section-heading>
-              <cds-content-section-copy>Copy text</cds-content-section-copy>
-              <cds-text-cta slot="footer" cta-type="local" href="https://www.example.com">Link action</cds-text-cta>
-            </cds-content-section>
+            <c4d-content-section>
+              <c4d-content-section-heading>Content section heading</c4d-content-section-heading>
+              <c4d-content-section-copy>Copy text</c4d-content-section-copy>
+              <c4d-text-cta slot="footer" cta-type="local" href="https://www.example.com">Link action</c4d-text-cta>
+            </c4d-content-section>
           </div>
         </div>
       </div>
diff --git a/packages/web-components/examples/codesandbox/components/content-section/package.json b/packages/web-components/examples/stackblitz/components/content-section/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/content-section/package.json
rename to packages/web-components/examples/stackblitz/components/content-section/package.json
diff --git a/packages/web-components/examples/codesandbox/components/content-section/src/index.js b/packages/web-components/examples/stackblitz/components/content-section/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/content-section/src/index.js
rename to packages/web-components/examples/stackblitz/components/content-section/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components/content-section/src/index.scss b/packages/web-components/examples/stackblitz/components/content-section/src/index.scss
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/content-section/src/index.scss
rename to packages/web-components/examples/stackblitz/components/content-section/src/index.scss
diff --git a/packages/web-components/examples/codesandbox/components/cta-block/.gitignore b/packages/web-components/examples/stackblitz/components/cta-block/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/cta-block/.gitignore
rename to packages/web-components/examples/stackblitz/components/cta-block/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components/cta-block/.sassrc b/packages/web-components/examples/stackblitz/components/cta-block/.sassrc
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/cta-block/.sassrc
rename to packages/web-components/examples/stackblitz/components/cta-block/.sassrc
diff --git a/packages/web-components/examples/stackblitz/components/cta-block/cdn.html b/packages/web-components/examples/stackblitz/components/cta-block/cdn.html
new file mode 100644
index 00000000000..d93c5230835
--- /dev/null
+++ b/packages/web-components/examples/stackblitz/components/cta-block/cdn.html
@@ -0,0 +1,77 @@
+<!--
+@license
+
+Copyright IBM Corp. 2020
+
+This source code is licensed under the Apache-2.0 license found in the
+LICENSE file in the root directory of this source tree.
+-->
+
+<html>
+<head>
+  <title>@carbon/ibmdotcom-web-components example</title>
+  <meta charset="UTF-8" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css" />
+  <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 */
+    c4d-cta-block:not(:defined) {
+      display: none;
+    }
+  </style>
+  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/cta-block.min.js"></script>
+</head>
+
+<body>
+<div class="cds--grid">
+  <div class="cds--row">
+    <div class="cds--col-lg-8 cds--col-sm-4 cds--offset-lg-4">
+      <c4d-cta-block no-border>
+        <c4d-content-block-heading>Take the next step</c4d-content-block-heading>
+        <c4d-content-block-copy
+        >Want to discuss your options with a DevOps expert? Contact our sales team to evaluate your
+          needs.</c4d-content-block-copy
+        >
+
+        <c4d-button-group slot="action" style="--cds-button-group--item-count:2">
+          <c4d-button-group-item kind="tertiary" href="https://example.com">
+            Secondary Button
+          </c4d-button-group-item>
+          <c4d-button-group-item kind="primary" ref="https://example.com">
+            Primary button
+          </c4d-button-group-item>
+        </c4d-button-group>
+
+        <c4d-cta-block-item-row>
+          <c4d-cta-block-item>
+            <c4d-content-item-heading>Get connected</c4d-content-item-heading>
+            <c4d-content-item-copy
+            >IBM DevOps partners have a wide range of expertise. Find one to build that right solution for you.
+            </c4d-content-item-copy>
+            <c4d-text-cta slot="footer" cta-type="local" icon-placement="right" href="example.com"
+            >Find a partner
+            </c4d-text-cta>
+          </c4d-cta-block-item>
+
+          <c4d-cta-block-item>
+            <c4d-content-item-heading>Learn how</c4d-content-item-heading>
+            <c4d-content-item-copy>Dig into more self-directed larning about DevOps methodologies.</c4d-content-item-copy>
+            <c4d-text-cta slot="footer" cta-type="local" icon-placement="right" href="example.com"
+            >Browse tutorials
+            </c4d-text-cta>
+          </c4d-cta-block-item>
+
+          <c4d-cta-block-item>
+            <c4d-content-item-heading>Learn how</c4d-content-item-heading>
+            <c4d-content-item-copy>Dig into more self-directed larning about DevOps methodologies.</c4d-content-item-copy>
+            <c4d-text-cta slot="footer" cta-type="local" icon-placement="right" href="example.com"
+            >Browse tutorials
+            </c4d-text-cta>
+          </c4d-cta-block-item>
+        </c4d-cta-block-item-row>
+      </c4d-cta-block>
+    </div>
+  </div>
+</div>
+</body>
+</html>
diff --git a/packages/web-components/examples/stackblitz/components/cta-block/index.html b/packages/web-components/examples/stackblitz/components/cta-block/index.html
new file mode 100644
index 00000000000..3e39fb76af4
--- /dev/null
+++ b/packages/web-components/examples/stackblitz/components/cta-block/index.html
@@ -0,0 +1,76 @@
+<!--
+@license
+
+Copyright IBM Corp. 2020
+
+This source code is licensed under the Apache-2.0 license found in the
+LICENSE file in the root directory of this source tree.
+-->
+
+<html>
+  <head>
+    <title>@carbon/ibmdotcom-web-components example</title>
+    <meta charset="UTF-8" />
+    <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-cta-block:not(:defined) {
+        display: none;
+      }
+    </style>
+    <script src="src/index.js"></script>
+  </head>
+
+  <body>
+    <div class="cds--grid">
+      <div class="cds--row">
+        <div class="cds--col-lg-8 cds--col-sm-4 cds--offset-lg-4">
+          <c4d-cta-block no-border>
+            <c4d-content-block-heading>Take the next step</c4d-content-block-heading>
+            <c4d-content-block-copy
+              >Want to discuss your options with a DevOps expert? Contact our sales team to evaluate your
+              needs.</c4d-content-block-copy
+            >
+
+            <c4d-button-group slot="action" style="--cds-button-group--item-count:2">
+              <c4d-button-group-item kind="tertiary" href="https://example.com">
+                Secondary Button
+              </c4d-button-group-item>
+              <c4d-button-group-item kind="primary" ref="https://example.com">
+                Primary button
+              </c4d-button-group-item>
+            </c4d-button-group>
+
+            <c4d-cta-block-item-row>
+              <c4d-cta-block-item>
+                <c4d-content-item-heading>Get connected</c4d-content-item-heading>
+                <c4d-content-item-copy
+                  >IBM DevOps partners have a wide range of expertise. Find one to build that right solution for you.
+                </c4d-content-item-copy>
+                <c4d-text-cta slot="footer" cta-type="local" icon-placement="right" href="example.com"
+                  >Find a partner
+                </c4d-text-cta>
+              </c4d-cta-block-item>
+
+              <c4d-cta-block-item>
+                <c4d-content-item-heading>Learn how</c4d-content-item-heading>
+                <c4d-content-item-copy>Dig into more self-directed larning about DevOps methodologies.</c4d-content-item-copy>
+                <c4d-text-cta slot="footer" cta-type="local" icon-placement="right" href="example.com"
+                  >Browse tutorials
+                </c4d-text-cta>
+              </c4d-cta-block-item>
+
+              <c4d-cta-block-item>
+                <c4d-content-item-heading>Learn how</c4d-content-item-heading>
+                <c4d-content-item-copy>Dig into more self-directed larning about DevOps methodologies.</c4d-content-item-copy>
+                <c4d-text-cta slot="footer" cta-type="local" icon-placement="right" href="example.com"
+                  >Browse tutorials
+                </c4d-text-cta>
+              </c4d-cta-block-item>
+            </c4d-cta-block-item-row>
+          </c4d-cta-block>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/packages/web-components/examples/codesandbox/components/cta-block/package.json b/packages/web-components/examples/stackblitz/components/cta-block/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/cta-block/package.json
rename to packages/web-components/examples/stackblitz/components/cta-block/package.json
diff --git a/packages/web-components/examples/codesandbox/components/cta-block/src/index.js b/packages/web-components/examples/stackblitz/components/cta-block/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/cta-block/src/index.js
rename to packages/web-components/examples/stackblitz/components/cta-block/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components/cta-block/src/index.scss b/packages/web-components/examples/stackblitz/components/cta-block/src/index.scss
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/cta-block/src/index.scss
rename to packages/web-components/examples/stackblitz/components/cta-block/src/index.scss
diff --git a/packages/web-components/examples/codesandbox/components/cta-button/.gitignore b/packages/web-components/examples/stackblitz/components/cta-button/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/cta-button/.gitignore
rename to packages/web-components/examples/stackblitz/components/cta-button/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components/cta-button/cdn.html b/packages/web-components/examples/stackblitz/components/cta-button/cdn.html
similarity index 95%
rename from packages/web-components/examples/codesandbox/components/cta-button/cdn.html
rename to packages/web-components/examples/stackblitz/components/cta-button/cdn.html
index 9896916d825..bf53c0ef2fa 100644
--- a/packages/web-components/examples/codesandbox/components/cta-button/cdn.html
+++ b/packages/web-components/examples/stackblitz/components/cta-button/cdn.html
@@ -31,13 +31,13 @@
     <div class="cds--grid">
       <div class="cds--row">
         <div class="cds--col-sm-4 cds--col-lg-12">
-          <cds-button-cta
+          <c4d-button-cta
             cta-type="local"
             kind="tertiary"
             href="https://www.example.com"
           >
             Button CTA Copy
-          </cds-button-cta>
+          </c4d-button-cta>
         </div>
       </div>
     </div>
diff --git a/packages/web-components/examples/codesandbox/components/cta-button/contact-methods.html b/packages/web-components/examples/stackblitz/components/cta-button/contact-methods.html
similarity index 80%
rename from packages/web-components/examples/codesandbox/components/cta-button/contact-methods.html
rename to packages/web-components/examples/stackblitz/components/cta-button/contact-methods.html
index 25e6decfda5..b0a87c4f41b 100644
--- a/packages/web-components/examples/codesandbox/components/cta-button/contact-methods.html
+++ b/packages/web-components/examples/stackblitz/components/cta-button/contact-methods.html
@@ -29,10 +29,10 @@
     <div class="cds--grid">
       <div class="cds--row">
         <div class="cds--col-sm-4 cds--col-lg-12">
-          <cds-button-cta cta-type="call">Call</cds-button-cta>
-          <cds-button-cta cta-type="email">Email</cds-button-cta>
-          <cds-button-cta cta-type="chat">Chat</cds-button-cta>
-          <cds-button-cta cta-type="schedule">Schedule</cds-button-cta>
+          <c4d-button-cta cta-type="call">Call</c4d-button-cta>
+          <c4d-button-cta cta-type="email">Email</c4d-button-cta>
+          <c4d-button-cta cta-type="chat">Chat</c4d-button-cta>
+          <c4d-button-cta cta-type="schedule">Schedule</c4d-button-cta>
         </div>
       </div>
     </div>
diff --git a/packages/web-components/examples/codesandbox/components/cta-button/index.html b/packages/web-components/examples/stackblitz/components/cta-button/index.html
similarity index 94%
rename from packages/web-components/examples/codesandbox/components/cta-button/index.html
rename to packages/web-components/examples/stackblitz/components/cta-button/index.html
index 85eddc3e688..5b0b4d89fca 100644
--- a/packages/web-components/examples/codesandbox/components/cta-button/index.html
+++ b/packages/web-components/examples/stackblitz/components/cta-button/index.html
@@ -25,13 +25,13 @@
     <div class="cds--grid">
       <div class="cds--row">
         <div class="cds--col-sm-4 cds--col-lg-12">
-          <cds-button-cta
+          <c4d-button-cta
             cta-type="local"
             kind="tertiary"
             href="https://www.example.com"
           >
             Button CTA Copy
-          </cds-button-cta>
+          </c4d-button-cta>
         </div>
       </div>
     </div>
diff --git a/packages/web-components/examples/codesandbox/components/cta-button/package.json b/packages/web-components/examples/stackblitz/components/cta-button/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/cta-button/package.json
rename to packages/web-components/examples/stackblitz/components/cta-button/package.json
diff --git a/packages/web-components/examples/codesandbox/components/cta-button/src/index.js b/packages/web-components/examples/stackblitz/components/cta-button/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/cta-button/src/index.js
rename to packages/web-components/examples/stackblitz/components/cta-button/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components/cta-card-link/.gitignore b/packages/web-components/examples/stackblitz/components/cta-card-link/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/cta-card-link/.gitignore
rename to packages/web-components/examples/stackblitz/components/cta-card-link/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components/cta-card-link/cdn.html b/packages/web-components/examples/stackblitz/components/cta-card-link/cdn.html
similarity index 83%
rename from packages/web-components/examples/codesandbox/components/cta-card-link/cdn.html
rename to packages/web-components/examples/stackblitz/components/cta-card-link/cdn.html
index 33e125e6589..b87711895c6 100644
--- a/packages/web-components/examples/codesandbox/components/cta-card-link/cdn.html
+++ b/packages/web-components/examples/stackblitz/components/cta-card-link/cdn.html
@@ -16,7 +16,7 @@
   <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style type="text/css">
     /* Suppress custom element until styles are loaded */
-    cds-card-link-cta:not(:defined) {
+    c4d-card-link-cta:not(:defined) {
       display: none;
     }
   </style>
@@ -27,9 +27,9 @@
 <div class="cds--grid">
   <div class="cds--row">
     <div class="cds--col-sm-4 cds--col-lg-12">
-      <cds-card-link-cta href="https://www.ibm.com/" cta-type="local">
-        <cds-card-link-heading>Lorem ipsum dolor sit amet</cds-card-link-heading>
-        <cds-card-cta-footer>
+      <c4d-card link href="https://www.ibm.com/" cta-type="local">
+        <c4d-card link-heading>Lorem ipsum dolor sit amet</c4d-card-heading>
+        <c4d-card-footer>
           <svg
             slot="icon"
             focusable="false"
@@ -44,8 +44,8 @@
             <path
               d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
           </svg>
-        </cds-card-cta-footer>
-      </cds-card-link-cta>
+        </c4d-card-footer>
+      </c4d-card>
     </div>
   </div>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/cta-card-link/index.html b/packages/web-components/examples/stackblitz/components/cta-card-link/index.html
similarity index 81%
rename from packages/web-components/examples/codesandbox/components/cta-card-link/index.html
rename to packages/web-components/examples/stackblitz/components/cta-card-link/index.html
index 2d914efc4ed..add9cc22002 100644
--- a/packages/web-components/examples/codesandbox/components/cta-card-link/index.html
+++ b/packages/web-components/examples/stackblitz/components/cta-card-link/index.html
@@ -16,7 +16,7 @@
   <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style type="text/css">
     /* Suppress custom element until styles are loaded */
-    cds-card-link-cta:not(:defined) {
+    c4d-card-link-cta:not(:defined) {
       display: none;
     }
   </style>
@@ -26,9 +26,9 @@
 <div class="cds--grid">
   <div class="cds--row">
     <div class="cds--col-sm-4 cds--col-lg-4">
-      <cds-card-link-cta href="https://www.ibm.com/" cta-type="local">
-        <cds-card-link-heading>Lorem ipsum dolor sit amet</cds-card-link-heading>
-        <cds-card-cta-footer>
+      <c4d-card link href="https://www.ibm.com/" cta-type="local">
+        <c4d-card link-heading>Lorem ipsum dolor sit amet</c4d-card-heading>
+        <c4d-card-footer>
           <svg
             slot="icon"
             focusable="false"
@@ -43,8 +43,8 @@
             <path
               d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
           </svg>
-        </cds-card-cta-footer>
-      </cds-card-link-cta>
+        </c4d-card-footer>
+      </c4d-card>
     </div>
   </div>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/cta-card-link/package.json b/packages/web-components/examples/stackblitz/components/cta-card-link/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/cta-card-link/package.json
rename to packages/web-components/examples/stackblitz/components/cta-card-link/package.json
diff --git a/packages/web-components/examples/codesandbox/components/cta-card-link/src/index.js b/packages/web-components/examples/stackblitz/components/cta-card-link/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/cta-card-link/src/index.js
rename to packages/web-components/examples/stackblitz/components/cta-card-link/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components/cta-card/.gitignore b/packages/web-components/examples/stackblitz/components/cta-card/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/cta-card/.gitignore
rename to packages/web-components/examples/stackblitz/components/cta-card/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components/cta-card/cdn.html b/packages/web-components/examples/stackblitz/components/cta-card/cdn.html
similarity index 88%
rename from packages/web-components/examples/codesandbox/components/cta-card/cdn.html
rename to packages/web-components/examples/stackblitz/components/cta-card/cdn.html
index 9edf3f92a70..5e67e2997e0 100644
--- a/packages/web-components/examples/codesandbox/components/cta-card/cdn.html
+++ b/packages/web-components/examples/stackblitz/components/cta-card/cdn.html
@@ -16,7 +16,7 @@
   <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style type="text/css">
     /* Suppress custom element until styles are loaded */
-    cds-card-cta:not(:defined) {
+    c4d-card-cta:not(:defined) {
       display: none;
     }
   </style>
@@ -27,9 +27,9 @@
 <div class="cds--grid">
   <div class="cds--row">
     <div class="cds--col-sm-4 cds--col-lg-4">
-      <cds-card-cta href="https://www.ibm.com/" cta-type="local">
+      <c4d-card href="https://www.ibm.com/" cta-type="local">
         Lorem ipsum dolor sit amet
-        <cds-card-cta-footer>
+        <c4d-card-footer>
           <svg
             slot="icon"
             focusable="false"
@@ -44,8 +44,8 @@
             <path
               d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
           </svg>
-        </cds-card-cta-footer>
-      </cds-card-cta>
+        </c4d-card-footer>
+      </c4d-card>
     </div>
   </div>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/cta-card/index.html b/packages/web-components/examples/stackblitz/components/cta-card/index.html
similarity index 87%
rename from packages/web-components/examples/codesandbox/components/cta-card/index.html
rename to packages/web-components/examples/stackblitz/components/cta-card/index.html
index 8c66ec01fbb..eecb8aecfb2 100644
--- a/packages/web-components/examples/codesandbox/components/cta-card/index.html
+++ b/packages/web-components/examples/stackblitz/components/cta-card/index.html
@@ -16,7 +16,7 @@
   <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style type="text/css">
     /* Suppress custom element until styles are loaded */
-    cds-card-cta:not(:defined) {
+    c4d-card-cta:not(:defined) {
       display: none;
     }
   </style>
@@ -26,9 +26,9 @@
 <div class="cds--grid">
   <div class="cds--row">
     <div class="cds--col-sm-4 cds--col-lg-4">
-      <cds-card-cta href="https://www.ibm.com/" cta-type="local">
+      <c4d-card href="https://www.ibm.com/" cta-type="local">
         Lorem ipsum dolor sit amet
-        <cds-card-cta-footer>
+        <c4d-card-footer>
           <svg
             slot="icon"
             focusable="false"
@@ -43,8 +43,8 @@
             <path
               d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
           </svg>
-        </cds-card-cta-footer>
-      </cds-card-cta>
+        </c4d-card-footer>
+      </c4d-card>
     </div>
   </div>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/cta-card/package.json b/packages/web-components/examples/stackblitz/components/cta-card/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/cta-card/package.json
rename to packages/web-components/examples/stackblitz/components/cta-card/package.json
diff --git a/packages/web-components/examples/codesandbox/components/cta-card/src/index.js b/packages/web-components/examples/stackblitz/components/cta-card/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/cta-card/src/index.js
rename to packages/web-components/examples/stackblitz/components/cta-card/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components/cta-feature/.gitignore b/packages/web-components/examples/stackblitz/components/cta-feature/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/cta-feature/.gitignore
rename to packages/web-components/examples/stackblitz/components/cta-feature/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components/cta-feature/cdn.html b/packages/web-components/examples/stackblitz/components/cta-feature/cdn.html
similarity index 85%
rename from packages/web-components/examples/codesandbox/components/cta-feature/cdn.html
rename to packages/web-components/examples/stackblitz/components/cta-feature/cdn.html
index 07a89b52271..5d96f723a86 100644
--- a/packages/web-components/examples/codesandbox/components/cta-feature/cdn.html
+++ b/packages/web-components/examples/stackblitz/components/cta-feature/cdn.html
@@ -16,7 +16,7 @@
   <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style type="text/css">
     /* Suppress custom element until styles are loaded */
-    cds-feature-cta:not(:defined) {
+    c4d-feature-cta:not(:defined) {
       display: none;
     }
   </style>
@@ -27,14 +27,14 @@
 <div class="cds--grid">
   <div class="cds--row">
     <div class="cds--col-sm-4 cds--col-lg-12">
-      <cds-feature-cta href="https://www.ibm.com/" cta-type="local">
+      <c4d-feature-cta href="https://www.ibm.com/" cta-type="local">
         Copy text
-        <cds-image
+        <c4d-image
           slot="image"
           alt="Image alt text"
           default-src="https://fpoimg.com/672x672?text=1:1&bg_color=ee5396&text_color=161616"
-        ></cds-image>
-        <cds-feature-cta-footer cta-type="local" href="https://www.ibm.com/">
+        ></c4d-image>
+        <c4d-feature-cta-footer cta-type="local" href="https://www.ibm.com/">
           <svg
             slot="icon"
             focusable="false"
@@ -48,8 +48,8 @@
             <path
               d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
           </svg>
-        </cds-feature-cta-footer>
-      </cds-feature-cta>
+        </c4d-feature-cta-footer>
+      </c4d-feature-cta>
     </div>
   </div>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/cta-feature/index.html b/packages/web-components/examples/stackblitz/components/cta-feature/index.html
similarity index 84%
rename from packages/web-components/examples/codesandbox/components/cta-feature/index.html
rename to packages/web-components/examples/stackblitz/components/cta-feature/index.html
index cafcae890d9..12b5cc6b4cd 100644
--- a/packages/web-components/examples/codesandbox/components/cta-feature/index.html
+++ b/packages/web-components/examples/stackblitz/components/cta-feature/index.html
@@ -16,7 +16,7 @@
   <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style type="text/css">
     /* Suppress custom element until styles are loaded */
-    cds-feature-cta:not(:defined) {
+    c4d-feature-cta:not(:defined) {
       display: none;
     }
   </style>
@@ -26,14 +26,14 @@
 <div class="cds--grid">
   <div class="cds--row">
     <div class="cds--col-sm-4 cds--col-lg-12">
-      <cds-feature-cta href="https://www.ibm.com/" cta-type="local">
+      <c4d-feature-cta href="https://www.ibm.com/" cta-type="local">
         Copy text
-        <cds-image
+        <c4d-image
           slot="image"
           alt="Image alt text"
           default-src="https://fpoimg.com/672x672?text=1:1&bg_color=ee5396&text_color=161616"
-        ></cds-image>
-        <cds-feature-cta-footer cta-type="local" href="https://www.ibm.com/">
+        ></c4d-image>
+        <c4d-feature-cta-footer cta-type="local" href="https://www.ibm.com/">
           <svg
             slot="icon"
             focusable="false"
@@ -47,8 +47,8 @@
             <path
               d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
           </svg>
-        </cds-feature-cta-footer>
-      </cds-feature-cta>
+        </c4d-feature-cta-footer>
+      </c4d-feature-cta>
     </div>
   </div>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/cta-feature/package.json b/packages/web-components/examples/stackblitz/components/cta-feature/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/cta-feature/package.json
rename to packages/web-components/examples/stackblitz/components/cta-feature/package.json
diff --git a/packages/web-components/examples/codesandbox/components/cta-feature/src/index.js b/packages/web-components/examples/stackblitz/components/cta-feature/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/cta-feature/src/index.js
rename to packages/web-components/examples/stackblitz/components/cta-feature/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components/cta-section/.gitignore b/packages/web-components/examples/stackblitz/components/cta-section/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/cta-section/.gitignore
rename to packages/web-components/examples/stackblitz/components/cta-section/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components/cta-section/.sassrc b/packages/web-components/examples/stackblitz/components/cta-section/.sassrc
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/cta-section/.sassrc
rename to packages/web-components/examples/stackblitz/components/cta-section/.sassrc
diff --git a/packages/web-components/examples/codesandbox/components/cta-section/cdn.html b/packages/web-components/examples/stackblitz/components/cta-section/cdn.html
similarity index 71%
rename from packages/web-components/examples/codesandbox/components/cta-section/cdn.html
rename to packages/web-components/examples/stackblitz/components/cta-section/cdn.html
index 44e1ca8ec21..fd4a35859ba 100644
--- a/packages/web-components/examples/codesandbox/components/cta-section/cdn.html
+++ b/packages/web-components/examples/stackblitz/components/cta-section/cdn.html
@@ -15,7 +15,7 @@
   <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style type="text/css">
     /* Suppress custom element until styles are loaded */
-    cds-cta-section:not(:defined) {
+    c4d-cta-section:not(:defined) {
       display: none;
     }
   </style>
@@ -26,18 +26,18 @@
 <div class="cds--grid">
   <div class="cds--row">
     <div class="cds--col-lg-12 cds--col-sm-4">
-      <cds-cta-section>
-        <cds-cta-block>
-          <cds-content-block-heading>Curabitur malesuada varius mi eu posuere</cds-content-block-heading>
-          <cds-content-block-copy
+      <c4d-cta-section>
+        <c4d-cta-block>
+          <c4d-content-block-heading>Curabitur malesuada varius mi eu posuere</c4d-content-block-heading>
+          <c4d-content-block-copy
           >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non porttitor libero, in venenatis
-            magna.</cds-content-block-copy
+            magna.</c4d-content-block-copy
           >
-          <cds-text-cta slot="action" cta-type="local" icon-placement="right" href="https://www.example.com"
-          >Browse tutorials</cds-text-cta
+          <c4d-text-cta slot="action" cta-type="local" icon-placement="right" href="https://www.example.com"
+          >Browse tutorials</c4d-text-cta
           >
-        </cds-cta-block>
-      </cds-cta-section>
+        </c4d-cta-block>
+      </c4d-cta-section>
     </div>
   </div>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/cta-section/index.html b/packages/web-components/examples/stackblitz/components/cta-section/index.html
similarity index 70%
rename from packages/web-components/examples/codesandbox/components/cta-section/index.html
rename to packages/web-components/examples/stackblitz/components/cta-section/index.html
index fc08cde3f52..c537961fd9b 100644
--- a/packages/web-components/examples/codesandbox/components/cta-section/index.html
+++ b/packages/web-components/examples/stackblitz/components/cta-section/index.html
@@ -25,18 +25,18 @@
     <div class="cds--grid">
       <div class="cds--row">
         <div class="cds--col-lg-12 cds--col-sm-4">
-          <cds-cta-section>
-            <cds-cta-block>
-              <cds-content-block-heading>Curabitur malesuada varius mi eu posuere</cds-content-block-heading>
-              <cds-content-block-copy
+          <c4d-cta-section>
+            <c4d-cta-block>
+              <c4d-content-block-heading>Curabitur malesuada varius mi eu posuere</c4d-content-block-heading>
+              <c4d-content-block-copy
                 >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non porttitor libero, in venenatis
-                magna.</cds-content-block-copy
+                magna.</c4d-content-block-copy
               >
-              <cds-text-cta slot="action" cta-type="local" icon-placement="right" href="https://www.example.com"
-                >Browse tutorials</cds-text-cta
+              <c4d-text-cta slot="action" cta-type="local" icon-placement="right" href="https://www.example.com"
+                >Browse tutorials</c4d-text-cta
               >
-            </cds-cta-block>
-          </cds-cta-section>
+            </c4d-cta-block>
+          </c4d-cta-section>
         </div>
       </div>
     </div>
diff --git a/packages/web-components/examples/codesandbox/components/cta-section/package.json b/packages/web-components/examples/stackblitz/components/cta-section/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/cta-section/package.json
rename to packages/web-components/examples/stackblitz/components/cta-section/package.json
diff --git a/packages/web-components/examples/codesandbox/components/cta-section/src/index.js b/packages/web-components/examples/stackblitz/components/cta-section/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/cta-section/src/index.js
rename to packages/web-components/examples/stackblitz/components/cta-section/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components/cta-section/src/index.scss b/packages/web-components/examples/stackblitz/components/cta-section/src/index.scss
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/cta-section/src/index.scss
rename to packages/web-components/examples/stackblitz/components/cta-section/src/index.scss
diff --git a/packages/web-components/examples/codesandbox/components/cta-text/.gitignore b/packages/web-components/examples/stackblitz/components/cta-text/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/cta-text/.gitignore
rename to packages/web-components/examples/stackblitz/components/cta-text/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components/cta-text/cdn.html b/packages/web-components/examples/stackblitz/components/cta-text/cdn.html
similarity index 85%
rename from packages/web-components/examples/codesandbox/components/cta-text/cdn.html
rename to packages/web-components/examples/stackblitz/components/cta-text/cdn.html
index 47811a77a49..fcd2bb26401 100644
--- a/packages/web-components/examples/codesandbox/components/cta-text/cdn.html
+++ b/packages/web-components/examples/stackblitz/components/cta-text/cdn.html
@@ -16,7 +16,7 @@
   <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style type="text/css">
     /* Suppress custom element until styles are loaded */
-    cds-video-cta-container:not(:defined) {
+    c4d-video-cta-container:not(:defined) {
       display: none;
     }
   </style>
@@ -29,9 +29,9 @@
 <div class="cds--grid">
   <div class="cds--row">
     <div class="cds--col-sm-4 cds--col-lg-12">
-      <cds-video-cta-container>
-        <cds-text-cta cta-type="video" href="1_9h94wo6b"></cds-text-cta>
-      </cds-video-cta-container>
+      <c4d-video-cta-container>
+        <c4d-text-cta cta-type="video" href="1_9h94wo6b"></c4d-text-cta>
+      </c4d-video-cta-container>
     </div>
   </div>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/cta-text/index.html b/packages/web-components/examples/stackblitz/components/cta-text/index.html
similarity index 82%
rename from packages/web-components/examples/codesandbox/components/cta-text/index.html
rename to packages/web-components/examples/stackblitz/components/cta-text/index.html
index ac4715bb78e..9448cdeac41 100644
--- a/packages/web-components/examples/codesandbox/components/cta-text/index.html
+++ b/packages/web-components/examples/stackblitz/components/cta-text/index.html
@@ -16,7 +16,7 @@
   <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style type="text/css">
     /* Suppress custom element until styles are loaded */
-    cds-video-cta-container:not(:defined) {
+    c4d-video-cta-container:not(:defined) {
       display: none;
     }
   </style>
@@ -26,9 +26,9 @@
 <div class="cds--grid">
   <div class="cds--row">
     <div class="cds--col-sm-4 cds--col-lg-12">
-      <cds-video-cta-container>
-        <cds-text-cta cta-type="video" href="1_9h94wo6b"></cds-text-cta>
-      </cds-video-cta-container>
+      <c4d-video-cta-container>
+        <c4d-text-cta cta-type="video" href="1_9h94wo6b"></c4d-text-cta>
+      </c4d-video-cta-container>
     </div>
   </div>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/cta-text/package.json b/packages/web-components/examples/stackblitz/components/cta-text/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/cta-text/package.json
rename to packages/web-components/examples/stackblitz/components/cta-text/package.json
diff --git a/packages/web-components/examples/codesandbox/components/cta-text/src/index.js b/packages/web-components/examples/stackblitz/components/cta-text/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/cta-text/src/index.js
rename to packages/web-components/examples/stackblitz/components/cta-text/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components/dotcom-shell/.gitignore b/packages/web-components/examples/stackblitz/components/dotcom-shell/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/dotcom-shell/.gitignore
rename to packages/web-components/examples/stackblitz/components/dotcom-shell/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components/dotcom-shell/.sassrc b/packages/web-components/examples/stackblitz/components/dotcom-shell/.sassrc
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/dotcom-shell/.sassrc
rename to packages/web-components/examples/stackblitz/components/dotcom-shell/.sassrc
diff --git a/packages/web-components/examples/codesandbox/components/dotcom-shell/cdn.html b/packages/web-components/examples/stackblitz/components/dotcom-shell/cdn.html
similarity index 99%
rename from packages/web-components/examples/codesandbox/components/dotcom-shell/cdn.html
rename to packages/web-components/examples/stackblitz/components/dotcom-shell/cdn.html
index e72f3466384..e58589bddcc 100644
--- a/packages/web-components/examples/codesandbox/components/dotcom-shell/cdn.html
+++ b/packages/web-components/examples/stackblitz/components/dotcom-shell/cdn.html
@@ -149,7 +149,7 @@
   <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style type="text/css">
     /* Suppress custom element until styles are loaded */
-    cds-dotcom-shell-container:not(:defined) {
+    c4d-dotcom-shell-container:not(:defined) {
       display: none;
     }
   </style>
@@ -157,7 +157,7 @@
   <script src="src/index-cdn.js"></script>
 </head>
 <body>
-<cds-dotcom-shell-container>
+<c4d-dotcom-shell-container>
   <main class="cds--content cds-ce-demo--ui-shell-content">
     <div class="cds--grid">
       <div class="cds--row">
@@ -204,6 +204,6 @@ <h2>
       </div>
     </div>
   </main>
-</cds-dotcom-shell-container>
+</c4d-dotcom-shell-container>
 </body>
 </html>
diff --git a/packages/web-components/examples/codesandbox/components/dotcom-shell/index.html b/packages/web-components/examples/stackblitz/components/dotcom-shell/index.html
similarity index 99%
rename from packages/web-components/examples/codesandbox/components/dotcom-shell/index.html
rename to packages/web-components/examples/stackblitz/components/dotcom-shell/index.html
index 0cf2b22a3af..449c086bcac 100644
--- a/packages/web-components/examples/codesandbox/components/dotcom-shell/index.html
+++ b/packages/web-components/examples/stackblitz/components/dotcom-shell/index.html
@@ -155,7 +155,7 @@
     <script src="src/index.js"></script>
   </head>
   <body>
-    <cds-dotcom-shell-container>
+    <c4d-dotcom-shell-container>
       <main class="cds--content cds-ce-demo--ui-shell-content">
         <div class="cds--grid">
           <div class="cds--row">
@@ -202,6 +202,6 @@ <h2>
           </div>
         </div>
       </main>
-    </cds-dotcom-shell-container>
+    </c4d-dotcom-shell-container>
   </body>
 </html>
diff --git a/packages/web-components/examples/codesandbox/components/dotcom-shell/package.json b/packages/web-components/examples/stackblitz/components/dotcom-shell/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/dotcom-shell/package.json
rename to packages/web-components/examples/stackblitz/components/dotcom-shell/package.json
diff --git a/packages/web-components/examples/codesandbox/components/dotcom-shell/src/index-cdn.js b/packages/web-components/examples/stackblitz/components/dotcom-shell/src/index-cdn.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/dotcom-shell/src/index-cdn.js
rename to packages/web-components/examples/stackblitz/components/dotcom-shell/src/index-cdn.js
diff --git a/packages/web-components/examples/codesandbox/components/dotcom-shell/src/index.js b/packages/web-components/examples/stackblitz/components/dotcom-shell/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/dotcom-shell/src/index.js
rename to packages/web-components/examples/stackblitz/components/dotcom-shell/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components/dotcom-shell/src/index.scss b/packages/web-components/examples/stackblitz/components/dotcom-shell/src/index.scss
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/dotcom-shell/src/index.scss
rename to packages/web-components/examples/stackblitz/components/dotcom-shell/src/index.scss
diff --git a/packages/web-components/examples/codesandbox/components/expressive-modal/.gitignore b/packages/web-components/examples/stackblitz/components/expressive-modal/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/expressive-modal/.gitignore
rename to packages/web-components/examples/stackblitz/components/expressive-modal/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components/expressive-modal/cdn.html b/packages/web-components/examples/stackblitz/components/expressive-modal/cdn.html
similarity index 96%
rename from packages/web-components/examples/codesandbox/components/expressive-modal/cdn.html
rename to packages/web-components/examples/stackblitz/components/expressive-modal/cdn.html
index 45a22a15a68..453c3f933d9 100644
--- a/packages/web-components/examples/codesandbox/components/expressive-modal/cdn.html
+++ b/packages/web-components/examples/stackblitz/components/expressive-modal/cdn.html
@@ -29,8 +29,8 @@
 <div class="cds--grid">
   <div class="cds--row">
     <div class="cds--col-sm-4 cds--col-lg-12">
-      <cds-button-expressive id="open-modal-btn">Open modal
-      </cds-button-expressive>
+      <c4d-button-expressive id="open-modal-btn">Open modal
+      </c4d-button-expressive>
     </div>
   </div>
 </div>
@@ -51,7 +51,7 @@
     commodo elit. In venenatis sapien eu nisl congue suscipit.
   </c4d-expressive-modal-body>
   <c4d-expressive-modal-footer>
-    <cds-button>
+    <c4d-button>
       Lorem ipsum dolor
       <svg
         slot="icon"
diff --git a/packages/web-components/examples/codesandbox/components/expressive-modal/index.html b/packages/web-components/examples/stackblitz/components/expressive-modal/index.html
similarity index 93%
rename from packages/web-components/examples/codesandbox/components/expressive-modal/index.html
rename to packages/web-components/examples/stackblitz/components/expressive-modal/index.html
index b8d5f89a880..8f2a84f1f26 100644
--- a/packages/web-components/examples/codesandbox/components/expressive-modal/index.html
+++ b/packages/web-components/examples/stackblitz/components/expressive-modal/index.html
@@ -14,8 +14,9 @@
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
   <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 */
-    c4d-expressive-modal:not(:defined), c4d-button:not(:defined) {
+    c4d-expressive-modal:not(:defined) {
       display: none;
     }
   </style>
@@ -25,8 +26,8 @@
 <div class="cds--grid">
   <div class="cds--row">
     <div class="cds--col-sm-4 cds--col-lg-12">
-      <c4d-button id="open-modal-btn">Open modal
-      </c4d-button>
+      <cds-button id="open-modal-btn">Open modal
+      </cds-button>
     </div>
   </div>
 </div>
@@ -62,7 +63,7 @@
         <path
           d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
       </svg>
-    </c4d-button>
+    </cds-button>
   </c4d-expressive-modal-footer>
 </c4d-expressive-modal>
 </body>
diff --git a/packages/web-components/examples/codesandbox/components/expressive-modal/package.json b/packages/web-components/examples/stackblitz/components/expressive-modal/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/expressive-modal/package.json
rename to packages/web-components/examples/stackblitz/components/expressive-modal/package.json
diff --git a/packages/web-components/examples/codesandbox/components/expressive-modal/src/index.js b/packages/web-components/examples/stackblitz/components/expressive-modal/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/expressive-modal/src/index.js
rename to packages/web-components/examples/stackblitz/components/expressive-modal/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components/feature-card/.gitignore b/packages/web-components/examples/stackblitz/components/feature-card/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/feature-card/.gitignore
rename to packages/web-components/examples/stackblitz/components/feature-card/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components/feature-card/cdn.html b/packages/web-components/examples/stackblitz/components/feature-card/cdn.html
similarity index 83%
rename from packages/web-components/examples/codesandbox/components/feature-card/cdn.html
rename to packages/web-components/examples/stackblitz/components/feature-card/cdn.html
index 1ae36d1bf2f..8f4ec6ec2f9 100644
--- a/packages/web-components/examples/codesandbox/components/feature-card/cdn.html
+++ b/packages/web-components/examples/stackblitz/components/feature-card/cdn.html
@@ -14,7 +14,7 @@
   <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style type="text/css">
     /* Suppress custom element until styles are loaded */
-    cds-feature-card:not(:defined) {
+    c4d-feature-card:not(:defined) {
       display: none;
     }
   </style>
@@ -25,15 +25,15 @@
 <div class="cds--grid">
   <div class="cds--row">
     <div class="cds--col-sm-4 cds--col-lg-12">
-      <cds-feature-card href="https://example.com">
-        <cds-image
+      <c4d-feature-card href="https://example.com">
+        <c4d-image
           slot="image"
           alt="Image alt text"
           default-src="https://fpoimg.com/672x672?text=1:1&bg_color=ee5396&text_color=161616"
         >
-        </cds-image>
-        <cds-card-heading>Lorem ipsum dolor sit amet.</cds-card-heading>
-        <cds-feature-card-footer>
+        </c4d-image>
+        <c4d-card-heading>Lorem ipsum dolor sit amet.</c4d-card-heading>
+        <c4d-feature-card-footer>
           <svg
             slot="icon"
             focusable="false"
@@ -47,8 +47,8 @@
             <path
               d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
           </svg>
-        </cds-feature-card-footer>
-      </cds-feature-card>
+        </c4d-feature-card-footer>
+      </c4d-feature-card>
     </div>
   </div>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/feature-card/index.html b/packages/web-components/examples/stackblitz/components/feature-card/index.html
similarity index 82%
rename from packages/web-components/examples/codesandbox/components/feature-card/index.html
rename to packages/web-components/examples/stackblitz/components/feature-card/index.html
index 2c4e95ed8e7..9473557e029 100644
--- a/packages/web-components/examples/codesandbox/components/feature-card/index.html
+++ b/packages/web-components/examples/stackblitz/components/feature-card/index.html
@@ -14,7 +14,7 @@
   <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style type="text/css">
     /* Suppress custom element until styles are loaded */
-    cds-feature-card:not(:defined) {
+    c4d-feature-card:not(:defined) {
       display: none;
     }
   </style>
@@ -24,15 +24,15 @@
 <div class="cds--grid">
   <div class="cds--row">
     <div class="cds--col-sm-4 cds--col-lg-12">
-      <cds-feature-card href="https://example.com">
-        <cds-image
+      <c4d-feature-card href="https://example.com">
+        <c4d-image
           slot="image"
           alt="Image alt text"
           default-src="https://fpoimg.com/672x672?text=1:1&bg_color=ee5396&text_color=161616"
         >
-        </cds-image>
-        <cds-card-heading>Lorem ipsum dolor sit amet.</cds-card-heading>
-        <cds-feature-card-footer>
+        </c4d-image>
+        <c4d-card-heading>Lorem ipsum dolor sit amet.</c4d-card-heading>
+        <c4d-feature-card-footer>
           <svg
             slot="icon"
             focusable="false"
@@ -46,8 +46,8 @@
             <path
               d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
           </svg>
-        </cds-feature-card-footer>
-      </cds-feature-card>
+        </c4d-feature-card-footer>
+      </c4d-feature-card>
     </div>
   </div>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/feature-card/package.json b/packages/web-components/examples/stackblitz/components/feature-card/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/feature-card/package.json
rename to packages/web-components/examples/stackblitz/components/feature-card/package.json
diff --git a/packages/web-components/examples/codesandbox/components/feature-card/src/index.js b/packages/web-components/examples/stackblitz/components/feature-card/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/feature-card/src/index.js
rename to packages/web-components/examples/stackblitz/components/feature-card/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components/feature-section/.gitignore b/packages/web-components/examples/stackblitz/components/feature-section/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/feature-section/.gitignore
rename to packages/web-components/examples/stackblitz/components/feature-section/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components/feature-section/cdn.html b/packages/web-components/examples/stackblitz/components/feature-section/cdn.html
similarity index 98%
rename from packages/web-components/examples/codesandbox/components/feature-section/cdn.html
rename to packages/web-components/examples/stackblitz/components/feature-section/cdn.html
index 7e779603ba3..2bb97439119 100644
--- a/packages/web-components/examples/codesandbox/components/feature-section/cdn.html
+++ b/packages/web-components/examples/stackblitz/components/feature-section/cdn.html
@@ -14,7 +14,7 @@
   <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style type="text/css">
     /* Suppress custom element until styles are loaded */
-    cds-feature-section:not(:defined) {
+    c4d-feature-section:not(:defined) {
       display: none;
     }
   </style>
diff --git a/packages/web-components/examples/codesandbox/components/feature-section/index.html b/packages/web-components/examples/stackblitz/components/feature-section/index.html
similarity index 98%
rename from packages/web-components/examples/codesandbox/components/feature-section/index.html
rename to packages/web-components/examples/stackblitz/components/feature-section/index.html
index d3e8f96d7c5..83eb183d2fe 100644
--- a/packages/web-components/examples/codesandbox/components/feature-section/index.html
+++ b/packages/web-components/examples/stackblitz/components/feature-section/index.html
@@ -14,7 +14,7 @@
   <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style type="text/css">
     /* Suppress custom element until styles are loaded */
-    cds-feature-section:not(:defined) {
+    c4d-feature-section:not(:defined) {
       display: none;
     }
   </style>
diff --git a/packages/web-components/examples/codesandbox/components/feature-section/package.json b/packages/web-components/examples/stackblitz/components/feature-section/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/feature-section/package.json
rename to packages/web-components/examples/stackblitz/components/feature-section/package.json
diff --git a/packages/web-components/examples/codesandbox/components/feature-section/src/index.js b/packages/web-components/examples/stackblitz/components/feature-section/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/feature-section/src/index.js
rename to packages/web-components/examples/stackblitz/components/feature-section/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components/filter-panel/.gitignore b/packages/web-components/examples/stackblitz/components/filter-panel/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/filter-panel/.gitignore
rename to packages/web-components/examples/stackblitz/components/filter-panel/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components/filter-panel/.sassrc b/packages/web-components/examples/stackblitz/components/filter-panel/.sassrc
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/filter-panel/.sassrc
rename to packages/web-components/examples/stackblitz/components/filter-panel/.sassrc
diff --git a/packages/web-components/examples/stackblitz/components/filter-panel/cdn.html b/packages/web-components/examples/stackblitz/components/filter-panel/cdn.html
new file mode 100644
index 00000000000..8bd9111d16b
--- /dev/null
+++ b/packages/web-components/examples/stackblitz/components/filter-panel/cdn.html
@@ -0,0 +1,76 @@
+<!--
+@license
+
+Copyright IBM Corp. 2020
+
+This source code is licensed under the Apache-2.0 license found in the
+LICENSE file in the root directory of this source tree.
+-->
+
+<html>
+<head>
+  <title>@carbon/ibmdotcom-web-components example</title>
+  <meta charset="UTF-8" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css" />
+  <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 */
+    c4d-filter-panel:not(:defined) {
+      display: none;
+    }
+  </style>
+  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/filter-panel.min.js"></script>
+</head>
+
+<body>
+<div class="cds--grid">
+  <div class="cds--row">
+    <div class="cds--col-lg-4">
+      <c4d-filter-panel-composite>
+        <c4d-filter-panel-heading slot="heading">Filter</c4d-filter-panel-heading>
+        <c4d-filter-group>
+          <c4d-filter-group-item title="Product types">
+            <c4d-filter-panel-checkbox value="API">API</c4d-filter-panel-checkbox>
+            <c4d-filter-panel-checkbox value="Application">Application</c4d-filter-panel-checkbox>
+            <c4d-filter-panel-checkbox value="Data Set">Data Set</c4d-filter-panel-checkbox>
+            <c4d-filter-panel-checkbox value="Free Trial">Free Trial</c4d-filter-panel-checkbox>
+            <c4d-filter-panel-checkbox value="Hardware">Hardware</c4d-filter-panel-checkbox>
+            <c4d-filter-panel-checkbox value="Service">Service</c4d-filter-panel-checkbox>
+            <c4d-filter-panel-checkbox value="Service Assets">Service Assets</c4d-filter-panel-checkbox>
+            <c4d-filter-panel-checkbox value="Software">Software</c4d-filter-panel-checkbox>
+          </c4d-filter-group-item>
+          <c4d-filter-group-item title="Technologies">
+            <c4d-filter-panel-input-select header-value="Analytics" title="Analytics"></c4d-filter-panel-input-select>
+            <c4d-filter-panel-input-select header-value="Artificial intelligence" title="Artificial intelligence">
+              <c4d-filter-panel-input-select-item value="Machine Learning">Machine Learning</c4d-filter-panel-input-select-item>
+              <c4d-filter-panel-input-select-item value="Natural language processing">Natural language processing</c4d-filter-panel-input-select-item>
+              <c4d-filter-panel-input-select-item value="Speech recognition">Speech recognition</c4d-filter-panel-input-select-item>
+            </c4d-filter-panel-input-select>
+            <c4d-filter-panel-input-select header-value="Automation" title="Automation"></c4d-filter-panel-input-select>
+            <c4d-filter-panel-input-select header-value="Blockchain" title="Blockchain"></c4d-filter-panel-input-select>
+            <c4d-filter-panel-input-select header-value="Cloud computing" title="Cloud computing"></c4d-filter-panel-input-select>
+            <c4d-filter-panel-input-select header-value="IT infrastructure" title="IT infrastructure"></c4d-filter-panel-input-select>
+            <c4d-filter-panel-input-select header-value="IT management" title="IT management"></c4d-filter-panel-input-select>
+            <c4d-filter-panel-input-select header-value="Mobile technologys" title="Mobile technology"></c4d-filter-panel-input-select>
+            <c4d-filter-panel-input-select header-value="Security" title="Security"></c4d-filter-panel-input-select>
+            <c4d-filter-panel-input-select header-value="Software development" title="Software development"></c4d-filter-panel-input-select>
+          </c4d-filter-group-item>
+          <c4d-filter-group-item title="Business needs">
+            <c4d-filter-panel-input-select header-value="Business operations" title="Business operations"></c4d-filter-panel-input-select>
+            <c4d-filter-panel-input-select header-value="Content Management" title="Content Management"></c4d-filter-panel-input-select>
+            <c4d-filter-panel-input-select header-value="Customer service" title="Customer service"></c4d-filter-panel-input-select>
+            <c4d-filter-panel-input-select header-value="Finance" title="Finance"></c4d-filter-panel-input-select>
+            <c4d-filter-panel-input-select header-value="Marketing and sales" title="Marketing and sales"></c4d-filter-panel-input-select>
+            <c4d-filter-panel-input-select header-value="Supply chain management" title="Supply chain management"></c4d-filter-panel-input-select>
+          </c4d-filter-group-item>
+          <c4d-filter-group-item title="Deployment types">
+            <c4d-filter-panel-checkbox value="On-premisis">On-premisis</c4d-filter-panel-checkbox>
+            <c4d-filter-panel-checkbox value="SaaS">SaaS</c4d-filter-panel-checkbox>
+          </c4d-filter-group-item>
+        </c4d-filter-group>
+      </c4d-filter-panel-composite>
+    </div>
+  </div>
+</div>
+</body>
+</html>
diff --git a/packages/web-components/examples/stackblitz/components/filter-panel/index.html b/packages/web-components/examples/stackblitz/components/filter-panel/index.html
new file mode 100644
index 00000000000..2f439582f27
--- /dev/null
+++ b/packages/web-components/examples/stackblitz/components/filter-panel/index.html
@@ -0,0 +1,75 @@
+<!--
+@license
+
+Copyright IBM Corp. 2020
+
+This source code is licensed under the Apache-2.0 license found in the
+LICENSE file in the root directory of this source tree.
+-->
+
+<html>
+  <head>
+    <title>@carbon/ibmdotcom-web-components example</title>
+    <meta charset="UTF-8" />
+    <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-filter-panel:not(:defined) {
+        display: none;
+      }
+    </style>
+    <script src="src/index.js"></script>
+  </head>
+
+  <body>
+    <div class="cds--grid">
+      <div class="cds--row">
+        <div class="cds--col-lg-4">
+          <c4d-filter-panel-composite>
+        <c4d-filter-panel-heading slot="heading">Filter</c4d-filter-panel-heading>
+        <c4d-filter-group>
+          <c4d-filter-group-item title="Product types">
+            <c4d-filter-panel-checkbox value="API">API</c4d-filter-panel-checkbox>
+            <c4d-filter-panel-checkbox value="Application">Application</c4d-filter-panel-checkbox>
+            <c4d-filter-panel-checkbox value="Data Set">Data Set</c4d-filter-panel-checkbox>
+            <c4d-filter-panel-checkbox value="Free Trial">Free Trial</c4d-filter-panel-checkbox>
+            <c4d-filter-panel-checkbox value="Hardware">Hardware</c4d-filter-panel-checkbox>
+            <c4d-filter-panel-checkbox value="Service">Service</c4d-filter-panel-checkbox>
+            <c4d-filter-panel-checkbox value="Service Assets">Service Assets</c4d-filter-panel-checkbox>
+            <c4d-filter-panel-checkbox value="Software">Software</c4d-filter-panel-checkbox>
+          </c4d-filter-group-item>
+          <c4d-filter-group-item title="Technologies">
+            <c4d-filter-panel-input-select header-value="Analytics" title="Analytics"></c4d-filter-panel-input-select>
+            <c4d-filter-panel-input-select header-value="Artificial intelligence" title="Artificial intelligence">
+              <c4d-filter-panel-input-select-item value="Machine Learning">Machine Learning</c4d-filter-panel-input-select-item>
+              <c4d-filter-panel-input-select-item value="Natural language processing">Natural language processing</c4d-filter-panel-input-select-item>
+              <c4d-filter-panel-input-select-item value="Speech recognition">Speech recognition</c4d-filter-panel-input-select-item>
+            </c4d-filter-panel-input-select>
+            <c4d-filter-panel-input-select header-value="Automation" title="Automation"></c4d-filter-panel-input-select>
+            <c4d-filter-panel-input-select header-value="Blockchain" title="Blockchain"></c4d-filter-panel-input-select>
+            <c4d-filter-panel-input-select header-value="Cloud computing" title="Cloud computing"></c4d-filter-panel-input-select>
+            <c4d-filter-panel-input-select header-value="IT infrastructure" title="IT infrastructure"></c4d-filter-panel-input-select>
+            <c4d-filter-panel-input-select header-value="IT management" title="IT management"></c4d-filter-panel-input-select>
+            <c4d-filter-panel-input-select header-value="Mobile technologys" title="Mobile technology"></c4d-filter-panel-input-select>
+            <c4d-filter-panel-input-select header-value="Security" title="Security"></c4d-filter-panel-input-select>
+            <c4d-filter-panel-input-select header-value="Software development" title="Software development"></c4d-filter-panel-input-select>
+          </c4d-filter-group-item>
+          <c4d-filter-group-item title="Business needs">
+            <c4d-filter-panel-input-select header-value="Business operations" title="Business operations"></c4d-filter-panel-input-select>
+            <c4d-filter-panel-input-select header-value="Content Management" title="Content Management"></c4d-filter-panel-input-select>
+            <c4d-filter-panel-input-select header-value="Customer service" title="Customer service"></c4d-filter-panel-input-select>
+            <c4d-filter-panel-input-select header-value="Finance" title="Finance"></c4d-filter-panel-input-select>
+            <c4d-filter-panel-input-select header-value="Marketing and sales" title="Marketing and sales"></c4d-filter-panel-input-select>
+            <c4d-filter-panel-input-select header-value="Supply chain management" title="Supply chain management"></c4d-filter-panel-input-select>
+          </c4d-filter-group-item>
+          <c4d-filter-group-item title="Deployment types">
+            <c4d-filter-panel-checkbox value="On-premisis">On-premisis</c4d-filter-panel-checkbox>
+            <c4d-filter-panel-checkbox value="SaaS">SaaS</c4d-filter-panel-checkbox>
+          </c4d-filter-group-item>
+        </c4d-filter-group>
+      </c4d-filter-panel-composite>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/packages/web-components/examples/codesandbox/components/filter-panel/package.json b/packages/web-components/examples/stackblitz/components/filter-panel/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/filter-panel/package.json
rename to packages/web-components/examples/stackblitz/components/filter-panel/package.json
diff --git a/packages/web-components/examples/codesandbox/components/filter-panel/src/index.js b/packages/web-components/examples/stackblitz/components/filter-panel/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/filter-panel/src/index.js
rename to packages/web-components/examples/stackblitz/components/filter-panel/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components/filter-panel/src/index.scss b/packages/web-components/examples/stackblitz/components/filter-panel/src/index.scss
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/filter-panel/src/index.scss
rename to packages/web-components/examples/stackblitz/components/filter-panel/src/index.scss
diff --git a/packages/web-components/examples/codesandbox/components/footer-language-only/.gitignore b/packages/web-components/examples/stackblitz/components/footer-language-only/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/footer-language-only/.gitignore
rename to packages/web-components/examples/stackblitz/components/footer-language-only/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components/footer-language-only/cdn.html b/packages/web-components/examples/stackblitz/components/footer-language-only/cdn.html
similarity index 92%
rename from packages/web-components/examples/codesandbox/components/footer-language-only/cdn.html
rename to packages/web-components/examples/stackblitz/components/footer-language-only/cdn.html
index bb83d71bd6c..638f06bcd31 100644
--- a/packages/web-components/examples/codesandbox/components/footer-language-only/cdn.html
+++ b/packages/web-components/examples/stackblitz/components/footer-language-only/cdn.html
@@ -14,7 +14,7 @@
   <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css" />
   <style type="text/css">
     /* Suppress custom element until styles are loaded */
-    cds-footer-container:not(:defined) {
+    c4d-footer-container:not(:defined) {
       display: none;
     }
   </style>
@@ -22,12 +22,12 @@
 </head>
 <body>
 <div style="padding-top: 200px;"></div>
-<cds-footer-container
+<c4d-footer-container
   size="regular"
   language-selector-label="Choose a language"
   clear-selection-label="Clear language selection"
   selected-language="English"
-></cds-footer-container>
+></c4d-footer-container>
 </body>
 <script>
   const languageList = [
diff --git a/packages/web-components/examples/codesandbox/components/footer-language-only/index.html b/packages/web-components/examples/stackblitz/components/footer-language-only/index.html
similarity index 94%
rename from packages/web-components/examples/codesandbox/components/footer-language-only/index.html
rename to packages/web-components/examples/stackblitz/components/footer-language-only/index.html
index 0b26de9819d..762def4bbdf 100644
--- a/packages/web-components/examples/codesandbox/components/footer-language-only/index.html
+++ b/packages/web-components/examples/stackblitz/components/footer-language-only/index.html
@@ -16,12 +16,12 @@
 </head>
 <body>
 <div style="padding-top: 200px;"></div>
-<cds-footer-container
+<c4d-footer-container
   size="regular"
   language-selector-label="Choose a language"
   clear-selection-label="Clear language selection"
   selected-language="English"
-></cds-footer-container>
+></c4d-footer-container>
 </body>
 <script>
   const languageList = [
diff --git a/packages/web-components/examples/codesandbox/components/footer-language-only/package.json b/packages/web-components/examples/stackblitz/components/footer-language-only/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/footer-language-only/package.json
rename to packages/web-components/examples/stackblitz/components/footer-language-only/package.json
diff --git a/packages/web-components/examples/codesandbox/components/footer-language-only/src/index.js b/packages/web-components/examples/stackblitz/components/footer-language-only/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/footer-language-only/src/index.js
rename to packages/web-components/examples/stackblitz/components/footer-language-only/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components/footer/.gitignore b/packages/web-components/examples/stackblitz/components/footer/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/footer/.gitignore
rename to packages/web-components/examples/stackblitz/components/footer/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components/footer/cdn.html b/packages/web-components/examples/stackblitz/components/footer/cdn.html
similarity index 99%
rename from packages/web-components/examples/codesandbox/components/footer/cdn.html
rename to packages/web-components/examples/stackblitz/components/footer/cdn.html
index 7a192800163..a5d04c713ab 100644
--- a/packages/web-components/examples/codesandbox/components/footer/cdn.html
+++ b/packages/web-components/examples/stackblitz/components/footer/cdn.html
@@ -148,13 +148,13 @@
   <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css" />
   <style type="text/css">
     /* Suppress custom element until styles are loaded */
-    cds-footer-container:not(:defined) {
+    c4d-footer-container:not(:defined) {
       display: none;
     }
   </style>
   <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/footer.min.js"></script>
 </head>
 <body>
-<cds-footer-container></cds-footer-container>
+<c4d-footer-container></c4d-footer-container>
 </body>
 </html>
diff --git a/packages/web-components/examples/codesandbox/components/footer/index.html b/packages/web-components/examples/stackblitz/components/footer/index.html
similarity index 90%
rename from packages/web-components/examples/codesandbox/components/footer/index.html
rename to packages/web-components/examples/stackblitz/components/footer/index.html
index 53e15bf3535..b93f64e56a9 100644
--- a/packages/web-components/examples/codesandbox/components/footer/index.html
+++ b/packages/web-components/examples/stackblitz/components/footer/index.html
@@ -15,6 +15,6 @@
     <script src="src/index.js"></script>
   </head>
   <body>
-    <cds-footer-container></cds-footer-container>
+    <c4d-footer-container></c4d-footer-container>
   </body>
 </html>
diff --git a/packages/web-components/examples/codesandbox/components/footer/package.json b/packages/web-components/examples/stackblitz/components/footer/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/footer/package.json
rename to packages/web-components/examples/stackblitz/components/footer/package.json
diff --git a/packages/web-components/examples/codesandbox/components/footer/src/index.js b/packages/web-components/examples/stackblitz/components/footer/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/footer/src/index.js
rename to packages/web-components/examples/stackblitz/components/footer/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components/global-banner/.gitignore b/packages/web-components/examples/stackblitz/components/global-banner/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/global-banner/.gitignore
rename to packages/web-components/examples/stackblitz/components/global-banner/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components/global-banner/.sassrc b/packages/web-components/examples/stackblitz/components/global-banner/.sassrc
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/global-banner/.sassrc
rename to packages/web-components/examples/stackblitz/components/global-banner/.sassrc
diff --git a/packages/web-components/examples/codesandbox/components/global-banner/cdn.html b/packages/web-components/examples/stackblitz/components/global-banner/cdn.html
similarity index 93%
rename from packages/web-components/examples/codesandbox/components/global-banner/cdn.html
rename to packages/web-components/examples/stackblitz/components/global-banner/cdn.html
index c6eef595140..0a8b2f4ba3e 100644
--- a/packages/web-components/examples/codesandbox/components/global-banner/cdn.html
+++ b/packages/web-components/examples/stackblitz/components/global-banner/cdn.html
@@ -26,9 +26,9 @@
     <c4d-global-banner-image default-src="https://fpoimg.com/672x336?text=2:1&bg_color=ee5396&text_color=161616"></c4d-global-banner-image>
     <c4d-global-banner-heading>Hybrid cloud and AI for smarter business</c4d-global-banner-heading>
     <c4d-global-banner-copy>Las Vegas, June 15-18, 2025</c4d-global-banner-copy>
-    <c4d-button slot="cta" cta-type="local" kind="tertiary" href="https://www.example.com">
+    <cds-button slot="cta" cta-type="local" kind="tertiary" href="https://www.example.com">
       Register for Think. Free
-    </c4d-button>
+    </cds-button>
   </c4d-global-banner>
 </body>
 </html>
diff --git a/packages/web-components/examples/codesandbox/components/global-banner/index.html b/packages/web-components/examples/stackblitz/components/global-banner/index.html
similarity index 91%
rename from packages/web-components/examples/codesandbox/components/global-banner/index.html
rename to packages/web-components/examples/stackblitz/components/global-banner/index.html
index aa22f6c1170..acd295a952d 100644
--- a/packages/web-components/examples/codesandbox/components/global-banner/index.html
+++ b/packages/web-components/examples/stackblitz/components/global-banner/index.html
@@ -19,9 +19,9 @@
       <c4d-global-banner-image default-src="https://fpoimg.com/672x336?text=2:1&bg_color=ee5396&text_color=161616"></c4d-global-banner-image>
       <c4d-global-banner-heading>Hybrid cloud and AI for smarter business</c4d-global-banner-heading>
       <c4d-global-banner-copy>Las Vegas, June 15-18, 2025</c4d-global-banner-copy>
-      <c4d-button slot="cta" cta-type="local" kind="tertiary" href="https://www.example.com">
+      <cds-button slot="cta" cta-type="local" kind="tertiary" href="https://www.example.com">
         Register for Think. Free
-      </c4d-button>
+      </cds-button>
     </c4d-global-banner>
   </body>
 </html>
diff --git a/packages/web-components/examples/codesandbox/components/global-banner/package.json b/packages/web-components/examples/stackblitz/components/global-banner/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/global-banner/package.json
rename to packages/web-components/examples/stackblitz/components/global-banner/package.json
diff --git a/packages/web-components/examples/codesandbox/components/global-banner/src/index.js b/packages/web-components/examples/stackblitz/components/global-banner/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/global-banner/src/index.js
rename to packages/web-components/examples/stackblitz/components/global-banner/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components/global-banner/src/index.scss b/packages/web-components/examples/stackblitz/components/global-banner/src/index.scss
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/global-banner/src/index.scss
rename to packages/web-components/examples/stackblitz/components/global-banner/src/index.scss
diff --git a/packages/web-components/examples/codesandbox/components/horizontal-rule/.gitignore b/packages/web-components/examples/stackblitz/components/horizontal-rule/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/horizontal-rule/.gitignore
rename to packages/web-components/examples/stackblitz/components/horizontal-rule/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components/horizontal-rule/cdn.html b/packages/web-components/examples/stackblitz/components/horizontal-rule/cdn.html
similarity index 92%
rename from packages/web-components/examples/codesandbox/components/horizontal-rule/cdn.html
rename to packages/web-components/examples/stackblitz/components/horizontal-rule/cdn.html
index 8b702a8d36b..fb26852cfd5 100644
--- a/packages/web-components/examples/codesandbox/components/horizontal-rule/cdn.html
+++ b/packages/web-components/examples/stackblitz/components/horizontal-rule/cdn.html
@@ -14,7 +14,7 @@
   <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style type="text/css">
     /* Suppress custom element until styles are loaded */
-    cds-horizontal-rule:not(:defined) {
+    c4d-horizontal-rule:not(:defined) {
       display: none;
     }
   </style>
@@ -25,7 +25,7 @@
 <div class="cds--grid">
   <div class="cds--row">
     <div class="cds--col-sm-4 cds--col-lg-12">
-      <cds-hr size="fluid"></cds-hr>
+      <c4d-hr size="fluid"></c4d-hr>
     </div>
   </div>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/horizontal-rule/index.html b/packages/web-components/examples/stackblitz/components/horizontal-rule/index.html
similarity index 91%
rename from packages/web-components/examples/codesandbox/components/horizontal-rule/index.html
rename to packages/web-components/examples/stackblitz/components/horizontal-rule/index.html
index bdd9c811036..ca7d632fa49 100644
--- a/packages/web-components/examples/codesandbox/components/horizontal-rule/index.html
+++ b/packages/web-components/examples/stackblitz/components/horizontal-rule/index.html
@@ -14,7 +14,7 @@
   <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style type="text/css">
     /* Suppress custom element until styles are loaded */
-    cds-horizontal-rule:not(:defined) {
+    c4d-horizontal-rule:not(:defined) {
       display: none;
     }
   </style>
@@ -24,7 +24,7 @@
 <div class="cds--grid">
   <div class="cds--row">
     <div class="cds--col-sm-4 cds--col-lg-12">
-      <cds-hr size="fluid"></cds-hr>
+      <c4d-hr size="fluid"></c4d-hr>
     </div>
   </div>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/horizontal-rule/package.json b/packages/web-components/examples/stackblitz/components/horizontal-rule/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/horizontal-rule/package.json
rename to packages/web-components/examples/stackblitz/components/horizontal-rule/package.json
diff --git a/packages/web-components/examples/codesandbox/components/horizontal-rule/src/index.js b/packages/web-components/examples/stackblitz/components/horizontal-rule/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/horizontal-rule/src/index.js
rename to packages/web-components/examples/stackblitz/components/horizontal-rule/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components/image/.gitignore b/packages/web-components/examples/stackblitz/components/image/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/image/.gitignore
rename to packages/web-components/examples/stackblitz/components/image/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components/image/cdn.html b/packages/web-components/examples/stackblitz/components/image/cdn.html
similarity index 80%
rename from packages/web-components/examples/codesandbox/components/image/cdn.html
rename to packages/web-components/examples/stackblitz/components/image/cdn.html
index 5aae45da80d..d9af42923d2 100644
--- a/packages/web-components/examples/codesandbox/components/image/cdn.html
+++ b/packages/web-components/examples/stackblitz/components/image/cdn.html
@@ -14,7 +14,7 @@
   <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style type="text/css">
     /* Suppress custom element until styles are loaded */
-    cds-image:not(:defined) {
+    c4d-image:not(:defined) {
       display: none;
     }
   </style>
@@ -25,31 +25,31 @@
 <div class="cds--grid">
   <div class="cds--row">
     <div class="cds--col-sm-4 cds--col-lg-12">
-      <cds-image
+      <c4d-image
         slot="image"
         alt="Image alt text"
         default-src="https://fpoimg.com/672x672?text=1:1&bg_color=ee5396&text_color=161616"
       >
-        <cds-image-item
+        <c4d-image-item
           media="(min-width: 1312px)"
           srcset="https://fpoimg.com/672x672?text=1:1&bg_color=ee5396&text_color=161616"
         >
-        </cds-image-item>
-        <cds-image-item
+        </c4d-image-item>
+        <c4d-image-item
           media="(min-width: 1056px)"
           srcset="https://fpoimg.com/600x300?text=2:1&bg_color=ee5396&text_color=161616"
         >
-        </cds-image-item>
-        <cds-image-item media="(min-width: 991px)"
+        </c4d-image-item>
+        <c4d-image-item media="(min-width: 991px)"
                         srcset="https://fpoimg.com/600x600?text=1:1&bg_color=ee5396&text_color=161616">
-        </cds-image-item>
-        <cds-image-item media="(min-width: 672px)"
+        </c4d-image-item>
+        <c4d-image-item media="(min-width: 672px)"
                         srcset="https://fpoimg.com/400x200?text=2:1&bg_color=ee5396&text_color=161616">
-        </cds-image-item>
-        <cds-image-item media="(min-width: 320px)"
+        </c4d-image-item>
+        <c4d-image-item media="(min-width: 320px)"
                         srcset="https://fpoimg.com/320x160?text=2:1&bg_color=ee5396&text_color=161616">
-        </cds-image-item>
-      </cds-image>
+        </c4d-image-item>
+      </c4d-image>
     </div>
   </div>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/image/index.html b/packages/web-components/examples/stackblitz/components/image/index.html
similarity index 78%
rename from packages/web-components/examples/codesandbox/components/image/index.html
rename to packages/web-components/examples/stackblitz/components/image/index.html
index c9ecd0eb54c..de7d73ff6c0 100644
--- a/packages/web-components/examples/codesandbox/components/image/index.html
+++ b/packages/web-components/examples/stackblitz/components/image/index.html
@@ -12,8 +12,9 @@
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
   <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-image:not(:defined) {
+    c4d-image:not(:defined) {
       display: none;
     }
   </style>
@@ -23,31 +24,31 @@
 <div class="cds--grid">
   <div class="cds--row">
     <div class="cds--col-sm-4 cds--col-lg-12">
-      <cds-image
+      <c4d-image
         slot="image"
         alt="Image alt text"
         default-src="https://fpoimg.com/672x672?text=1:1&bg_color=ee5396&text_color=161616"
       >
-        <cds-image-item
+        <c4d-image-item
           media="(min-width: 1312px)"
           srcset="https://fpoimg.com/672x672?text=1:1&bg_color=ee5396&text_color=161616"
         >
-        </cds-image-item>
-        <cds-image-item
+        </c4d-image-item>
+        <c4d-image-item
           media="(min-width: 1056px)"
           srcset="https://fpoimg.com/600x300?text=2:1&bg_color=ee5396&text_color=161616"
         >
-        </cds-image-item>
-        <cds-image-item media="(min-width: 991px)"
+        </c4d-image-item>
+        <c4d-image-item media="(min-width: 991px)"
                         srcset="https://fpoimg.com/600x600?text=1:1&bg_color=ee5396&text_color=161616">
-        </cds-image-item>
-        <cds-image-item media="(min-width: 672px)"
+        </c4d-image-item>
+        <c4d-image-item media="(min-width: 672px)"
                         srcset="https://fpoimg.com/400x200?text=2:1&bg_color=ee5396&text_color=161616">
-        </cds-image-item>
-        <cds-image-item media="(min-width: 320px)"
+        </c4d-image-item>
+        <c4d-image-item media="(min-width: 320px)"
                         srcset="https://fpoimg.com/320x160?text=2:1&bg_color=ee5396&text_color=161616">
-        </cds-image-item>
-      </cds-image>
+        </c4d-image-item>
+      </c4d-image>
     </div>
   </div>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/image/package.json b/packages/web-components/examples/stackblitz/components/image/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/image/package.json
rename to packages/web-components/examples/stackblitz/components/image/package.json
diff --git a/packages/web-components/examples/codesandbox/components/image/src/index.js b/packages/web-components/examples/stackblitz/components/image/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/image/src/index.js
rename to packages/web-components/examples/stackblitz/components/image/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components/in-page-banner/.gitignore b/packages/web-components/examples/stackblitz/components/in-page-banner/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/in-page-banner/.gitignore
rename to packages/web-components/examples/stackblitz/components/in-page-banner/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components/in-page-banner/.sassrc b/packages/web-components/examples/stackblitz/components/in-page-banner/.sassrc
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/in-page-banner/.sassrc
rename to packages/web-components/examples/stackblitz/components/in-page-banner/.sassrc
diff --git a/packages/web-components/examples/codesandbox/components/in-page-banner/cdn.html b/packages/web-components/examples/stackblitz/components/in-page-banner/cdn.html
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/in-page-banner/cdn.html
rename to packages/web-components/examples/stackblitz/components/in-page-banner/cdn.html
diff --git a/packages/web-components/examples/codesandbox/components/in-page-banner/index.html b/packages/web-components/examples/stackblitz/components/in-page-banner/index.html
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/in-page-banner/index.html
rename to packages/web-components/examples/stackblitz/components/in-page-banner/index.html
diff --git a/packages/web-components/examples/codesandbox/components/in-page-banner/package.json b/packages/web-components/examples/stackblitz/components/in-page-banner/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/in-page-banner/package.json
rename to packages/web-components/examples/stackblitz/components/in-page-banner/package.json
diff --git a/packages/web-components/examples/codesandbox/components/in-page-banner/src/index.js b/packages/web-components/examples/stackblitz/components/in-page-banner/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/in-page-banner/src/index.js
rename to packages/web-components/examples/stackblitz/components/in-page-banner/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components/in-page-banner/src/index.scss b/packages/web-components/examples/stackblitz/components/in-page-banner/src/index.scss
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/in-page-banner/src/index.scss
rename to packages/web-components/examples/stackblitz/components/in-page-banner/src/index.scss
diff --git a/packages/web-components/examples/codesandbox/components/leadspace-block/.gitignore b/packages/web-components/examples/stackblitz/components/leadspace-block/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/leadspace-block/.gitignore
rename to packages/web-components/examples/stackblitz/components/leadspace-block/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components/leadspace-block/.sassrc b/packages/web-components/examples/stackblitz/components/leadspace-block/.sassrc
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/leadspace-block/.sassrc
rename to packages/web-components/examples/stackblitz/components/leadspace-block/.sassrc
diff --git a/packages/web-components/examples/codesandbox/components/leadspace-block/cdn.html b/packages/web-components/examples/stackblitz/components/leadspace-block/cdn.html
similarity index 98%
rename from packages/web-components/examples/codesandbox/components/leadspace-block/cdn.html
rename to packages/web-components/examples/stackblitz/components/leadspace-block/cdn.html
index 39c84cc21f1..fbbf36f6ada 100644
--- a/packages/web-components/examples/codesandbox/components/leadspace-block/cdn.html
+++ b/packages/web-components/examples/stackblitz/components/leadspace-block/cdn.html
@@ -110,9 +110,9 @@
               </svg>
             </c4d-link-list-item>
           </c4d-link-list>
-          <c4d-button href="https://example.com" cta-type="local">
+          <cds-button href="https://example.com" cta-type="local">
             Contact sales
-          </c4d-button>
+          </cds-button>
         </c4d-leadspace-block-content>
       </c4d-leadspace-block>
     </div>
diff --git a/packages/web-components/examples/codesandbox/components/leadspace-block/index.html b/packages/web-components/examples/stackblitz/components/leadspace-block/index.html
similarity index 98%
rename from packages/web-components/examples/codesandbox/components/leadspace-block/index.html
rename to packages/web-components/examples/stackblitz/components/leadspace-block/index.html
index 6c854c02b54..5b8e6dd6965 100644
--- a/packages/web-components/examples/codesandbox/components/leadspace-block/index.html
+++ b/packages/web-components/examples/stackblitz/components/leadspace-block/index.html
@@ -108,9 +108,9 @@
                   </svg>
                 </c4d-link-list-item>
               </c4d-link-list>
-              <c4d-button href="https://example.com" cta-type="local">
+              <cds-button href="https://example.com" cta-type="local">
                 Contact sales
-              </c4d-button>
+              </cds-button>
             </c4d-leadspace-block-content>
           </c4d-leadspace-block>
         </div>
diff --git a/packages/web-components/examples/codesandbox/components/leadspace-block/package.json b/packages/web-components/examples/stackblitz/components/leadspace-block/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/leadspace-block/package.json
rename to packages/web-components/examples/stackblitz/components/leadspace-block/package.json
diff --git a/packages/web-components/examples/codesandbox/components/leadspace-block/src/index.js b/packages/web-components/examples/stackblitz/components/leadspace-block/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/leadspace-block/src/index.js
rename to packages/web-components/examples/stackblitz/components/leadspace-block/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components/leadspace-block/src/index.scss b/packages/web-components/examples/stackblitz/components/leadspace-block/src/index.scss
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/leadspace-block/src/index.scss
rename to packages/web-components/examples/stackblitz/components/leadspace-block/src/index.scss
diff --git a/packages/web-components/examples/codesandbox/components/leadspace-with-search/.gitignore b/packages/web-components/examples/stackblitz/components/leadspace-with-search/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/leadspace-with-search/.gitignore
rename to packages/web-components/examples/stackblitz/components/leadspace-with-search/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components/leadspace-with-search/.sassrc b/packages/web-components/examples/stackblitz/components/leadspace-with-search/.sassrc
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/leadspace-with-search/.sassrc
rename to packages/web-components/examples/stackblitz/components/leadspace-with-search/.sassrc
diff --git a/packages/web-components/examples/codesandbox/components/leadspace-with-search/cdn.html b/packages/web-components/examples/stackblitz/components/leadspace-with-search/cdn.html
similarity index 86%
rename from packages/web-components/examples/codesandbox/components/leadspace-with-search/cdn.html
rename to packages/web-components/examples/stackblitz/components/leadspace-with-search/cdn.html
index 61a950130f0..ea3b4669158 100644
--- a/packages/web-components/examples/codesandbox/components/leadspace-with-search/cdn.html
+++ b/packages/web-components/examples/stackblitz/components/leadspace-with-search/cdn.html
@@ -14,7 +14,7 @@
   <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style type="text/css">
     /* Suppress custom element until styles are loaded */
-    cds-leadspace-with-search:not(:defined) {
+    c4d-leadspace-with-search:not(:defined) {
       display: none;
     }
   </style>
@@ -28,16 +28,16 @@
       <h1>Hello World! 👋</h1>
 
       <c4d-leadspace-with-search>
-        <c4d-leadspace-heading>Find a product</cds-leadspace-heading>
+        <c4d-leadspace-heading>Find a product</c4d-leadspace-heading>
         <c4d-leadspace-with-search-copy
         >Automate your software release process with continuous
         delivery (CD)—the most critical part of adopting DevOps.
         Build, test, and deploy code changes quickly, ensuring
         software is always ready for deployment.
-      </cds-leadspace-with-search-copy>
+      </c4d-leadspace-with-search-copy>
         <c4d-search-with-typeahead slot='search' leadspace-search><c4d-search-with-typeahead/>
-        <c4d-hr slot='hr'></cds-hr>
-      </cds-leadspace-with-search>
+        <c4d-hr slot='hr'></c4d-hr>
+      </c4d-leadspace-with-search>
     </div>
   </div>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/leadspace-with-search/index.html b/packages/web-components/examples/stackblitz/components/leadspace-with-search/index.html
similarity index 85%
rename from packages/web-components/examples/codesandbox/components/leadspace-with-search/index.html
rename to packages/web-components/examples/stackblitz/components/leadspace-with-search/index.html
index 0e11c5f5893..a4f24680a41 100644
--- a/packages/web-components/examples/codesandbox/components/leadspace-with-search/index.html
+++ b/packages/web-components/examples/stackblitz/components/leadspace-with-search/index.html
@@ -19,16 +19,16 @@
       <div class="cds--row">
         <div class="cds--col-sm-4 cds--col-lg-12">
           <c4d-leadspace-with-search>
-            <c4d-leadspace-heading>Find a product</cds-leadspace-heading>
+            <c4d-leadspace-heading>Find a product</c4d-leadspace-heading>
             <c4d-leadspace-with-search-copy
             >Automate your software release process with continuous
             delivery (CD)—the most critical part of adopting DevOps.
             Build, test, and deploy code changes quickly, ensuring
             software is always ready for deployment.
-          </cds-leadspace-with-search-copy>
+          </c4d-leadspace-with-search-copy>
             <c4d-search-with-typeahead slot='search' leadspace-search><c4d-search-with-typeahead/>
-            <c4d-hr slot='hr'></cds-hr>
-          </cds-leadspace-with-search>
+            <c4d-hr slot='hr'></c4d-hr>
+          </c4d-leadspace-with-search>
         </div>
       </div>
     </div>
diff --git a/packages/web-components/examples/codesandbox/components/leadspace-with-search/package.json b/packages/web-components/examples/stackblitz/components/leadspace-with-search/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/leadspace-with-search/package.json
rename to packages/web-components/examples/stackblitz/components/leadspace-with-search/package.json
diff --git a/packages/web-components/examples/codesandbox/components/leadspace-with-search/src/index.js b/packages/web-components/examples/stackblitz/components/leadspace-with-search/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/leadspace-with-search/src/index.js
rename to packages/web-components/examples/stackblitz/components/leadspace-with-search/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components/leadspace-with-search/src/index.scss b/packages/web-components/examples/stackblitz/components/leadspace-with-search/src/index.scss
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/leadspace-with-search/src/index.scss
rename to packages/web-components/examples/stackblitz/components/leadspace-with-search/src/index.scss
diff --git a/packages/web-components/examples/codesandbox/components/leadspace/.gitignore b/packages/web-components/examples/stackblitz/components/leadspace/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/leadspace/.gitignore
rename to packages/web-components/examples/stackblitz/components/leadspace/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components/leadspace/.sassrc b/packages/web-components/examples/stackblitz/components/leadspace/.sassrc
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/leadspace/.sassrc
rename to packages/web-components/examples/stackblitz/components/leadspace/.sassrc
diff --git a/packages/web-components/examples/codesandbox/components/leadspace/cdn.html b/packages/web-components/examples/stackblitz/components/leadspace/cdn.html
similarity index 81%
rename from packages/web-components/examples/codesandbox/components/leadspace/cdn.html
rename to packages/web-components/examples/stackblitz/components/leadspace/cdn.html
index d8c9746f31b..209eafe0de4 100644
--- a/packages/web-components/examples/codesandbox/components/leadspace/cdn.html
+++ b/packages/web-components/examples/stackblitz/components/leadspace/cdn.html
@@ -35,16 +35,16 @@
     <div class="cds--grid">
       <div class="cds--row">
         <div class="cds--col-sm-8 cds--col-lg-16">
-          <cds-leadspace
+          <c4d-leadspace
             size="medium"
             alt="Image text"
             default-src="https://picsum.photos/id/1076/1056/480"
           >
-            <cds-leadspace-heading>Lead space title</cds-leadspace-heading>
+            <c4d-leadspace-heading>Lead space title</c4d-leadspace-heading>
             Use this area for a short line of copy to support the title
 
-            <cds-button-group slot="action">
-              <cds-button-group-item href="https://example.com">
+            <c4d-button-group slot="action">
+              <c4d-button-group-item href="https://example.com">
                 Button 1
                 <svg
                   focusable="false"
@@ -61,8 +61,8 @@
                     d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
                   ></path>
                 </svg>
-              </cds-button-group-item>
-              <cds-button-group-item href="https://example.com">
+              </c4d-button-group-item>
+              <c4d-button-group-item href="https://example.com">
                 Button 2
                 <svg
                   focusable="false"
@@ -79,37 +79,37 @@
                     d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
                   ></path>
                 </svg>
-              </cds-button-group-item>
-            </cds-button-group>
+              </c4d-button-group-item>
+            </c4d-button-group>
 
-            <cds-background-media
+            <c4d-background-media
               slot="image"
               alt="Image text"
               default-src="https://picsum.photos/id/1076/1056/480"
               opacity="100"
             >
-              <cds-image-item
+              <c4d-image-item
                 media="(min-width: 1312px)"
                 srcset="https://picsum.photos/id/1076/1056/480"
               >
-              </cds-image-item>
-              <cds-image-item
+              </c4d-image-item>
+              <c4d-image-item
                 media="(min-width: 672px)"
                 srcset="https://picsum.photos/id/1076/672/400"
               >
-              </cds-image-item>
-              <cds-image-item
+              </c4d-image-item>
+              <c4d-image-item
                 media="(min-width: 320px)"
                 srcset="https://picsum.photos/id/1076/672/400"
               >
-              </cds-image-item>
-              <cds-image-item
+              </c4d-image-item>
+              <c4d-image-item
                 media="(min-width: 0px)"
                 srcset="https://picsum.photos/id/1076/320/370"
               >
-              </cds-image-item>
-            </cds-background-media>
-          </cds-leadspace>
+              </c4d-image-item>
+            </c4d-background-media>
+          </c4d-leadspace>
         </div>
       </div>
     </div>
diff --git a/packages/web-components/examples/codesandbox/components/leadspace/index.html b/packages/web-components/examples/stackblitz/components/leadspace/index.html
similarity index 79%
rename from packages/web-components/examples/codesandbox/components/leadspace/index.html
rename to packages/web-components/examples/stackblitz/components/leadspace/index.html
index 6b4c20b239b..b75ccc71b1f 100644
--- a/packages/web-components/examples/codesandbox/components/leadspace/index.html
+++ b/packages/web-components/examples/stackblitz/components/leadspace/index.html
@@ -27,16 +27,16 @@
     <div class="cds--grid">
       <div class="cds--row">
         <div class="cds--col-sm-8 cds--col-lg-16">
-          <cds-leadspace
+          <c4d-leadspace
             size="medium"
             alt="Image text"
             default-src="https://picsum.photos/id/1076/1056/480"
           >
-            <cds-leadspace-heading>Lead space title</cds-leadspace-heading>
+            <c4d-leadspace-heading>Lead space title</c4d-leadspace-heading>
             Use this area for a short line of copy to support the title
 
-            <cds-button-group slot="action">
-              <cds-button-group-item href="https://example.com">
+            <c4d-button-group slot="action">
+              <c4d-button-group-item href="https://example.com">
                 Button 1
                 <svg
                   focusable="false"
@@ -53,8 +53,8 @@
                     d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
                   ></path>
                 </svg>
-              </cds-button-group-item>
-              <cds-button-group-item href="https://example.com">
+              </c4d-button-group-item>
+              <c4d-button-group-item href="https://example.com">
                 Button 2
                 <svg
                   focusable="false"
@@ -71,37 +71,37 @@
                     d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
                   ></path>
                 </svg>
-              </cds-button-group-item>
-            </cds-button-group>
+              </c4d-button-group-item>
+            </c4d-button-group>
 
-            <cds-background-media
+            <c4d-background-media
               slot="image"
               alt="Image text"
               default-src="https://picsum.photos/id/1076/1056/480"
               opacity="100"
             >
-              <cds-image-item
+              <c4d-image-item
                 media="(min-width: 1312px)"
                 srcset="https://picsum.photos/id/1076/1056/480"
               >
-              </cds-image-item>
-              <cds-image-item
+              </c4d-image-item>
+              <c4d-image-item
                 media="(min-width: 672px)"
                 srcset="https://picsum.photos/id/1076/672/400"
               >
-              </cds-image-item>
-              <cds-image-item
+              </c4d-image-item>
+              <c4d-image-item
                 media="(min-width: 320px)"
                 srcset="https://picsum.photos/id/1076/672/400"
               >
-              </cds-image-item>
-              <cds-image-item
+              </c4d-image-item>
+              <c4d-image-item
                 media="(min-width: 0px)"
                 srcset="https://picsum.photos/id/1076/320/370"
               >
-              </cds-image-item>
-            </cds-background-media>
-          </cds-leadspace>
+              </c4d-image-item>
+            </c4d-background-media>
+          </c4d-leadspace>
         </div>
       </div>
     </div>
diff --git a/packages/web-components/examples/codesandbox/components/leadspace/package.json b/packages/web-components/examples/stackblitz/components/leadspace/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/leadspace/package.json
rename to packages/web-components/examples/stackblitz/components/leadspace/package.json
diff --git a/packages/web-components/examples/codesandbox/components/leadspace/src/index.js b/packages/web-components/examples/stackblitz/components/leadspace/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/leadspace/src/index.js
rename to packages/web-components/examples/stackblitz/components/leadspace/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components/leadspace/src/index.scss b/packages/web-components/examples/stackblitz/components/leadspace/src/index.scss
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/leadspace/src/index.scss
rename to packages/web-components/examples/stackblitz/components/leadspace/src/index.scss
diff --git a/packages/web-components/examples/codesandbox/components/leaving-ibm/.gitignore b/packages/web-components/examples/stackblitz/components/leaving-ibm/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/leaving-ibm/.gitignore
rename to packages/web-components/examples/stackblitz/components/leaving-ibm/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components/leaving-ibm/.sassrc b/packages/web-components/examples/stackblitz/components/leaving-ibm/.sassrc
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/leaving-ibm/.sassrc
rename to packages/web-components/examples/stackblitz/components/leaving-ibm/.sassrc
diff --git a/packages/web-components/examples/codesandbox/components/leaving-ibm/cdn.html b/packages/web-components/examples/stackblitz/components/leaving-ibm/cdn.html
similarity index 88%
rename from packages/web-components/examples/codesandbox/components/leaving-ibm/cdn.html
rename to packages/web-components/examples/stackblitz/components/leaving-ibm/cdn.html
index d5879a354fe..67c2653d053 100644
--- a/packages/web-components/examples/codesandbox/components/leaving-ibm/cdn.html
+++ b/packages/web-components/examples/stackblitz/components/leaving-ibm/cdn.html
@@ -16,7 +16,7 @@
   <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style type="text/css">
     /* Suppress custom element until styles are loaded */
-    cds-leaving-ibm-container:not(:defined) {
+    c4d-leaving-ibm-container:not(:defined) {
       display: none;
     }
   </style>
@@ -27,8 +27,8 @@
 <div class="cds--grid">
   <div class="cds--row">
     <div class="cds--col-sm-4 cds--col-lg-12">
-      <cds-leaving-ibm-container open="true"
-                                 href="https://www.example.com/"></cds-leaving-ibm-container>
+      <c4d-leaving-ibm-container open="true"
+                                 href="https://www.example.com/"></c4d-leaving-ibm-container>
     </div>
   </div>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/leaving-ibm/index.html b/packages/web-components/examples/stackblitz/components/leaving-ibm/index.html
similarity index 86%
rename from packages/web-components/examples/codesandbox/components/leaving-ibm/index.html
rename to packages/web-components/examples/stackblitz/components/leaving-ibm/index.html
index 9a1a64bf19f..e47af076d1f 100644
--- a/packages/web-components/examples/codesandbox/components/leaving-ibm/index.html
+++ b/packages/web-components/examples/stackblitz/components/leaving-ibm/index.html
@@ -21,6 +21,6 @@
     <script src="src/index.js"></script>
   </head>
   <body>
-    <cds-leaving-ibm-container open="true" href="https://www.example.com/"></cds-leaving-ibm-container>
+    <c4d-leaving-ibm-container open="true" href="https://www.example.com/"></c4d-leaving-ibm-container>
   </body>
 </html>
diff --git a/packages/web-components/examples/codesandbox/components/leaving-ibm/package.json b/packages/web-components/examples/stackblitz/components/leaving-ibm/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/leaving-ibm/package.json
rename to packages/web-components/examples/stackblitz/components/leaving-ibm/package.json
diff --git a/packages/web-components/examples/codesandbox/components/leaving-ibm/src/index.js b/packages/web-components/examples/stackblitz/components/leaving-ibm/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/leaving-ibm/src/index.js
rename to packages/web-components/examples/stackblitz/components/leaving-ibm/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components/lightbox-media-viewer/.gitignore b/packages/web-components/examples/stackblitz/components/lightbox-media-viewer/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/lightbox-media-viewer/.gitignore
rename to packages/web-components/examples/stackblitz/components/lightbox-media-viewer/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components/lightbox-media-viewer/cdn.html b/packages/web-components/examples/stackblitz/components/lightbox-media-viewer/cdn.html
similarity index 81%
rename from packages/web-components/examples/codesandbox/components/lightbox-media-viewer/cdn.html
rename to packages/web-components/examples/stackblitz/components/lightbox-media-viewer/cdn.html
index 5963bd94dc7..0e36faedbba 100644
--- a/packages/web-components/examples/codesandbox/components/lightbox-media-viewer/cdn.html
+++ b/packages/web-components/examples/stackblitz/components/lightbox-media-viewer/cdn.html
@@ -14,7 +14,7 @@
   <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css" />
   <style type="text/css">
     /* Suppress custom element until styles are loaded */
-    cds-button-expressive:not(:defined), cds-lightbox-video-player-container:not(:defined) {
+    c4d-button-expressive:not(:defined), cds-lightbox-video-player-container:not(:defined) {
       display: none;
     }
   </style>
@@ -23,9 +23,9 @@
 </head>
 <body>
 <div id="app">
-  <cds-button-expressive id="open-modal-btn">Open modal</cds-button-expressive>
+  <c4d-button-expressive id="open-modal-btn">Open modal</c4d-button-expressive>
 </div>
-<cds-lightbox-video-player-container id="my-video" video-id="1_9h94wo6b"> </cds-lightbox-video-player-container>
+<c4d-lightbox-video-player-container id="my-video" video-id="1_9h94wo6b"> </c4d-lightbox-video-player-container>
 
 <script type="text/javascript">
   document.getElementById('open-modal-btn').addEventListener('click', () => {
diff --git a/packages/web-components/examples/codesandbox/components/lightbox-media-viewer/index.html b/packages/web-components/examples/stackblitz/components/lightbox-media-viewer/index.html
similarity index 89%
rename from packages/web-components/examples/codesandbox/components/lightbox-media-viewer/index.html
rename to packages/web-components/examples/stackblitz/components/lightbox-media-viewer/index.html
index f1687e1e63d..bb5fe6e4a3a 100644
--- a/packages/web-components/examples/codesandbox/components/lightbox-media-viewer/index.html
+++ b/packages/web-components/examples/stackblitz/components/lightbox-media-viewer/index.html
@@ -24,7 +24,7 @@
     <div id="app">
       <cds-button id="open-modal-btn">Open modal</cds-button>
     </div>
-    <cds-lightbox-video-player-container id="my-video" video-id="1_9h94wo6b"> </cds-lightbox-video-player-container>
+    <c4d-lightbox-video-player-container id="my-video" video-id="1_9h94wo6b"> </c4d-lightbox-video-player-container>
 
     <script type="text/javascript">
       document.getElementById('open-modal-btn').addEventListener('click', () => {
diff --git a/packages/web-components/examples/codesandbox/components/lightbox-media-viewer/package.json b/packages/web-components/examples/stackblitz/components/lightbox-media-viewer/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/lightbox-media-viewer/package.json
rename to packages/web-components/examples/stackblitz/components/lightbox-media-viewer/package.json
diff --git a/packages/web-components/examples/codesandbox/components/lightbox-media-viewer/src/index.js b/packages/web-components/examples/stackblitz/components/lightbox-media-viewer/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/lightbox-media-viewer/src/index.js
rename to packages/web-components/examples/stackblitz/components/lightbox-media-viewer/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components/link-list-section/.gitignore b/packages/web-components/examples/stackblitz/components/link-list-section/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/link-list-section/.gitignore
rename to packages/web-components/examples/stackblitz/components/link-list-section/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components/link-list-section/.sassrc b/packages/web-components/examples/stackblitz/components/link-list-section/.sassrc
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/link-list-section/.sassrc
rename to packages/web-components/examples/stackblitz/components/link-list-section/.sassrc
diff --git a/packages/web-components/examples/codesandbox/components/link-list-section/cdn.html b/packages/web-components/examples/stackblitz/components/link-list-section/cdn.html
similarity index 84%
rename from packages/web-components/examples/codesandbox/components/link-list-section/cdn.html
rename to packages/web-components/examples/stackblitz/components/link-list-section/cdn.html
index 5c5cff45c59..154b8267773 100644
--- a/packages/web-components/examples/codesandbox/components/link-list-section/cdn.html
+++ b/packages/web-components/examples/stackblitz/components/link-list-section/cdn.html
@@ -15,7 +15,7 @@
   <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style type="text/css">
     /* Suppress custom element until styles are loaded */
-    cds-link-list-section:not(:defined) {
+    c4d-link-list-section:not(:defined) {
       display: none;
     }
   </style>
@@ -25,10 +25,10 @@
 <div class="cds--grid">
   <div class="cds--row">
     <div class="cds--col-sm-8 cds--col-lg-12 cds--offset-lg-4">
-      <cds-link-list-section>
-        <cds-link-list-heading>Lorem ipsum dolor sit amet</cds-link-list-heading>
-        <cds-link-list>
-          <cds-link-list-item href="https://example.com">
+      <c4d-link-list-section>
+        <c4d-link-list-heading>Lorem ipsum dolor sit amet</c4d-link-list-heading>
+        <c4d-link-list>
+          <c4d-link-list-item href="https://example.com">
             Learn more about Kubernetes
             <svg
               slot="icon"
@@ -43,8 +43,8 @@
             >
               <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
             </svg>
-          </cds-link-list-item>
-          <cds-link-list-item href="https://example.com">
+          </c4d-link-list-item>
+          <c4d-link-list-item href="https://example.com">
             Containerization A Complete Guide
             <svg
               slot="icon"
@@ -59,8 +59,8 @@
             >
               <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
             </svg>
-          </cds-link-list-item>
-          <cds-link-list-item href="https://example.com">
+          </c4d-link-list-item>
+          <c4d-link-list-item href="https://example.com">
             Microservices and containers
             <svg
               slot="icon"
@@ -75,8 +75,8 @@
             >
               <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
             </svg>
-          </cds-link-list-item>
-          <cds-link-list-item href="https://example.com">
+          </c4d-link-list-item>
+          <c4d-link-list-item href="https://example.com">
             Learn more about Kubernetes
             <svg
               slot="icon"
@@ -91,8 +91,8 @@
             >
               <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
             </svg>
-          </cds-link-list-item>
-          <cds-link-list-item href="https://example.com">
+          </c4d-link-list-item>
+          <c4d-link-list-item href="https://example.com">
             Containerization A Complete Guide
             <svg
               slot="icon"
@@ -107,8 +107,8 @@
             >
               <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
             </svg>
-          </cds-link-list-item>
-          <cds-link-list-item href="https://example.com">
+          </c4d-link-list-item>
+          <c4d-link-list-item href="https://example.com">
             Microservices and containers
             <svg
               slot="icon"
@@ -123,9 +123,9 @@
             >
               <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
             </svg>
-          </cds-link-list-item>
-        </cds-link-list>
-      </cds-link-list-section>
+          </c4d-link-list-item>
+        </c4d-link-list>
+      </c4d-link-list-section>
     </div>
   </div>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/link-list-section/index.html b/packages/web-components/examples/stackblitz/components/link-list-section/index.html
similarity index 84%
rename from packages/web-components/examples/codesandbox/components/link-list-section/index.html
rename to packages/web-components/examples/stackblitz/components/link-list-section/index.html
index 711d013dc7e..a675a3ef71c 100644
--- a/packages/web-components/examples/codesandbox/components/link-list-section/index.html
+++ b/packages/web-components/examples/stackblitz/components/link-list-section/index.html
@@ -24,10 +24,10 @@
     <div class="cds--grid">
       <div class="cds--row">
         <div class="cds--col-sm-8 cds--col-lg-12 cds--offset-lg-4">
-          <cds-link-list-section>
-            <cds-link-list-heading>Lorem ipsum dolor sit amet</cds-link-list-heading>
-            <cds-link-list>
-              <cds-link-list-item href="https://example.com">
+          <c4d-link-list-section>
+            <c4d-link-list-heading>Lorem ipsum dolor sit amet</c4d-link-list-heading>
+            <c4d-link-list>
+              <c4d-link-list-item href="https://example.com">
                 Learn more about Kubernetes
                 <svg
                   slot="icon"
@@ -42,8 +42,8 @@
                 >
                   <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
                 </svg>
-              </cds-link-list-item>
-              <cds-link-list-item href="https://example.com">
+              </c4d-link-list-item>
+              <c4d-link-list-item href="https://example.com">
                 Containerization A Complete Guide
                 <svg
                   slot="icon"
@@ -58,8 +58,8 @@
                 >
                   <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
                 </svg>
-              </cds-link-list-item>
-              <cds-link-list-item href="https://example.com">
+              </c4d-link-list-item>
+              <c4d-link-list-item href="https://example.com">
                 Microservices and containers
                 <svg
                   slot="icon"
@@ -74,8 +74,8 @@
                 >
                   <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
                 </svg>
-              </cds-link-list-item>
-              <cds-link-list-item href="https://example.com">
+              </c4d-link-list-item>
+              <c4d-link-list-item href="https://example.com">
                 Learn more about Kubernetes
                 <svg
                   slot="icon"
@@ -90,8 +90,8 @@
                 >
                   <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
                 </svg>
-              </cds-link-list-item>
-              <cds-link-list-item href="https://example.com">
+              </c4d-link-list-item>
+              <c4d-link-list-item href="https://example.com">
                 Containerization A Complete Guide
                 <svg
                   slot="icon"
@@ -106,8 +106,8 @@
                 >
                   <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
                 </svg>
-              </cds-link-list-item>
-              <cds-link-list-item href="https://example.com">
+              </c4d-link-list-item>
+              <c4d-link-list-item href="https://example.com">
                 Microservices and containers
                 <svg
                   slot="icon"
@@ -122,9 +122,9 @@
                 >
                   <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
                 </svg>
-              </cds-link-list-item>
-            </cds-link-list>
-          </cds-link-list-section>
+              </c4d-link-list-item>
+            </c4d-link-list>
+          </c4d-link-list-section>
         </div>
       </div>
     </div>
diff --git a/packages/web-components/examples/codesandbox/components/link-list-section/package.json b/packages/web-components/examples/stackblitz/components/link-list-section/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/link-list-section/package.json
rename to packages/web-components/examples/stackblitz/components/link-list-section/package.json
diff --git a/packages/web-components/examples/codesandbox/components/link-list-section/src/index.js b/packages/web-components/examples/stackblitz/components/link-list-section/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/link-list-section/src/index.js
rename to packages/web-components/examples/stackblitz/components/link-list-section/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components/link-list-section/src/index.scss b/packages/web-components/examples/stackblitz/components/link-list-section/src/index.scss
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/link-list-section/src/index.scss
rename to packages/web-components/examples/stackblitz/components/link-list-section/src/index.scss
diff --git a/packages/web-components/examples/codesandbox/components/link-list/.gitignore b/packages/web-components/examples/stackblitz/components/link-list/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/link-list/.gitignore
rename to packages/web-components/examples/stackblitz/components/link-list/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components/link-list/.sassrc b/packages/web-components/examples/stackblitz/components/link-list/.sassrc
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/link-list/.sassrc
rename to packages/web-components/examples/stackblitz/components/link-list/.sassrc
diff --git a/packages/web-components/examples/codesandbox/components/link-list/cdn.html b/packages/web-components/examples/stackblitz/components/link-list/cdn.html
similarity index 98%
rename from packages/web-components/examples/codesandbox/components/link-list/cdn.html
rename to packages/web-components/examples/stackblitz/components/link-list/cdn.html
index c187065a2a2..c86d2a8139e 100644
--- a/packages/web-components/examples/codesandbox/components/link-list/cdn.html
+++ b/packages/web-components/examples/stackblitz/components/link-list/cdn.html
@@ -15,7 +15,7 @@
   <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style type="text/css">
     /* Suppress custom element until styles are loaded */
-    cds-link-list:not(:defined) {
+    c4d-link-list:not(:defined) {
       display: none;
     }
   </style>
diff --git a/packages/web-components/examples/codesandbox/components/link-list/index.html b/packages/web-components/examples/stackblitz/components/link-list/index.html
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/link-list/index.html
rename to packages/web-components/examples/stackblitz/components/link-list/index.html
diff --git a/packages/web-components/examples/codesandbox/components/link-list/package.json b/packages/web-components/examples/stackblitz/components/link-list/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/link-list/package.json
rename to packages/web-components/examples/stackblitz/components/link-list/package.json
diff --git a/packages/web-components/examples/codesandbox/components/link-list/src/index.js b/packages/web-components/examples/stackblitz/components/link-list/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/link-list/src/index.js
rename to packages/web-components/examples/stackblitz/components/link-list/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components/link-list/src/index.scss b/packages/web-components/examples/stackblitz/components/link-list/src/index.scss
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/link-list/src/index.scss
rename to packages/web-components/examples/stackblitz/components/link-list/src/index.scss
diff --git a/packages/web-components/examples/codesandbox/components/link-with-icon/.gitignore b/packages/web-components/examples/stackblitz/components/link-with-icon/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/link-with-icon/.gitignore
rename to packages/web-components/examples/stackblitz/components/link-with-icon/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components/link-with-icon/cdn.html b/packages/web-components/examples/stackblitz/components/link-with-icon/cdn.html
similarity index 93%
rename from packages/web-components/examples/codesandbox/components/link-with-icon/cdn.html
rename to packages/web-components/examples/stackblitz/components/link-with-icon/cdn.html
index 0e1194ee1da..32010d315a2 100644
--- a/packages/web-components/examples/codesandbox/components/link-with-icon/cdn.html
+++ b/packages/web-components/examples/stackblitz/components/link-with-icon/cdn.html
@@ -16,7 +16,7 @@
   <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style type="text/css">
     /* Suppress custom element until styles are loaded */
-    cds-link-with-icon:not(:defined) {
+    c4d-link-with-icon:not(:defined) {
       display: none;
     }
   </style>
@@ -27,7 +27,7 @@
 <div class="cds--grid">
   <div class="cds--row">
     <div class="cds--col-sm-4 cds--col-lg-12">
-      <cds-link-with-icon
+      <c4d-link-with-icon
         href="https://www.ibm.com/standards/carbon">
         Link text
         <svg
@@ -43,7 +43,7 @@
           <path
             d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
         </svg>
-      </cds-link-with-icon>
+      </c4d-link-with-icon>
     </div>
   </div>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/link-with-icon/index.html b/packages/web-components/examples/stackblitz/components/link-with-icon/index.html
similarity index 93%
rename from packages/web-components/examples/codesandbox/components/link-with-icon/index.html
rename to packages/web-components/examples/stackblitz/components/link-with-icon/index.html
index 177c0d4c98f..605f7632d01 100644
--- a/packages/web-components/examples/codesandbox/components/link-with-icon/index.html
+++ b/packages/web-components/examples/stackblitz/components/link-with-icon/index.html
@@ -16,7 +16,7 @@
   <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style type="text/css">
     /* Suppress custom element until styles are loaded */
-    cds-link-with-icon:not(:defined) {
+    c4d-link-with-icon:not(:defined) {
       display: none;
     }
   </style>
@@ -26,7 +26,7 @@
 <div class="cds--grid">
   <div class="cds--row">
     <div class="cds--col-sm-4 cds--col-lg-12">
-      <cds-link-with-icon
+      <c4d-link-with-icon
         href="https://www.ibm.com/standards/carbon">
         Link text
         <svg
@@ -42,7 +42,7 @@
           <path
             d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
         </svg>
-      </cds-link-with-icon>
+      </c4d-link-with-icon>
     </div>
   </div>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/link-with-icon/package.json b/packages/web-components/examples/stackblitz/components/link-with-icon/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/link-with-icon/package.json
rename to packages/web-components/examples/stackblitz/components/link-with-icon/package.json
diff --git a/packages/web-components/examples/codesandbox/components/link-with-icon/src/index.js b/packages/web-components/examples/stackblitz/components/link-with-icon/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/link-with-icon/src/index.js
rename to packages/web-components/examples/stackblitz/components/link-with-icon/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components/locale-modal/.gitignore b/packages/web-components/examples/stackblitz/components/locale-modal/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/locale-modal/.gitignore
rename to packages/web-components/examples/stackblitz/components/locale-modal/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components/locale-modal/cdn.html b/packages/web-components/examples/stackblitz/components/locale-modal/cdn.html
similarity index 98%
rename from packages/web-components/examples/codesandbox/components/locale-modal/cdn.html
rename to packages/web-components/examples/stackblitz/components/locale-modal/cdn.html
index 95d39c4e96f..5a2ca0dc770 100644
--- a/packages/web-components/examples/codesandbox/components/locale-modal/cdn.html
+++ b/packages/web-components/examples/stackblitz/components/locale-modal/cdn.html
@@ -150,7 +150,7 @@
   <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style type="text/css">
     /* Suppress custom element until styles are loaded */
-    cds-button-expressive:not(:defined), cds-locale-modal-container:not(:defined) {
+    c4d-button-expressive:not(:defined), cds-locale-modal-container:not(:defined) {
       display: none;
     }
   </style>
@@ -163,12 +163,12 @@
 <div class="cds--grid">
   <div class="cds--row">
     <div class="cds--col-sm-4 cds--col-lg-12">
-      <cds-button-expressive id="open-modal-btn">Open modal
-      </cds-button-expressive>
+      <c4d-button-expressive id="open-modal-btn">Open modal
+      </c4d-button-expressive>
     </div>
   </div>
 </div>
-<cds-locale-modal-container id="modal"></cds-locale-modal-container>
+<c4d-locale-modal-container id="modal"></c4d-locale-modal-container>
 </body>
 <script type="text/javascript">
   document.getElementById('open-modal-btn').addEventListener('click', () => {
diff --git a/packages/web-components/examples/codesandbox/components/locale-modal/index.html b/packages/web-components/examples/stackblitz/components/locale-modal/index.html
similarity index 98%
rename from packages/web-components/examples/codesandbox/components/locale-modal/index.html
rename to packages/web-components/examples/stackblitz/components/locale-modal/index.html
index ffdc8d86f56..c858962d7af 100644
--- a/packages/web-components/examples/codesandbox/components/locale-modal/index.html
+++ b/packages/web-components/examples/stackblitz/components/locale-modal/index.html
@@ -150,7 +150,7 @@
   <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style type="text/css">
     /* Suppress custom element until styles are loaded */
-    cds-button-expressive:not(:defined), cds-locale-modal-container:not(:defined) {
+    c4d-button-expressive:not(:defined), cds-locale-modal-container:not(:defined) {
       display: none;
     }
   </style>
@@ -160,12 +160,12 @@
 <div class="cds--grid">
   <div class="cds--row">
     <div class="cds--col-sm-4 cds--col-lg-12">
-      <cds-button-expressive id="open-modal-btn">Open modal
-      </cds-button-expressive>
+      <c4d-button-expressive id="open-modal-btn">Open modal
+      </c4d-button-expressive>
     </div>
   </div>
 </div>
-<cds-locale-modal-container id="modal"></cds-locale-modal-container>
+<c4d-locale-modal-container id="modal"></c4d-locale-modal-container>
 </body>
 <script type="text/javascript">
   document.getElementById('open-modal-btn').addEventListener('click', () => {
diff --git a/packages/web-components/examples/codesandbox/components/locale-modal/package.json b/packages/web-components/examples/stackblitz/components/locale-modal/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/locale-modal/package.json
rename to packages/web-components/examples/stackblitz/components/locale-modal/package.json
diff --git a/packages/web-components/examples/codesandbox/components/locale-modal/src/index.js b/packages/web-components/examples/stackblitz/components/locale-modal/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/locale-modal/src/index.js
rename to packages/web-components/examples/stackblitz/components/locale-modal/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components/logo-grid/.gitignore b/packages/web-components/examples/stackblitz/components/logo-grid/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/logo-grid/.gitignore
rename to packages/web-components/examples/stackblitz/components/logo-grid/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components/logo-grid/cdn.html b/packages/web-components/examples/stackblitz/components/logo-grid/cdn.html
similarity index 74%
rename from packages/web-components/examples/codesandbox/components/logo-grid/cdn.html
rename to packages/web-components/examples/stackblitz/components/logo-grid/cdn.html
index da7d0dadfc1..6e89fe24874 100644
--- a/packages/web-components/examples/codesandbox/components/logo-grid/cdn.html
+++ b/packages/web-components/examples/stackblitz/components/logo-grid/cdn.html
@@ -16,7 +16,7 @@
   <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style type="text/css">
     /* Suppress custom element until styles are loaded */
-    cds-logo-grid:not(:defined) {
+    c4d-logo-grid:not(:defined) {
       display: none;
     }
   </style>
@@ -27,47 +27,47 @@
 <div class="cds--grid">
   <div class="cds--row">
     <div class="cds--col-sm-4 cds--col-lg-12">
-      <cds-logo-grid logo-count="3" logo-ratio="2:1">
-        <cds-content-block-heading>
+      <c4d-logo-grid logo-count="3" logo-ratio="2:1">
+        <c4d-content-block-heading>
           This is a heading
-        </cds-content-block-heading>
-        <cds-logo-grid-item
+        </c4d-content-block-heading>
+        <c4d-logo-grid-item
           default-src="https://fpoimg.com/288x216?text=Example%20Logo&bg_color=ee5396&text_color=161616"
           alt="Alt text"
-        ></cds-logo-grid-item>
-        <cds-logo-grid-item
+        ></c4d-logo-grid-item>
+        <c4d-logo-grid-item
           default-src="https://fpoimg.com/288x216?text=Example%20Logo&bg_color=ee5396&text_color=161616"
           alt="Alt text"
-        ></cds-logo-grid-item>
-        <cds-logo-grid-item
+        ></c4d-logo-grid-item>
+        <c4d-logo-grid-item
           default-src="https://fpoimg.com/288x216?text=Example%20Logo&bg_color=ee5396&text_color=161616"
           alt="Alt text"
-        ></cds-logo-grid-item>
-        <cds-logo-grid-item
+        ></c4d-logo-grid-item>
+        <c4d-logo-grid-item
           default-src="https://fpoimg.com/288x216?text=Example%20Logo&bg_color=ee5396&text_color=161616"
           alt="Alt text"
-        ></cds-logo-grid-item>
-        <cds-logo-grid-item
+        ></c4d-logo-grid-item>
+        <c4d-logo-grid-item
           default-src="https://fpoimg.com/288x216?text=Example%20Logo&bg_color=ee5396&text_color=161616"
           alt="Alt text"
-        ></cds-logo-grid-item>
-        <cds-logo-grid-item
+        ></c4d-logo-grid-item>
+        <c4d-logo-grid-item
           default-src="https://fpoimg.com/288x216?text=Example%20Logo&bg_color=ee5396&text_color=161616"
           alt="Alt text"
-        ></cds-logo-grid-item>
-        <cds-logo-grid-item
+        ></c4d-logo-grid-item>
+        <c4d-logo-grid-item
           default-src="https://fpoimg.com/288x216?text=Example%20Logo&bg_color=ee5396&text_color=161616"
           alt="Alt text"
-        ></cds-logo-grid-item>
-        <cds-logo-grid-item
+        ></c4d-logo-grid-item>
+        <c4d-logo-grid-item
           default-src="https://fpoimg.com/288x216?text=Example%20Logo&bg_color=ee5396&text_color=161616"
           alt="Alt text"
-        ></cds-logo-grid-item>
-        <cds-logo-grid-item
+        ></c4d-logo-grid-item>
+        <c4d-logo-grid-item
           default-src="https://fpoimg.com/288x216?text=Example%20Logo&bg_color=ee5396&text_color=161616"
           alt="Alt text"
-        ></cds-logo-grid-item>
-      </cds-logo-grid>
+        ></c4d-logo-grid-item>
+      </c4d-logo-grid>
     </div>
   </div>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/logo-grid/index.html b/packages/web-components/examples/stackblitz/components/logo-grid/index.html
similarity index 73%
rename from packages/web-components/examples/codesandbox/components/logo-grid/index.html
rename to packages/web-components/examples/stackblitz/components/logo-grid/index.html
index 59c8ef12a64..7f54ac47d58 100644
--- a/packages/web-components/examples/codesandbox/components/logo-grid/index.html
+++ b/packages/web-components/examples/stackblitz/components/logo-grid/index.html
@@ -16,7 +16,7 @@
   <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style type="text/css">
     /* Suppress custom element until styles are loaded */
-    cds-logo-grid:not(:defined) {
+    c4d-logo-grid:not(:defined) {
       display: none;
     }
   </style>
@@ -26,47 +26,47 @@
 <div class="cds--grid">
   <div class="cds--row">
     <div class="cds--col-sm-4 cds--col-lg-12">
-      <cds-logo-grid logo-count="3" logo-ratio="2:1">
-        <cds-content-block-heading>
+      <c4d-logo-grid logo-count="3" logo-ratio="2:1">
+        <c4d-content-block-heading>
           This is a heading
-        </cds-content-block-heading>
-        <cds-logo-grid-item
+        </c4d-content-block-heading>
+        <c4d-logo-grid-item
           default-src="https://fpoimg.com/288x216?text=Example%20Logo&bg_color=ee5396&text_color=161616"
           alt="Alt text"
-        ></cds-logo-grid-item>
-        <cds-logo-grid-item
+        ></c4d-logo-grid-item>
+        <c4d-logo-grid-item
           default-src="https://fpoimg.com/288x216?text=Example%20Logo&bg_color=ee5396&text_color=161616"
           alt="Alt text"
-        ></cds-logo-grid-item>
-        <cds-logo-grid-item
+        ></c4d-logo-grid-item>
+        <c4d-logo-grid-item
           default-src="https://fpoimg.com/288x216?text=Example%20Logo&bg_color=ee5396&text_color=161616"
           alt="Alt text"
-        ></cds-logo-grid-item>
-        <cds-logo-grid-item
+        ></c4d-logo-grid-item>
+        <c4d-logo-grid-item
           default-src="https://fpoimg.com/288x216?text=Example%20Logo&bg_color=ee5396&text_color=161616"
           alt="Alt text"
-        ></cds-logo-grid-item>
-        <cds-logo-grid-item
+        ></c4d-logo-grid-item>
+        <c4d-logo-grid-item
           default-src="https://fpoimg.com/288x216?text=Example%20Logo&bg_color=ee5396&text_color=161616"
           alt="Alt text"
-        ></cds-logo-grid-item>
-        <cds-logo-grid-item
+        ></c4d-logo-grid-item>
+        <c4d-logo-grid-item
           default-src="https://fpoimg.com/288x216?text=Example%20Logo&bg_color=ee5396&text_color=161616"
           alt="Alt text"
-        ></cds-logo-grid-item>
-        <cds-logo-grid-item
+        ></c4d-logo-grid-item>
+        <c4d-logo-grid-item
           default-src="https://fpoimg.com/288x216?text=Example%20Logo&bg_color=ee5396&text_color=161616"
           alt="Alt text"
-        ></cds-logo-grid-item>
-        <cds-logo-grid-item
+        ></c4d-logo-grid-item>
+        <c4d-logo-grid-item
           default-src="https://fpoimg.com/288x216?text=Example%20Logo&bg_color=ee5396&text_color=161616"
           alt="Alt text"
-        ></cds-logo-grid-item>
-        <cds-logo-grid-item
+        ></c4d-logo-grid-item>
+        <c4d-logo-grid-item
           default-src="https://fpoimg.com/288x216?text=Example%20Logo&bg_color=ee5396&text_color=161616"
           alt="Alt text"
-        ></cds-logo-grid-item>
-      </cds-logo-grid>
+        ></c4d-logo-grid-item>
+      </c4d-logo-grid>
     </div>
   </div>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/logo-grid/package.json b/packages/web-components/examples/stackblitz/components/logo-grid/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/logo-grid/package.json
rename to packages/web-components/examples/stackblitz/components/logo-grid/package.json
diff --git a/packages/web-components/examples/codesandbox/components/logo-grid/src/index.js b/packages/web-components/examples/stackblitz/components/logo-grid/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/logo-grid/src/index.js
rename to packages/web-components/examples/stackblitz/components/logo-grid/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components/masthead-l1/.gitignore b/packages/web-components/examples/stackblitz/components/masthead-l1/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/masthead-l1/.gitignore
rename to packages/web-components/examples/stackblitz/components/masthead-l1/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components/masthead-l1/.sassrc b/packages/web-components/examples/stackblitz/components/masthead-l1/.sassrc
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/masthead-l1/.sassrc
rename to packages/web-components/examples/stackblitz/components/masthead-l1/.sassrc
diff --git a/packages/web-components/examples/codesandbox/components/masthead-l1/cdn-rtl.html b/packages/web-components/examples/stackblitz/components/masthead-l1/cdn-rtl.html
similarity index 97%
rename from packages/web-components/examples/codesandbox/components/masthead-l1/cdn-rtl.html
rename to packages/web-components/examples/stackblitz/components/masthead-l1/cdn-rtl.html
index a8888571a53..c24923e856e 100644
--- a/packages/web-components/examples/codesandbox/components/masthead-l1/cdn-rtl.html
+++ b/packages/web-components/examples/stackblitz/components/masthead-l1/cdn-rtl.html
@@ -16,7 +16,7 @@
   <link rel="stylesheet" href="src/index.scss" />
   <style type="text/css">
     /* Suppress custom element until styles are loaded */
-    cds-masthead-composite:not(:defined) {
+    c4d-masthead-composite:not(:defined) {
       display: none;
     }
   </style>
@@ -24,7 +24,7 @@
   <script type="module" src="src/index-cdn.js"></script>
 </head>
   <body>
-    <cds-masthead-composite></cds-masthead-composite>
+    <c4d-masthead-composite></c4d-masthead-composite>
     <main class="cds--content cds-ce-demo--ui-shell-content">
       <div class="cds--grid">
         <div class="cds--row">
diff --git a/packages/web-components/examples/codesandbox/components/masthead-l1/cdn.html b/packages/web-components/examples/stackblitz/components/masthead-l1/cdn.html
similarity index 97%
rename from packages/web-components/examples/codesandbox/components/masthead-l1/cdn.html
rename to packages/web-components/examples/stackblitz/components/masthead-l1/cdn.html
index 4a580f36e96..a94900ad32e 100644
--- a/packages/web-components/examples/codesandbox/components/masthead-l1/cdn.html
+++ b/packages/web-components/examples/stackblitz/components/masthead-l1/cdn.html
@@ -16,7 +16,7 @@
   <link rel="stylesheet" href="src/index.scss" />
   <style type="text/css">
     /* Suppress custom element until styles are loaded */
-    cds-masthead-composite:not(:defined) {
+    c4d-masthead-composite:not(:defined) {
       display: none;
     }
   </style>
@@ -24,7 +24,7 @@
   <script type="module" src="src/index-cdn.js"></script>
 </head>
   <body>
-    <cds-masthead-composite></cds-masthead-composite>
+    <c4d-masthead-composite></c4d-masthead-composite>
     <main class="cds--content cds-ce-demo--ui-shell-content">
       <div class="cds--grid">
         <div class="cds--row">
diff --git a/packages/web-components/examples/codesandbox/components/masthead-l1/index.html b/packages/web-components/examples/stackblitz/components/masthead-l1/index.html
similarity index 98%
rename from packages/web-components/examples/codesandbox/components/masthead-l1/index.html
rename to packages/web-components/examples/stackblitz/components/masthead-l1/index.html
index 22b2845a8b7..9cac39c14c0 100644
--- a/packages/web-components/examples/codesandbox/components/masthead-l1/index.html
+++ b/packages/web-components/examples/stackblitz/components/masthead-l1/index.html
@@ -21,7 +21,7 @@
     <script type="module" src="src/index.js"></script>
   </head>
   <body>
-    <cds-masthead-composite></cds-masthead-composite>
+    <c4d-masthead-composite></c4d-masthead-composite>
     <main class="cds--content cds-ce-demo--ui-shell-content">
       <div class="cds--grid">
         <div class="cds--row">
diff --git a/packages/web-components/examples/codesandbox/components/masthead-l1/package.json b/packages/web-components/examples/stackblitz/components/masthead-l1/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/masthead-l1/package.json
rename to packages/web-components/examples/stackblitz/components/masthead-l1/package.json
diff --git a/packages/web-components/examples/codesandbox/components/masthead-l1/src/index-cdn.js b/packages/web-components/examples/stackblitz/components/masthead-l1/src/index-cdn.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/masthead-l1/src/index-cdn.js
rename to packages/web-components/examples/stackblitz/components/masthead-l1/src/index-cdn.js
diff --git a/packages/web-components/examples/codesandbox/components/masthead-l1/src/index.js b/packages/web-components/examples/stackblitz/components/masthead-l1/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/masthead-l1/src/index.js
rename to packages/web-components/examples/stackblitz/components/masthead-l1/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components/masthead-l1/src/index.scss b/packages/web-components/examples/stackblitz/components/masthead-l1/src/index.scss
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/masthead-l1/src/index.scss
rename to packages/web-components/examples/stackblitz/components/masthead-l1/src/index.scss
diff --git a/packages/web-components/examples/codesandbox/components/masthead/.gitignore b/packages/web-components/examples/stackblitz/components/masthead/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/masthead/.gitignore
rename to packages/web-components/examples/stackblitz/components/masthead/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components/masthead/.sassrc b/packages/web-components/examples/stackblitz/components/masthead/.sassrc
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/masthead/.sassrc
rename to packages/web-components/examples/stackblitz/components/masthead/.sassrc
diff --git a/packages/web-components/examples/codesandbox/components/masthead/cdn-rtl.html b/packages/web-components/examples/stackblitz/components/masthead/cdn-rtl.html
similarity index 97%
rename from packages/web-components/examples/codesandbox/components/masthead/cdn-rtl.html
rename to packages/web-components/examples/stackblitz/components/masthead/cdn-rtl.html
index f0d04f50034..54e860a16b6 100644
--- a/packages/web-components/examples/codesandbox/components/masthead/cdn-rtl.html
+++ b/packages/web-components/examples/stackblitz/components/masthead/cdn-rtl.html
@@ -15,7 +15,7 @@
   <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style type="text/css">
     /* Suppress custom element until styles are loaded */
-    cds-masthead-container:not(:defined) {
+    c4d-masthead-container:not(:defined) {
       display: none;
     }
   </style>
@@ -30,7 +30,7 @@
   <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v2/alpha/masthead.rtl.min.js"></script>
 </head>
 <body>
-<cds-masthead-container id="masthead-container"></cds-masthead-container>
+<c4d-masthead-container id="masthead-container"></c4d-masthead-container>
 <main class="cds--content cds-ce-demo--ui-shell-content">
   <div class="cds--grid">
     <div class="cds--row">
diff --git a/packages/web-components/examples/codesandbox/components/masthead/cdn.html b/packages/web-components/examples/stackblitz/components/masthead/cdn.html
similarity index 97%
rename from packages/web-components/examples/codesandbox/components/masthead/cdn.html
rename to packages/web-components/examples/stackblitz/components/masthead/cdn.html
index bf4bfcda4f4..9b9e303a7b0 100644
--- a/packages/web-components/examples/codesandbox/components/masthead/cdn.html
+++ b/packages/web-components/examples/stackblitz/components/masthead/cdn.html
@@ -15,7 +15,7 @@
   <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style type="text/css">
     /* Suppress custom element until styles are loaded */
-    cds-masthead-container:not(:defined) {
+    c4d-masthead-container:not(:defined) {
       display: none;
     }
   </style>
@@ -30,7 +30,7 @@
   <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v2/alpha/masthead.min.js"></script>
 </head>
 <body>
-<cds-masthead-container id="masthead-container"></cds-masthead-container>
+<c4d-masthead-container id="masthead-container"></c4d-masthead-container>
 <main class="cds--content cds-ce-demo--ui-shell-content">
   <div class="cds--grid">
     <div class="cds--row">
diff --git a/packages/web-components/examples/codesandbox/components/masthead/index.html b/packages/web-components/examples/stackblitz/components/masthead/index.html
similarity index 98%
rename from packages/web-components/examples/codesandbox/components/masthead/index.html
rename to packages/web-components/examples/stackblitz/components/masthead/index.html
index 803b3692f0c..f5533a9a51a 100644
--- a/packages/web-components/examples/codesandbox/components/masthead/index.html
+++ b/packages/web-components/examples/stackblitz/components/masthead/index.html
@@ -27,12 +27,12 @@
     <script src="//www.ibm.com/common/digitaladvisor/cm-app/latest/cm-app.min.js" defer></script>
   </head>
   <body>
-    <cds-masthead-container
+    <c4d-masthead-container
       id="masthead-container"
       data-endpoint="/common/carbon-for-ibm-dotcom/translations/masthead-footer/v2"
       auth-method="profile-api"
       has-contact="true"
-    ></cds-masthead-container>
+    ></c4d-masthead-container>
     <main class="cds--content cds-ce-demo--ui-shell-content">
       <div class="cds--grid">
         <div class="cds--row">
diff --git a/packages/web-components/examples/codesandbox/components/masthead/package.json b/packages/web-components/examples/stackblitz/components/masthead/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/masthead/package.json
rename to packages/web-components/examples/stackblitz/components/masthead/package.json
diff --git a/packages/web-components/examples/codesandbox/components/masthead/src/ddo.js b/packages/web-components/examples/stackblitz/components/masthead/src/ddo.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/masthead/src/ddo.js
rename to packages/web-components/examples/stackblitz/components/masthead/src/ddo.js
diff --git a/packages/web-components/examples/codesandbox/components/masthead/src/index-cdn.js b/packages/web-components/examples/stackblitz/components/masthead/src/index-cdn.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/masthead/src/index-cdn.js
rename to packages/web-components/examples/stackblitz/components/masthead/src/index-cdn.js
diff --git a/packages/web-components/examples/codesandbox/components/masthead/src/index.js b/packages/web-components/examples/stackblitz/components/masthead/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/masthead/src/index.js
rename to packages/web-components/examples/stackblitz/components/masthead/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components/masthead/src/index.scss b/packages/web-components/examples/stackblitz/components/masthead/src/index.scss
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/masthead/src/index.scss
rename to packages/web-components/examples/stackblitz/components/masthead/src/index.scss
diff --git a/packages/web-components/examples/codesandbox/components/pricing-table/.gitignore b/packages/web-components/examples/stackblitz/components/pricing-table/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/pricing-table/.gitignore
rename to packages/web-components/examples/stackblitz/components/pricing-table/.gitignore
diff --git a/packages/web-components/examples/stackblitz/components/pricing-table/cdn.html b/packages/web-components/examples/stackblitz/components/pricing-table/cdn.html
new file mode 100644
index 00000000000..7eb3189a111
--- /dev/null
+++ b/packages/web-components/examples/stackblitz/components/pricing-table/cdn.html
@@ -0,0 +1,111 @@
+<!--
+@license
+Copyright IBM Corp. 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.
+-->
+
+<html>
+<head>
+  <title>@carbon/ibmdotcom-web-components example</title>
+  <meta charset="UTF-8"/>
+  <link rel="stylesheet"
+        href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
+  <style type="text/css">
+    /* Suppress custom element until styles are loaded */
+    c4d-pricing-table:not(:defined) {
+      display: none;
+    }
+
+    body {
+      padding: 2rem;
+    }
+  </style>
+  <script type="module"
+          src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/pricing-table.min.js"></script>
+</head>
+<body>
+<div class="cds--grid">
+  <div class="cds--row">
+    <div class="cds--col-sm-4 cds--col-lg-12">
+      <c4d-pricing-table highlight-column="2" highlight-label="Featured">
+        <c4d-pricing-table-head>
+          <c4d-pricing-table-header-row>
+            <c4d-pricing-table-header-cell type="simple">Optional table header</c4d-pricing-table-header-cell>
+            <c4d-pricing-table-header-cell>
+              <c4d-pricing-table-header-cell-headline>Variation 1</c4d-pricing-table-header-cell-headline>
+              <c4d-pricing-table-header-cell-caption>Starting at $X.XX per user</c4d-pricing-table-header-cell-caption>
+              <c4d-pricing-table-header-cell-tag href="https://www.carbondesignsystem.com/all-about-carbon/what-is-carbon/">Merchandising</c4d-pricing-table-header-cell-tag>
+              <c4d-pricing-table-header-cell-description>
+                Lorem ipsum dolor sit amet consectetur.
+                <bx-unordered-list>
+                  <bx-list-item>Lorem ipsum dolor</bx-list-item>
+                  <bx-list-item>sit amet</bx-list-item>
+                  <bx-list-item>consectetur retention adispiscing elit sed do eiusm Eiusmod tempor</bx-list-item>
+                </bx-unordered-list>
+              </c4d-pricing-table-header-cell-description>
+              <c4d-pricing-table-header-cell-cta cta-type="local" href="https://www.carbondesignsystem.com/all-about-carbon/what-is-carbon/">Call to action</c4d-pricing-table-header-cell-cta>
+            </c4d-pricing-table-header-cell>
+            <c4d-pricing-table-header-cell>
+              <c4d-pricing-table-header-cell-headline>Variation 2</c4d-pricing-table-header-cell-headline>
+              <c4d-pricing-table-header-cell-caption>Starting at $X.XX per user</c4d-pricing-table-header-cell-caption>
+              <c4d-pricing-table-header-cell-description>
+                Lorem ipsum dolor sit amet consectetur.
+                <bx-unordered-list>
+                  <bx-list-item>Lorem ipsum dolor</bx-list-item>
+                  <bx-list-item>sit amet</bx-list-item>
+                  <bx-list-item>consectetur retention adispiscing elit sed do eiusm Eiusmod tempor</bx-list-item>
+                </bx-unordered-list>
+              </c4d-pricing-table-header-cell-description>
+              <c4d-pricing-table-header-cell-cta cta-type="local" href="https://www.carbondesignsystem.com/all-about-carbon/what-is-carbon/">Call to action</c4d-pricing-table-header-cell-cta>
+            </c4d-pricing-table-header-cell>
+          </c4d-pricing-table-header-row>
+        </c4d-pricing-table-head>
+        <c4d-pricing-table-body>
+          <c4d-pricing-table-row>
+            <c4d-pricing-table-header-cell scope="row">Row 1</c4d-pricing-table-header-cell>
+            <c4d-pricing-table-cell icon="checkmark">
+              <c4d-pricing-table-cell-annotation>
+                Sed quis neque ultrices, convallis augue non, scelerisque massa.
+              </c4d-pricing-table-cell-annotation>
+            </c4d-pricing-table-cell>
+            <c4d-pricing-table-cell>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum
+              augue. Aenean posuere sem vel euismod dignissim.
+              <c4d-pricing-table-cell-annotation>
+                Sed quis neque ultrices, convallis augue non, scelerisque massa.
+              </c4d-pricing-table-cell-annotation>
+            </c4d-pricing-table-cell>
+          </c4d-pricing-table-row>
+          <c4d-pricing-table-row>
+            <c4d-pricing-table-header-cell scope="row">Row 2</c4d-pricing-table-header-cell>
+            <c4d-pricing-table-cell icon="checkmark">
+            </c4d-pricing-table-cell>
+            <c4d-pricing-table-cell>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum
+              augue. Aenean posuere sem vel euismod dignissim.
+            </c4d-pricing-table-cell>
+          </c4d-pricing-table-row>
+          <c4d-pricing-table-row>
+            <c4d-pricing-table-header-cell scope="row">Row 3</c4d-pricing-table-header-cell>
+            <c4d-pricing-table-cell>
+              <c4d-pricing-table-cell-annotation>
+                Sed quis neque ultrices, convallis augue non, scelerisque massa.
+              </c4d-pricing-table-cell-annotation>
+            </c4d-pricing-table-cell>
+            <c4d-pricing-table-cell>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum
+              augue. Aenean posuere sem vel euismod dignissim.
+              <c4d-pricing-table-cell-annotation>
+                Sed quis neque ultrices, convallis augue non, scelerisque massa.
+              </c4d-pricing-table-cell-annotation>
+            </c4d-pricing-table-cell>
+          </c4d-pricing-table-row>
+        </c4d-pricing-table-body>
+      </c4d-pricing-table>
+    </div>
+  </div>
+</div>
+</body>
+</html>
diff --git a/packages/web-components/examples/stackblitz/components/pricing-table/index.html b/packages/web-components/examples/stackblitz/components/pricing-table/index.html
new file mode 100644
index 00000000000..4c2d32df8bc
--- /dev/null
+++ b/packages/web-components/examples/stackblitz/components/pricing-table/index.html
@@ -0,0 +1,110 @@
+<!--
+@license
+Copyright IBM Corp. 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.
+-->
+
+<html>
+<head>
+  <title>@carbon/ibmdotcom-web-components example</title>
+  <meta charset="UTF-8"/>
+  <link rel="stylesheet"
+        href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
+  <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 */
+    c4d-pricing-table:not(:defined) {
+      display: none;
+    }
+
+    body {
+      padding: 2rem;
+    }
+  </style>
+  <script src="src/index.js"></script>
+</head>
+<body>
+<div class="cds--grid">
+  <div class="cds--row">
+    <div class="cds--col-sm-4 cds--col-lg-12">
+      <c4d-pricing-table highlight-column="2" highlight-label="Featured">
+        <c4d-pricing-table-head>
+          <c4d-pricing-table-header-row>
+            <c4d-pricing-table-header-cell type="simple">Optional table header</c4d-pricing-table-header-cell>
+            <c4d-pricing-table-header-cell>
+              <c4d-pricing-table-header-cell-headline>Variation 1</c4d-pricing-table-header-cell-headline>
+              <c4d-pricing-table-header-cell-caption>Starting at $X.XX per user</c4d-pricing-table-header-cell-caption>
+              <c4d-pricing-table-header-cell-tag href="https://www.carbondesignsystem.com/all-about-carbon/what-is-carbon/">Merchandising</c4d-pricing-table-header-cell-tag>
+              <c4d-pricing-table-header-cell-description>
+                Lorem ipsum dolor sit amet consectetur.
+                <bx-unordered-list>
+                  <bx-list-item>Lorem ipsum dolor</bx-list-item>
+                  <bx-list-item>sit amet</bx-list-item>
+                  <bx-list-item>consectetur retention adispiscing elit sed do eiusm Eiusmod tempor</bx-list-item>
+                </bx-unordered-list>
+              </c4d-pricing-table-header-cell-description>
+              <c4d-pricing-table-header-cell-cta cta-type="local" href="https://www.carbondesignsystem.com/all-about-carbon/what-is-carbon/">Call to action</c4d-pricing-table-header-cell-cta>
+            </c4d-pricing-table-header-cell>
+            <c4d-pricing-table-header-cell>
+              <c4d-pricing-table-header-cell-headline>Variation 2</c4d-pricing-table-header-cell-headline>
+              <c4d-pricing-table-header-cell-caption>Starting at $X.XX per user</c4d-pricing-table-header-cell-caption>
+              <c4d-pricing-table-header-cell-description>
+                Lorem ipsum dolor sit amet consectetur.
+                <bx-unordered-list>
+                  <bx-list-item>Lorem ipsum dolor</bx-list-item>
+                  <bx-list-item>sit amet</bx-list-item>
+                  <bx-list-item>consectetur retention adispiscing elit sed do eiusm Eiusmod tempor</bx-list-item>
+                </bx-unordered-list>
+              </c4d-pricing-table-header-cell-description>
+              <c4d-pricing-table-header-cell-cta cta-type="local" href="https://www.carbondesignsystem.com/all-about-carbon/what-is-carbon/">Call to action</c4d-pricing-table-header-cell-cta>
+            </c4d-pricing-table-header-cell>
+          </c4d-pricing-table-header-row>
+        </c4d-pricing-table-head>
+        <c4d-pricing-table-body>
+          <c4d-pricing-table-row>
+            <c4d-pricing-table-header-cell scope="row">Row 1</c4d-pricing-table-header-cell>
+            <c4d-pricing-table-cell icon="checkmark">
+              <c4d-pricing-table-cell-annotation>
+                Sed quis neque ultrices, convallis augue non, scelerisque massa.
+              </c4d-pricing-table-cell-annotation>
+            </c4d-pricing-table-cell>
+            <c4d-pricing-table-cell>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum
+              augue. Aenean posuere sem vel euismod dignissim.
+              <c4d-pricing-table-cell-annotation>
+                Sed quis neque ultrices, convallis augue non, scelerisque massa.
+              </c4d-pricing-table-cell-annotation>
+            </c4d-pricing-table-cell>
+          </c4d-pricing-table-row>
+          <c4d-pricing-table-row>
+            <c4d-pricing-table-header-cell scope="row">Row 2</c4d-pricing-table-header-cell>
+            <c4d-pricing-table-cell icon="checkmark">
+            </c4d-pricing-table-cell>
+            <c4d-pricing-table-cell>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum
+              augue. Aenean posuere sem vel euismod dignissim.
+            </c4d-pricing-table-cell>
+          </c4d-pricing-table-row>
+          <c4d-pricing-table-row>
+            <c4d-pricing-table-header-cell scope="row">Row 3</c4d-pricing-table-header-cell>
+            <c4d-pricing-table-cell>
+              <c4d-pricing-table-cell-annotation>
+                Sed quis neque ultrices, convallis augue non, scelerisque massa.
+              </c4d-pricing-table-cell-annotation>
+            </c4d-pricing-table-cell>
+            <c4d-pricing-table-cell>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum
+              augue. Aenean posuere sem vel euismod dignissim.
+              <c4d-pricing-table-cell-annotation>
+                Sed quis neque ultrices, convallis augue non, scelerisque massa.
+              </c4d-pricing-table-cell-annotation>
+            </c4d-pricing-table-cell>
+          </c4d-pricing-table-row>
+        </c4d-pricing-table-body>
+      </c4d-pricing-table>
+    </div>
+  </div>
+</div>
+</body>
+</html>
diff --git a/packages/web-components/examples/codesandbox/components/pricing-table/package.json b/packages/web-components/examples/stackblitz/components/pricing-table/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/pricing-table/package.json
rename to packages/web-components/examples/stackblitz/components/pricing-table/package.json
diff --git a/packages/web-components/examples/codesandbox/components/pricing-table/src/index.js b/packages/web-components/examples/stackblitz/components/pricing-table/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/pricing-table/src/index.js
rename to packages/web-components/examples/stackblitz/components/pricing-table/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components/quote/.gitignore b/packages/web-components/examples/stackblitz/components/quote/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/quote/.gitignore
rename to packages/web-components/examples/stackblitz/components/quote/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components/quote/.sassrc b/packages/web-components/examples/stackblitz/components/quote/.sassrc
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/quote/.sassrc
rename to packages/web-components/examples/stackblitz/components/quote/.sassrc
diff --git a/packages/web-components/examples/codesandbox/components/quote/cdn.html b/packages/web-components/examples/stackblitz/components/quote/cdn.html
similarity index 80%
rename from packages/web-components/examples/codesandbox/components/quote/cdn.html
rename to packages/web-components/examples/stackblitz/components/quote/cdn.html
index 9a36d3ba789..576019055ef 100644
--- a/packages/web-components/examples/codesandbox/components/quote/cdn.html
+++ b/packages/web-components/examples/stackblitz/components/quote/cdn.html
@@ -15,7 +15,7 @@
   <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style type="text/css">
     /* Suppress custom element until styles are loaded */
-    cds-quote:not(:defined) {
+    c4d-quote:not(:defined) {
       display: none;
     }
   </style>
@@ -25,19 +25,19 @@
 <div class="cds--grid">
   <div class="cds--row">
     <div class="cds--col-sm-8 cds--col-lg-8 cds--offset-lg-4">
-      <cds-quote color-scheme="regular">
+      <c4d-quote color-scheme="regular">
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus est purus, posuere at est vitae, ornare rhoncus sem.
         Suspendisse vitae tellus fermentum, hendrerit augue eu, placerat magna.
-        <cds-quote-source-heading>
+        <c4d-quote-source-heading>
           Lorem ipsum dolor sit amet
-        </cds-quote-source-heading>
-        <cds-quote-source-copy>
+        </c4d-quote-source-heading>
+        <c4d-quote-source-copy>
           consectetur adipiscing elit
-        </cds-quote-source-copy>
-        <cds-quote-source-bottom-copy>
+        </c4d-quote-source-copy>
+        <c4d-quote-source-bottom-copy>
           IBM Cloud
-        </cds-quote-source-bottom-copy>
-        <cds-link-with-icon slot="footer" href="https://example.com">
+        </c4d-quote-source-bottom-copy>
+        <c4d-link-with-icon slot="footer" href="https://example.com">
           Link with Icon
           <svg
             slot="icon"
@@ -52,8 +52,8 @@
           >
             <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
           </svg>
-        </cds-link-with-icon>
-      </cds-quote>
+        </c4d-link-with-icon>
+      </c4d-quote>
     </div>
   </div>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/quote/index.html b/packages/web-components/examples/stackblitz/components/quote/index.html
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/quote/index.html
rename to packages/web-components/examples/stackblitz/components/quote/index.html
diff --git a/packages/web-components/examples/codesandbox/components/quote/package.json b/packages/web-components/examples/stackblitz/components/quote/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/quote/package.json
rename to packages/web-components/examples/stackblitz/components/quote/package.json
diff --git a/packages/web-components/examples/codesandbox/components/quote/src/index.js b/packages/web-components/examples/stackblitz/components/quote/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/quote/src/index.js
rename to packages/web-components/examples/stackblitz/components/quote/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components/quote/src/index.scss b/packages/web-components/examples/stackblitz/components/quote/src/index.scss
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/quote/src/index.scss
rename to packages/web-components/examples/stackblitz/components/quote/src/index.scss
diff --git a/packages/web-components/examples/codesandbox/components/scroll-animations/.gitignore b/packages/web-components/examples/stackblitz/components/scroll-animations/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/scroll-animations/.gitignore
rename to packages/web-components/examples/stackblitz/components/scroll-animations/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components/scroll-animations/.sassrc b/packages/web-components/examples/stackblitz/components/scroll-animations/.sassrc
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/scroll-animations/.sassrc
rename to packages/web-components/examples/stackblitz/components/scroll-animations/.sassrc
diff --git a/packages/web-components/examples/codesandbox/components/scroll-animations/cdn.html b/packages/web-components/examples/stackblitz/components/scroll-animations/cdn.html
similarity index 95%
rename from packages/web-components/examples/codesandbox/components/scroll-animations/cdn.html
rename to packages/web-components/examples/stackblitz/components/scroll-animations/cdn.html
index 1dd49c352cc..7cee9e8637e 100644
--- a/packages/web-components/examples/codesandbox/components/scroll-animations/cdn.html
+++ b/packages/web-components/examples/stackblitz/components/scroll-animations/cdn.html
@@ -15,14 +15,14 @@
   <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/scroll-animations.css" />
   <style type="text/css">
     /* Suppress custom element until styles are loaded */
-    cds-scroll-animations:not(:defined) {
+    c4d-scroll-animations:not(:defined) {
       display: none;
     }
   </style>
   <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/scroll-animations.min.js"></script>
 </head>
 <body>
-<cds-scroll-animations animation="fade" selector-targets="h1" keep-animation="true">
+<c4d-scroll-animations animation="fade" selector-targets="h1" keep-animation="true">
   <h1>Hello World! 👋</h1>
   <h1>This is extra content so we can scroll!</h1>
   <h1>This is extra content so we can scroll!</h1>
@@ -66,6 +66,6 @@ <h1>This is extra content so we can scroll!</h1>
   <h1>This is extra content so we can scroll!</h1>
   <h1>This is extra content so we can scroll!</h1>
   <h1>This is extra content so we can scroll!</h1>
-</cds-scroll-animations>
+</c4d-scroll-animations>
 </body>
 </html>
diff --git a/packages/web-components/examples/codesandbox/components/scroll-animations/index.html b/packages/web-components/examples/stackblitz/components/scroll-animations/index.html
similarity index 97%
rename from packages/web-components/examples/codesandbox/components/scroll-animations/index.html
rename to packages/web-components/examples/stackblitz/components/scroll-animations/index.html
index 2cfdc78410d..251c1ce6693 100644
--- a/packages/web-components/examples/codesandbox/components/scroll-animations/index.html
+++ b/packages/web-components/examples/stackblitz/components/scroll-animations/index.html
@@ -21,7 +21,7 @@
     <script src="src/index.js"></script>
   </head>
   <body>
-    <cds-scroll-animations animation="fade" selector-targets="h1" keep-animation="true">
+    <c4d-scroll-animations animation="fade" selector-targets="h1" keep-animation="true">
       <h1>Hello World! 👋</h1>
       <h1>This is extra content so we can scroll!</h1>
       <h1>This is extra content so we can scroll!</h1>
@@ -65,6 +65,6 @@ <h1>This is extra content so we can scroll!</h1>
       <h1>This is extra content so we can scroll!</h1>
       <h1>This is extra content so we can scroll!</h1>
       <h1>This is extra content so we can scroll!</h1>
-    </cds-scroll-animations>
+    </c4d-scroll-animations>
   </body>
 </html>
diff --git a/packages/web-components/examples/codesandbox/components/scroll-animations/package.json b/packages/web-components/examples/stackblitz/components/scroll-animations/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/scroll-animations/package.json
rename to packages/web-components/examples/stackblitz/components/scroll-animations/package.json
diff --git a/packages/web-components/examples/codesandbox/components/scroll-animations/src/index.js b/packages/web-components/examples/stackblitz/components/scroll-animations/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/scroll-animations/src/index.js
rename to packages/web-components/examples/stackblitz/components/scroll-animations/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components/scroll-animations/src/index.scss b/packages/web-components/examples/stackblitz/components/scroll-animations/src/index.scss
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/scroll-animations/src/index.scss
rename to packages/web-components/examples/stackblitz/components/scroll-animations/src/index.scss
diff --git a/packages/web-components/examples/codesandbox/components/search-with-typeahead/.gitignore b/packages/web-components/examples/stackblitz/components/search-with-typeahead/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/search-with-typeahead/.gitignore
rename to packages/web-components/examples/stackblitz/components/search-with-typeahead/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components/search-with-typeahead/.sassrc b/packages/web-components/examples/stackblitz/components/search-with-typeahead/.sassrc
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/search-with-typeahead/.sassrc
rename to packages/web-components/examples/stackblitz/components/search-with-typeahead/.sassrc
diff --git a/packages/web-components/examples/codesandbox/components/search-with-typeahead/cdn.html b/packages/web-components/examples/stackblitz/components/search-with-typeahead/cdn.html
similarity index 88%
rename from packages/web-components/examples/codesandbox/components/search-with-typeahead/cdn.html
rename to packages/web-components/examples/stackblitz/components/search-with-typeahead/cdn.html
index 1c72d2339c1..6efd41bef28 100644
--- a/packages/web-components/examples/codesandbox/components/search-with-typeahead/cdn.html
+++ b/packages/web-components/examples/stackblitz/components/search-with-typeahead/cdn.html
@@ -14,7 +14,7 @@
   <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style type="text/css">
     /* Suppress custom element until styles are loaded */
-    cds-search-with-typeahead:not(:defined) {
+    c4d-search-with-typeahead:not(:defined) {
       display: none;
     }
   </style>
@@ -27,8 +27,8 @@
     <div class="cds--col-sm-4 cds--col-lg-12">
       <h1>Hello World! 👋</h1>
 
-      <cds-search-with-typeahead active>
-      </cds-search-with-typeahead>
+      <c4d-search-with-typeahead active>
+      </c4d-search-with-typeahead>
     </div>
   </div>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/search-with-typeahead/index.html b/packages/web-components/examples/stackblitz/components/search-with-typeahead/index.html
similarity index 90%
rename from packages/web-components/examples/codesandbox/components/search-with-typeahead/index.html
rename to packages/web-components/examples/stackblitz/components/search-with-typeahead/index.html
index 75143d4c7aa..92badab0dcb 100644
--- a/packages/web-components/examples/codesandbox/components/search-with-typeahead/index.html
+++ b/packages/web-components/examples/stackblitz/components/search-with-typeahead/index.html
@@ -18,7 +18,7 @@
     <div class="cds--grid">
       <div class="cds--row">
         <div class="cds--col-sm-4 cds--col-lg-12">
-          <cds-search-with-typeahead></cds-search-with-typeahead>
+          <c4d-search-with-typeahead></c4d-search-with-typeahead>
         </div>
       </div>
     </div>
diff --git a/packages/web-components/examples/codesandbox/components/search-with-typeahead/package.json b/packages/web-components/examples/stackblitz/components/search-with-typeahead/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/search-with-typeahead/package.json
rename to packages/web-components/examples/stackblitz/components/search-with-typeahead/package.json
diff --git a/packages/web-components/examples/codesandbox/components/search-with-typeahead/src/index.js b/packages/web-components/examples/stackblitz/components/search-with-typeahead/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/search-with-typeahead/src/index.js
rename to packages/web-components/examples/stackblitz/components/search-with-typeahead/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components/search-with-typeahead/src/index.scss b/packages/web-components/examples/stackblitz/components/search-with-typeahead/src/index.scss
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/search-with-typeahead/src/index.scss
rename to packages/web-components/examples/stackblitz/components/search-with-typeahead/src/index.scss
diff --git a/packages/web-components/examples/codesandbox/components/structured-list/.gitignore b/packages/web-components/examples/stackblitz/components/structured-list/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/structured-list/.gitignore
rename to packages/web-components/examples/stackblitz/components/structured-list/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components/structured-list/cdn.html b/packages/web-components/examples/stackblitz/components/structured-list/cdn.html
similarity index 53%
rename from packages/web-components/examples/codesandbox/components/structured-list/cdn.html
rename to packages/web-components/examples/stackblitz/components/structured-list/cdn.html
index 58971f426a4..87aab7acd8a 100644
--- a/packages/web-components/examples/codesandbox/components/structured-list/cdn.html
+++ b/packages/web-components/examples/stackblitz/components/structured-list/cdn.html
@@ -14,7 +14,7 @@
   <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style type="text/css">
     /* Suppress custom element until styles are loaded */
-    cds-structured-list:not(:defined) {
+    c4d-structured-list:not(:defined) {
       display: none;
     }
 
@@ -29,66 +29,66 @@
 <div class="cds--grid">
   <div class="cds--row">
     <div class="cds--col-sm-4 cds--col-lg-12">
-      <cds-structured-list>
-        <cds-structured-list-head>
-          <cds-structured-list-header-row>
-            <cds-structured-list-header-cell>Column A</cds-structured-list-header-cell>
-            <cds-structured-list-header-cell>Column B</cds-structured-list-header-cell>
-            <cds-structured-list-header-cell>Column C</cds-structured-list-header-cell>
-            <cds-structured-list-header-cell>Column D</cds-structured-list-header-cell>
-          </cds-structured-list-header-row>
-        </cds-structured-list-head>
-        <cds-structured-list-body>
-          <cds-structured-list-row>
-            <cds-structured-list-cell tooltip="Tooltip text">
+      <c4d-structured-list>
+        <c4d-structured-list-head>
+          <c4d-structured-list-header-row>
+            <c4d-structured-list-header-cell>Column A</c4d-structured-list-header-cell>
+            <c4d-structured-list-header-cell>Column B</c4d-structured-list-header-cell>
+            <c4d-structured-list-header-cell>Column C</c4d-structured-list-header-cell>
+            <c4d-structured-list-header-cell>Column D</c4d-structured-list-header-cell>
+          </c4d-structured-list-header-row>
+        </c4d-structured-list-head>
+        <c4d-structured-list-body>
+          <c4d-structured-list-row>
+            <c4d-structured-list-cell tooltip="Tooltip text">
               Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-            </cds-structured-list-cell>
-            <cds-structured-list-cell icon="checkmark">
+            </c4d-structured-list-cell>
+            <c4d-structured-list-cell icon="checkmark">
               Nunc dui magna, finibus id tortor sed, aliquet bibendum
               augue.
-            </cds-structured-list-cell>
-            <cds-structured-list-celltags="Tag 1, Secondary Tag, Other">
+            </c4d-structured-list-cell>
+            <c4d-structured-list-celltags="Tag 1, Secondary Tag, Other">
               Aenean posuere sem vel euismod dignissim.
-            </cds-structured-list-celltags=>
-            <cds-structured-list-cell>
+            </c4d-structured-list-celltags=>
+            <c4d-structured-list-cell>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum
               augue. Aenean posuere sem vel euismod dignissim.
-            </cds-structured-list-cell>
-          </cds-structured-list-row>
-          <cds-structured-list-row>
-            <cds-structured-list-cell tooltip="Tooltip text">
+            </c4d-structured-list-cell>
+          </c4d-structured-list-row>
+          <c4d-structured-list-row>
+            <c4d-structured-list-cell tooltip="Tooltip text">
               Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-            </cds-structured-list-cell>
-            <cds-structured-list-cell icon="checkmark">
+            </c4d-structured-list-cell>
+            <c4d-structured-list-cell icon="checkmark">
               Nunc dui magna, finibus id tortor sed, aliquet bibendum
               augue.
-            </cds-structured-list-cell>
-            <cds-structured-list-celltags="Tag 1, Secondary Tag, Other">
+            </c4d-structured-list-cell>
+            <c4d-structured-list-celltags="Tag 1, Secondary Tag, Other">
               Aenean posuere sem vel euismod dignissim.
-            </cds-structured-list-celltags=>
-            <cds-structured-list-cell>
+            </c4d-structured-list-celltags=>
+            <c4d-structured-list-cell>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum
               augue. Aenean posuere sem vel euismod dignissim.
-            </cds-structured-list-cell>
-          </cds-structured-list-row>
-          <cds-structured-list-row>
-            <cds-structured-list-cell tooltip="Tooltip text">
+            </c4d-structured-list-cell>
+          </c4d-structured-list-row>
+          <c4d-structured-list-row>
+            <c4d-structured-list-cell tooltip="Tooltip text">
               Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-            </cds-structured-list-cell>
-            <cds-structured-list-cell icon="checkmark">
+            </c4d-structured-list-cell>
+            <c4d-structured-list-cell icon="checkmark">
               Nunc dui magna, finibus id tortor sed, aliquet bibendum
               augue.
-            </cds-structured-list-cell>
-            <cds-structured-list-celltags="Tag 1, Secondary Tag, Other">
+            </c4d-structured-list-cell>
+            <c4d-structured-list-celltags="Tag 1, Secondary Tag, Other">
               Aenean posuere sem vel euismod dignissim.
-            </cds-structured-list-celltags=>
-            <cds-structured-list-cell>
+            </c4d-structured-list-celltags=>
+            <c4d-structured-list-cell>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum
               augue. Aenean posuere sem vel euismod dignissim.
-            </cds-structured-list-cell>
-          </cds-structured-list-row>
-        </cds-structured-list-body>
-      </cds-structured-list>
+            </c4d-structured-list-cell>
+          </c4d-structured-list-row>
+        </c4d-structured-list-body>
+      </c4d-structured-list>
     </div>
   </div>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/structured-list/index.html b/packages/web-components/examples/stackblitz/components/structured-list/index.html
similarity index 53%
rename from packages/web-components/examples/codesandbox/components/structured-list/index.html
rename to packages/web-components/examples/stackblitz/components/structured-list/index.html
index 414e5eb96c2..1ce3a8891ba 100644
--- a/packages/web-components/examples/codesandbox/components/structured-list/index.html
+++ b/packages/web-components/examples/stackblitz/components/structured-list/index.html
@@ -14,7 +14,7 @@
   <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style type="text/css">
     /* Suppress custom element until styles are loaded */
-    cds-structured-list:not(:defined) {
+    c4d-structured-list:not(:defined) {
       display: none;
     }
 
@@ -28,66 +28,66 @@
 <div class="cds--grid">
   <div class="cds--row">
     <div class="cds--col-sm-4 cds--col-lg-12">
-      <cds-structured-list>
-        <cds-structured-list-head>
-          <cds-structured-list-header-row>
-            <cds-structured-list-header-cell>Column A</cds-structured-list-header-cell>
-            <cds-structured-list-header-cell>Column B</cds-structured-list-header-cell>
-            <cds-structured-list-header-cell>Column C</cds-structured-list-header-cell>
-            <cds-structured-list-header-cell>Column D</cds-structured-list-header-cell>
-          </cds-structured-list-header-row>
-        </cds-structured-list-head>
-        <cds-structured-list-body>
-          <cds-structured-list-row>
-            <cds-structured-list-cell tooltip="Tooltip text">
+      <c4d-structured-list>
+        <c4d-structured-list-head>
+          <c4d-structured-list-header-row>
+            <c4d-structured-list-header-cell>Column A</c4d-structured-list-header-cell>
+            <c4d-structured-list-header-cell>Column B</c4d-structured-list-header-cell>
+            <c4d-structured-list-header-cell>Column C</c4d-structured-list-header-cell>
+            <c4d-structured-list-header-cell>Column D</c4d-structured-list-header-cell>
+          </c4d-structured-list-header-row>
+        </c4d-structured-list-head>
+        <c4d-structured-list-body>
+          <c4d-structured-list-row>
+            <c4d-structured-list-cell tooltip="Tooltip text">
               Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-            </cds-structured-list-cell>
-            <cds-structured-list-cell icon="checkmark">
+            </c4d-structured-list-cell>
+            <c4d-structured-list-cell icon="checkmark">
               Nunc dui magna, finibus id tortor sed, aliquet bibendum
               augue.
-            </cds-structured-list-cell>
-            <cds-structured-list-cell tags="Tag 1, Secondary Tag, Other">
+            </c4d-structured-list-cell>
+            <c4d-structured-list-cell tags="Tag 1, Secondary Tag, Other">
               Aenean posuere sem vel euismod dignissim.
-            </cds-structured-list-cell>
-            <cds-structured-list-cell>
+            </c4d-structured-list-cell>
+            <c4d-structured-list-cell>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum
               augue. Aenean posuere sem vel euismod dignissim.
-            </cds-structured-list-cell>
-          </cds-structured-list-row>
-          <cds-structured-list-row>
-            <cds-structured-list-cell tooltip="Tooltip text">
+            </c4d-structured-list-cell>
+          </c4d-structured-list-row>
+          <c4d-structured-list-row>
+            <c4d-structured-list-cell tooltip="Tooltip text">
               Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-            </cds-structured-list-cell>
-            <cds-structured-list-cell icon="checkmark">
+            </c4d-structured-list-cell>
+            <c4d-structured-list-cell icon="checkmark">
               Nunc dui magna, finibus id tortor sed, aliquet bibendum
               augue.
-            </cds-structured-list-cell>
-            <cds-structured-list-cell tags="Tag 1, Secondary Tag, Other">
+            </c4d-structured-list-cell>
+            <c4d-structured-list-cell tags="Tag 1, Secondary Tag, Other">
               Aenean posuere sem vel euismod dignissim.
-            </cds-structured-list-cell>
-            <cds-structured-list-cell>
+            </c4d-structured-list-cell>
+            <c4d-structured-list-cell>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum
               augue. Aenean posuere sem vel euismod dignissim.
-            </cds-structured-list-cell>
-          </cds-structured-list-row>
-          <cds-structured-list-row>
-            <cds-structured-list-cell tooltip="Tooltip text">
+            </c4d-structured-list-cell>
+          </c4d-structured-list-row>
+          <c4d-structured-list-row>
+            <c4d-structured-list-cell tooltip="Tooltip text">
               Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-            </cds-structured-list-cell>
-            <cds-structured-list-cell icon="checkmark">
+            </c4d-structured-list-cell>
+            <c4d-structured-list-cell icon="checkmark">
               Nunc dui magna, finibus id tortor sed, aliquet bibendum
               augue.
-            </cds-structured-list-cell>
-            <cds-structured-list-cell tags="Tag 1, Secondary Tag, Other">
+            </c4d-structured-list-cell>
+            <c4d-structured-list-cell tags="Tag 1, Secondary Tag, Other">
               Aenean posuere sem vel euismod dignissim.
-            </cds-structured-list-cell>
-            <cds-structured-list-cell>
+            </c4d-structured-list-cell>
+            <c4d-structured-list-cell>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum
               augue. Aenean posuere sem vel euismod dignissim.
-            </cds-structured-list-cell>
-          </cds-structured-list-row>
-        </cds-structured-list-body>
-      </cds-structured-list>
+            </c4d-structured-list-cell>
+          </c4d-structured-list-row>
+        </c4d-structured-list-body>
+      </c4d-structured-list>
     </div>
   </div>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/structured-list/package.json b/packages/web-components/examples/stackblitz/components/structured-list/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/structured-list/package.json
rename to packages/web-components/examples/stackblitz/components/structured-list/package.json
diff --git a/packages/web-components/examples/codesandbox/components/structured-list/src/index.js b/packages/web-components/examples/stackblitz/components/structured-list/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/structured-list/src/index.js
rename to packages/web-components/examples/stackblitz/components/structured-list/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components/table-of-contents/.gitignore b/packages/web-components/examples/stackblitz/components/table-of-contents/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/table-of-contents/.gitignore
rename to packages/web-components/examples/stackblitz/components/table-of-contents/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components/table-of-contents/.sassrc b/packages/web-components/examples/stackblitz/components/table-of-contents/.sassrc
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/table-of-contents/.sassrc
rename to packages/web-components/examples/stackblitz/components/table-of-contents/.sassrc
diff --git a/packages/web-components/examples/codesandbox/components/table-of-contents/cdn.html b/packages/web-components/examples/stackblitz/components/table-of-contents/cdn.html
similarity index 98%
rename from packages/web-components/examples/codesandbox/components/table-of-contents/cdn.html
rename to packages/web-components/examples/stackblitz/components/table-of-contents/cdn.html
index 03f9bcf94c8..67d9a7f9815 100644
--- a/packages/web-components/examples/codesandbox/components/table-of-contents/cdn.html
+++ b/packages/web-components/examples/stackblitz/components/table-of-contents/cdn.html
@@ -17,7 +17,7 @@
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/table-of-contents.css"/>
   <style type="text/css">
     /* Suppress custom element until styles are loaded */
-    cds-table-of-contents:not(:defined) {
+    c4d-table-of-contents:not(:defined) {
       display: none;
     }
 
@@ -33,7 +33,7 @@
 <div class="cds--grid">
   <div class="cds--row">
     <div class="cds--col-sm-8 cds--col-lg-16">
-      <cds-table-of-contents>
+      <c4d-table-of-contents>
         <div class="cds--tableofcontents__contents">
           <a name="1" data-title="Section - 1"></a>
           <h3>Section - 1</h3>
@@ -182,7 +182,7 @@ <h3>Section - 7</h3>
             auctor augue.
           </p>
         </div>
-      </cds-table-of-contents>
+      </c4d-table-of-contents>
     </div>
   </div>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/table-of-contents/index.html b/packages/web-components/examples/stackblitz/components/table-of-contents/index.html
similarity index 91%
rename from packages/web-components/examples/codesandbox/components/table-of-contents/index.html
rename to packages/web-components/examples/stackblitz/components/table-of-contents/index.html
index b5dc5d48924..e5c596a4618 100644
--- a/packages/web-components/examples/codesandbox/components/table-of-contents/index.html
+++ b/packages/web-components/examples/stackblitz/components/table-of-contents/index.html
@@ -16,7 +16,7 @@
   <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style type="text/css">
     /* Suppress custom element until styles are loaded */
-    cds-table-of-contents:not(:defined) {
+    c4d-table-of-contents:not(:defined) {
       display: none;
     }
 
@@ -46,7 +46,7 @@
 <div class="cds--grid">
   <div class="cds--row">
     <div class="cds--col-sm-8 cds--col-lg-16">
-      <cds-table-of-contents>
+      <c4d-table-of-contents>
         <div class="cds--tableofcontents__contents">
           <a name="1" data-title="Section - 1"></a>
           <h3>Section - 1</h3>
@@ -69,12 +69,12 @@ <h3>Section - 1</h3>
             auctor augue.
           </p>
 
-          <cds-carousel>
-            <cds-card href="https://example.com">
-              <cds-card-heading>Lorem ipsum dolor sit amet</cds-card-heading>
+          <c4d-carousel>
+            <c4d-card href="https://example.com">
+              <c4d-card-heading>Lorem ipsum dolor sit amet</c4d-card-heading>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
               ultricies est.
-              <cds-card-footer>
+              <c4d-card-footer>
                 <svg
                   slot="icon"
                   focusable="false"
@@ -88,14 +88,14 @@ <h3>Section - 1</h3>
                   <path
                     d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
                 </svg>
-              </cds-card-footer>
-            </cds-card>
-            <cds-card href="https://example.com">
-              <cds-card-heading>Lorem ipsum dolor sit amet</cds-card-heading>
+              </c4d-card-footer>
+            </c4d-card>
+            <c4d-card href="https://example.com">
+              <c4d-card-heading>Lorem ipsum dolor sit amet</c4d-card-heading>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
               ultricies est. Mauris iaculis eget dolor nec hendrerit.
               Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
-              <cds-card-footer>
+              <c4d-card-footer>
                 <svg
                   slot="icon"
                   focusable="false"
@@ -109,13 +109,13 @@ <h3>Section - 1</h3>
                   <path
                     d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
                 </svg>
-              </cds-card-footer>
-            </cds-card>
-            <cds-card href="https://example.com">
-              <cds-card-heading>Lorem ipsum dolor sit amet</cds-card-heading>
+              </c4d-card-footer>
+            </c4d-card>
+            <c4d-card href="https://example.com">
+              <c4d-card-heading>Lorem ipsum dolor sit amet</c4d-card-heading>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
               ultricies est.
-              <cds-card-footer>
+              <c4d-card-footer>
                 <svg
                   slot="icon"
                   focusable="false"
@@ -129,14 +129,14 @@ <h3>Section - 1</h3>
                   <path
                     d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
                 </svg>
-              </cds-card-footer>
-            </cds-card>
-            <cds-card href="https://example.com">
-              <cds-card-heading>Lorem ipsum dolor sit amet</cds-card-heading>
+              </c4d-card-footer>
+            </c4d-card>
+            <c4d-card href="https://example.com">
+              <c4d-card-heading>Lorem ipsum dolor sit amet</c4d-card-heading>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
               ultricies est. Mauris iaculis eget dolor nec hendrerit.
               Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
-              <cds-card-footer>
+              <c4d-card-footer>
                 <svg
                   slot="icon"
                   focusable="false"
@@ -150,13 +150,13 @@ <h3>Section - 1</h3>
                   <path
                     d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
                 </svg>
-              </cds-card-footer>
-            </cds-card>
-            <cds-card href="https://example.com">
-              <cds-card-heading>Lorem ipsum dolor sit amet</cds-card-heading>
+              </c4d-card-footer>
+            </c4d-card>
+            <c4d-card href="https://example.com">
+              <c4d-card-heading>Lorem ipsum dolor sit amet</c4d-card-heading>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
               ultricies est.
-              <cds-card-footer>
+              <c4d-card-footer>
                 <svg
                   slot="icon"
                   focusable="false"
@@ -170,9 +170,9 @@ <h3>Section - 1</h3>
                   <path
                     d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
                 </svg>
-              </cds-card-footer>
-            </cds-card>
-          </cds-carousel>
+              </c4d-card-footer>
+            </c4d-card>
+          </c4d-carousel>
 
           <a name="2" data-title="Section - 2"></a>
           <h3>Section - 2</h3>
@@ -195,9 +195,9 @@ <h3>Section - 2</h3>
             auctor augue.
           </p>
 
-          <cds-video-cta-container>
-            <cds-text-cta cta-type="video" href="1_9h94wo6b"></cds-text-cta>
-          </cds-video-cta-container>
+          <c4d-video-cta-container>
+            <c4d-text-cta cta-type="video" href="1_9h94wo6b"></c4d-text-cta>
+          </c4d-video-cta-container>
 
           <a name="3" data-title="Section - 3"></a>
           <h3>Section - 3</h3>
@@ -244,9 +244,9 @@ <h3>Section - 3</h3>
                 </li>
                 <li>Mauris elementum massa</li>
               </ul>
-              <cds-text-cta cta-type="local" href="#!" icon-placement="right">
+              <c4d-text-cta cta-type="local" href="#!" icon-placement="right">
                 Call To Action
-              </cds-text-cta>
+              </c4d-text-cta>
             </caem-accordion-item>
             <caem-accordion-item title-text="Accordion 2">
               <p>
@@ -279,7 +279,7 @@ <h3>Section - 4</h3>
             auctor augue.
           </p>
 
-          <cds-video-player-container video-id="1_9h94wo6b"></cds-video-player-container>
+          <c4d-video-player-container video-id="1_9h94wo6b"></c4d-video-player-container>
 
           <a name="5" data-title="Section - 5"></a>
           <h3>Section - 5</h3>
@@ -344,7 +344,7 @@ <h3>Section - 7</h3>
             auctor augue.
           </p>
         </div>
-      </cds-table-of-contents>
+      </c4d-table-of-contents>
     </div>
   </div>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/table-of-contents/package.json b/packages/web-components/examples/stackblitz/components/table-of-contents/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/table-of-contents/package.json
rename to packages/web-components/examples/stackblitz/components/table-of-contents/package.json
diff --git a/packages/web-components/examples/codesandbox/components/table-of-contents/src/index.js b/packages/web-components/examples/stackblitz/components/table-of-contents/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/table-of-contents/src/index.js
rename to packages/web-components/examples/stackblitz/components/table-of-contents/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components/table-of-contents/src/index.scss b/packages/web-components/examples/stackblitz/components/table-of-contents/src/index.scss
similarity index 96%
rename from packages/web-components/examples/codesandbox/components/table-of-contents/src/index.scss
rename to packages/web-components/examples/stackblitz/components/table-of-contents/src/index.scss
index eaed609a2ef..7b6bd730a71 100644
--- a/packages/web-components/examples/codesandbox/components/table-of-contents/src/index.scss
+++ b/packages/web-components/examples/stackblitz/components/table-of-contents/src/index.scss
@@ -14,7 +14,7 @@ $feature-flags: (
 );
 
 @import '@carbon/ibmdotcom-styles/scss/globals/vars';
-@import '@carbon/ibmdotcom-styles/scss/components/tableofcontents/tableofcontents';
+@import '@carbon/ibmdotcom-styles/scss/components/tableofcontents';
 
 body {
   padding: $spacing-09;
diff --git a/packages/web-components/examples/codesandbox/components/tabs-extended-media/.gitignore b/packages/web-components/examples/stackblitz/components/tabs-extended-media/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/tabs-extended-media/.gitignore
rename to packages/web-components/examples/stackblitz/components/tabs-extended-media/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components/tabs-extended-media/.sassrc b/packages/web-components/examples/stackblitz/components/tabs-extended-media/.sassrc
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/tabs-extended-media/.sassrc
rename to packages/web-components/examples/stackblitz/components/tabs-extended-media/.sassrc
diff --git a/packages/web-components/examples/codesandbox/components/tabs-extended-media/cdn.html b/packages/web-components/examples/stackblitz/components/tabs-extended-media/cdn.html
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/tabs-extended-media/cdn.html
rename to packages/web-components/examples/stackblitz/components/tabs-extended-media/cdn.html
diff --git a/packages/web-components/examples/codesandbox/components/tabs-extended-media/index.html b/packages/web-components/examples/stackblitz/components/tabs-extended-media/index.html
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/tabs-extended-media/index.html
rename to packages/web-components/examples/stackblitz/components/tabs-extended-media/index.html
diff --git a/packages/web-components/examples/codesandbox/components/tabs-extended-media/package.json b/packages/web-components/examples/stackblitz/components/tabs-extended-media/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/tabs-extended-media/package.json
rename to packages/web-components/examples/stackblitz/components/tabs-extended-media/package.json
diff --git a/packages/web-components/examples/codesandbox/components/tabs-extended-media/src/index.js b/packages/web-components/examples/stackblitz/components/tabs-extended-media/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/tabs-extended-media/src/index.js
rename to packages/web-components/examples/stackblitz/components/tabs-extended-media/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components/tabs-extended-media/src/index.scss b/packages/web-components/examples/stackblitz/components/tabs-extended-media/src/index.scss
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/tabs-extended-media/src/index.scss
rename to packages/web-components/examples/stackblitz/components/tabs-extended-media/src/index.scss
diff --git a/packages/web-components/examples/codesandbox/components/tabs-extended/.gitignore b/packages/web-components/examples/stackblitz/components/tabs-extended/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/tabs-extended/.gitignore
rename to packages/web-components/examples/stackblitz/components/tabs-extended/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components/tabs-extended/cdn.html b/packages/web-components/examples/stackblitz/components/tabs-extended/cdn.html
similarity index 83%
rename from packages/web-components/examples/codesandbox/components/tabs-extended/cdn.html
rename to packages/web-components/examples/stackblitz/components/tabs-extended/cdn.html
index 9241686e9d2..e4071ac8466 100644
--- a/packages/web-components/examples/codesandbox/components/tabs-extended/cdn.html
+++ b/packages/web-components/examples/stackblitz/components/tabs-extended/cdn.html
@@ -16,7 +16,7 @@
   <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style type="text/css">
     /* Suppress custom element until styles are loaded */
-    cds-tabs-extended:not(:defined) {
+    c4d-tabs-extended:not(:defined) {
       display: none;
     }
   </style>
@@ -29,14 +29,14 @@
     <div class="cds--col-sm-4 cds--col-lg-12">
       <h1>Hello World! 👋</h1>
 
-      <cds-tabs-extended>
-        <cds-tab label="First tab">
+      <c4d-tabs-extended>
+        <c4d-tab label="First tab">
           <p>Content for first tab goes here.</p>
-        </cds-tab>
-        <cds-tab label="Second tab">
+        </c4d-tab>
+        <c4d-tab label="Second tab">
           <p>Content for second tab goes here.</p>
-        </cds-tab>
-      </cds-tabs-extended>
+        </c4d-tab>
+      </c4d-tabs-extended>
     </div>
   </div>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/tabs-extended/index.html b/packages/web-components/examples/stackblitz/components/tabs-extended/index.html
similarity index 82%
rename from packages/web-components/examples/codesandbox/components/tabs-extended/index.html
rename to packages/web-components/examples/stackblitz/components/tabs-extended/index.html
index 2d405615c61..4e51ea56b44 100644
--- a/packages/web-components/examples/codesandbox/components/tabs-extended/index.html
+++ b/packages/web-components/examples/stackblitz/components/tabs-extended/index.html
@@ -16,7 +16,7 @@
   <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style type="text/css">
     /* Suppress custom element until styles are loaded */
-    cds-tabs-extended:not(:defined) {
+    c4d-tabs-extended:not(:defined) {
       display: none;
     }
   </style>
@@ -28,14 +28,14 @@
     <div class="cds--col-sm-4 cds--col-lg-12">
       <h1>Hello World! 👋</h1>
 
-      <cds-tabs-extended>
-        <cds-tab label="First tab">
+      <c4d-tabs-extended>
+        <c4d-tab label="First tab">
           <p>Content for first tab goes here.</p>
-        </cds-tab>
-        <cds-tab label="Second tab">
+        </c4d-tab>
+        <c4d-tab label="Second tab">
           <p>Content for second tab goes here.</p>
-        </cds-tab>
-      </cds-tabs-extended>
+        </c4d-tab>
+      </c4d-tabs-extended>
     </div>
   </div>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/tabs-extended/package.json b/packages/web-components/examples/stackblitz/components/tabs-extended/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/tabs-extended/package.json
rename to packages/web-components/examples/stackblitz/components/tabs-extended/package.json
diff --git a/packages/web-components/examples/codesandbox/components/tabs-extended/src/index.js b/packages/web-components/examples/stackblitz/components/tabs-extended/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/tabs-extended/src/index.js
rename to packages/web-components/examples/stackblitz/components/tabs-extended/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components/tabs-extended/src/with-cta-block-item-rows.js b/packages/web-components/examples/stackblitz/components/tabs-extended/src/with-cta-block-item-rows.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/tabs-extended/src/with-cta-block-item-rows.js
rename to packages/web-components/examples/stackblitz/components/tabs-extended/src/with-cta-block-item-rows.js
diff --git a/packages/web-components/examples/stackblitz/components/tabs-extended/with-cta-block-item-rows.html b/packages/web-components/examples/stackblitz/components/tabs-extended/with-cta-block-item-rows.html
new file mode 100644
index 00000000000..fa91fb68145
--- /dev/null
+++ b/packages/web-components/examples/stackblitz/components/tabs-extended/with-cta-block-item-rows.html
@@ -0,0 +1,345 @@
+<!--
+@license
+
+Copyright IBM Corp. 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.
+-->
+
+<html>
+<head>
+  <title>@carbon/ibmdotcom-web-components example</title>
+  <meta charset="UTF-8"/>
+  <link rel="stylesheet"
+        href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
+  <style type="text/css">
+    /* Suppress custom element until styles are loaded */
+    c4d-tabs-extended:not(:defined) {
+      display: none;
+    }
+  </style>
+  <script src="src/with-cta-block-item-rows.js" type="module"></script>
+</head>
+<body>
+  <div class="cds--grid">
+    <div class="cds--row">
+      <div class="cds--col-sm-4">
+        <c4d-tabs-extended orientation="horizontal">
+          <c4d-tab label="Relational">
+            <c4d-cta-block>
+              <c4d-content-block-copy size="md">
+                <c4d-content-block-paragraph>
+                  Use the relational database type for traditional applications such as enterprise resource planning, customer relationship management and e-commerce, along with ledger and audit forensics.
+                </c4d-content-block-paragraph>
+              </c4d-content-block-copy>
+              <c4d-cta-block-item-row>
+                <c4d-cta-block-item>
+                  <c4d-content-item-heading>
+                    Db2
+                  </c4d-content-item-heading>
+                  <c4d-content-item-copy>
+                    <c4d-content-item-paragraph>
+                      Cloud
+                    </c4d-content-item-paragraph>
+                  </c4d-content-item-copy>
+                  <c4d-video-cta-container>
+                    <a href="https://www.ibm.com/cloud/db2-on-cloud">
+                      <span class="cds--link-text">IBM Db2 on Cloud</span>
+                      <span class="ibm_icon_arrowright_local"></span>
+                    </a>
+                  </c4d-video-cta-container>
+                </c4d-cta-block-item>
+                <c4d-cta-block-item>
+                  <c4d-content-item-heading>
+                  </c4d-content-item-heading>
+                  <c4d-content-item-copy>
+                    <c4d-content-item-paragraph>
+                      Software
+                    </c4d-content-item-paragraph>
+                  </c4d-content-item-copy>
+                  <c4d-video-cta-container>
+                    <a href="https://www.ibm.com/products/db2-database">
+                      <span class="cds--link-text">IBM Db2 Database</span>
+                      <span class="ibm_icon_arrowright_local"></span>
+                    </a>
+                  </c4d-video-cta-container>
+                </c4d-cta-block-item>
+                <c4d-cta-block-item>
+                  <c4d-content-item-heading>
+                    PostgreSQL
+                  </c4d-content-item-heading>
+                  <c4d-content-item-copy>
+                    <c4d-content-item-paragraph>
+                      Cloud
+                    </c4d-content-item-paragraph>
+                  </c4d-content-item-copy>
+                  <c4d-video-cta-container>
+                    <a href="https://www.ibm.com/cloud/databases-for-postgresql">
+                      <span class="cds--link-text">IBM Cloud Databases for PostgreSQL</span>
+                      <span class="ibm_icon_arrowright_local"></span>
+                    </a>
+                  </c4d-video-cta-container>
+                </c4d-cta-block-item>
+              </c4d-cta-block-item-row>
+              <c4d-cta-block-item-row>
+                <c4d-cta-block-item>
+                  <c4d-content-item-heading>
+                    Enterprise DB
+                  </c4d-content-item-heading>
+                  <c4d-content-item-copy>
+                    <c4d-content-item-paragraph>
+                      Cloud
+                    </c4d-content-item-paragraph>
+                  </c4d-content-item-copy>
+                  <c4d-video-cta-container>
+                    <a href="https://www.ibm.com/cloud/databases-for-enterprisedb">
+                      <span class="cds--link-text">IBM Cloud Databases for EnterpriseDB</span>
+                      <span class="ibm_icon_arrowright_local"></span>
+                    </a>
+                  </c4d-video-cta-container>
+                </c4d-cta-block-item>
+                <c4d-cta-block-item>
+                  <c4d-content-item-heading>
+                  </c4d-content-item-heading>
+                  <c4d-content-item-copy>
+                    <c4d-content-item-paragraph>
+                      Software
+                    </c4d-content-item-paragraph>
+                  </c4d-content-item-copy>
+                  <c4d-video-cta-container>
+                    <a href="https://www.ibm.com/products/postgres-enterprise">
+                      <span class="cds--link-text">EDB Postgres Enterprise and Standard with IBM</span>
+                      <span class="ibm_icon_arrowright_local"></span>
+                    </a>
+                  </c4d-video-cta-container>
+                </c4d-cta-block-item>
+                <c4d-cta-block-item>
+                  <c4d-content-item-heading>
+                    MySQL
+                  </c4d-content-item-heading>
+                  <c4d-content-item-copy>
+                    <c4d-content-item-paragraph>
+                      Cloud
+                    </c4d-content-item-paragraph>
+                  </c4d-content-item-copy>
+                  <c4d-video-cta-container>
+                    <a href="https://www.ibm.com/cloud/databases-for-mysql">
+                      <span class="cds--link-text">IBM Cloud Databases for MySQL</span>
+                      <span class="ibm_icon_arrowright_local"></span>
+                    </a>
+                  </c4d-video-cta-container>
+                </c4d-cta-block-item>
+              </c4d-cta-block-item-row>
+              <c4d-cta-block-item-row>
+                <c4d-cta-block-item>
+                  <c4d-content-item-heading>
+                    SingleStore
+                  </c4d-content-item-heading>
+                  <c4d-content-item-copy>
+                    <c4d-content-item-paragraph>
+                      Software
+                    </c4d-content-item-paragraph>
+                  </c4d-content-item-copy>
+                  <c4d-video-cta-container>
+                    <a href="https://www.ibm.com/products/singlestore">
+                      <span class="cds--link-text">SingleStore DB with IBM</span>
+                      <span class="ibm_icon_arrowright_local"></span>
+                    </a>
+                  </c4d-video-cta-container>
+                </c4d-cta-block-item>
+              </c4d-cta-block-item-row>
+            </c4d-cta-block>
+          </c4d-tab>
+          <c4d-tab label="Data warehouse">
+            <c4d-cta-block>
+              <c4d-content-block-copy size="md">
+                <c4d-content-block-paragraph>
+                  Use the data warehouse database type for analytical use cases such as data warehouses, data lakes and business intelligence.
+                </c4d-content-block-paragraph>
+              </c4d-content-block-copy>
+              <c4d-cta-block-item-row>
+                <c4d-cta-block-item>
+                  <c4d-content-item-heading>
+                    Db2 Warehouse
+                  </c4d-content-item-heading>
+                  <c4d-content-item-copy>
+                    <c4d-content-item-paragraph>
+                      Cloud
+                    </c4d-content-item-paragraph>
+                  </c4d-content-item-copy>
+                  <c4d-video-cta-container>
+                    <a href="https://www.ibm.com/cloud/db2-warehouse-on-cloud">
+                      <span class="cds--link-text">IBM Db2 Data Warehouse on Cloud</span>
+                      <span class="ibm_icon_arrowright_local"></span>
+                    </a>
+                  </c4d-video-cta-container>
+                </c4d-cta-block-item>
+                <c4d-cta-block-item>
+                  <c4d-content-item-heading>
+                  </c4d-content-item-heading>
+                  <c4d-content-item-copy>
+                    <c4d-content-item-paragraph>
+                      Software
+                    </c4d-content-item-paragraph>
+                  </c4d-content-item-copy>
+                  <c4d-video-cta-container>
+                    <a href="https://www.ibm.com/products/db2-warehouse">
+                      <span class="cds--link-text">IBM Db2 Data Warehouse</span>
+                      <span class="ibm_icon_arrowright_local"></span>
+                    </a>
+                  </c4d-video-cta-container>
+                </c4d-cta-block-item>
+                <c4d-cta-block-item>
+                  <c4d-content-item-heading>
+                    Netezza
+                  </c4d-content-item-heading>
+                  <c4d-content-item-copy>
+                    <c4d-content-item-paragraph>
+                      Software
+                    </c4d-content-item-paragraph>
+                  </c4d-content-item-copy>
+                  <c4d-video-cta-container>
+                    <a href="https://www.ibm.com/products/netezza">
+                      <span class="cds--link-text">IBM Netezza Performance Server</span>
+                      <span class="ibm_icon_arrowright_local"></span>
+                    </a>
+                  </c4d-video-cta-container>
+                </c4d-cta-block-item>
+              </c4d-cta-block-item-row>
+            </c4d-cta-block>
+          </c4d-tab>
+          <c4d-tab label="Document">
+            <c4d-cta-block>
+              <c4d-content-block-copy size="md">
+                <c4d-content-block-paragraph>
+                  Use the document database type for content management, catalogs and user profiles, in addition to web and mobile apps.
+                </c4d-content-block-paragraph>
+              </c4d-content-block-copy>
+              <c4d-cta-block-item-row>
+                <c4d-cta-block-item>
+                  <c4d-content-item-heading>
+                    MongoDB
+                  </c4d-content-item-heading>
+                  <c4d-content-item-copy>
+                    <c4d-content-item-paragraph>
+                      Cloud
+                    </c4d-content-item-paragraph>
+                  </c4d-content-item-copy>
+                  <c4d-video-cta-container>
+                    <a href="https://www.ibm.com/cloud/databases-for-mongodb">
+                      <span class="cds--link-text">IBM Cloud Databases for MongoDB</span>
+                      <span class="ibm_icon_arrowright_local"></span>
+                    </a>
+                  </c4d-video-cta-container>
+                </c4d-cta-block-item>
+                <c4d-cta-block-item>
+                  <c4d-content-item-heading>
+                  </c4d-content-item-heading>
+                  <c4d-content-item-copy>
+                    <c4d-content-item-paragraph>
+                      Software
+                    </c4d-content-item-paragraph>
+                  </c4d-content-item-copy>
+                  <c4d-video-cta-container>
+                    <a href="https://www.ibm.com/products/mongodb-enterprise-advanced">
+                      <span class="cds--link-text">MongoDB Enterprise Advanced with IBM</span>
+                      <span class="ibm_icon_arrowright_local"></span>
+                    </a>
+                  </c4d-video-cta-container>
+                </c4d-cta-block-item>
+                <c4d-cta-block-item>
+                  <c4d-content-item-heading>
+                    IBM Cloudant
+                  </c4d-content-item-heading>
+                  <c4d-content-item-copy>
+                    <c4d-content-item-paragraph>
+                      Cloud
+                    </c4d-content-item-paragraph>
+                  </c4d-content-item-copy>
+                  <c4d-video-cta-container>
+                    <a href="https://www.ibm.com/cloud/cloudant">
+                      <span class="cds--link-text">IBM Cloudant</span>
+                      <span class="ibm_icon_arrowright_local"></span>
+                    </a>
+                  </c4d-video-cta-container>
+                </c4d-cta-block-item>
+              </c4d-cta-block-item-row>
+            </c4d-cta-block>
+          </c4d-tab>
+          <c4d-tab label="Key value">
+            <c4d-cta-block>
+              <c4d-content-block-copy size="md">
+                <c4d-content-block-paragraph>
+                  Use the key value database type for distributed systems consensus.
+                </c4d-content-block-paragraph>
+              </c4d-content-block-copy>
+              <c4d-cta-block-item-row>
+                <c4d-cta-block-item>
+                  <c4d-content-item-heading>
+                    etcd
+                  </c4d-content-item-heading>
+                  <c4d-content-item-copy>
+                    <c4d-content-item-paragraph>
+                      Cloud
+                    </c4d-content-item-paragraph>
+                  </c4d-content-item-copy>
+                  <c4d-video-cta-container>
+                    <a href="https://www.ibm.com/cloud/databases-for-etcd">
+                      <span class="cds--link-text">IBM Databases for etcd</span>
+                      <span class="ibm_icon_arrowright_local"></span>
+                    </a>
+                  </c4d-video-cta-container>
+                </c4d-cta-block-item>
+              </c4d-cta-block-item-row>
+            </c4d-cta-block>
+          </c4d-tab>
+          <c4d-tab label="Wide columnar">
+            <c4d-cta-block>
+              <c4d-content-block-copy size="md">
+                <c4d-content-block-paragraph>
+                  Use the wide columnar database type for high-scale industrial purposes, including logistics, transaction logging, equipment maintenance, fleet management and route optimization.
+                </c4d-content-block-paragraph>
+              </c4d-content-block-copy>
+              <c4d-cta-block-item-row>
+                <c4d-cta-block-item>
+                  <c4d-content-item-heading>
+                    DataStax
+                  </c4d-content-item-heading>
+                  <c4d-content-item-copy>
+                    <c4d-content-item-paragraph>
+                      Cloud
+                    </c4d-content-item-paragraph>
+                  </c4d-content-item-copy>
+                  <c4d-video-cta-container>
+                    <a href="https://www.ibm.com/cloud/databases-for-datastax?mhsrc=ibmsearch_a&amp;mhq=datastax">
+                      <span class="cds--link-text">IBM Cloud Databases for DataStax</span>
+                      <span class="ibm_icon_arrowright_local"></span>
+                    </a>
+                  </c4d-video-cta-container>
+                </c4d-cta-block-item>
+                <c4d-cta-block-item>
+                  <c4d-content-item-heading>
+                  </c4d-content-item-heading>
+                  <c4d-content-item-copy>
+                    <c4d-content-item-paragraph>
+                      Software
+                    </c4d-content-item-paragraph>
+                  </c4d-content-item-copy>
+                  <c4d-video-cta-container>
+                    <a href="https://www.ibm.com/products/datastax-enterprise">
+                      <span class="cds--link-text">DataStax Enterprise with IBM</span>
+                      <span class="ibm_icon_arrowright_local"></span>
+                    </a>
+                  </c4d-video-cta-container>
+                </c4d-cta-block-item>
+              </c4d-cta-block-item-row>
+            </c4d-cta-block>
+          </c4d-tab>
+        </c4d-tabs-extended>
+      </div>
+    </div>
+  </div>
+</body>
+</html>
diff --git a/packages/web-components/examples/codesandbox/components/video-player/.gitignore b/packages/web-components/examples/stackblitz/components/video-player/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/video-player/.gitignore
rename to packages/web-components/examples/stackblitz/components/video-player/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components/video-player/.sassrc b/packages/web-components/examples/stackblitz/components/video-player/.sassrc
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/video-player/.sassrc
rename to packages/web-components/examples/stackblitz/components/video-player/.sassrc
diff --git a/packages/web-components/examples/codesandbox/components/video-player/cdn.html b/packages/web-components/examples/stackblitz/components/video-player/cdn.html
similarity index 89%
rename from packages/web-components/examples/codesandbox/components/video-player/cdn.html
rename to packages/web-components/examples/stackblitz/components/video-player/cdn.html
index c2ca4f3704b..02e8d182311 100644
--- a/packages/web-components/examples/codesandbox/components/video-player/cdn.html
+++ b/packages/web-components/examples/stackblitz/components/video-player/cdn.html
@@ -15,7 +15,7 @@
   <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style type="text/css">
     /* Suppress custom element until styles are loaded */
-    cds-video-player-container:not(:defined) {
+    c4d-video-player-container:not(:defined) {
       display: none;
     }
   </style>
@@ -25,7 +25,7 @@
 <div class="cds--grid">
   <div class="cds--row">
     <div class="cds--col-sm-4 cds--col-lg-8 cds--offset-lg-4">
-      <cds-video-player-container video-id="1_9h94wo6b"></cds-video-player-container>
+      <c4d-video-player-container video-id="1_9h94wo6b"></c4d-video-player-container>
     </div>
   </div>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/video-player/index.html b/packages/web-components/examples/stackblitz/components/video-player/index.html
similarity index 90%
rename from packages/web-components/examples/codesandbox/components/video-player/index.html
rename to packages/web-components/examples/stackblitz/components/video-player/index.html
index cf0c976e4eb..364709ba3a2 100644
--- a/packages/web-components/examples/codesandbox/components/video-player/index.html
+++ b/packages/web-components/examples/stackblitz/components/video-player/index.html
@@ -24,7 +24,7 @@
     <div class="cds--grid">
       <div class="cds--row">
         <div class="cds--col-sm-4 cds--col-lg-8 cds--offset-lg-4">
-          <cds-video-player-container video-id="1_9h94wo6b"></cds-video-player-container>
+          <c4d-video-player-container video-id="1_9h94wo6b"></c4d-video-player-container>
         </div>
       </div>
     </div>
diff --git a/packages/web-components/examples/codesandbox/components/video-player/package.json b/packages/web-components/examples/stackblitz/components/video-player/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/video-player/package.json
rename to packages/web-components/examples/stackblitz/components/video-player/package.json
diff --git a/packages/web-components/examples/codesandbox/components/video-player/src/index.js b/packages/web-components/examples/stackblitz/components/video-player/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/video-player/src/index.js
rename to packages/web-components/examples/stackblitz/components/video-player/src/index.js
diff --git a/packages/web-components/examples/codesandbox/components/video-player/src/index.scss b/packages/web-components/examples/stackblitz/components/video-player/src/index.scss
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/video-player/src/index.scss
rename to packages/web-components/examples/stackblitz/components/video-player/src/index.scss
diff --git a/packages/web-components/examples/codesandbox/usage/dotcom-shell-cdn-with-handlebars/app.js b/packages/web-components/examples/stackblitz/usage/dotcom-shell-cdn-with-handlebars/app.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/usage/dotcom-shell-cdn-with-handlebars/app.js
rename to packages/web-components/examples/stackblitz/usage/dotcom-shell-cdn-with-handlebars/app.js
diff --git a/packages/web-components/examples/codesandbox/usage/dotcom-shell-cdn-with-handlebars/index.hbs b/packages/web-components/examples/stackblitz/usage/dotcom-shell-cdn-with-handlebars/index.hbs
similarity index 75%
rename from packages/web-components/examples/codesandbox/usage/dotcom-shell-cdn-with-handlebars/index.hbs
rename to packages/web-components/examples/stackblitz/usage/dotcom-shell-cdn-with-handlebars/index.hbs
index f8edc3643a4..c6b214e2390 100644
--- a/packages/web-components/examples/codesandbox/usage/dotcom-shell-cdn-with-handlebars/index.hbs
+++ b/packages/web-components/examples/stackblitz/usage/dotcom-shell-cdn-with-handlebars/index.hbs
@@ -83,45 +83,45 @@ LICENSE file in the root directory of this source tree.
     </style>
   </head>
   <body>
-    <cds-masthead>
-      <cds-masthead-menu-button></cds-masthead-menu-button>
-      <cds-masthead-logo></cds-masthead-logo>
-      <cds-top-nav menu-bar-label="IBM [Platform]">
+    <c4d-masthead>
+      <c4d-masthead-menu-button></c4d-masthead-menu-button>
+      <c4d-masthead-logo></c4d-masthead-logo>
+      <c4d-top-nav menu-bar-label="IBM [Platform]">
         {{#each navLinks}}
           {{#if menuItems}}
-            <cds-top-nav-menu menu-label="{{title}}" trigger-content="{{title}}">
+            <c4d-top-nav-menu menu-label="{{title}}" trigger-content="{{title}}">
               {{#each menuItems}}
-                <cds-top-nav-menu-item href="{{url}}" title="{{title}}"></cds-top-nav-menu-item>
+                <c4d-top-nav-menu-item href="{{url}}" title="{{title}}"></c4d-top-nav-menu-item>
               {{/each}}
-            </cds-top-nav-menu>
+            </c4d-top-nav-menu>
           {{else}}
-            <cds-top-nav-item href="{{url}}" title="{{title}}"></cds-top-nav-item>
+            <c4d-top-nav-item href="{{url}}" title="{{title}}"></c4d-top-nav-item>
           {{/if}}
         {{/each}}
-      </cds-top-nav>
-      <cds-masthead-search-container></cds-masthead-search-container>
-      <cds-masthead-global-bar>
-        <cds-masthead-profile authenticated>
+      </c4d-top-nav>
+      <c4d-masthead-search-container></c4d-masthead-search-container>
+      <c4d-masthead-global-bar>
+        <c4d-masthead-profile authenticated>
           {{#each profileItems}}
-            <cds-masthead-profile-item href="{{href}}">{{title}}</cds-masthead-profile-item>
+            <c4d-masthead-profile-item href="{{href}}">{{title}}</c4d-masthead-profile-item>
           {{/each}}
-        </cds-masthead-profile>
-      </cds-masthead-global-bar>
-      <cds-left-nav-overlay></cds-left-nav-overlay>
-      <cds-left-nav menu-bar-label="IBM [Platform]">
+        </c4d-masthead-profile>
+      </c4d-masthead-global-bar>
+      <c4d-left-nav-overlay></c4d-left-nav-overlay>
+      <c4d-left-nav menu-bar-label="IBM [Platform]">
         {{#each navLinks}}
           {{#if menuItems}}
-            <cds-left-nav-menu title="{{title}}">
+            <c4d-left-nav-menu title="{{title}}">
               {{#each menuItems}}
-                <cds-left-nav-menu-item href="{{url}}" title="{{title}}"></cds-left-nav-menu-item>
+                <c4d-left-nav-menu-item href="{{url}}" title="{{title}}"></c4d-left-nav-menu-item>
               {{/each}}
-            </cds-left-nav-menu>
+            </c4d-left-nav-menu>
           {{else}}
-            <cds-left-nav-item href="{{url}}" title="{{title}}"></cds-left-nav-item>
+            <c4d-left-nav-item href="{{url}}" title="{{title}}"></c4d-left-nav-item>
           {{/if}}
         {{/each}}
-      </cds-left-nav>
-    </cds-masthead>
+      </c4d-left-nav>
+    </c4d-masthead>
     <main class="bx--content cds-ce-demo--ui-shell-content">
       <div class="bx--grid">
         <div class="bx--row">
@@ -167,40 +167,40 @@ LICENSE file in the root directory of this source tree.
         </div>
       </div>
     </main>
-    <cds-footer>
-      <cds-footer-logo slot="brand"></cds-footer-logo>
-      <cds-footer-nav>
+    <c4d-footer>
+      <c4d-footer-logo slot="brand"></c4d-footer-logo>
+      <c4d-footer-nav>
         {{#each footerLinks}}
-          <cds-footer-nav-group title-text="{{title}}">
+          <c4d-footer-nav-group title-text="{{title}}">
             {{#each links}}
-              <cds-footer-nav-item href="{{url}}">{{title}}</cds-footer-nav-item>
+              <c4d-footer-nav-item href="{{url}}">{{title}}</c4d-footer-nav-item>
             {{/each}}
-          </cds-footer-nav-group>
+          </c4d-footer-nav-group>
         {{/each}}
-      </cds-footer-nav>
-      <cds-locale-button slot="locale-button">{{langDisplay}}</cds-locale-button>
-      <cds-legal-nav slot="legal-nav">
+      </c4d-footer-nav>
+      <c4d-locale-button slot="locale-button">{{langDisplay}}</c4d-locale-button>
+      <c4d-legal-nav slot="legal-nav">
         {{#each legalLinks}}
-          <cds-legal-nav-item href="{{url}}">{{title}}</cds-legal-nav-item>
+          <c4d-legal-nav-item href="{{url}}">{{title}}</c4d-legal-nav-item>
         {{/each}}
-        <cds-legal-nav-cookie-preferences-placeholder></cds-legal-nav-cookie-preferences-placeholder>
-      </cds-legal-nav>
-    </cds-footer>
-    <cds-locale-modal
+        <c4d-legal-nav-cookie-preferences-placeholder></c4d-legal-nav-cookie-preferences-placeholder>
+      </c4d-legal-nav>
+    </c4d-footer>
+    <c4d-locale-modal
       close-button-assistive-text="{{localeModal.modalClose}}"
       header-title="{{localeModal.headerTitle}}"
       lang-display="{{langDisplay}}"
     >
-      <cds-regions>
+      <c4d-regions>
         {{#each regionList}}
           {{#if countryList}}
-            <cds-region-item name="{{name}}"></cds-region-item>
+            <c4d-region-item name="{{name}}"></c4d-region-item>
           {{else}}
-            <cds-region-item invalid name="{{name}}"></cds-region-item>
+            <c4d-region-item invalid name="{{name}}"></c4d-region-item>
           {{/if}}
         {{/each}}
-      </cds-regions>
-      <cds-locale-search
+      </c4d-regions>
+      <c4d-locale-search
         close-button-assistive-text="{{localeModal.searchClearText}}"
         label-text="{{localeModal.searchLabel}}"
         placeholder="{{localeModal.searchPlaceholder}}"
@@ -208,10 +208,10 @@ LICENSE file in the root directory of this source tree.
         unavailability-label-text="{{localeModal.unavailabilityText}}"
       >
         {{#each allCountryList}}
-          <cds-locale-item country="{{country}}" href="{{href}}" language="{{language}}" locale="{{locale}}" region="{{region}}">
-          </cds-locale-item>
+          <c4d-locale-item country="{{country}}" href="{{href}}" language="{{language}}" locale="{{locale}}" region="{{region}}">
+          </c4d-locale-item>
         {{/each}}
-      </cds-locale-search>
-    </cds-locale-modal>
+      </c4d-locale-search>
+    </c4d-locale-modal>
   </body>
 </html>
diff --git a/packages/web-components/examples/codesandbox/usage/dotcom-shell-cdn-with-handlebars/package.json b/packages/web-components/examples/stackblitz/usage/dotcom-shell-cdn-with-handlebars/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/usage/dotcom-shell-cdn-with-handlebars/package.json
rename to packages/web-components/examples/stackblitz/usage/dotcom-shell-cdn-with-handlebars/package.json
diff --git a/packages/web-components/examples/codesandbox/usage/dotcom-shell-cdn-with-rtl/app.js b/packages/web-components/examples/stackblitz/usage/dotcom-shell-cdn-with-rtl/app.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/usage/dotcom-shell-cdn-with-rtl/app.js
rename to packages/web-components/examples/stackblitz/usage/dotcom-shell-cdn-with-rtl/app.js
diff --git a/packages/web-components/examples/codesandbox/usage/dotcom-shell-cdn-with-rtl/index.hbs b/packages/web-components/examples/stackblitz/usage/dotcom-shell-cdn-with-rtl/index.hbs
similarity index 99%
rename from packages/web-components/examples/codesandbox/usage/dotcom-shell-cdn-with-rtl/index.hbs
rename to packages/web-components/examples/stackblitz/usage/dotcom-shell-cdn-with-rtl/index.hbs
index cbe464eaa6f..df4e6462321 100644
--- a/packages/web-components/examples/codesandbox/usage/dotcom-shell-cdn-with-rtl/index.hbs
+++ b/packages/web-components/examples/stackblitz/usage/dotcom-shell-cdn-with-rtl/index.hbs
@@ -223,7 +223,7 @@ LICENSE file in the root directory of this source tree.
     <link rel="alternate" hreflang="en-zw" href="https://www.ibm.com/zw-en">
   </head>
   <body>
-    <cds-masthead-container></cds-masthead-container>
+    <c4d-masthead-container></c4d-masthead-container>
     <main class="bx--content cds-ce-demo--ui-shell-content">
       <div class="bx--grid">
         <div class="bx--row">
@@ -269,6 +269,6 @@ LICENSE file in the root directory of this source tree.
         </div>
       </div>
     </main>
-    <cds-footer-container></cds-footer-container>
+    <c4d-footer-container></c4d-footer-container>
   </body>
 </html>
diff --git a/packages/web-components/examples/codesandbox/usage/dotcom-shell-cdn-with-rtl/package.json b/packages/web-components/examples/stackblitz/usage/dotcom-shell-cdn-with-rtl/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/usage/dotcom-shell-cdn-with-rtl/package.json
rename to packages/web-components/examples/stackblitz/usage/dotcom-shell-cdn-with-rtl/package.json
diff --git a/packages/web-components/examples/codesandbox/usage/dotcom-shell-cdn/index.html b/packages/web-components/examples/stackblitz/usage/dotcom-shell-cdn/index.html
similarity index 99%
rename from packages/web-components/examples/codesandbox/usage/dotcom-shell-cdn/index.html
rename to packages/web-components/examples/stackblitz/usage/dotcom-shell-cdn/index.html
index 49a5b29e9c2..8eef4c8bd9d 100644
--- a/packages/web-components/examples/codesandbox/usage/dotcom-shell-cdn/index.html
+++ b/packages/web-components/examples/stackblitz/usage/dotcom-shell-cdn/index.html
@@ -211,7 +211,7 @@
     <link rel="alternate" hreflang="en-zw" href="https://www.ibm.com/zw-en" />
   </head>
   <body>
-    <cds-masthead-container></cds-masthead-container>
+    <c4d-masthead-container></c4d-masthead-container>
     <main>
       <h2>
         Purpose and function
@@ -249,6 +249,6 @@ <h2>
         section. If tabs are needed on a page when using a side-nav, then the tabs are secondary in hierarchy to the side-nav.
       </p>
     </main>
-    <cds-footer-container></cds-footer-container>
+    <c4d-footer-container></c4d-footer-container>
   </body>
 </html>
diff --git a/packages/web-components/examples/codesandbox/usage/markdown-handlebars/.gitignore b/packages/web-components/examples/stackblitz/usage/markdown-handlebars/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/usage/markdown-handlebars/.gitignore
rename to packages/web-components/examples/stackblitz/usage/markdown-handlebars/.gitignore
diff --git a/packages/web-components/examples/codesandbox/usage/markdown-handlebars/index.hbs b/packages/web-components/examples/stackblitz/usage/markdown-handlebars/index.hbs
similarity index 78%
rename from packages/web-components/examples/codesandbox/usage/markdown-handlebars/index.hbs
rename to packages/web-components/examples/stackblitz/usage/markdown-handlebars/index.hbs
index 06e528fb8e2..ef933d08347 100644
--- a/packages/web-components/examples/codesandbox/usage/markdown-handlebars/index.hbs
+++ b/packages/web-components/examples/stackblitz/usage/markdown-handlebars/index.hbs
@@ -25,7 +25,7 @@ LICENSE file in the root directory of this source tree.
   <div class="bx--grid">
     <div class="bx--row">
       <div class="bx--col-sm-4 bx-col-lg-12 bx--offset-lg-4">
-        <cds-content-block-simple>
+        <c4d-content-block-simple>
           <div class="bx--content-block__heading" slot="heading">Curabitur malesuada varius mi eu posuere</div>
           <div class="bx--content-item__copy">
             {{{{markdown}}}}
@@ -49,18 +49,18 @@ LICENSE file in the root directory of this source tree.
               1. list item 2a
             {{{{/markdown}}}}
           </div>
-          <cds-image slot="media" alt="Image alt text"
+          <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-item media="(min-width: 672px)"
+            <c4d-image-item media="(min-width: 672px)"
               srcset="https://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616">
-            </cds-image-item>
-            <cds-image-item media="(min-width: 400px)"
-              srcset="https://fpoimg.com/400x225?text=16:9&bg_color=ee5396&text_color=161616"></cds-image-item>
-            <cds-image-item media="(min-width: 320px)"
-              srcset="https://fpoimg.com/672x672?text=16:9&bg_color=ee5396&text_color=161616"></cds-image-item>
-          </cds-image>
-          <cds-text-cta slot="footer" href="https://www.ibm.com/" cta-type="local">Lorem ipsum dolor sit amet</cds-text-cta>
-        </cds-content-block-simple>
+            </c4d-image-item>
+            <c4d-image-item media="(min-width: 400px)"
+              srcset="https://fpoimg.com/400x225?text=16:9&bg_color=ee5396&text_color=161616"></c4d-image-item>
+            <c4d-image-item media="(min-width: 320px)"
+              srcset="https://fpoimg.com/672x672?text=16:9&bg_color=ee5396&text_color=161616"></c4d-image-item>
+          </c4d-image>
+          <c4d-text-cta slot="footer" href="https://www.ibm.com/" cta-type="local">Lorem ipsum dolor sit amet</c4d-text-cta>
+        </c4d-content-block-simple>
       </div>
     </div>
   </div>
diff --git a/packages/web-components/examples/codesandbox/usage/markdown-handlebars/package.json b/packages/web-components/examples/stackblitz/usage/markdown-handlebars/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/usage/markdown-handlebars/package.json
rename to packages/web-components/examples/stackblitz/usage/markdown-handlebars/package.json
diff --git a/packages/web-components/examples/codesandbox/usage/markdown-handlebars/src/index.js b/packages/web-components/examples/stackblitz/usage/markdown-handlebars/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/usage/markdown-handlebars/src/index.js
rename to packages/web-components/examples/stackblitz/usage/markdown-handlebars/src/index.js
diff --git a/packages/web-components/examples/codesandbox/usage/markdown-handlebars/src/index.scss b/packages/web-components/examples/stackblitz/usage/markdown-handlebars/src/index.scss
similarity index 100%
rename from packages/web-components/examples/codesandbox/usage/markdown-handlebars/src/index.scss
rename to packages/web-components/examples/stackblitz/usage/markdown-handlebars/src/index.scss
diff --git a/packages/web-components/examples/codesandbox/usage/markdown-handlebars/webpack.config.js b/packages/web-components/examples/stackblitz/usage/markdown-handlebars/webpack.config.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/usage/markdown-handlebars/webpack.config.js
rename to packages/web-components/examples/stackblitz/usage/markdown-handlebars/webpack.config.js
diff --git a/packages/web-components/examples/codesandbox/usage/react-ssr/.gitignore b/packages/web-components/examples/stackblitz/usage/react-ssr/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/usage/react-ssr/.gitignore
rename to packages/web-components/examples/stackblitz/usage/react-ssr/.gitignore
diff --git a/packages/web-components/examples/codesandbox/usage/react-ssr/app.js b/packages/web-components/examples/stackblitz/usage/react-ssr/app.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/usage/react-ssr/app.js
rename to packages/web-components/examples/stackblitz/usage/react-ssr/app.js
diff --git a/packages/web-components/examples/codesandbox/usage/react-ssr/package.json b/packages/web-components/examples/stackblitz/usage/react-ssr/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/usage/react-ssr/package.json
rename to packages/web-components/examples/stackblitz/usage/react-ssr/package.json
diff --git a/packages/web-components/examples/codesandbox/usage/react-ssr/src/index.css b/packages/web-components/examples/stackblitz/usage/react-ssr/src/index.css
similarity index 100%
rename from packages/web-components/examples/codesandbox/usage/react-ssr/src/index.css
rename to packages/web-components/examples/stackblitz/usage/react-ssr/src/index.css
diff --git a/packages/web-components/examples/codesandbox/usage/react-ssr/src/index.js b/packages/web-components/examples/stackblitz/usage/react-ssr/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/usage/react-ssr/src/index.js
rename to packages/web-components/examples/stackblitz/usage/react-ssr/src/index.js
diff --git a/packages/web-components/examples/codesandbox/usage/react-ssr/src/views/App.js b/packages/web-components/examples/stackblitz/usage/react-ssr/src/views/App.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/usage/react-ssr/src/views/App.js
rename to packages/web-components/examples/stackblitz/usage/react-ssr/src/views/App.js
diff --git a/packages/web-components/examples/codesandbox/usage/react-ssr/webpack.config.js b/packages/web-components/examples/stackblitz/usage/react-ssr/webpack.config.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/usage/react-ssr/webpack.config.js
rename to packages/web-components/examples/stackblitz/usage/react-ssr/webpack.config.js
diff --git a/packages/web-components/examples/codesandbox/usage/v18/.gitignore b/packages/web-components/examples/stackblitz/usage/v18/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/usage/v18/.gitignore
rename to packages/web-components/examples/stackblitz/usage/v18/.gitignore
diff --git a/packages/web-components/examples/codesandbox/usage/v18/index.html b/packages/web-components/examples/stackblitz/usage/v18/index.html
similarity index 98%
rename from packages/web-components/examples/codesandbox/usage/v18/index.html
rename to packages/web-components/examples/stackblitz/usage/v18/index.html
index 680f42dfb52..62fbca2d567 100644
--- a/packages/web-components/examples/codesandbox/usage/v18/index.html
+++ b/packages/web-components/examples/stackblitz/usage/v18/index.html
@@ -47,7 +47,7 @@
   </head>
   <body id="ibm-com" class="ibm-type">
     <div id="ibm-top" class="ibm-landing-page">
-      <cds-masthead-container></cds-masthead-container>
+      <c4d-masthead-container></c4d-masthead-container>
       <div id="ibm-content-wrapper">
         <!-- HEADER WITH L1 NAVIGATION, LEADSPACE, TAB NAVIGATION -->
 
diff --git a/packages/web-components/examples/codesandbox/usage/v18/package.json b/packages/web-components/examples/stackblitz/usage/v18/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/usage/v18/package.json
rename to packages/web-components/examples/stackblitz/usage/v18/package.json
diff --git a/packages/web-components/examples/codesandbox/usage/v18/src/index.js b/packages/web-components/examples/stackblitz/usage/v18/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/usage/v18/src/index.js
rename to packages/web-components/examples/stackblitz/usage/v18/src/index.js
diff --git a/packages/web-components/examples/codesandbox/usage/webpack-basic/index.html b/packages/web-components/examples/stackblitz/usage/webpack-basic/index.html
similarity index 99%
rename from packages/web-components/examples/codesandbox/usage/webpack-basic/index.html
rename to packages/web-components/examples/stackblitz/usage/webpack-basic/index.html
index 9df94ee9338..a7bcc4c1246 100644
--- a/packages/web-components/examples/codesandbox/usage/webpack-basic/index.html
+++ b/packages/web-components/examples/stackblitz/usage/webpack-basic/index.html
@@ -209,7 +209,7 @@
     <link rel="alternate" hreflang="en-zw" href="https://www.ibm.com/zw-en" />
   </head>
   <body>
-    <cds-masthead-container></cds-masthead-container>
+    <c4d-masthead-container></c4d-masthead-container>
     <main>
       <h2>
         Purpose and function
@@ -247,6 +247,6 @@ <h2>
         section. If tabs are needed on a page when using a side-nav, then the tabs are secondary in hierarchy to the side-nav.
       </p>
     </main>
-    <cds-footer-container></cds-footer-container>
+    <c4d-footer-container></c4d-footer-container>
   </body>
 </html>
diff --git a/packages/web-components/examples/codesandbox/usage/webpack-basic/package.json b/packages/web-components/examples/stackblitz/usage/webpack-basic/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/usage/webpack-basic/package.json
rename to packages/web-components/examples/stackblitz/usage/webpack-basic/package.json
diff --git a/packages/web-components/examples/codesandbox/usage/webpack-basic/src/index.js b/packages/web-components/examples/stackblitz/usage/webpack-basic/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/usage/webpack-basic/src/index.js
rename to packages/web-components/examples/stackblitz/usage/webpack-basic/src/index.js
diff --git a/packages/web-components/examples/codesandbox/usage/webpack-basic/webpack.config.js b/packages/web-components/examples/stackblitz/usage/webpack-basic/webpack.config.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/usage/webpack-basic/webpack.config.js
rename to packages/web-components/examples/stackblitz/usage/webpack-basic/webpack.config.js
diff --git a/packages/web-components/examples/codesandbox/usage/webpack-handlebars/index.hbs b/packages/web-components/examples/stackblitz/usage/webpack-handlebars/index.hbs
similarity index 68%
rename from packages/web-components/examples/codesandbox/usage/webpack-handlebars/index.hbs
rename to packages/web-components/examples/stackblitz/usage/webpack-handlebars/index.hbs
index 2363ad8a9f5..6d9212021ea 100644
--- a/packages/web-components/examples/codesandbox/usage/webpack-handlebars/index.hbs
+++ b/packages/web-components/examples/stackblitz/usage/webpack-handlebars/index.hbs
@@ -22,45 +22,45 @@ LICENSE file in the root directory of this source tree.
     </style>
   </head>
   <body>
-    <cds-masthead>
-      <cds-masthead-menu-button></cds-masthead-menu-button>
-      <cds-masthead-logo></cds-masthead-logo>
-      <cds-top-nav menu-bar-label="IBM [Platform]">
+    <c4d-masthead>
+      <c4d-masthead-menu-button></c4d-masthead-menu-button>
+      <c4d-masthead-logo></c4d-masthead-logo>
+      <c4d-top-nav menu-bar-label="IBM [Platform]">
         {{#each navLinks}}
           {{#if menuItems}}
-            <cds-top-nav-menu menu-label="{{title}}" trigger-content="{{title}}">
+            <c4d-top-nav-menu menu-label="{{title}}" trigger-content="{{title}}">
               {{#each menuItems}}
-                <cds-top-nav-menu-item href="{{url}}" title="{{title}}"></cds-top-nav-menu-item>
+                <c4d-top-nav-menu-item href="{{url}}" title="{{title}}"></c4d-top-nav-menu-item>
               {{/each}}
-            </cds-top-nav-menu>
+            </c4d-top-nav-menu>
           {{else}}
-            <cds-top-nav-item href="{{url}}" title="{{title}}"></cds-top-nav-item>
+            <c4d-top-nav-item href="{{url}}" title="{{title}}"></c4d-top-nav-item>
           {{/if}}
         {{/each}}
-      </cds-top-nav>
-      <cds-masthead-search-container></cds-masthead-search-container>
-      <cds-masthead-global-bar>
-        <cds-masthead-profile authenticated>
+      </c4d-top-nav>
+      <c4d-masthead-search-container></c4d-masthead-search-container>
+      <c4d-masthead-global-bar>
+        <c4d-masthead-profile authenticated>
           {{#each profileItems}}
-            <cds-masthead-profile-item href="{{href}}">{{title}}</cds-masthead-profile-item>
+            <c4d-masthead-profile-item href="{{href}}">{{title}}</c4d-masthead-profile-item>
           {{/each}}
-        </cds-masthead-profile>
-      </cds-masthead-global-bar>
-      <cds-left-nav-overlay></cds-left-nav-overlay>
-      <cds-left-nav menu-bar-label="IBM [Platform]">
+        </c4d-masthead-profile>
+      </c4d-masthead-global-bar>
+      <c4d-left-nav-overlay></c4d-left-nav-overlay>
+      <c4d-left-nav menu-bar-label="IBM [Platform]">
         {{#each navLinks}}
           {{#if menuItems}}
-            <cds-left-nav-menu title="{{title}}">
+            <c4d-left-nav-menu title="{{title}}">
               {{#each menuItems}}
-                <cds-left-nav-menu-item href="{{url}}" title="{{title}}"></cds-left-nav-menu-item>
+                <c4d-left-nav-menu-item href="{{url}}" title="{{title}}"></c4d-left-nav-menu-item>
               {{/each}}
-            </cds-left-nav-menu>
+            </c4d-left-nav-menu>
           {{else}}
-            <cds-left-nav-item href="{{url}}" title="{{title}}"></cds-left-nav-item>
+            <c4d-left-nav-item href="{{url}}" title="{{title}}"></c4d-left-nav-item>
           {{/if}}
         {{/each}}
-      </cds-left-nav>
-    </cds-masthead>
+      </c4d-left-nav>
+    </c4d-masthead>
     <main class="bx--content cds-ce-demo--ui-shell-content">
       <div class="bx--grid">
         <div class="bx--row">
@@ -106,40 +106,40 @@ LICENSE file in the root directory of this source tree.
         </div>
       </div>
     </main>
-    <cds-footer>
-      <cds-footer-logo slot="brand"></cds-footer-logo>
-      <cds-footer-nav>
+    <c4d-footer>
+      <c4d-footer-logo slot="brand"></c4d-footer-logo>
+      <c4d-footer-nav>
         {{#each footerLinks}}
-          <cds-footer-nav-group title-text="{{title}}">
+          <c4d-footer-nav-group title-text="{{title}}">
             {{#each links}}
-              <cds-footer-nav-item href="{{url}}">{{title}}</cds-footer-nav-item>
+              <c4d-footer-nav-item href="{{url}}">{{title}}</c4d-footer-nav-item>
             {{/each}}
-          </cds-footer-nav-group>
+          </c4d-footer-nav-group>
         {{/each}}
-      </cds-footer-nav>
-      <cds-locale-button slot="locale-button">{{langDisplay}}</cds-locale-button>
-      <cds-legal-nav slot="legal-nav">
+      </c4d-footer-nav>
+      <c4d-locale-button slot="locale-button">{{langDisplay}}</c4d-locale-button>
+      <c4d-legal-nav slot="legal-nav">
         {{#each legalLinks}}
-          <cds-legal-nav-item href="{{url}}">{{title}}</cds-legal-nav-item>
+          <c4d-legal-nav-item href="{{url}}">{{title}}</c4d-legal-nav-item>
         {{/each}}
-        <cds-legal-nav-cookie-preferences-placeholder></cds-legal-nav-cookie-preferences-placeholder>
-      </cds-legal-nav>
-    </cds-footer>
-    <cds-locale-modal
+        <c4d-legal-nav-cookie-preferences-placeholder></c4d-legal-nav-cookie-preferences-placeholder>
+      </c4d-legal-nav>
+    </c4d-footer>
+    <c4d-locale-modal
       close-button-assistive-text="{{localeModal.modalClose}}"
       header-title="{{localeModal.headerTitle}}"
       lang-display="{{langDisplay}}"
     >
-      <cds-regions>
+      <c4d-regions>
         {{#each regionList}}
           {{#if countryList}}
-            <cds-region-item name="{{name}}"></cds-region-item>
+            <c4d-region-item name="{{name}}"></c4d-region-item>
           {{else}}
-            <cds-region-item invalid name="{{name}}"></cds-region-item>
+            <c4d-region-item invalid name="{{name}}"></c4d-region-item>
           {{/if}}
         {{/each}}
-      </cds-regions>
-      <cds-locale-search
+      </c4d-regions>
+      <c4d-locale-search
         close-button-assistive-text="{{localeModal.searchClearText}}"
         label-text="{{localeModal.searchLabel}}"
         placeholder="{{localeModal.searchPlaceholder}}"
@@ -147,10 +147,10 @@ LICENSE file in the root directory of this source tree.
         unavailability-label-text="{{localeModal.unavailabilityText}}"
       >
         {{#each allCountryList}}
-          <cds-locale-item country="{{country}}" href="{{href}}" language="{{language}}" locale="{{locale}}" region="{{region}}">
-          </cds-locale-item>
+          <c4d-locale-item country="{{country}}" href="{{href}}" language="{{language}}" locale="{{locale}}" region="{{region}}">
+          </c4d-locale-item>
         {{/each}}
-      </cds-locale-search>
-    </cds-locale-modal>
+      </c4d-locale-search>
+    </c4d-locale-modal>
   </body>
 </html>
diff --git a/packages/web-components/examples/codesandbox/usage/webpack-handlebars/package.json b/packages/web-components/examples/stackblitz/usage/webpack-handlebars/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/usage/webpack-handlebars/package.json
rename to packages/web-components/examples/stackblitz/usage/webpack-handlebars/package.json
diff --git a/packages/web-components/examples/codesandbox/usage/webpack-handlebars/src/index.js b/packages/web-components/examples/stackblitz/usage/webpack-handlebars/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/usage/webpack-handlebars/src/index.js
rename to packages/web-components/examples/stackblitz/usage/webpack-handlebars/src/index.js
diff --git a/packages/web-components/examples/codesandbox/usage/webpack-handlebars/src/index.scss b/packages/web-components/examples/stackblitz/usage/webpack-handlebars/src/index.scss
similarity index 100%
rename from packages/web-components/examples/codesandbox/usage/webpack-handlebars/src/index.scss
rename to packages/web-components/examples/stackblitz/usage/webpack-handlebars/src/index.scss
diff --git a/packages/web-components/examples/codesandbox/usage/webpack-handlebars/webpack.config.js b/packages/web-components/examples/stackblitz/usage/webpack-handlebars/webpack.config.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/usage/webpack-handlebars/webpack.config.js
rename to packages/web-components/examples/stackblitz/usage/webpack-handlebars/webpack.config.js
diff --git a/packages/web-components/examples/codesandbox/usage/webpack-rtl/index.hbs b/packages/web-components/examples/stackblitz/usage/webpack-rtl/index.hbs
similarity index 99%
rename from packages/web-components/examples/codesandbox/usage/webpack-rtl/index.hbs
rename to packages/web-components/examples/stackblitz/usage/webpack-rtl/index.hbs
index ca12fa23b91..97ed8fc43a2 100644
--- a/packages/web-components/examples/codesandbox/usage/webpack-rtl/index.hbs
+++ b/packages/web-components/examples/stackblitz/usage/webpack-rtl/index.hbs
@@ -221,7 +221,7 @@ LICENSE file in the root directory of this source tree.
     <link rel="alternate" hreflang="en-zw" href="https://www.ibm.com/zw-en">
   </head>
   <body>
-    <cds-masthead-container></cds-masthead-container>
+    <c4d-masthead-container></c4d-masthead-container>
     <main class="bx--content cds-ce-demo--ui-shell-content">
       <div class="bx--grid">
         <div class="bx--row">
@@ -268,6 +268,6 @@ LICENSE file in the root directory of this source tree.
         </div>
       </div>
     </main>
-    <cds-footer-container></cds-footer-container>
+    <c4d-footer-container></c4d-footer-container>
   </body>
 </html>
diff --git a/packages/web-components/examples/codesandbox/usage/webpack-rtl/package.json b/packages/web-components/examples/stackblitz/usage/webpack-rtl/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/usage/webpack-rtl/package.json
rename to packages/web-components/examples/stackblitz/usage/webpack-rtl/package.json
diff --git a/packages/web-components/examples/codesandbox/usage/webpack-rtl/src/index.js b/packages/web-components/examples/stackblitz/usage/webpack-rtl/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/usage/webpack-rtl/src/index.js
rename to packages/web-components/examples/stackblitz/usage/webpack-rtl/src/index.js
diff --git a/packages/web-components/examples/codesandbox/usage/webpack-rtl/webpack.config.js b/packages/web-components/examples/stackblitz/usage/webpack-rtl/webpack.config.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/usage/webpack-rtl/webpack.config.js
rename to packages/web-components/examples/stackblitz/usage/webpack-rtl/webpack.config.js
diff --git a/packages/web-components/examples/codesandbox/usage/webpack-sass/index.html b/packages/web-components/examples/stackblitz/usage/webpack-sass/index.html
similarity index 99%
rename from packages/web-components/examples/codesandbox/usage/webpack-sass/index.html
rename to packages/web-components/examples/stackblitz/usage/webpack-sass/index.html
index 3c01697afca..d4babac2b2b 100644
--- a/packages/web-components/examples/codesandbox/usage/webpack-sass/index.html
+++ b/packages/web-components/examples/stackblitz/usage/webpack-sass/index.html
@@ -149,7 +149,7 @@
     <link rel="alternate" hreflang="en-zw" href="https://www.ibm.com/zw-en" />
   </head>
   <body>
-    <cds-masthead-container></cds-masthead-container>
+    <c4d-masthead-container></c4d-masthead-container>
     <main>
       <h2>
         Purpose and function
@@ -187,6 +187,6 @@ <h2>
         section. If tabs are needed on a page when using a side-nav, then the tabs are secondary in hierarchy to the side-nav.
       </p>
     </main>
-    <cds-footer-container></cds-footer-container>
+    <c4d-footer-container></c4d-footer-container>
   </body>
 </html>
diff --git a/packages/web-components/examples/codesandbox/usage/webpack-sass/package.json b/packages/web-components/examples/stackblitz/usage/webpack-sass/package.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/usage/webpack-sass/package.json
rename to packages/web-components/examples/stackblitz/usage/webpack-sass/package.json
diff --git a/packages/web-components/examples/codesandbox/usage/webpack-sass/src/index.js b/packages/web-components/examples/stackblitz/usage/webpack-sass/src/index.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/usage/webpack-sass/src/index.js
rename to packages/web-components/examples/stackblitz/usage/webpack-sass/src/index.js
diff --git a/packages/web-components/examples/codesandbox/usage/webpack-sass/src/index.scss b/packages/web-components/examples/stackblitz/usage/webpack-sass/src/index.scss
similarity index 100%
rename from packages/web-components/examples/codesandbox/usage/webpack-sass/src/index.scss
rename to packages/web-components/examples/stackblitz/usage/webpack-sass/src/index.scss
diff --git a/packages/web-components/examples/codesandbox/usage/webpack-sass/webpack.config.js b/packages/web-components/examples/stackblitz/usage/webpack-sass/webpack.config.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/usage/webpack-sass/webpack.config.js
rename to packages/web-components/examples/stackblitz/usage/webpack-sass/webpack.config.js
diff --git a/packages/web-components/src/components/back-to-top/__stories__/README.stories.mdx b/packages/web-components/src/components/back-to-top/__stories__/README.stories.mdx
index e9c2e12a96a..c9bbff0559e 100644
--- a/packages/web-components/src/components/back-to-top/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/back-to-top/__stories__/README.stories.mdx
@@ -10,10 +10,10 @@ import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
 # Back to top
 
 > 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/back-to-top)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components/back-to-top)
 > 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/back-to-top)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/back-to-top)
 
 ## Getting started
 
@@ -31,17 +31,17 @@ import '@carbon/ibmdotcom-web-components/es/components/back-to-top/index.js';
 
 ### HTML
 
-The `<cds-back-to-top>` component is set to position itself above `<cds-footer>`
+The `<c4d-back-to-top>` component is set to position itself above `<c4d-footer>`
 if it is present – it will not scroll into the footer. For easiest
-implementation place `<cds-back-to-top>` within the page's main content area.
+implementation place `<c4d-back-to-top>` within the page's main content area.
 
 ```html
-<cds-back-to-top></cds-back-to-top>
+<c4d-back-to-top></c4d-back-to-top>
 ```
 
 ## Props
 
-<Props of="cds-back-to-top" />
+<Props of="c4d-back-to-top" />
 
 ## Stable selectors
 
@@ -51,6 +51,6 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector | Compatibility selector           | Description |
 | ----------------------- | -------------------------------- | ----------- |
-| `<cds-back-to-top>`     | `data-autoid="cds--back-to-top"` | Component   |
+| `<c4d-back-to-top>`     | `data-autoid="c4d--back-to-top"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/back-to-top/__stories__/README.stories.react.mdx b/packages/web-components/src/components/back-to-top/__stories__/README.stories.react.mdx
index 1fc52b2d7d6..b7e2793b8ce 100644
--- a/packages/web-components/src/components/back-to-top/__stories__/README.stories.react.mdx
+++ b/packages/web-components/src/components/back-to-top/__stories__/README.stories.react.mdx
@@ -10,10 +10,10 @@ import { PropTypesRef } from '@carbon/ibmdotcom-web-components/es/components-rea
 # Back to top
 
 > 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/back-to-top)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components/back-to-top)
 > 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/back-to-top)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/back-to-top)
 
 ## Getting started
 
@@ -35,12 +35,12 @@ function App() {
 
 ### HTML
 
-The `<cds-back-to-top>` component is set to position itself above `<cds-footer>`
+The `<c4d-back-to-top>` component is set to position itself above `<c4d-footer>`
 if it is present – it will not scroll into the footer. For easiest
-implementation place `<cds-back-to-top>` within the page's main content area.
+implementation place `<c4d-back-to-top>` within the page's main content area.
 
 ```html
-<cds-back-to-top></cds-back-to-top>
+<c4d-back-to-top></c4d-back-to-top>
 ```
 
 ## Props
@@ -55,6 +55,6 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector | Compatibility selector           | Description |
 | ----------------------- | -------------------------------- | ----------- |
-| `<cds-back-to-top>`     | `data-autoid="cds--back-to-top"` | Component   |
+| `<c4d-back-to-top>`     | `data-autoid="c4d--back-to-top"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/background-media/__stories__/README.stories.mdx b/packages/web-components/src/components/background-media/__stories__/README.stories.mdx
index 1ffd07e4d0a..0f301fd3b83 100644
--- a/packages/web-components/src/components/background-media/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/background-media/__stories__/README.stories.mdx
@@ -12,10 +12,10 @@ import contributing from '../../../../../../docs/contributing-license.md';
 > across our different components.
 
 > 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/background-media)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components/background-media)
 > 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/background-media)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/background-media)
 
 ## Getting started
 
@@ -32,51 +32,51 @@ import '@carbon/ibmdotcom-web-components/es/components/background-media/index.js
 #### With Background Image
 
 ```html
-<cds-background-media
+<c4d-background-media
   gradient-direction="left-to-right"
   alt="Image alt text"
   default-src="https://fpoimg.com/1584x560?&bg_color=ee5396&text_color=161616">
-  <cds-image-item
+  <c4d-image-item
     media="(min-width: 1584px)"
     srcset="https://fpoimg.com/1584x560?&bg_color=ee5396&text_color=161616">
-  </cds-image-item>
-  <cds-image-item
+  </c4d-image-item>
+  <c4d-image-item
     media="(min-width: 1312px)"
     srcset="https://fpoimg.com/1594x887?text=16:9&bg_color=ee5396&text_color=161616">
-  </cds-image-item>
-  <cds-image-item
+  </c4d-image-item>
+  <c4d-image-item
     media="(min-width: 672px)"
     srcset="https://fpoimg.com/1594x887?text=16:9&bg_color=ee5396&text_color=161616">
-  </cds-image-item>
-  <cds-image-item
+  </c4d-image-item>
+  <c4d-image-item
     media="(min-width: 320px)"
     srcset="https://fpoimg.com/480x360?text=4:3&bg_color=ee5396&text_color=161616">
-  </cds-image-item>
-  <cds-image-item
+  </c4d-image-item>
+  <c4d-image-item
     media="(min-width: 0px)"
     srcset="https://fpoimg.com/480x360?text=4:3&bg_color=ee5396&text_color=161616">
-  </cds-image-item>
-</cds-background-media>
+  </c4d-image-item>
+</c4d-background-media>
 ```
 
 #### With Background Video
 
 ```html
-<cds-background-media
+<c4d-background-media
   gradient-direction="left-to-right"
   alt="Image alt text"
   default-src="https://fpoimg.com/1584x560?&bg_color=ee5396&text_color=161616">
-  <cds-video-player-container
+  <c4d-video-player-container
     playing-mode="inline"
     video-id="0_ibuqxqbe"
     background-mode="true">
-  </cds-video-player-container>
-</cds-background-media>
+  </c4d-video-player-container>
+</c4d-background-media>
 ```
 
 ## Props
 
-<Props of="cds-background-media" />
+<Props of="c4d-background-media" />
 
 ## Stable selectors
 
@@ -86,6 +86,6 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector  | Compatibility selector                | Description |
 | ------------------------ | ------------------------------------- | ----------- |
-| `<cds-background-media>` | `data-autoid="cds--background-media"` | Component   |
+| `<c4d-background-media>` | `data-autoid="c4d--background-media"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/background-media/__stories__/README.stories.react.mdx b/packages/web-components/src/components/background-media/__stories__/README.stories.react.mdx
index 22c6a68e0bd..a368e5c84d7 100644
--- a/packages/web-components/src/components/background-media/__stories__/README.stories.react.mdx
+++ b/packages/web-components/src/components/background-media/__stories__/README.stories.react.mdx
@@ -10,10 +10,10 @@ import { PropTypesRef } from '@carbon/ibmdotcom-web-components/es/components-rea
 # Background Media
 
 > 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/background-media)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components-react/background-media)
 > 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/background-media)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/background-media)
 
 ## Getting started
 
@@ -97,6 +97,6 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector  | Compatibility selector                | Description |
 | ------------------------ | ------------------------------------- | ----------- |
-| `<cds-background-media>` | `data-autoid="cds--background-media"` | Component   |
+| `<c4d-background-media>` | `data-autoid="c4d--background-media"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/button-group/__stories__/README.stories.mdx b/packages/web-components/src/components/button-group/__stories__/README.stories.mdx
index bbf7c3957ae..1af27c83463 100644
--- a/packages/web-components/src/components/button-group/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/button-group/__stories__/README.stories.mdx
@@ -12,10 +12,10 @@ import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
 # Button Group
 
 > 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/button-group)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components/button-group)
 > 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/button-group)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/button-group)
 
 ## Getting started
 
diff --git a/packages/web-components/src/components/button-group/__stories__/README.stories.react.mdx b/packages/web-components/src/components/button-group/__stories__/README.stories.react.mdx
index 9b362a016e5..0d64bcd5100 100644
--- a/packages/web-components/src/components/button-group/__stories__/README.stories.react.mdx
+++ b/packages/web-components/src/components/button-group/__stories__/README.stories.react.mdx
@@ -10,10 +10,10 @@ import { PropTypesRef } from '@carbon/ibmdotcom-web-components/es/components-rea
 # Button Group
 
 > 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/button-group)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components-react/button-group)
 > 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/button-group)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/button-group)
 
 ## Getting started
 
diff --git a/packages/web-components/src/components/button/__stories__/README.stories.mdx b/packages/web-components/src/components/button/__stories__/README.stories.mdx
index db6483fef5e..837f322f33a 100644
--- a/packages/web-components/src/components/button/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/button/__stories__/README.stories.mdx
@@ -10,10 +10,10 @@ import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
 # Button
 
 > 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/button)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components/button)
 > 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/button)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/button)
 
 ## Getting started
 
@@ -33,7 +33,7 @@ import '@carbon/ibmdotcom-web-components/es/components/button/index.js';
 ### HTML
 
 ```html
-<cds-button href="https://example.com">Example</cds-button>
+<c4d-button href="https://example.com">Example</c4d-button>
 ```
 
 ### CTA features
@@ -68,7 +68,7 @@ Notes:
 
 ## Props
 
-<Props of="cds-button" />
+<Props of="c4d-button" />
 
 ## Stable selectors
 
@@ -78,6 +78,6 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector | Compatibility selector      | Description |
 | ----------------------- | --------------------------- | ----------- |
-| `<cds-button>`          | `data-autoid="cds--button"` | Component   |
+| `<c4d-button>`          | `data-autoid="c4d--button"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/button/__stories__/README.stories.react.mdx b/packages/web-components/src/components/button/__stories__/README.stories.react.mdx
index 44d5e086eab..2a5be89fcb5 100644
--- a/packages/web-components/src/components/button/__stories__/README.stories.react.mdx
+++ b/packages/web-components/src/components/button/__stories__/README.stories.react.mdx
@@ -5,10 +5,10 @@ import { PropTypesRef } from '@carbon/ibmdotcom-web-components/es/components-rea
 # Button
 
 > 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/button)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components-react/button)
 > 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/button)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/button)
 
 ## Getting started
 
diff --git a/packages/web-components/src/components/callout-quote/__stories__/README.stories.mdx b/packages/web-components/src/components/callout-quote/__stories__/README.stories.mdx
index 65e1e90c933..abfe628f8b6 100644
--- a/packages/web-components/src/components/callout-quote/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/callout-quote/__stories__/README.stories.mdx
@@ -10,10 +10,10 @@ import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
 # Callout Quote
 
 > 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/callout-quote)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components/callout-quote)
 > 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/callout-quote)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/callout-quote)
 
 ## Getting started
 
@@ -43,21 +43,21 @@ You can do this for example by adding the following:
 ### HTML
 
 ```html
-<cds-callout-quote mark-type="double-curved">
+<c4d-callout-quote mark-type="double-curved">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus est purus,
   posuere at est vitae, ornare rhoncus sem. Suspendisse vitae tellus fermentum,
   hendrerit augue eu, placerat magna.
-  <cds-quote-source-heading>
+  <c4d-quote-source-heading>
     Lorem ipsum dolor sit amet
-  </cds-quote-source-heading>
-  <cds-quote-source-copy> consectetur adipiscing elit </cds-quote-source-copy>
-  <cds-quote-source-bottom-copy> IBM Cloud </cds-quote-source-bottom-copy>
-</cds-callout-quote>
+  </c4d-quote-source-heading>
+  <c4d-quote-source-copy> consectetur adipiscing elit </c4d-quote-source-copy>
+  <c4d-quote-source-bottom-copy> IBM Cloud </c4d-quote-source-bottom-copy>
+</c4d-callout-quote>
 ```
 
 ## Props
 
-<Props of="cds-callout-quote" />
+<Props of="c4d-callout-quote" />
 
 ## Stable selectors
 
@@ -67,6 +67,6 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector | Compatibility selector             | Description |
 | ----------------------- | ---------------------------------- | ----------- |
-| `<cds-callout-quote>`   | `data-autoid="cds--callout-quote"` | Component   |
+| `<c4d-callout-quote>`   | `data-autoid="c4d--callout-quote"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/callout-quote/__stories__/README.stories.react.mdx b/packages/web-components/src/components/callout-quote/__stories__/README.stories.react.mdx
index a54ffa1d8c4..245f723cf53 100644
--- a/packages/web-components/src/components/callout-quote/__stories__/README.stories.react.mdx
+++ b/packages/web-components/src/components/callout-quote/__stories__/README.stories.react.mdx
@@ -10,10 +10,10 @@ import { PropTypesRef } from '@carbon/ibmdotcom-web-components/es/components-rea
 # Callout Quote
 
 > 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/callout-quote)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components-react/callout-quote)
 > 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/callout-quote)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/callout-quote)
 
 ## Getting started
 
@@ -66,4 +66,4 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector | Compatibility selector             | Description |
 | ----------------------- | ---------------------------------- | ----------- |
-| `<cds-callout-quote>`   | `data-autoid="cds--callout-quote"` | Component   |
+| `<c4d-callout-quote>`   | `data-autoid="c4d--callout-quote"` | Component   |
diff --git a/packages/web-components/src/components/callout-with-media/__stories__/README.stories.mdx b/packages/web-components/src/components/callout-with-media/__stories__/README.stories.mdx
index 2566b64353e..1ea3fd92bf1 100644
--- a/packages/web-components/src/components/callout-with-media/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/callout-with-media/__stories__/README.stories.mdx
@@ -11,10 +11,10 @@ import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
 # Callout with Media
 
 > 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/callout-with-media)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components/callout-with-media)
 > 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/callout-with-media)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/callout-with-media)
 
 **Note:** as of release v1.18.0 the copy in `C4DCalloutWithMedia` has been
 updated to use `C4DCalloutWithMediaCopy` and no longer using
@@ -55,19 +55,19 @@ You can do this for example by adding the following:
 ### HTML
 
 ```html
-<cds-callout-with-media>
-  <cds-content-block-heading
-    >lorum ipsum dolor sit ameet</cds-content-block-heading
+<c4d-callout-with-media>
+  <c4d-content-block-heading
+    >lorum ipsum dolor sit ameet</c4d-content-block-heading
   >
-  <cds-callout-with-media-copy size="sm"
-    >lorum ipsum dolor sit ameet</cds-callout-with-media-copy
+  <c4d-callout-with-media-copy size="sm"
+    >lorum ipsum dolor sit ameet</c4d-callout-with-media-copy
   >
-  <cds-callout-with-media-image
+  <c4d-callout-with-media-image
     alt="Image alt text"
     default-src="http://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616"
     heading="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">
-  </cds-callout-with-media-image>
-</cds-callout-with-media>
+  </c4d-callout-with-media-image>
+</c4d-callout-with-media>
 ```
 
 ## Callout with Media (Video)
@@ -90,32 +90,32 @@ import '@carbon/ibmdotcom-web-components/es/components/callout-with-media/callou
 ### HTML
 
 ```html
-<cds-callout-with-media>
-  <cds-content-block-heading
-    >lorum ipsum dolor sit ameet</cds-content-block-heading
+<c4d-callout-with-media>
+  <c4d-content-block-heading
+    >lorum ipsum dolor sit ameet</c4d-content-block-heading
   >
-  <cds-callout-with-media-copy size="sm"
-    >lorum ipsum dolor sit ameet</cds-callout-with-media-copy
+  <c4d-callout-with-media-copy size="sm"
+    >lorum ipsum dolor sit ameet</c4d-callout-with-media-copy
   >
-  <cds-callout-with-media-video
+  <c4d-callout-with-media-video
     alt="Image alt text"
     default-src="http://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616"
     heading="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">
-  </cds-callout-with-media-video>
-</cds-callout-with-media>
+  </c4d-callout-with-media-video>
+</c4d-callout-with-media>
 ```
 
 ## Props
 
-<Props of="cds-content-block-simple" />
+<Props of="c4d-content-block-simple" />
 
-### `<cds-callout-with-media-image>`
+### `<c4d-callout-with-media-image>`
 
-<Props of="cds-callout-with-media-image" />
+<Props of="c4d-callout-with-media-image" />
 
-### `<cds-callout-with-media-video>`
+### `<c4d-callout-with-media-video>`
 
-<Props of="cds-callout-with-media-video" />
+<Props of="c4d-callout-with-media-video" />
 <Description markdown={markdownContents} />
 
 ## Stable selectors
@@ -126,9 +126,9 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector          | Compatibility selector                        | Description |
 | -------------------------------- | --------------------------------------------- | ----------- |
-| `<cds-callout-with-media>`       | `data-autoid="cds--callout-with-media"`       | Component   |
-| `<cds-callout-with-media-copy>`  | `data-autoid="cds--callout-with-media-copy"`  | Component   |
-| `<cds-callout-with-media-image>` | `data-autoid="cds--callout-with-media-image"` | Component   |
-| `<cds-callout-with-media-video>` | `data-autoid="cds--callout-with-media-video"` | Component   |
+| `<c4d-callout-with-media>`       | `data-autoid="c4d--callout-with-media"`       | Component   |
+| `<c4d-callout-with-media-copy>`  | `data-autoid="c4d--callout-with-media-copy"`  | Component   |
+| `<c4d-callout-with-media-image>` | `data-autoid="c4d--callout-with-media-image"` | Component   |
+| `<c4d-callout-with-media-video>` | `data-autoid="c4d--callout-with-media-video"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/callout-with-media/__stories__/README.stories.react.mdx b/packages/web-components/src/components/callout-with-media/__stories__/README.stories.react.mdx
index 33802b28484..9b1d2c855ad 100644
--- a/packages/web-components/src/components/callout-with-media/__stories__/README.stories.react.mdx
+++ b/packages/web-components/src/components/callout-with-media/__stories__/README.stories.react.mdx
@@ -11,10 +11,10 @@ import { PropTypesRef as imageProps } from '@carbon/ibmdotcom-web-components/es/
 # Callout With Media
 
 > 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/callout-with-media)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components-react/callout-with-media)
 > 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/callout-with-media)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/callout-with-media)
 
 ## Getting started
 
@@ -96,9 +96,9 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector          | Compatibility selector                        | Description |
 | -------------------------------- | --------------------------------------------- | ----------- |
-| `<cds-callout-with-media>`       | `data-autoid="cds--callout-with-media"`       | Component   |
-| `<cds-callout-with-media-copy>`  | `data-autoid="cds--callout-with-media-copy"`  | Component   |
-| `<cds-callout-with-media-image>` | `data-autoid="cds--callout-with-media-image"` | Component   |
-| `<cds-callout-with-media-video>` | `data-autoid="cds--callout-with-media-video"` | Component   |
+| `<c4d-callout-with-media>`       | `data-autoid="c4d--callout-with-media"`       | Component   |
+| `<c4d-callout-with-media-copy>`  | `data-autoid="c4d--callout-with-media-copy"`  | Component   |
+| `<c4d-callout-with-media-image>` | `data-autoid="c4d--callout-with-media-image"` | Component   |
+| `<c4d-callout-with-media-video>` | `data-autoid="c4d--callout-with-media-video"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/card-group/__stories__/README.stories.mdx b/packages/web-components/src/components/card-group/__stories__/README.stories.mdx
index 2d3c44d2f69..ab1f1013e0d 100644
--- a/packages/web-components/src/components/card-group/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/card-group/__stories__/README.stories.mdx
@@ -10,10 +10,10 @@ import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
 # Card group
 
 > 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/card-group)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components/card-group)
 > 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/card-group)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/card-group)
 
 ## Getting started
 
@@ -42,15 +42,15 @@ import '@carbon/ibmdotcom-web-components/es/components/card-in-card/index.js';
       ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit
       sollicitudin, sodales nulla quis, consequat libero.
     </p>
-    <c4d-card-cta-footer slot="footer"> </c4d-card-cta-footer>
+    <c4d-card-footer slot="footer"> </c4d-card-footer>
   </c4d-card-group-item>
   <c4d-card-group-item
     cta-type="local"
     href="https://example.com"
     >
     <c4d-card-heading>Top level card link</c4d-card-heading>
-    <c4d-card-cta-footer slot="footer">
-    </c4d-card-cta-footer>
+    <c4d-card-footer slot="footer">
+    </c4d-card-footer>
   </c4d-card-group-item>
 </c4d-card-group>
 ```
@@ -165,14 +165,14 @@ import '@carbon/ibmdotcom-web-components/es/components/card-in-card/index.js';
       ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit
       sollicitudin, sodales nulla quis, consequat libero.
     </p>
-    <c4d-card-cta-footer slot="footer"> </c4d-card-cta-footer>
+    <c4d-card-footer slot="footer"> </c4d-card-footer>
   </c4d-card-group-item>
   <c4d-card-group-item
     cta-type="local"
     >
     <c4d-card-heading>Top level card link</c4d-card-heading>
-    <c4d-card-cta-footer slot="footer">
-    </c4d-card-cta-footer>
+    <c4d-card-footer slot="footer">
+    </c4d-card-footer>
   </c4d-card-group-item>
 </c4d-card-group>
 ```
@@ -305,11 +305,11 @@ There are three different options for the `grid-mode` property:
 
 ### `<c4d-card-group>`
 
-<Props of="cds-card-group" />
+<Props of="c4d-card-group" />
 
 ### `<c4d-card-group-item>`
 
-<Props of="cds-card-group-item" />
+<Props of="c4d-card-group-item" />
 
 ## Stable selectors
 
@@ -319,7 +319,7 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector | Compatibility selector               | Description |
 | ----------------------- | ------------------------------------ | ----------- |
-| `<c4d-card-group>`      | `data-autoid="cds--card-group"`      | Component   |
-| `<c4d-card-group-item>` | `data-autoid="cds--card-group-item"` | Component   |
+| `<c4d-card-group>`      | `data-autoid="c4d--card-group"`      | Component   |
+| `<c4d-card-group-item>` | `data-autoid="c4d--card-group-item"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/card-group/__stories__/README.stories.react.mdx b/packages/web-components/src/components/card-group/__stories__/README.stories.react.mdx
index 19484b34fc3..487683d5325 100644
--- a/packages/web-components/src/components/card-group/__stories__/README.stories.react.mdx
+++ b/packages/web-components/src/components/card-group/__stories__/README.stories.react.mdx
@@ -10,10 +10,10 @@ import { PropTypesRef } from '@carbon/ibmdotcom-web-components/es/components-rea
 # Card Group
 
 > 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/card-group)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components-react/card-group)
 > 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/card-group)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/card-group)
 
 ## Getting started
 
@@ -256,7 +256,7 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector | Compatibility selector | Description |
 | ----------------------- | ---------------------- | ----------- |
-| `<cds-card-group>`      | N/A                    | Component   |
-| `<cds-card-group-item>` | N/A                    | Component   |
+| `<c4d-card-group>`      | N/A                    | Component   |
+| `<c4d-card-group-item>` | N/A                    | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/card-in-card/__stories__/README.stories.mdx b/packages/web-components/src/components/card-in-card/__stories__/README.stories.mdx
index d9099bbf100..b388b5e90ac 100644
--- a/packages/web-components/src/components/card-in-card/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/card-in-card/__stories__/README.stories.mdx
@@ -10,10 +10,10 @@ import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
 # Card in Card
 
 > 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/card-in-card)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components/card-in-card)
 > 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/card-in-card)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/card-in-card)
 
 ## Getting started
 
@@ -31,30 +31,30 @@ import '@carbon/ibmdotcom-web-components/es/components/card-in-card/index.js';
 ### HTML
 
 ```html
-<cds-card-in-card href="https://example.com">
-  <cds-card-in-card-image
+<c4d-card-in-card href="https://example.com">
+  <c4d-card-in-card-image
     slot="image"
     alt="Image alt text"
     default-src="https://fpoimg.com/480x360?text=4:3&bg_color=ee5396&text_color=161616">
-    <cds-image-item
+    <c4d-image-item
       media="(min-width: 1312px)"
       srcset="https://fpoimg.com/1312x738?text=16:9&bg_color=ee5396&text_color=161616">
-    </cds-image-item>
-    <cds-image-item
+    </c4d-image-item>
+    <c4d-image-item
       media="(min-width: 672px)"
       srcset="https://fpoimg.com/960x540?text=16:9&bg_color=ee5396&text_color=161616">
-    </cds-image-item>
-    <cds-image-item
+    </c4d-image-item>
+    <c4d-image-item
       media="(min-width: 320px)"
       srcset="https://fpoimg.com/480x360?text=4:3&bg_color=ee5396&text_color=161616">
-    </cds-image-item>
-  </cds-card-in-card-image>
-  <cds-card-eyebrow>Label</cds-card-eyebrow>
-  <cds-card-heading
+    </c4d-image-item>
+  </c4d-card-in-card-image>
+  <c4d-card-eyebrow>Label</c4d-card-eyebrow>
+  <c4d-card-heading
     >Standard Bank Group prepares to embrace Africa’s AI
-    opportunity</cds-card-heading
+    opportunity</c4d-card-heading
   >
-  <cds-card-cta-footer>
+  <c4d-card-footer>
     <svg
       slot="icon"
       focusable="false"
@@ -68,8 +68,8 @@ import '@carbon/ibmdotcom-web-components/es/components/card-in-card/index.js';
       <path
         d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
     </svg>
-  </cds-card-cta-footer>
-</cds-card-in-card>
+  </c4d-card-footer>
+</c4d-card-in-card>
 ```
 
 To render the video variation, make sure to wrap `card-in-card` with
@@ -81,22 +81,22 @@ NOTE: The default video title can be overwritten by passing in the `video-name`
 attribute to `card-in-card`.
 
 ```html
-<cds-video-cta-container>
-  <cds-card-in-card
+<c4d-video-cta-container>
+  <c4d-card-in-card
     video-name="custom card title"
     href="0_ibuqxqbe"
     cta-type="video">
-    <cds-card-eyebrow>${eyebrow}</cds-card-eyebrow>
-    <cds-card-cta-footer
+    <c4d-card-eyebrow>${eyebrow}</c4d-card-eyebrow>
+    <c4d-card-footer
       cta-type="video"
-      href="0_ibuqxqbe"></cds-card-cta-footer>
-  </cds-card-in-card>
-</cds-video-cta-container>
+      href="0_ibuqxqbe"></c4d-card-footer>
+  </c4d-card-in-card>
+</c4d-video-cta-container>
 ```
 
 ## Props
 
-<Props of="cds-card-in-card" />
+<Props of="c4d-card-in-card" />
 
 ## Stable selectors
 
@@ -106,6 +106,6 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector | Compatibility selector            | Description |
 | ----------------------- | --------------------------------- | ----------- |
-| `<cds-card-in-card>`    | `data-autoid="cds--card-in-card"` | Component   |
+| `<c4d-card-in-card>`    | `data-autoid="c4d--card-in-card"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/card-in-card/__stories__/README.stories.react.mdx b/packages/web-components/src/components/card-in-card/__stories__/README.stories.react.mdx
index cec529cb86c..c758ab33636 100644
--- a/packages/web-components/src/components/card-in-card/__stories__/README.stories.react.mdx
+++ b/packages/web-components/src/components/card-in-card/__stories__/README.stories.react.mdx
@@ -10,10 +10,10 @@ import { PropTypesRef } from '@carbon/ibmdotcom-web-components/es/components-rea
 # Card in card
 
 > 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/card-in-card)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components-react/card-in-card)
 > 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/card-in-card)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/card-in-card)
 
 ## Getting started
 
@@ -97,4 +97,4 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector | Compatibility selector           | Description |
 | ----------------------- | -------------------------------- | ----------- |
-| `<cds-card-in-card>`    | `data-autoid="cds-card-in-card"` | Component   |
+| `<c4d-card-in-card>`    | `data-autoid="c4d-card-in-card"` | Component   |
diff --git a/packages/web-components/src/components/card-section-carousel/__stories__/README.stories.mdx b/packages/web-components/src/components/card-section-carousel/__stories__/README.stories.mdx
index 8f2a3870a5f..b6ba32fb88e 100644
--- a/packages/web-components/src/components/card-section-carousel/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/card-section-carousel/__stories__/README.stories.mdx
@@ -26,22 +26,22 @@ import '@carbon/ibmdotcom-web-components/es/components/card-section-carousel/ind
 ### HTML
 
 ```html
-<cds-card-section-carousel>
-  <cds-content-section-heading
-    >Lorem ipsum dolor sit amet</cds-content-section-heading
+<c4d-card-section-carousel>
+  <c4d-content-section-heading
+    >Lorem ipsum dolor sit amet</c4d-content-section-heading
   >
-  <cds-content-section-copy>
+  <c4d-content-section-copy>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies
     est.
-  </cds-content-section-copy>
-  <cds-carousel>
-    <cds-card href="https://example.com">
-      <cds-card-heading>Lorem ipsum dolor sit amet</cds-card-heading>
+  </c4d-content-section-copy>
+  <c4d-carousel>
+    <c4d-card href="https://example.com">
+      <c4d-card-heading>Lorem ipsum dolor sit amet</c4d-card-heading>
       <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
         ultricies est.
       </p>
-      <cds-card-footer>
+      <c4d-card-footer>
         <svg
           slot="footer"
           focusable="false"
@@ -55,15 +55,15 @@ import '@carbon/ibmdotcom-web-components/es/components/card-section-carousel/ind
           <path
             d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
         </svg>
-      </cds-card-footer>
-    </cds-card>
-    <cds-card href="https://example.com">
-      <cds-card-heading>Lorem ipsum dolor sit amet</cds-card-heading>
+      </c4d-card-footer>
+    </c4d-card>
+    <c4d-card href="https://example.com">
+      <c4d-card-heading>Lorem ipsum dolor sit amet</c4d-card-heading>
       <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
         ultricies est.
       </p>
-      <cds-card-footer>
+      <c4d-card-footer>
         <svg
           slot="footer"
           focusable="false"
@@ -77,15 +77,15 @@ import '@carbon/ibmdotcom-web-components/es/components/card-section-carousel/ind
           <path
             d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
         </svg>
-      </cds-card-footer>
-    </cds-card>
-    <cds-card href="https://example.com">
-      <cds-card-heading>Lorem ipsum dolor sit amet</cds-card-heading>
+      </c4d-card-footer>
+    </c4d-card>
+    <c4d-card href="https://example.com">
+      <c4d-card-heading>Lorem ipsum dolor sit amet</c4d-card-heading>
       <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
         ultricies est.
       </p>
-      <cds-card-footer>
+      <c4d-card-footer>
         <svg
           slot="footer"
           focusable="false"
@@ -99,15 +99,15 @@ import '@carbon/ibmdotcom-web-components/es/components/card-section-carousel/ind
           <path
             d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
         </svg>
-      </cds-card-footer>
-    </cds-card>
-    <cds-card href="https://example.com">
-      <cds-card-heading>Lorem ipsum dolor sit amet</cds-card-heading>
+      </c4d-card-footer>
+    </c4d-card>
+    <c4d-card href="https://example.com">
+      <c4d-card-heading>Lorem ipsum dolor sit amet</c4d-card-heading>
       <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
         ultricies est.
       </p>
-      <cds-card-footer>
+      <c4d-card-footer>
         <svg
           slot="footer"
           focusable="false"
@@ -121,15 +121,15 @@ import '@carbon/ibmdotcom-web-components/es/components/card-section-carousel/ind
           <path
             d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
         </svg>
-      </cds-card-footer>
-    </cds-card>
-    <cds-card href="https://example.com">
-      <cds-card-heading>Lorem ipsum dolor sit amet</cds-card-heading>
+      </c4d-card-footer>
+    </c4d-card>
+    <c4d-card href="https://example.com">
+      <c4d-card-heading>Lorem ipsum dolor sit amet</c4d-card-heading>
       <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
         ultricies est.
       </p>
-      <cds-card-footer>
+      <c4d-card-footer>
         <svg
           slot="footer"
           focusable="false"
@@ -143,15 +143,15 @@ import '@carbon/ibmdotcom-web-components/es/components/card-section-carousel/ind
           <path
             d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
         </svg>
-      </cds-card-footer>
-    </cds-card>
-    <cds-card href="https://example.com">
-      <cds-card-heading>Lorem ipsum dolor sit amet</cds-card-heading>
+      </c4d-card-footer>
+    </c4d-card>
+    <c4d-card href="https://example.com">
+      <c4d-card-heading>Lorem ipsum dolor sit amet</c4d-card-heading>
       <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
         ultricies est.
       </p>
-      <cds-card-footer>
+      <c4d-card-footer>
         <svg
           slot="footer"
           focusable="false"
@@ -165,10 +165,10 @@ import '@carbon/ibmdotcom-web-components/es/components/card-section-carousel/ind
           <path
             d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
         </svg>
-      </cds-card-footer>
-    </cds-card>
-  </cds-carousel>
-</cds-card-section-carousel>
+      </c4d-card-footer>
+    </c4d-card>
+  </c4d-carousel>
+</c4d-card-section-carousel>
 ```
 
 ## Carousel
@@ -191,6 +191,6 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector       | Compatibility selector                     | Description |
 | ----------------------------- | ------------------------------------------ | ----------- |
-| `<cds-card-section-carousel>` | `data-autoid="cds--card-section-carousel"` | Component   |
+| `<c4d-card-section-carousel>` | `data-autoid="c4d--card-section-carousel"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/card-section-carousel/__stories__/README.stories.react.mdx b/packages/web-components/src/components/card-section-carousel/__stories__/README.stories.react.mdx
index caa78be235f..addb65295c1 100644
--- a/packages/web-components/src/components/card-section-carousel/__stories__/README.stories.react.mdx
+++ b/packages/web-components/src/components/card-section-carousel/__stories__/README.stories.react.mdx
@@ -73,7 +73,7 @@ function App() {
 
 ## Props
 
-### `<cds-carousel>`
+### `<c4d-carousel>`
 
 <Props of={PropTypesRef} />
 
@@ -85,7 +85,7 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector       | Compatibility selector                   | Description |
 | ----------------------------- | ---------------------------------------- | ----------- |
-| `<cds-card-section-carousel>` | data-autoid="cds--card-section-carousel" | Component   |
-| `<cds-carousel>`              | N/A                                      | Component   |
+| `<c4d-card-section-carousel>` | data-autoid="c4d--card-section-carousel" | Component   |
+| `<c4d-carousel>`              | N/A                                      | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/card-section-offset/__stories__/README.stories.mdx b/packages/web-components/src/components/card-section-offset/__stories__/README.stories.mdx
index 553ecbd9cb5..9d0cf8000c1 100644
--- a/packages/web-components/src/components/card-section-offset/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/card-section-offset/__stories__/README.stories.mdx
@@ -3,14 +3,14 @@ import markdownContents from '../../../../docs/markdown-contents.md';
 import contributing from '../../../../../../docs/contributing-license.md';
 import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
 
-# `<cds-card-section-offset>`
+# `<c4d-card-section-offset>`
 
 > The Card Section - Offset pattern is an L shaped card group with a heading and
 > an optional CTA. 💡 Check our
 > [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/card-section-offset)
 > 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/card-section-offset)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/card-section-offset)
 
 ## Getting started
 
@@ -29,32 +29,32 @@ import '@carbon/ibmdotcom-web-components/es/components/card-section-offset/index
 ### HTML
 
 ```html
-<cds-card-section-offset>
-  <cds-background-media
+<c4d-card-section-offset>
+  <c4d-background-media
     gradient-direction="left-to-right"
     slot="image-top"
     alt="alt text"
     default-src="https://fpoimg.com/1584x891?bg_color=ee5396&text_color=161616">
-  </cds-background-media>
-  <cds-content-block-heading slot="heading">heading</cds-content-block-heading>
-  <cds-text-cta
+  </c4d-background-media>
+  <c4d-content-block-heading slot="heading">heading</c4d-content-block-heading>
+  <c4d-text-cta
     slot="action"
     cta-type="local"
     icon-placement="right"
     href="https://example.com">
     CTA copy
-  </cds-text-cta>
-  <cds-card-group slot="card-group" cards-per-row="2">
-    <cds-card-group-item href="https://example.com">
-      <cds-card-eyebrow>Label</cds-card-eyebrow>
-      <cds-card-heading
-        >Lorem ipsum dolor sit amet, pro graeco tibique an</cds-card-heading
+  </c4d-text-cta>
+  <c4d-card-group slot="card-group" cards-per-row="2">
+    <c4d-card-group-item href="https://example.com">
+      <c4d-card-eyebrow>Label</c4d-card-eyebrow>
+      <c4d-card-heading
+        >Lorem ipsum dolor sit amet, pro graeco tibique an</c4d-card-heading
       >
       <p>
         Lorem ipsum dolor sit amet, habeo iisque eum ex. Vel postea singulis
         democritum ex. Illud ullum graecis
       </p>
-      <cds-card-cta-footer slot="footer">
+      <c4d-card-footer slot="footer">
         <svg
           slot="icon"
           focusable="false"
@@ -67,18 +67,18 @@ import '@carbon/ibmdotcom-web-components/es/components/card-section-offset/index
           <path
             d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
         </svg>
-      </cds-card-cta-footer>
-    </cds-card-group-item>
-    <cds-card-group-item href="https://example.com">
-      <cds-card-eyebrow>Label</cds-card-eyebrow>
-      <cds-card-heading
-        >Lorem ipsum dolor sit amet, pro graeco tibique an</cds-card-heading
+      </c4d-card-footer>
+    </c4d-card-group-item>
+    <c4d-card-group-item href="https://example.com">
+      <c4d-card-eyebrow>Label</c4d-card-eyebrow>
+      <c4d-card-heading
+        >Lorem ipsum dolor sit amet, pro graeco tibique an</c4d-card-heading
       >
       <p>
         Lorem ipsum dolor sit amet, habeo iisque eum ex. Vel postea singulis
         democritum ex. Illud ullum graecis
       </p>
-      <cds-card-cta-footer slot="footer">
+      <c4d-card-footer slot="footer">
         <svg
           slot="icon"
           focusable="false"
@@ -91,18 +91,18 @@ import '@carbon/ibmdotcom-web-components/es/components/card-section-offset/index
           <path
             d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
         </svg>
-      </cds-card-cta-footer>
-    </cds-card-group-item>
-    <cds-card-group-item href="https://example.com">
-      <cds-card-eyebrow>Label</cds-card-eyebrow>
-      <cds-card-heading
-        >Lorem ipsum dolor sit amet, pro graeco tibique an</cds-card-heading
+      </c4d-card-footer>
+    </c4d-card-group-item>
+    <c4d-card-group-item href="https://example.com">
+      <c4d-card-eyebrow>Label</c4d-card-eyebrow>
+      <c4d-card-heading
+        >Lorem ipsum dolor sit amet, pro graeco tibique an</c4d-card-heading
       >
       <p>
         Lorem ipsum dolor sit amet, habeo iisque eum ex. Vel postea singulis
         democritum ex. Illud ullum graecis
       </p>
-      <cds-card-cta-footer slot="footer">
+      <c4d-card-footer slot="footer">
         <svg
           slot="icon"
           focusable="false"
@@ -115,15 +115,15 @@ import '@carbon/ibmdotcom-web-components/es/components/card-section-offset/index
           <path
             d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
         </svg>
-      </cds-card-cta-footer>
-    </cds-card-group-item>
-  </cds-card-group>
-</cds-card-section-offset>
+      </c4d-card-footer>
+    </c4d-card-group-item>
+  </c4d-card-group>
+</c4d-card-section-offset>
 ```
 
 ## Props
 
-<Props of="cds-card-section-offset" />
+<Props of="c4d-card-section-offset" />
 <Description markdown={markdownContents} />
 
 ## Stable selectors
@@ -134,6 +134,6 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector     | Compatibility selector                   | Description |
 | --------------------------- | ---------------------------------------- | ----------- |
-| `<cds-card-section-offset>` | `data-autoid="cds--card-section-offset"` | Component   |
+| `<c4d-card-section-offset>` | `data-autoid="c4d--card-section-offset"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/card-section-offset/__stories__/README.stories.react.mdx b/packages/web-components/src/components/card-section-offset/__stories__/README.stories.react.mdx
index 63fb9bd27fa..4f065f42031 100644
--- a/packages/web-components/src/components/card-section-offset/__stories__/README.stories.react.mdx
+++ b/packages/web-components/src/components/card-section-offset/__stories__/README.stories.react.mdx
@@ -10,10 +10,10 @@ import { PropTypesRef } from '@carbon/ibmdotcom-web-components/es/components-rea
 # Card Section Offset
 
 > 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/card-section-offset)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components-react/card-section-offset)
 > 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/card-section-offset)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/card-section-offset)
 
 ## Getting started
 
@@ -108,6 +108,6 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector     | Compatibility selector | Description |
 | --------------------------- | ---------------------- | ----------- |
-| `<cds-card-section-offset>` | N/A                    | Component   |
+| `<c4d-card-section-offset>` | N/A                    | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/card-section-simple/__stories__/README.stories.mdx b/packages/web-components/src/components/card-section-simple/__stories__/README.stories.mdx
index 539a3609ff0..b45f6a28847 100644
--- a/packages/web-components/src/components/card-section-simple/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/card-section-simple/__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-card-section-simple>`
+# `<c4d-card-section-simple>`
 
 > The Card Section - Simple pattern is a collection of cards presented in a
 > section with a left-column header. 💡 Check our
 > [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/card-section-simple)
 > 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/card-section-simple)
+> [![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/card-section-simple)
 
 ## Getting started
 
@@ -28,46 +28,46 @@ import '@carbon/ibmdotcom-web-components/es/components/card-section-simple/index
 ### HTML
 
 ```html
-<cds-card-section-simple>
-  <cds-content-section-heading
-    >Aliquam condimentum interdum</cds-content-section-heading
+<c4d-card-section-simple>
+  <c4d-content-section-heading
+    >Aliquam condimentum interdum</c4d-content-section-heading
   >
-  <cds-card-group>
-    <cds-card-group-item href="https://example.com" cta-type="local">
-      <cds-card-heading>Nunc convallis lobortis</cds-card-heading>
+  <c4d-card-group>
+    <c4d-card-group-item href="https://example.com" cta-type="local">
+      <c4d-card-heading>Nunc convallis lobortis</c4d-card-heading>
       <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
         ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at
         elit sollicitudin, sodales nulla quis, consequat libero.
       </p>
-      <cds-card-cta-footer slot="footer"> </cds-card-cta-footer>
-    </cds-card-group-item>
-  </cds-card-group>
-</cds-card-section-simple>
+      <c4d-card-footer slot="footer"> </c4d-card-footer>
+    </c4d-card-group-item>
+  </c4d-card-group>
+</c4d-card-section-simple>
 ```
 
 ### HTML (with images)
 
 ```html
-<cds-card-section-simple heading="Aliquam condimentum interdum">
-  <cds-card-group>
-    <cds-card-group-item href="https://example.com" cta-type="local">
-      <cds-image
+<c4d-card-section-simple heading="Aliquam condimentum interdum">
+  <c4d-card-group>
+    <c4d-card-group-item href="https://example.com" cta-type="local">
+      <c4d-image
         slot="image"
         alt="Image alt text"
         default-src="https://dummyimage.com/1056x792/ee5396/161616&amp;text=4:3">
-      </cds-image>
-      <cds-card-eyebrow>Topic</cds-card-eyebrow>
-      <cds-card-heading>Natural Language Processing.</cds-card-heading>
-      <cds-card-cta-footer slot="footer"> </cds-card-cta-footer>
-    </cds-card-group-item>
-  </cds-card-group>
-</cds-card-section-simple>
+      </c4d-image>
+      <c4d-card-eyebrow>Topic</c4d-card-eyebrow>
+      <c4d-card-heading>Natural Language Processing.</c4d-card-heading>
+      <c4d-card-footer slot="footer"> </c4d-card-footer>
+    </c4d-card-group-item>
+  </c4d-card-group>
+</c4d-card-section-simple>
 ```
 
 ## Props
 
-<Props of="cds-card-section-simple" />
+<Props of="c4d-card-section-simple" />
 <Description markdown={markdownContents} />
 
 ## Stable selectors
@@ -78,6 +78,6 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector     | Compatibility selector                   | Description |
 | --------------------------- | ---------------------------------------- | ----------- |
-| `<cds-card-section-simple>` | `data-autoid="cds--card-section-simple"` | Component   |
+| `<c4d-card-section-simple>` | `data-autoid="c4d--card-section-simple"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/card-section-simple/__stories__/README.stories.react.mdx b/packages/web-components/src/components/card-section-simple/__stories__/README.stories.react.mdx
index d5b2b9c9ee5..419490291aa 100644
--- a/packages/web-components/src/components/card-section-simple/__stories__/README.stories.react.mdx
+++ b/packages/web-components/src/components/card-section-simple/__stories__/README.stories.react.mdx
@@ -10,10 +10,10 @@ import { PropTypesRef } from '@carbon/ibmdotcom-web-components/es/components-rea
 # Card Section Simple
 
 > 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/card-section-simple)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components-react/card-section-simple)
 > 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/card-section-simple)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/card-section-simple)
 
 ## Getting started
 
diff --git a/packages/web-components/src/components/card/__stories__/README.stories.mdx b/packages/web-components/src/components/card/__stories__/README.stories.mdx
index d50050be92b..f6be5686416 100644
--- a/packages/web-components/src/components/card/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/card/__stories__/README.stories.mdx
@@ -10,10 +10,10 @@ import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
 # Card
 
 > 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/card)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components/card)
 > 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/card)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/card)
 
 ## Getting started
 
@@ -102,8 +102,8 @@ variation will be rendered, where the card is no longer clickable and optional
   <p>${copy}</p>
   ` : ``}
   <div>
-    <cds-tag> Most popular </cds-tag>
-    <cds-tag type="purple"> Enterprise </cds-tag>
+    <c4d-tag> Most popular </c4d-tag>
+    <c4d-tag type="purple"> Enterprise </c4d-tag>
   </div>
   <c4d-card-footer href="https://example.com" icon-placement="right">
     Card CTA text
@@ -150,8 +150,8 @@ ensure the Card properly accomodates to the Logo image.
     aliquip ex ea commodo consequat.
   </p>
   <div>
-    <cds-tag> Most popular </cds-tag>
-    <cds-tag type="purple"> Enterprise </cds-tag>
+    <c4d-tag> Most popular </c4d-tag>
+    <c4d-tag type="purple"> Enterprise </c4d-tag>
   </div>
   <c4d-card-footer href="https://example.com"></c4d-card-footer>
 </c4d-card>
@@ -190,8 +190,8 @@ import '@carbon/ibmdotcom-web-components/es/components/image/index.js';
   <c4d-card-heading>Lorem ipsum dolor sit amet</c4d-card-heading>
   <c4d-image slot="image" alt="alt text" default-src="../image.png"></c4d-image>
   <div>
-    <cds-tag> Most popular </cds-tag>
-    <cds-tag type="purple"> Enterprise </cds-tag>
+    <c4d-tag> Most popular </c4d-tag>
+    <c4d-tag type="purple"> Enterprise </c4d-tag>
   </div>
   <c4d-card-footer href="https://example.com" icon-placement="right">
     Card CTA text
diff --git a/packages/web-components/src/components/card/__stories__/README.stories.react.mdx b/packages/web-components/src/components/card/__stories__/README.stories.react.mdx
index db01e0e26a5..fc8d2a0d145 100644
--- a/packages/web-components/src/components/card/__stories__/README.stories.react.mdx
+++ b/packages/web-components/src/components/card/__stories__/README.stories.react.mdx
@@ -10,10 +10,10 @@ import { PropTypesRef } from '@carbon/ibmdotcom-web-components/es/components-rea
 # Card
 
 > 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/card)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components-react/card)
 > 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/card)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/card)
 
 ## Getting started
 
diff --git a/packages/web-components/src/components/carousel/__stories__/README.stories.mdx b/packages/web-components/src/components/carousel/__stories__/README.stories.mdx
index 2054fd7bb1d..120f6b023c5 100644
--- a/packages/web-components/src/components/carousel/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/carousel/__stories__/README.stories.mdx
@@ -10,10 +10,10 @@ import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
 # Carousel
 
 > 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/carousel)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components/carousel)
 > 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/carousel)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/carousel)
 
 ## Getting started
 
@@ -37,7 +37,7 @@ import '@carbon/ibmdotcom-web-components/es/components/card/index.js';
 ```html
 <c4d-carousel>
   <c4d-card href="https://www.ibm.com/standards/carbon" cta-type="local">
-    <cds-card-heading>Lorem ipsum dolor sit amet</cds-card-heading>
+    <c4d-card-heading>Lorem ipsum dolor sit amet</c4d-card-heading>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies
     est.
     <c4d-card-footer>
diff --git a/packages/web-components/src/components/carousel/__stories__/README.stories.react.mdx b/packages/web-components/src/components/carousel/__stories__/README.stories.react.mdx
index c092aa76ea0..fbeeb8598fe 100644
--- a/packages/web-components/src/components/carousel/__stories__/README.stories.react.mdx
+++ b/packages/web-components/src/components/carousel/__stories__/README.stories.react.mdx
@@ -10,10 +10,10 @@ import { PropTypesRef } from '@carbon/ibmdotcom-web-components/es/components-rea
 # Carousel
 
 > 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/carousel)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components-react/carousel)
 > 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/carousel)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/carousel)
 
 ## Getting started
 
diff --git a/packages/web-components/src/components/content-block-card-static/__stories__/README.stories.mdx b/packages/web-components/src/components/content-block-card-static/__stories__/README.stories.mdx
index 8c3c3bf8b5d..fdb15b1f085 100644
--- a/packages/web-components/src/components/content-block-card-static/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/content-block-card-static/__stories__/README.stories.mdx
@@ -3,16 +3,16 @@ import markdownContents from '../../../../docs/markdown-contents.md';
 import contributing from '../../../../../../docs/contributing-license.md';
 import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
 
-# `<cds-content-block-card-static>`
+# `<c4d-content-block-card-static>`
 
-> The Content Block - Card Static pattern is a variant of `<cds-content-block>`,
+> The Content Block - Card Static pattern is a variant of `<c4d-content-block>`,
 > and includes a card group, a single content item, and ends with a CTA.
 
 > 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/content-block-card-static)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components/content-block-card-static)
 > 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-block-card-static)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/content-block-card-static)
 
 ## Feature Flag
 
@@ -49,52 +49,52 @@ import Chat20 from '@carbon/web-components/es/icons/chat/20.js';
 ### HTML
 
 ```html
-<cds-content-block-card-static>
-  <cds-content-block-heading>Ways to buy</cds-content-block-heading>
-  <cds-card-group>
-    <cds-card-group-item>
-      <cds-card-heading>Nunc convallis</cds-card-heading>
+<c4d-content-block-card-static>
+  <c4d-content-block-heading>Ways to buy</c4d-content-block-heading>
+  <c4d-card-group>
+    <c4d-card-group-item>
+      <c4d-card-heading>Nunc convallis</c4d-card-heading>
       <div>
-        <cds-tag>Most popular</cds-tag>
+        <c4d-tag>Most popular</c4d-tag>
       </div>
       <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
         ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at
         elit sollicitudin, sodales nulla quis, consequat libero.
       </p>
-    </cds-card-group-item>
-    <cds-card-group-item>
-      <cds-card-heading>Nunc convallis</cds-card-heading>
+    </c4d-card-group-item>
+    <c4d-card-group-item>
+      <c4d-card-heading>Nunc convallis</c4d-card-heading>
       <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
         ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at
         elit sollicitudin, sodales nulla quis, consequat libero.
       </p>
-    </cds-card-group-item>
-  </cds-card-group>
-  <cds-content-item>
-    <cds-content-item-heading
-      >Lorem ipsum dolor si amett</cds-content-item-heading
+    </c4d-card-group-item>
+  </c4d-card-group>
+  <c4d-content-item>
+    <c4d-content-item-heading
+      >Lorem ipsum dolor si amett</c4d-content-item-heading
     >
-    <cds-content-item-copy
+    <c4d-content-item-copy
       >Contact us for a customized quote, discounted pricing, and financing
       options - or get started with a free trial today
-    </cds-content-item-copy>
-  </cds-content-item>
-  <cds-button-group slot="footer">
-    <cds-button-group-item href="https://example.com">
+    </c4d-content-item-copy>
+  </c4d-content-item>
+  <c4d-button-group slot="footer">
+    <c4d-button-group-item href="https://example.com">
       Contact us ${Chat20({ slot: 'icon' })}
-    </cds-button-group-item>
-    <cds-button-group-item href="https://example.com">
+    </c4d-button-group-item>
+    <c4d-button-group-item href="https://example.com">
       Free trial ${ArrowRight20({ slot: 'icon' })}
-    </cds-button-group-item>
-  </cds-button-group>
-</cds-content-block-card-static>
+    </c4d-button-group-item>
+  </c4d-button-group>
+</c4d-content-block-card-static>
 ```
 
 ## Props
 
-<Props of="cds-content-block-card-static" />
+<Props of="c4d-content-block-card-static" />
 <Description markdown={markdownContents} />
 
 ## Stable selectors
@@ -105,6 +105,6 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector           | Compatibility selector                         | Description |
 | --------------------------------- | ---------------------------------------------- | ----------- |
-| `<cds-content-block-card-static>` | `data-autoid="cds--content-block-card-static"` | Component   |
+| `<c4d-content-block-card-static>` | `data-autoid="c4d--content-block-card-static"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/content-block-cards/__stories__/README.stories.mdx b/packages/web-components/src/components/content-block-cards/__stories__/README.stories.mdx
index 50236d53b55..187f57a50d8 100644
--- a/packages/web-components/src/components/content-block-cards/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/content-block-cards/__stories__/README.stories.mdx
@@ -3,16 +3,16 @@ import markdownContents from '../../../../docs/markdown-contents.md';
 import contributing from '../../../../../../docs/contributing-license.md';
 import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
 
-# `<cds-content-block-cards>`
+# `<c4d-content-block-cards>`
 
-> The Content Block - Cards pattern is a variant of `<cds-content-block>`, and
+> The Content Block - Cards pattern is a variant of `<c4d-content-block>`, and
 > includes a heading, a group of cards with media options, and ends with a CTA.
 
 > 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/content-block-cards)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components/content-block-cards)
 > 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-block-cards)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/content-block-cards)
 
 ## Getting started
 
@@ -31,19 +31,19 @@ import '@carbon/ibmdotcom-web-components/es/components/content-block-cards/index
 ### HTML
 
 ```html
-<cds-content-block-cards>
-  <cds-content-block-heading
-    >Lorem ipsum dolor sit amet</cds-content-block-heading
+<c4d-content-block-cards>
+  <c4d-content-block-heading
+    >Lorem ipsum dolor sit amet</c4d-content-block-heading
   >
-  <cds-card-group slot="content">
-    <cds-card-group-item href="https://example.com">
-      <cds-card-heading>Nunc convallis lobortis</cds-card-heading>
+  <c4d-card-group slot="content">
+    <c4d-card-group-item href="https://example.com">
+      <c4d-card-heading>Nunc convallis lobortis</c4d-card-heading>
       <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
         ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at
         elit sollicitudin, sodales nulla quis, consequat libero.
       </p>
-      <cds-card-cta-footer slot="footer">
+      <c4d-card-footer slot="footer">
         <svg
           slot="icon"
           focusable="false"
@@ -57,16 +57,16 @@ import '@carbon/ibmdotcom-web-components/es/components/content-block-cards/index
           <path
             d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
         </svg>
-      </cds-card-cta-footer>
-    </cds-card-group-item>
-    <cds-card-group-item href="https://example.com">
-      <cds-card-heading>Nunc convallis lobortis</cds-card-heading>
+      </c4d-card-footer>
+    </c4d-card-group-item>
+    <c4d-card-group-item href="https://example.com">
+      <c4d-card-heading>Nunc convallis lobortis</c4d-card-heading>
       <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
         ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at
         elit sollicitudin, sodales nulla quis, consequat libero.
       </p>
-      <cds-card-cta-footer slot="footer">
+      <c4d-card-footer slot="footer">
         <svg
           slot="icon"
           focusable="false"
@@ -80,16 +80,16 @@ import '@carbon/ibmdotcom-web-components/es/components/content-block-cards/index
           <path
             d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
         </svg>
-      </cds-card-cta-footer>
-    </cds-card-group-item>
-    <cds-card-group-item href="https://example.com">
-      <cds-card-heading>Nunc convallis lobortis</cds-card-heading>
+      </c4d-card-footer>
+    </c4d-card-group-item>
+    <c4d-card-group-item href="https://example.com">
+      <c4d-card-heading>Nunc convallis lobortis</c4d-card-heading>
       <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
         ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at
         elit sollicitudin, sodales nulla quis, consequat libero.
       </p>
-      <cds-card-cta-footer slot="footer">
+      <c4d-card-footer slot="footer">
         <svg
           slot="icon"
           focusable="false"
@@ -103,11 +103,11 @@ import '@carbon/ibmdotcom-web-components/es/components/content-block-cards/index
           <path
             d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
         </svg>
-      </cds-card-cta-footer>
-    </cds-card-group-item>
-  </cds-card-group>
-  <cds-card-link-cta slot="footer" cta-type="local" href="https://www.ibm.com">
-    <cds-card-link-heading>Lorem ipsum dolor sit ametttt</cds-card-link-heading>
+      </c4d-card-footer>
+    </c4d-card-group-item>
+  </c4d-card-group>
+  <c4d-card link slot="footer" cta-type="local" href="https://www.ibm.com">
+    <c4d-card-link-heading>Lorem ipsum dolor sit ametttt</c4d-card-link-heading>
     <svg
       slot="footer"
       focusable="false"
@@ -121,13 +121,13 @@ import '@carbon/ibmdotcom-web-components/es/components/content-block-cards/index
       <path
         d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
     </svg>
-  </cds-card-link-cta>
-</cds-content-block-cards>
+  </c4d-card>
+</c4d-content-block-cards>
 ```
 
 ## Props
 
-<Props of="cds-content-block-cards" />
+<Props of="c4d-content-block-cards" />
 
 ## Stable selectors
 
@@ -137,7 +137,7 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector       | Compatibility selector                       | Description |
 | ----------------------------- | -------------------------------------------- | ----------- |
-| `<cds-content-block-cards>`   | `data-autoid="cds--content-block-cards"`     | Component   |
-| `<cds-content-block-heading>` | `data-autoid="cds--content-block__heading"f` | Component   |
+| `<c4d-content-block-cards>`   | `data-autoid="c4d--content-block-cards"`     | Component   |
+| `<c4d-content-block-heading>` | `data-autoid="c4d--content-block__heading"f` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/content-block-cards/__stories__/README.stories.react.mdx b/packages/web-components/src/components/content-block-cards/__stories__/README.stories.react.mdx
index 09f5b3b7fe8..6f8b9fcd0e5 100644
--- a/packages/web-components/src/components/content-block-cards/__stories__/README.stories.react.mdx
+++ b/packages/web-components/src/components/content-block-cards/__stories__/README.stories.react.mdx
@@ -10,10 +10,10 @@ import { PropTypesRef } from '@carbon/ibmdotcom-web-components/es/components-rea
 # Content block cards
 
 > 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/content-block-cards)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components-react/content-block-cards)
 > 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-block-cards)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/content-block-cards)
 
 ## Getting started
 
@@ -99,7 +99,7 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector       | Compatibility selector                       | Description |
 | ----------------------------- | -------------------------------------------- | ----------- |
-| `<cds-content-block-cards>`   | `data-autoid="cds--content-block-cards"`     | Component   |
-| `<cds-content-block-heading>` | `data-autoid="cds--content-block__heading"f` | Component   |
+| `<c4d-content-block-cards>`   | `data-autoid="c4d--content-block-cards"`     | Component   |
+| `<c4d-content-block-heading>` | `data-autoid="c4d--content-block__heading"f` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/content-block-headlines/__stories__/README.stories.mdx b/packages/web-components/src/components/content-block-headlines/__stories__/README.stories.mdx
index 653f972b622..9811835e239 100755
--- a/packages/web-components/src/components/content-block-headlines/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/content-block-headlines/__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-block-headlines>`
+# `<c4d-content-block-headlines>`
 
 > 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/content-block-headlines)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components/content-block-headlines)
 > 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-block-headlines)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/content-block-headlines)
 
 ## Getting started
 
@@ -30,87 +30,87 @@ import '@carbon/ibmdotcom-web-components/es/components/content-block-headlines/i
 ### HTML
 
 ```html
-<cds-content-block-headlines>
-  <cds-content-block-heading>Aliquam condimentum<</cds-content-block-heading>
-  <cds-content-block-copy
+<c4d-content-block-headlines>
+  <c4d-content-block-heading>Aliquam condimentum<</c4d-content-block-heading>
+  <c4d-content-block-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-block-copy
+    sollicitudin.</c4d-content-block-copy
   >
-  <cds-content-block-headlines-item slot="content">
-    <cds-content-block-headlines-heading
-      >25%</cds-content-block-headlines-heading
+  <c4d-content-block-headlines-item slot="content">
+    <c4d-content-block-headlines-heading
+      >25%</c4d-content-block-headlines-heading
     >
-    <cds-content-item-copy slot="copy"
+    <c4d-content-item-copy slot="copy"
       >Modernize mission-critical applications and infrastructure in a hybrid
-      multicloud environment up to 25 percent faster.</cds-content-item-copy
+      multicloud environment up to 25 percent faster.</c4d-content-item-copy
     >
-    <cds-link-list slot="footer" type="vertical">
-      <cds-link-list-item-cta
+    <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>
-  </cds-content-block-headlines-item>
-  <cds-content-block-headlines-item slot="content">
-    <cds-content-block-headlines-heading
-      >25%</cds-content-block-headlines-heading
+      </c4d-link-list-item-cta>
+    </c4d-link-list>
+  </c4d-content-block-headlines-item>
+  <c4d-content-block-headlines-item slot="content">
+    <c4d-content-block-headlines-heading
+      >25%</c4d-content-block-headlines-heading
     >
-    <cds-content-item-copy slot="copy"
+    <c4d-content-item-copy slot="copy"
       >Modernize mission-critical applications and infrastructure in a hybrid
-      multicloud environment up to 25 percent faster.</cds-content-item-copy
+      multicloud environment up to 25 percent faster.</c4d-content-item-copy
     >
-    <cds-link-list slot="footer" type="vertical">
-      <cds-link-list-item-cta
+    <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>
-  </cds-content-block-headlines-item>
-  <cds-content-block-headlines-item slot="content">
-    <cds-content-block-headlines-heading
-      >1.34M</cds-content-block-headlines-heading
+      </c4d-link-list-item-cta>
+    </c4d-link-list>
+  </c4d-content-block-headlines-item>
+  <c4d-content-block-headlines-item slot="content">
+    <c4d-content-block-headlines-heading
+      >1.34M</c4d-content-block-headlines-heading
     >
-    <cds-content-item-copy slot="copy"
+    <c4d-content-item-copy slot="copy"
       >Save 1.34M per year by optimizing your time and IT
-      expenses.</cds-content-item-copy
+      expenses.</c4d-content-item-copy
     >
-    <cds-link-list slot="footer" type="vertical">
-      <cds-link-list-item-cta
+    <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>
-  </cds-content-block-headlines-item>
-  <cds-content-block-headlines-item slot="content">
-    <cds-content-block-headlines-heading
-      >25%</cds-content-block-headlines-heading
+      </c4d-link-list-item-cta>
+    </c4d-link-list>
+  </c4d-content-block-headlines-item>
+  <c4d-content-block-headlines-item slot="content">
+    <c4d-content-block-headlines-heading
+      >25%</c4d-content-block-headlines-heading
     >
-    <cds-content-item-copy slot="copy"
+    <c4d-content-item-copy slot="copy"
       >Modernize mission-critical applications and infrastructure in a hybrid
-      multicloud environment up to 25 percent faster.</cds-content-item-copy
+      multicloud environment up to 25 percent faster.</c4d-content-item-copy
     >
-    <cds-link-list slot="footer" type="vertical">
-      <cds-link-list-item-cta
+    <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>
-  </cds-content-block-headlines-item>
-</cds-content-block-headlines>
+      </c4d-link-list-item-cta>
+    </c4d-link-list>
+  </c4d-content-block-headlines-item>
+</c4d-content-block-headlines>
 ```
 
 ## Props
 
-<Props of="cds-content-block-headlines" />
+<Props of="c4d-content-block-headlines" />
 <Description markdown={markdownContents} />
 
 ## Stable selectors
@@ -121,7 +121,7 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector              | Compatibility selector                            | Description |
 | ------------------------------------ | ------------------------------------------------- | ----------- |
-| `<cds-content-block-headlines>`      | `data-autoid="cds--content-block-headlines"`      | Component   |
-| `<cds-content-block-headlines-item>` | `data-autoid="cds--content-block-headlines-item"` | Component   |
+| `<c4d-content-block-headlines>`      | `data-autoid="c4d--content-block-headlines"`      | Component   |
+| `<c4d-content-block-headlines-item>` | `data-autoid="c4d--content-block-headlines-item"` | Component   |
 
 <Description markdown={contributing} />
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 115d911fdbd..e7e75dd53e3 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
@@ -3,16 +3,16 @@ import markdownContents from '../../../../docs/markdown-contents.md';
 import contributing from '../../../../../../docs/contributing-license.md';
 import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
 
-# `<cds-content-block-horizontal>`
+# `<c4d-content-block-horizontal>`
 
 > The Content Block - Horizontal block pattern contains a collection of
-> `<cds-content-item-row>` content items.
+> `<c4d-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)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components/content-block-horizontal)
 > 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-block-horizontal)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/content-block-horizontal)
 
 ## Getting started
 
@@ -33,41 +33,41 @@ import '@carbon/ibmdotcom-web-components/es/components/content-block-horizontal/
 ### HTML
 
 ```html
-<cds-content-block-horizontal>
-  <cds-content-block-heading
-    >Curabitur malesuada varius mi eu posuere</cds-content-block-heading
+<c4d-content-block-horizontal>
+  <c4d-content-block-heading
+    >Curabitur malesuada varius mi eu posuere</c4d-content-block-heading
   >
-  <cds-content-item-row>
-    <cds-content-item-row-eyebrow
-      >Lorem ipsum</cds-content-item-row-eyebrow
+  <c4d-content-item-row>
+    <c4d-content-item-row-eyebrow
+      >Lorem ipsum</c4d-content-item-row-eyebrow
     >
-    <cds-content-item-heading>Aliquam condimentum</cds-content-item-heading>
-    <cds-content-item-row-copy
+    <c4d-content-item-heading>Aliquam condimentum</c4d-content-item-heading>
+    <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.</cds-content-item-row-copy
+      sollicitudin.</c4d-content-item-row-copy
     >
-    <cds-link-list slot="footer" type="vertical">
-      <cds-link-list-item-cta
+    <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-row>
-</cds-content-block-horizontal>
+      </c4d-link-list-item-cta>
+    </c4d-link-list>
+  </c4d-content-item-row>
+</c4d-content-block-horizontal>
 ```
 
 ## Props
 
-<Props of="cds-content-block-horizontal" />
+<Props of="c4d-content-block-horizontal" />
 
 <Description markdown={markdownContents} />
 
@@ -79,9 +79,9 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector              | Compatibility selector                            | Description |
 | ------------------------------------ | ------------------------------------------------- | ----------- |
-| `<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-row>`      | `data-autoid="cds--content-item-row"`      | Component   |
-| `<cds-content-item-row-copy>` | `data-autoid="cds--content-item-row-copy"` | Component   |
+| `<c4d-content-block-horizontal>`     | `data-autoid="c4d--content-block-simple"`         | Component   |
+| `<c4d-content-block-heading>`        | `data-autoid="c4d--content-block__heading"`       | Component   |
+| `<c4d-content-item-row>`      | `data-autoid="c4d--content-item-row"`      | Component   |
+| `<c4d-content-item-row-copy>` | `data-autoid="c4d--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 8b958115da5..8611ba43724 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
@@ -10,10 +10,10 @@ import { PropTypesRef } from '@carbon/ibmdotcom-web-components/es/components-rea
 # Content Block Horizontal
 
 > 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/content-block-horizontal)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components-react/content-block-horizontal)
 > 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-block-horizontal)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/content-block-horizontal)
 
 ## Getting started
 
@@ -76,9 +76,9 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector              | Compatibility selector                            | Description |
 | ------------------------------------ | ------------------------------------------------- | ----------- |
-| `<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-row>`      | `data-autoid="cds--content-item-row"`      | Component   |
-| `<cds-content-item-row-copy>` | `data-autoid="cds--content-item-row-copy"` | Component   |
+| `<c4d-content-block-horizontal>`     | `data-autoid="c4d--content-block-simple"`         | Component   |
+| `<c4d-content-block-heading>`        | `data-autoid="c4d--content-block__heading"`       | Component   |
+| `<c4d-content-item-row>`      | `data-autoid="c4d--content-item-row"`      | Component   |
+| `<c4d-content-item-row-copy>` | `data-autoid="c4d--content-item-row-copy"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/content-block-media/__stories__/README.stories.mdx b/packages/web-components/src/components/content-block-media/__stories__/README.stories.mdx
index 188a4b731c6..a4546186bc5 100644
--- a/packages/web-components/src/components/content-block-media/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/content-block-media/__stories__/README.stories.mdx
@@ -10,10 +10,10 @@ import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
 # Content Block Media
 
 > 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/content-block-media)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components/content-block-media)
 > 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-block-media)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/content-block-media)
 
 ## Getting started
 
@@ -35,59 +35,59 @@ import '@carbon/ibmdotcom-web-components/es/components/image/index.js';
 ### HTML
 
 ```html
-<cds-content-block-media>
-  <cds-content-block-heading>
+<c4d-content-block-media>
+  <c4d-content-block-heading>
     Curabitur malesuada varius mi eu posuere
-  </cds-content-block-heading>
-  <cds-content-block-copy size="lg">
+  </c4d-content-block-heading>
+  <c4d-content-block-copy size="lg">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies
     est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit
     sollicitudin, sodales nulla quis, consequat libero. Phasellus at elit
     sollicitudin, sodales nulla quis, consequat libero.
-  </cds-content-block-copy>
-  <cds-content-block-media-content>
-    <cds-content-group-heading>
+  </c4d-content-block-copy>
+  <c4d-content-block-media-content>
+    <c4d-content-group-heading>
       Lorem ipsum dolor sit amet
-    </cds-content-group-heading>
-    <cds-image
+    </c4d-content-group-heading>
+    <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"
       heading="Lorem ipsum">
-      <cds-image-item
+      <c4d-image-item
         media="(min-width: 672px)"
         srcset="https://fpoimg.com/672x378?text=16:9&amp;bg_color=ee5396&amp;text_color=161616">
-      </cds-image-item>
-      <cds-image-item
+      </c4d-image-item>
+      <c4d-image-item
         media="(min-width: 400px)"
         srcset="https://fpoimg.com/400x225?text=16:9&amp;bg_color=ee5396&amp;text_color=161616">
-      </cds-image-item>
-      <cds-image-item
+      </c4d-image-item>
+      <c4d-image-item
         media="(min-width: 320px)"
         srcset="https://fpoimg.com/320x180?text=16:9&amp;bg_color=ee5396&amp;text_color=161616">
-      </cds-image-item>
-    </cds-image>
-    <cds-content-item>
-      <cds-content-item-heading
-        >Lorem ipsum dolor sit amet.</cds-content-item-heading
+      </c4d-image-item>
+    </c4d-image>
+    <c4d-content-item>
+      <c4d-content-item-heading
+        >Lorem ipsum dolor sit amet.</c4d-content-item-heading
       >
-      <cds-content-item-copy>
+      <c4d-content-item-copy>
         Lorem ipsum dolor sit amet, *consectetur* adipiscing elit. Vivamus sed
         interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus
         efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et,
         tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis.
         Donec quis pretium odio, in dignissim sapien.
-      </cds-content-item-copy>
-    </cds-content-item>
-    <cds-card-link-cta
+      </c4d-content-item-copy>
+    </c4d-content-item>
+    <c4d-card link
       slot="footer"
       href="https://example.com"
       cta-type="local">
-      <cds-card-link-heading>Lorem ipsum dolor sit amet</cds-card-link-heading>
-      <cds-card-cta-footer></cds-card-cta-footer>
-    </cds-card-link-cta>
-  </cds-content-block-media-content>
-</cds-content-block-media>
+      <c4d-card-link-heading>Lorem ipsum dolor sit amet</c4d-card-link-heading>
+      <c4d-card-footer></c4d-card-footer>
+    </c4d-card>
+  </c4d-content-block-media-content>
+</c4d-content-block-media>
 ```
 
 ## With Aside Content
@@ -107,72 +107,72 @@ import '@carbon/ibmdotcom-web-components/es/components/link-list/index.js';
 ### HTML
 
 ```html
-<cds-content-block-media complementary-style-scheme="${ifDefined(complementaryStyleScheme)}">
-    <cds-content-block-heading>
+<c4d-content-block-media complementary-style-scheme="${ifDefined(complementaryStyleScheme)}">
+    <c4d-content-block-heading>
       Curabitur malesuada varius mi eu posuere
-    </cds-content-block-heading>
-    <cds-content-block-copy size="lg">
+    </c4d-content-block-heading>
+    <c4d-content-block-copy size="lg">
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.
       Phasellus at elit sollicitudin, sodales nulla quis, consequat libero. Phasellus at elit sollicitudin, sodales nulla quis,
       consequat libero.
-    </cds-content-block-copy>
-    <cds-content-block-media-content>
-      <cds-content-group-heading>
+    </c4d-content-block-copy>
+    <c4d-content-block-media-content>
+      <c4d-content-group-heading>
         Lorem ipsum dolor sit amet
-      </cds-content-group-heading>
-      <cds-image
+      </c4d-content-group-heading>
+      <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"
         heading="Lorem ipsum"
       >
-        <cds-image-item
+        <c4d-image-item
           media="(min-width: 672px)"
           srcset="https://fpoimg.com/672x378?text=16:9&amp;bg_color=ee5396&amp;text_color=161616"
         >
-        </cds-image-item>
-        <cds-image-item
+        </c4d-image-item>
+        <c4d-image-item
           media="(min-width: 400px)"
           srcset="https://fpoimg.com/400x225?text=16:9&amp;bg_color=ee5396&amp;text_color=161616"
         >
-        </cds-image-item>
-        <cds-image-item
+        </c4d-image-item>
+        <c4d-image-item
           media="(min-width: 320px)"
           srcset="https://fpoimg.com/320x180?text=16:9&amp;bg_color=ee5396&amp;text_color=161616"
         >
-        </cds-image-item>
-      </cds-image>
-      <cds-content-item>
-        <cds-content-item-heading>Lorem ipsum dolor sit amet.</cds-content-item-heading>
-        <cds-content-item-copy>
+        </c4d-image-item>
+      </c4d-image>
+      <c4d-content-item>
+        <c4d-content-item-heading>Lorem ipsum dolor sit amet.</c4d-content-item-heading>
+        <c4d-content-item-copy>
           Lorem ipsum dolor sit amet, *consectetur* adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut
           quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem.
           Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien.
-        </cds-content-item-copy>
-      </cds-content-item>
-      <cds-card-link-cta slot="footer" href="https://example.com" cta-type="local">
-        <cds-card-link-heading>Lorem ipsum dolor sit amet</cds-card-link-heading>
-        <cds-card-cta-footer></cds-card-footer>
-      </cds-card-link>
-    </cds-content-block-media-content>
-
-    <cds-link-list type="default" slot="complementary">
-        <cds-link-list-heading>Lorem Ipsum</cds-link-list-heading>
-        <cds-link-list-item-cta href="https://example.com" cta-type="local" type="default">
+        </c4d-content-item-copy>
+      </c4d-content-item>
+      <c4d-card link slot="footer" href="https://example.com" cta-type="local">
+        <c4d-card-link-heading>Lorem ipsum dolor sit amet</c4d-card-link-heading>
+        <c4d-card-footer></c4d-card-footer>
+      </c4d-card-link>
+    </c4d-content-block-media-content>
+
+    <c4d-link-list type="default" slot="complementary">
+        <c4d-link-list-heading>Lorem Ipsum</c4d-link-list-heading>
+        <c4d-link-list-item-cta href="https://example.com" cta-type="local" type="default">
           <p>Lorem Ipsum</p>
 
-        </cds-link-list-item-cta>
-        <cds-link-list-item-cta href="https://example.com" cta-type="local" type="default">
+        </c4d-link-list-item-cta>
+        <c4d-link-list-item-cta href="https://example.com" cta-type="local" type="default">
           <p>Lorem Ipsum</p>
 
-        </cds-link-list-item-cta>
-    </cds-link-list>
-</cds-content-block-media>
+        </c4d-link-list-item-cta>
+    </c4d-link-list>
+</c4d-content-block-media>
 ```
 
 ## Props
 
-<Props of="cds-content-block-media" />
+<Props of="c4d-content-block-media" />
 
 ## Stable selectors
 
diff --git a/packages/web-components/src/components/content-block-media/__stories__/README.stories.react.mdx b/packages/web-components/src/components/content-block-media/__stories__/README.stories.react.mdx
index 314aad026ab..24d6df919be 100644
--- a/packages/web-components/src/components/content-block-media/__stories__/README.stories.react.mdx
+++ b/packages/web-components/src/components/content-block-media/__stories__/README.stories.react.mdx
@@ -10,10 +10,10 @@ import { PropTypesRef } from '@carbon/ibmdotcom-web-components/es/components-rea
 # Content Block Media
 
 > 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/content-block-media)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components-react/content-block-media)
 > 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-block-media)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/content-block-media)
 
 ## Getting started
 
@@ -190,7 +190,7 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector             | Compatibility selector | Description |
 | ----------------------------------- | ---------------------- | ----------- |
-| `<cds-content-block-media>`         | N/A                    | Component   |
-| `<cds-content-block-media-content>` | N/A                    | Component   |
+| `<c4d-content-block-media>`         | N/A                    | Component   |
+| `<c4d-content-block-media-content>` | N/A                    | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/content-block-mixed/__stories__/README.stories.mdx b/packages/web-components/src/components/content-block-mixed/__stories__/README.stories.mdx
index 833cfbf8959..520ef1c01f5 100644
--- a/packages/web-components/src/components/content-block-mixed/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/content-block-mixed/__stories__/README.stories.mdx
@@ -6,10 +6,10 @@ import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
 # Content Block Mixed
 
 > 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/content-block-mixed)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components/content-block-mixed)
 > 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-block-mixed)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/content-block-mixed)
 
 ## Getting started
 
@@ -33,110 +33,110 @@ import '@carbon/ibmdotcom-web-components/es/components/content-group-simple/inde
 ### HTML
 
 ```html
-<cds-content-block-mixed>
-  <cds-content-block-heading
-    >Lorem ipsum dolor sit amet</cds-content-block-heading
+<c4d-content-block-mixed>
+  <c4d-content-block-heading
+    >Lorem ipsum dolor sit amet</c4d-content-block-heading
   >
-  <cds-content-block-copy>
+  <c4d-content-block-copy>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies
     est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit
     sollicitudin, sodales nulla quis, consequat libero.
-  </cds-content-block-copy>
+  </c4d-content-block-copy>
 
-  <cds-content-group-cards>
-    <cds-content-group-heading>Content group heading</cds-content-group-heading>
-    <cds-content-group-cards-item href="www.ibm.com">
-      <cds-card-heading
+  <c4d-content-group-cards>
+    <c4d-content-group-heading>Content group heading</c4d-content-group-heading>
+    <c4d-content-group-cards-item href="www.ibm.com">
+      <c4d-card-heading
         >Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
-        eiusmod tempor incididunt</cds-card-heading
+        eiusmod tempor incididunt</c4d-card-heading
       >
       <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
         tempor incididunt ut labore et dolore magna aliqua.
       </p>
-      <cds-card-footer>
+      <c4d-card-footer>
         <svg slot="icon" ...>...</svg>
-      </cds-card-footer>
-    </cds-content-group-cards-item>
-    <cds-content-group-cards-item href="www.ibm.com">
-      <cds-card-heading
+      </c4d-card-footer>
+    </c4d-content-group-cards-item>
+    <c4d-content-group-cards-item href="www.ibm.com">
+      <c4d-card-heading
         >Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
-        eiusmod tempor incididunt</cds-card-heading
+        eiusmod tempor incididunt</c4d-card-heading
       >
       <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
         tempor incididunt ut labore et dolore magna aliqua.
       </p>
-      <cds-card-footer icon-placement="left">
+      <c4d-card-footer icon-placement="left">
         <svg slot="icon" ...>...</svg>
-      </cds-card-footer>
-    </cds-content-group-cards-item>
-  </cds-content-group-cards>
+      </c4d-card-footer>
+    </c4d-content-group-cards-item>
+  </c4d-content-group-cards>
 
-  <cds-content-group-pictograms>
-    <cds-content-group-heading
-      >Curabitur malesuada varius mi eu posuere</cds-content-group-heading
+  <c4d-content-group-pictograms>
+    <c4d-content-group-heading
+      >Curabitur malesuada varius mi eu posuere</c4d-content-group-heading
     >
-    <cds-content-group-copy
-      >Lorem ipsum *dolor* sit amet</cds-content-group-copy
+    <c4d-content-group-copy
+      >Lorem ipsum *dolor* sit amet</c4d-content-group-copy
     >
-    <cds-pictogram-item>
+    <c4d-pictogram-item>
       <svg slot="pictogram" ...>...</svg>
-      <cds-content-item-heading
-        >Lorem ipsum dolor sit amet</cds-content-item-heading
+      <c4d-content-item-heading
+        >Lorem ipsum dolor sit amet</c4d-content-item-heading
       >
-      <cds-content-item-copy>Lorem ipsum dolor sit amet</cds-content-item-copy>
-      <cds-link-with-icon href="https://www.ibm.com/" slot="footer">
+      <c4d-content-item-copy>Lorem ipsum dolor sit amet</c4d-content-item-copy>
+      <c4d-link-with-icon href="https://www.ibm.com/" slot="footer">
         Link text
         <svg slot="icon" ...>...</svg>
-      </cds-link-with-icon>
-    </cds-pictogram-item>
-  </cds-content-group-pictograms>
+      </c4d-link-with-icon>
+    </c4d-pictogram-item>
+  </c4d-content-group-pictograms>
 
-  <cds-content-group-simple>
-    <cds-content-group-heading
-      >Curabitur malesuada varius mi eu posuere</cds-content-group-heading
+  <c4d-content-group-simple>
+    <c4d-content-group-heading
+      >Curabitur malesuada varius mi eu posuere</c4d-content-group-heading
     >
-    <cds-content-group-copy
-      >Lorem ipsum *dolor* sit amet</cds-content-group-copy
+    <c4d-content-group-copy
+      >Lorem ipsum *dolor* sit amet</c4d-content-group-copy
     >
-    <cds-image
+    <c4d-image
       slot="media"
       alt="Image alt text"
       default-src="http://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616"
       heading="Curabitur malesuada varius mi eu posuere">
-      <cds-image-item
+      <c4d-image-item
         media="(min-width: 672px)"
         srcset="http://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616">
-      </cds-image-item>
-      <cds-image-item
+      </c4d-image-item>
+      <c4d-image-item
         media="(min-width: 400px)"
         srcset="http://fpoimg.com/400x225?text=16:9&bg_color=ee5396&text_color=161616">
-      </cds-image-item>
-      <cds-image-item
+      </c4d-image-item>
+      <c4d-image-item
         media="(min-width: 320px)"
         srcset="http://fpoimg.com/672x672?text=16:9&bg_color=ee5396&text_color=161616">
-      </cds-image-item>
-    </cds-image>
-    <cds-content-item copy="Lorem ipsum *dolor* sit amet">
-      <cds-content-item-heading
-        >Lorem ipsum dolor sit amet.</cds-content-item-heading
+      </c4d-image-item>
+    </c4d-image>
+    <c4d-content-item copy="Lorem ipsum *dolor* sit amet">
+      <c4d-content-item-heading
+        >Lorem ipsum dolor sit amet.</c4d-content-item-heading
       >
-    </cds-content-item>
-    <cds-content-item copy="Lorem ipsum *dolor* sit amet">
-      <cds-content-item-heading
-        >Lorem ipsum dolor sit amet.</cds-content-item-heading
+    </c4d-content-item>
+    <c4d-content-item copy="Lorem ipsum *dolor* sit amet">
+      <c4d-content-item-heading
+        >Lorem ipsum dolor sit amet.</c4d-content-item-heading
       >
-    </cds-content-item>
-    <cds-card-link-cta
+    </c4d-content-item>
+    <c4d-card link
       slot="footer"
       href="https://www.ibm.com/"
       cta-type="local">
-      <cds-card-link-heading>Lorem ipsum dolor sit amet</cds-card-link-heading>
-      <cds-card-cta-footer> </cds-card-cta-footer>
-    </cds-card-link-cta>
-  </cds-content-group-simple>
-</cds-content-block-mixed>
+      <c4d-card-link-heading>Lorem ipsum dolor sit amet</c4d-card-link-heading>
+      <c4d-card-footer> </c4d-card-footer>
+    </c4d-card>
+  </c4d-content-group-simple>
+</c4d-content-block-mixed>
 ```
 
 <Description markdown={markdownContents} />
@@ -149,9 +149,9 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector       | Compatibility selector                      | Description |
 | ----------------------------- | ------------------------------------------- | ----------- |
-| `<cds-content-block-mixed>`   | `data-autoid="cds--content-block-mixed"`    | Component   |
-| `<cds-content-block-copy>`    | `data-autoid="cds--content-block__copy"`    | Component   |
-| `<cds-content-block-heading>` | `data-autoid="cds--content-block__heading"` | Component   |
-| `<cds-content-item-copy>`     | `data-autoid="cds--content-item__copy"`     | Component   |
+| `<c4d-content-block-mixed>`   | `data-autoid="c4d--content-block-mixed"`    | Component   |
+| `<c4d-content-block-copy>`    | `data-autoid="c4d--content-block__copy"`    | Component   |
+| `<c4d-content-block-heading>` | `data-autoid="c4d--content-block__heading"` | Component   |
+| `<c4d-content-item-copy>`     | `data-autoid="c4d--content-item__copy"`     | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/content-block-mixed/__stories__/README.stories.react.mdx b/packages/web-components/src/components/content-block-mixed/__stories__/README.stories.react.mdx
index 2f46e79499a..a66d5f35e13 100644
--- a/packages/web-components/src/components/content-block-mixed/__stories__/README.stories.react.mdx
+++ b/packages/web-components/src/components/content-block-mixed/__stories__/README.stories.react.mdx
@@ -10,10 +10,10 @@ import { PropTypesRef } from '@carbon/ibmdotcom-web-components/es/components-rea
 # Content Block Mixed
 
 > 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/content-block-mixed)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components-react/content-block-mixed)
 > 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-block-mixed)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/content-block-mixed)
 
 ## Getting started
 
@@ -149,6 +149,6 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector     | Compatibility selector | Description |
 | --------------------------- | ---------------------- | ----------- |
-| `<cds-content-block-mixed>` | N/A                    | Component   |
+| `<c4d-content-block-mixed>` | N/A                    | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/content-block-segmented/__stories__/README.stories.mdx b/packages/web-components/src/components/content-block-segmented/__stories__/README.stories.mdx
index 099dfd8aa2f..b728e01c418 100644
--- a/packages/web-components/src/components/content-block-segmented/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/content-block-segmented/__stories__/README.stories.mdx
@@ -3,16 +3,16 @@ import markdownContents from '../../../../docs/markdown-contents.md';
 import contributing from '../../../../../../docs/contributing-license.md';
 import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
 
-# `<cds-content-block-segmented>`
+# `<c4d-content-block-segmented>`
 
-> The Content Block - Segmented pattern is a variant of `<cds-content-block>`,
+> The Content Block - Segmented pattern is a variant of `<c4d-content-block>`,
 > and includes media, two content group items, and ends with a CTA.
 
 > 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/content-block-segmented)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components/content-block-segmented)
 > 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-block-segmented)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/content-block-segmented)
 
 ## Getting started
 
@@ -33,20 +33,20 @@ import '@carbon/ibmdotcom-web-components/es/components/content-block-segmented/i
 ### HTML
 
 ```html
-<cds-content-block-segmented>
-  <cds-content-block-heading>heading</cds-content-block-heading>
-  <cds-content-block-copy>copy</cds-content-block-copy>
-  <cds-image
+<c4d-content-block-segmented>
+  <c4d-content-block-heading>heading</c4d-content-block-heading>
+  <c4d-content-block-copy>copy</c4d-content-block-copy>
+  <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"
     heading="Mauris iaculis eget dolor nec hendrerit.">
-  </cds-image>
-  <cds-content-block-segmented-item>
-    <cds-content-group-heading
-      >Lorem ipsum dolor sit amet.</cds-content-group-heading
+  </c4d-image>
+  <c4d-content-block-segmented-item>
+    <c4d-content-group-heading
+      >Lorem ipsum dolor sit amet.</c4d-content-group-heading
     >
-    <cds-content-item-copy
+    <c4d-content-item-copy
       >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed
       interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus
       efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et,
@@ -56,21 +56,21 @@ import '@carbon/ibmdotcom-web-components/es/components/content-block-segmented/i
       pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu.
       Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem.
       Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in
-      dignissim sapien.</cds-content-item-copy
+      dignissim sapien.</c4d-content-item-copy
     >
-    <cds-text-cta
+    <c4d-text-cta
       slot="footer"
       cta-type="local"
       icon-placement="right"
       href="https://example.com"
-      >Lorem Ipsum dolor sit</cds-text-cta
+      >Lorem Ipsum dolor sit</c4d-text-cta
     >
-  </cds-content-block-segmented-item>
-  <cds-content-block-segmented-item>
-    <cds-content-group-heading
-      >Lorem ipsum dolor sit amet.</cds-content-group-heading
+  </c4d-content-block-segmented-item>
+  <c4d-content-block-segmented-item>
+    <c4d-content-group-heading
+      >Lorem ipsum dolor sit amet.</c4d-content-group-heading
     >
-    <cds-content-item-copy
+    <c4d-content-item-copy
       >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed
       interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus
       efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et,
@@ -80,27 +80,27 @@ import '@carbon/ibmdotcom-web-components/es/components/content-block-segmented/i
       pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu.
       Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem.
       Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in
-      dignissim sapien.</cds-content-item-copy
+      dignissim sapien.</c4d-content-item-copy
     >
-    <cds-image
+    <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"
       heading="Mauris iaculis eget dolor nec hendrerit.">
-    </cds-image>
-    <cds-text-cta
+    </c4d-image>
+    <c4d-text-cta
       slot="footer"
       cta-type="local"
       icon-placement="right"
       href="https://example.com"
-      >Lorem Ipsum dolor sit</cds-text-cta
+      >Lorem Ipsum dolor sit</c4d-text-cta
     >
-  </cds-content-block-segmented-item>
-  <cds-card-link-cta slot="footer" cta-type="local" href="https://example.com">
-    <cds-card-link-heading>Lorem ipsum dolor</cds-card-link-heading>
-    <cds-card-cta-footer></cds-card-cta-footer>
-  </cds-card-link-cta>
-</cds-content-block-segmented>
+  </c4d-content-block-segmented-item>
+  <c4d-card link slot="footer" cta-type="local" href="https://example.com">
+    <c4d-card-link-heading>Lorem ipsum dolor</c4d-card-link-heading>
+    <c4d-card-footer></c4d-card-footer>
+  </c4d-card>
+</c4d-content-block-segmented>
 ```
 
 ## With Video
@@ -117,60 +117,60 @@ import '@carbon/ibmdotcom-web-components/es/components/video-player/video-player
 ### HTML
 
 ```html
-<cds-content-block-segmented complementary-style-scheme="with-border">
-  <cds-content-block-heading
-    >Lorem ipsum dolor sit amet.</cds-content-block-heading
+<c4d-content-block-segmented complementary-style-scheme="with-border">
+  <c4d-content-block-heading
+    >Lorem ipsum dolor sit amet.</c4d-content-block-heading
   >
-  <cds-content-block-copy>Lorem ipsum dolor sit amet</cds-content-block-copy>
+  <c4d-content-block-copy>Lorem ipsum dolor sit amet</c4d-content-block-copy>
 
-  <cds-video-player-container
+  <c4d-video-player-container
     slot="media"
-    video-id="0_uka1msg4"></cds-video-player-container>
+    video-id="0_uka1msg4"></c4d-video-player-container>
 
-  <cds-content-block-segmented-item>
-    <cds-content-group-heading
-      >Lorem ipsum dolor sit amet.</cds-content-group-heading
+  <c4d-content-block-segmented-item>
+    <c4d-content-group-heading
+      >Lorem ipsum dolor sit amet.</c4d-content-group-heading
     >
-    <cds-content-item-copy>copy</cds-content-item-copy>
-    <cds-text-cta
+    <c4d-content-item-copy>copy</c4d-content-item-copy>
+    <c4d-text-cta
       slot="footer"
       cta-type="local"
       icon-placement="right"
       href="https://example.com"
-      >Lorem Ipsum dolor sit</cds-text-cta
+      >Lorem Ipsum dolor sit</c4d-text-cta
     >
-  </cds-content-block-segmented-item>
-  <cds-content-block-segmented-item>
-    <cds-content-group-heading
-      >Lorem ipsum dolor sit amet.</cds-content-group-heading
+  </c4d-content-block-segmented-item>
+  <c4d-content-block-segmented-item>
+    <c4d-content-group-heading
+      >Lorem ipsum dolor sit amet.</c4d-content-group-heading
     >
-    <cds-content-item-copy>copy</cds-content-item-copy>
-    <cds-image
+    <c4d-content-item-copy>copy</c4d-content-item-copy>
+    <c4d-image
       slot="media"
       alt="Image alt text"
       default-src="image.jpg"
       heading="Mauris iaculis eget dolor nec hendrerit.">
-      <cds-image-item media="(min-width: 672px)" srcset="image-large.jpg">
-      </cds-image-item>
-      <cds-image-item media="(min-width: 400px)" srcset="image-medium.jpg">
-      </cds-image-item>
-      <cds-image-item media="(min-width: 320px)" srcset="image-small.jpg">
-      </cds-image-item>
-    </cds-image>
-    <cds-text-cta
+      <c4d-image-item media="(min-width: 672px)" srcset="image-large.jpg">
+      </c4d-image-item>
+      <c4d-image-item media="(min-width: 400px)" srcset="image-medium.jpg">
+      </c4d-image-item>
+      <c4d-image-item media="(min-width: 320px)" srcset="image-small.jpg">
+      </c4d-image-item>
+    </c4d-image>
+    <c4d-text-cta
       slot="footer"
       cta-type="local"
       icon-placement="right"
       href="https://example.com"
-      >Lorem Ipsum dolor sit</cds-text-cta
+      >Lorem Ipsum dolor sit</c4d-text-cta
     >
-  </cds-content-block-segmented-item>
+  </c4d-content-block-segmented-item>
 
-  <cds-card-link-cta slot="footer" cta-type="local" href="https://www.ibm.com/">
-    <cds-card-link-heading>Lorem ipsum dolor</cds-card-link-heading>
-    <cds-card-cta-footer></cds-card-cta-footer>
-  </cds-card-link-cta>
-</cds-content-block-segmented>
+  <c4d-card link slot="footer" cta-type="local" href="https://www.ibm.com/">
+    <c4d-card-link-heading>Lorem ipsum dolor</c4d-card-link-heading>
+    <c4d-card-footer></c4d-card-footer>
+  </c4d-card>
+</c4d-content-block-segmented>
 ```
 
 ## With Aside Items
@@ -187,71 +187,71 @@ import '@carbon/ibmdotcom-web-components/es/components/link-list/index.js';
 ### HTML
 
 ```html
-<cds-content-block-segmented complementary-style-scheme="with-border">
-  <cds-content-block-heading
-    >Lorem ipsum dolor sit amet.</cds-content-block-heading
+<c4d-content-block-segmented complementary-style-scheme="with-border">
+  <c4d-content-block-heading
+    >Lorem ipsum dolor sit amet.</c4d-content-block-heading
   >
-  <cds-content-block-copy>Lorem ipsum dolor sit amet</cds-content-block-copy>
+  <c4d-content-block-copy>Lorem ipsum dolor sit amet</c4d-content-block-copy>
 
-  <cds-image
+  <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"
     heading="Mauris iaculis eget dolor nec hendrerit.">
-  </cds-image>
+  </c4d-image>
 
-  <cds-content-block-segmented-item>
-    <cds-content-group-heading
-      >Lorem ipsum dolor sit amet.</cds-content-group-heading
+  <c4d-content-block-segmented-item>
+    <c4d-content-group-heading
+      >Lorem ipsum dolor sit amet.</c4d-content-group-heading
     >
-    <cds-content-item-copy>copy</cds-content-item-copy>
-    <cds-text-cta
+    <c4d-content-item-copy>copy</c4d-content-item-copy>
+    <c4d-text-cta
       slot="footer"
       cta-type="local"
       icon-placement="right"
       href="https://example.com"
-      >Lorem Ipsum dolor sit</cds-text-cta
+      >Lorem Ipsum dolor sit</c4d-text-cta
     >
-  </cds-content-block-segmented-item>
-  <cds-content-block-segmented-item>
-    <cds-content-group-heading
-      >Lorem ipsum dolor sit amet.</cds-content-group-heading
+  </c4d-content-block-segmented-item>
+  <c4d-content-block-segmented-item>
+    <c4d-content-group-heading
+      >Lorem ipsum dolor sit amet.</c4d-content-group-heading
     >
-    <cds-content-item-copy>copy</cds-content-item-copy>
+    <c4d-content-item-copy>copy</c4d-content-item-copy>
     ${image}
-    <cds-text-cta
+    <c4d-text-cta
       slot="footer"
       cta-type="local"
       icon-placement="right"
       href="https://example.com"
-      >Lorem Ipsum dolor sit</cds-text-cta
+      >Lorem Ipsum dolor sit</c4d-text-cta
     >
-  </cds-content-block-segmented-item>
-  <cds-link-list type="default" slot="complementary">
-    <cds-link-list-heading>Lorem Ipsum</cds-link-list-heading>
-    <cds-link-list-item-cta
+  </c4d-content-block-segmented-item>
+  <c4d-link-list type="default" slot="complementary">
+    <c4d-link-list-heading>Lorem Ipsum</c4d-link-list-heading>
+    <c4d-link-list-item-cta
       href="https://example.com"
       cta-type="local"
       type="default">
       <p>Containerization A Complete Guide</p>
-    </cds-link-list-item-cta>
-    <cds-link-list-item-cta
+    </c4d-link-list-item-cta>
+    <c4d-link-list-item-cta
       href="https://example.com"
       cta-type="external"
       type="default">
       <p>Why should you use microservices and containers</p>
-    </cds-link-list-item-cta>
-  </cds-link-list>
-  <cds-card-link-cta slot="footer" cta-type="local" href="https://www.ibm.com/">
-    <cds-card-link-heading>Lorem ipsum dolor</cds-card-link-heading>
-    <cds-card-cta-footer></cds-card-cta-footer>
-  </cds-card-link-cta>
-</cds-content-block-segmented>
+    </c4d-link-list-item-cta>
+  </c4d-link-list>
+  <c4d-card link slot="footer" cta-type="local" href="https://www.ibm.com/">
+    <c4d-card-link-heading>Lorem ipsum dolor</c4d-card-link-heading>
+    <c4d-card-footer></c4d-card-footer>
+  </c4d-card>
+</c4d-content-block-segmented>
 ```
 
 ## Props
 
-<Props of="cds-content-block-segmented" />
+<Props of="c4d-content-block-segmented" />
 <Description markdown={markdownContents} />
 
 ## Stable selectors
@@ -262,7 +262,7 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector              | Compatibility selector                            | Description |
 | ------------------------------------ | ------------------------------------------------- | ----------- |
-| `<cds-content-block-segmented>`      | `data-autoid="cds--content-block-segmented"`      | Component   |
-| `<cds-content-block-segmented-item>` | `data-autoid="cds--content-block-segmented-item"` | Component   |
+| `<c4d-content-block-segmented>`      | `data-autoid="c4d--content-block-segmented"`      | Component   |
+| `<c4d-content-block-segmented-item>` | `data-autoid="c4d--content-block-segmented-item"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/content-block-segmented/__stories__/README.stories.react.mdx b/packages/web-components/src/components/content-block-segmented/__stories__/README.stories.react.mdx
index ef7ce296df0..095a18a1e97 100644
--- a/packages/web-components/src/components/content-block-segmented/__stories__/README.stories.react.mdx
+++ b/packages/web-components/src/components/content-block-segmented/__stories__/README.stories.react.mdx
@@ -4,14 +4,14 @@ import { PropTypesRef } from '@carbon/ibmdotcom-web-components/es/components-rea
 
 # Content block segmented
 
-> The Content Block - Segmented pattern is a variant of `<cds-content-block>`,
+> The Content Block - Segmented pattern is a variant of `<c4d-content-block>`,
 > and includes media, two content group items, and ends with a CTA.
 >
 > 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/content-block-segmented)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components-react/content-block-segmented)
 > 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-block-segmented)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/content-block-segmented)
 
 ## Getting started
 
@@ -138,7 +138,7 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector              | Compatibility selector                            | Description |
 | ------------------------------------ | ------------------------------------------------- | ----------- |
-| `<cds-content-block-segmented>`      | `data-autoid="cds--content-block-segmented"`      | Component   |
-| `<cds-content-block-segmented-item>` | `data-autoid="cds--content-block-segmented-item"` | Component   |
+| `<c4d-content-block-segmented>`      | `data-autoid="c4d--content-block-segmented"`      | Component   |
+| `<c4d-content-block-segmented-item>` | `data-autoid="c4d--content-block-segmented-item"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/content-block-simple/__stories__/README.stories.mdx b/packages/web-components/src/components/content-block-simple/__stories__/README.stories.mdx
index 08490605e84..61f78a0a08c 100644
--- a/packages/web-components/src/components/content-block-simple/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/content-block-simple/__stories__/README.stories.mdx
@@ -3,16 +3,16 @@ import markdownContents from '../../../../docs/markdown-contents.md';
 import contributing from '../../../../../../docs/contributing-license.md';
 import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
 
-# `<cds-content-block-simple>`
+# `<c4d-content-block-simple>`
 
-> The Content Block - Simple pattern is a variant of `<cds-content-block>`, and
+> The Content Block - Simple pattern is a variant of `<c4d-content-block>`, and
 > includes a single content item, optional media (image), and ends with a CTA.
 
 > 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/content-block-simple)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components/content-block-simple)
 > 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-block-simple)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/content-block-simple)
 
 ## Getting started
 
@@ -36,34 +36,34 @@ import '@carbon/ibmdotcom-web-components/es/components/cta/text-cta.js';
 ### HTML
 
 ```html
-<cds-content-block-simple>
-  <cds-content-block-heading
-    >Curabitur malesuada varius mi eu posuere</cds-content-block-heading
+<c4d-content-block-simple>
+  <c4d-content-block-heading
+    >Curabitur malesuada varius mi eu posuere</c4d-content-block-heading
   >
-  <cds-content-block-copy size="sm"
-    >Lorem ipsum *dolor* sit amet</cds-content-block-copy
+  <c4d-content-block-copy size="sm"
+    >Lorem ipsum *dolor* sit amet</c4d-content-block-copy
   >
-  <cds-image
+  <c4d-image
     slot="media"
     alt="Image alt text"
     default-src="http://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616">
-    <cds-image-item
+    <c4d-image-item
       media="(min-width: 672px)"
       srcset="http://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616">
-    </cds-image-item>
-    <cds-image-item
+    </c4d-image-item>
+    <c4d-image-item
       media="(min-width: 400px)"
       srcset="http://fpoimg.com/400x225?text=16:9&bg_color=ee5396&text_color=161616">
-    </cds-image-item>
-    <cds-image-item
+    </c4d-image-item>
+    <c4d-image-item
       media="(min-width: 320px)"
       srcset="http://fpoimg.com/672x672?text=16:9&bg_color=ee5396&text_color=161616">
-    </cds-image-item>
-  </cds-image>
-  <cds-text-cta slot="footer" href="https://www.ibm.com/" cta-type="local"
-    >Lorem ipsum dolor sit amet</cds-text-cta
+    </c4d-image-item>
+  </c4d-image>
+  <c4d-text-cta slot="footer" href="https://www.ibm.com/" cta-type="local"
+    >Lorem ipsum dolor sit amet</c4d-text-cta
   >
-</cds-content-block-simple>
+</c4d-content-block-simple>
 ```
 
 ## With Card Link CTA
@@ -81,33 +81,33 @@ import ArrowRight20 from '@carbon/web-components/es/icons/arrow--right/20.js';
 ### HTML
 
 ```html
-<cds-content-block-simple>
-  <cds-content-block-heading
-    >Curabitur malesuada varius mi eu posuere</cds-content-block-heading
+<c4d-content-block-simple>
+  <c4d-content-block-heading
+    >Curabitur malesuada varius mi eu posuere</c4d-content-block-heading
   >
-  <cds-content-block-copy size="sm"
-    >Lorem ipsum *dolor* sit amet</cds-content-block-copy
+  <c4d-content-block-copy size="sm"
+    >Lorem ipsum *dolor* sit amet</c4d-content-block-copy
   >
-  <cds-image
+  <c4d-image
     slot="media"
     alt="Image alt text"
     default-src="http://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616">
-    <cds-image-item
+    <c4d-image-item
       media="(min-width: 672px)"
       srcset="http://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616">
-    </cds-image-item>
-    <cds-image-item
+    </c4d-image-item>
+    <c4d-image-item
       media="(min-width: 400px)"
       srcset="http://fpoimg.com/400x225?text=16:9&bg_color=ee5396&text_color=161616">
-    </cds-image-item>
-    <cds-image-item
+    </c4d-image-item>
+    <c4d-image-item
       media="(min-width: 320px)"
       srcset="http://fpoimg.com/672x672?text=16:9&bg_color=ee5396&text_color=161616">
-    </cds-image-item>
-  </cds-image>
-  <cds-card-link-cta slot="footer" cta-type="local" href="https://www.ibm.com/">
-    <cds-card-link-heading>Lorem ipsum dolor sit amet</cds-card-link-heading>
-    <cds-card-cta-footer>
+    </c4d-image-item>
+  </c4d-image>
+  <c4d-card link slot="footer" cta-type="local" href="https://www.ibm.com/">
+    <c4d-card-link-heading>Lorem ipsum dolor sit amet</c4d-card-link-heading>
+    <c4d-card-footer>
       <svg
         slot="icon"
         focusable="false"
@@ -121,9 +121,9 @@ import ArrowRight20 from '@carbon/web-components/es/icons/arrow--right/20.js';
         <path
           d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
       </svg>
-    </cds-card-cta-footer>
-  </cds-card-link-cta>
-</cds-content-block-simple>
+    </c4d-card-footer>
+  </c4d-card>
+</c4d-content-block-simple>
 ```
 
 ## With Link List
@@ -144,56 +144,56 @@ import '@carbon/ibmdotcom-web-components/es/components/link-list/index';
 ### HTML
 
 ```html
-<cds-content-block-simple>
-  <cds-content-block-heading
-    >Curabitur malesuada varius mi eu posuere</cds-content-block-heading
+<c4d-content-block-simple>
+  <c4d-content-block-heading
+    >Curabitur malesuada varius mi eu posuere</c4d-content-block-heading
   >
-  <cds-content-block-copy size="sm"
-    >Lorem ipsum *dolor* sit amet</cds-content-block-copy
+  <c4d-content-block-copy size="sm"
+    >Lorem ipsum *dolor* sit amet</c4d-content-block-copy
   >
-  <cds-image
+  <c4d-image
     slot="media"
     alt="Image alt text"
     default-src="http://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616">
-    <cds-image-item
+    <c4d-image-item
       media="(min-width: 672px)"
       srcset="http://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616">
-    </cds-image-item>
-    <cds-image-item
+    </c4d-image-item>
+    <c4d-image-item
       media="(min-width: 400px)"
       srcset="http://fpoimg.com/400x225?text=16:9&bg_color=ee5396&text_color=161616">
-    </cds-image-item>
-    <cds-image-item
+    </c4d-image-item>
+    <c4d-image-item
       media="(min-width: 320px)"
       srcset="http://fpoimg.com/672x672?text=16:9&bg_color=ee5396&text_color=161616">
-    </cds-image-item>
-  </cds-image>
+    </c4d-image-item>
+  </c4d-image>
 
-  <cds-link-list type="default" slot="complementary">
-    <cds-link-list-heading>Tutorial</cds-link-list-heading>
-    <cds-link-list-item-cta
+  <c4d-link-list type="default" slot="complementary">
+    <c4d-link-list-heading>Tutorial</c4d-link-list-heading>
+    <c4d-link-list-item-cta
       href="${ifDefined(href)}"
       cta-type="local"
       type="default">
       <p>Containerization A Complete Guide</p>
-    </cds-link-list-item-cta>
-    <cds-link-list-item-cta
+    </c4d-link-list-item-cta>
+    <c4d-link-list-item-cta
       href="${ifDefined(href)}"
       cta-type="external"
       type="default">
       <p>Why should you use microservices and containers</p>
-    </cds-link-list-item-cta>
-  </cds-link-list>
+    </c4d-link-list-item-cta>
+  </c4d-link-list>
 
-  <cds-text-cta slot="footer" href="https://www.ibm.com/" cta-type="local"
-    >Lorem ipsum dolor sit amet</cds-text-cta
+  <c4d-text-cta slot="footer" href="https://www.ibm.com/" cta-type="local"
+    >Lorem ipsum dolor sit amet</c4d-text-cta
   >
-</cds-content-block-simple>
+</c4d-content-block-simple>
 ```
 
 ## Props
 
-<Props of="cds-content-block-simple" />
+<Props of="c4d-content-block-simple" />
 <Description markdown={markdownContents} />
 
 ## Stable selectors
@@ -204,8 +204,8 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector       | Compatibility selector                      | Description |
 | ----------------------------- | ------------------------------------------- | ----------- |
-| `<cds-content-block-simple>`  | `data-autoid="cds--content-block-simple"`   | Component   |
-| `<cds-content-block-copy>`    | `data-autoid="cds--content-block__copy"`    | Component   |
-| `<cds-content-block-heading>` | `data-autoid="cds--content-block__heading"` | Component   |
+| `<c4d-content-block-simple>`  | `data-autoid="c4d--content-block-simple"`   | Component   |
+| `<c4d-content-block-copy>`    | `data-autoid="c4d--content-block__copy"`    | Component   |
+| `<c4d-content-block-heading>` | `data-autoid="c4d--content-block__heading"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/content-block-simple/__stories__/README.stories.react.mdx b/packages/web-components/src/components/content-block-simple/__stories__/README.stories.react.mdx
index 8715654ff25..d9002943738 100644
--- a/packages/web-components/src/components/content-block-simple/__stories__/README.stories.react.mdx
+++ b/packages/web-components/src/components/content-block-simple/__stories__/README.stories.react.mdx
@@ -10,10 +10,10 @@ import { PropTypesRef } from '@carbon/ibmdotcom-web-components/es/components-rea
 # Back to top
 
 > 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/content-block-simple)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components/content-block-simple)
 > 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-block-simple)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/content-block-simple)
 
 ## Getting started
 
@@ -45,11 +45,11 @@ function App() {
 
 ### HTML
 
-> The Content Block - Simple pattern is a variant of `<cds-content-block>`, and
+> The Content Block - Simple pattern is a variant of `<c4d-content-block>`, and
 > includes a single content item, optional media (image), and ends with a CTA.
 
 ```html
-<cds-content-block-simple></cds-content-block-simple>
+<c4d-content-block-simple></c4d-content-block-simple>
 ```
 
 ## Props
@@ -64,6 +64,6 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector      | Compatibility selector                    | Description |
 | ---------------------------- | ----------------------------------------- | ----------- |
-| `<cds-content-block-simple>` | `data-autoid="cds--content-block-simple"` | Component   |
+| `<c4d-content-block-simple>` | `data-autoid="c4d--content-block-simple"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/content-block/__stories__/README.stories.mdx b/packages/web-components/src/components/content-block/__stories__/README.stories.mdx
index a5856403eec..c16daa0c43d 100644
--- a/packages/web-components/src/components/content-block/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/content-block/__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-block>`
+# `<c4d-content-block>`
 
 > 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/content-block)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components/content-block)
 > 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-block)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/content-block)
 
 ## Getting started
 
@@ -27,22 +27,22 @@ import '@carbon/ibmdotcom-web-components/es/components/content-block/index.js';
 ### HTML
 
 ```html
-<cds-content-block>
-  <cds-content-block-heading>Heading text</cds-content-block-heading>
-  <cds-content-block-copy>Copy test</cds-content-block-copy>
-  <cds-card-link-cta
+<c4d-content-block>
+  <c4d-content-block-heading>Heading text</c4d-content-block-heading>
+  <c4d-content-block-copy>Copy test</c4d-content-block-copy>
+  <c4d-card link
     slot="footer"
     cta-type="local"
     href="https://www.example.com">
-    <cds-card-link-heading>cta copy</cds-card-link-heading>
-    <cds-card-cta-footer></cds-card-cta-footer>
-  </cds-card-link-cta>
-</cds-content-block>
+    <c4d-card-link-heading>cta copy</c4d-card-link-heading>
+    <c4d-card-footer></c4d-card-footer>
+  </c4d-card>
+</c4d-content-block>
 ```
 
 ## Props
 
-<Props of="cds-content-block" />
+<Props of="c4d-content-block" />
 <Description markdown={markdownContents} />
 
 ## Stable selectors
@@ -53,9 +53,9 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector             | Compatibility selector                            | Description |
 | ----------------------------------- | ------------------------------------------------- | ----------- |
-| `<cds-content-block>`               | `data-autoid="cds--content-block"`                | Component   |
-| `<cds-content-block-copy>`          | `data-autoid="cds--content-block__copy"`          | Component   |
-| `<cds-content-block-heading>`       | `data-autoid="cds--content-block__heading"`       | Component   |
-| `<cds-content-block-complementary>` | `data-autoid="cds--content-block__complementary"` | Component   |
+| `<c4d-content-block>`               | `data-autoid="c4d--content-block"`                | Component   |
+| `<c4d-content-block-copy>`          | `data-autoid="c4d--content-block__copy"`          | Component   |
+| `<c4d-content-block-heading>`       | `data-autoid="c4d--content-block__heading"`       | Component   |
+| `<c4d-content-block-complementary>` | `data-autoid="c4d--content-block__complementary"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/content-block/__stories__/README.stories.react.mdx b/packages/web-components/src/components/content-block/__stories__/README.stories.react.mdx
index a43b07bbb47..6866f15219f 100644
--- a/packages/web-components/src/components/content-block/__stories__/README.stories.react.mdx
+++ b/packages/web-components/src/components/content-block/__stories__/README.stories.react.mdx
@@ -10,10 +10,10 @@ import { PropTypesRef } from '@carbon/ibmdotcom-web-components/es/components-rea
 # Content block
 
 > 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/content-block)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components-react/content-block)
 > 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-block)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/content-block)
 
 ## Getting started
 
@@ -55,9 +55,9 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector             | Compatibility selector                            | Description |
 | ----------------------------------- | ------------------------------------------------- | ----------- |
-| `<cds-content-block>`               | `data-autoid="cds--content-block"`                | Component   |
-| `<cds-content-block-copy>`          | `data-autoid="cds--content-block__copy"`          | Component   |
-| `<cds-content-block-heading>`       | `data-autoid="cds--content-block__heading"`       | Component   |
-| `<cds-content-block-complementary>` | `data-autoid="cds--content-block__complementary"` | Component   |
+| `<c4d-content-block>`               | `data-autoid="c4d--content-block"`                | Component   |
+| `<c4d-content-block-copy>`          | `data-autoid="c4d--content-block__copy"`          | Component   |
+| `<c4d-content-block-heading>`       | `data-autoid="c4d--content-block__heading"`       | Component   |
+| `<c4d-content-block-complementary>` | `data-autoid="c4d--content-block__complementary"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/content-group-cards/__stories__/README.stories.mdx b/packages/web-components/src/components/content-group-cards/__stories__/README.stories.mdx
index f98978d579c..c170ce0ca58 100644
--- a/packages/web-components/src/components/content-group-cards/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/content-group-cards/__stories__/README.stories.mdx
@@ -2,16 +2,16 @@ import { Props, Description } from '@storybook/addon-docs/blocks';
 import contributing from '../../../../../../docs/contributing-license.md';
 import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
 
-# `<cds-content-group-cards>`
+# `<c4d-content-group-cards>`
 
-> The Content Group – Cards pattern is a variant of `<cds-content-group>`, and
+> The Content Group – Cards pattern is a variant of `<c4d-content-group>`, and
 > includes a heading, copy, and card items.
 >
 > 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/content-group-cards)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components/content-group-cards)
 > 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-group-cards)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/content-group-cards)
 
 ## Getting started
 
@@ -30,44 +30,44 @@ import '@carbon/ibmdotcom-web-components/es/components/content-group-cards/index
 ### HTML
 
 ```html
-<cds-content-group-cards>
-  <cds-content-group-heading>${heading}</cds-content-group-heading>
-  <cds-content-group-copy
+<c4d-content-group-cards>
+  <c4d-content-group-heading>${heading}</c4d-content-group-heading>
+  <c4d-content-group-copy
     >Lorem ipsum dolor sit amet, consectetur adipiscing
-    elit.</cds-content-group-copy
+    elit.</c4d-content-group-copy
   >
-  <cds-content-group-cards-item href="www.ibm.com">
-    <cds-card-heading
+  <c4d-content-group-cards-item href="www.ibm.com">
+    <c4d-card-heading
       >Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
-      tempor incididunt</cds-card-heading
+      tempor incididunt</c4d-card-heading
     >
     <p>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
       tempor incididunt ut labore et dolore magna aliqua.
     </p>
-    <cds-card-footer icon-placement="left">
+    <c4d-card-footer icon-placement="left">
       <svg slot="icon" ...>...</svg>
-    </cds-card-footer>
-  </cds-content-group-cards-item>
-  <cds-content-group-cards-item href="www.ibm.com">
-    <cds-card-heading
+    </c4d-card-footer>
+  </c4d-content-group-cards-item>
+  <c4d-content-group-cards-item href="www.ibm.com">
+    <c4d-card-heading
       >Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
-      tempor incididunt</cds-card-heading
+      tempor incididunt</c4d-card-heading
     >
     <p>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
       tempor incididunt ut labore et dolore magna aliqua.
     </p>
-    <cds-card-footer icon-placement="left">
+    <c4d-card-footer icon-placement="left">
       <svg slot="icon" ...>...</svg>
-    </cds-card-footer>
-  </cds-content-group-cards-item>
-</cds-content-group-cards>
+    </c4d-card-footer>
+  </c4d-content-group-cards-item>
+</c4d-content-group-cards>
 ```
 
 ## Props
 
-<Props of="cds-content-group-cards" />
+<Props of="c4d-content-group-cards" />
 
 ## Stable selectors
 
@@ -77,8 +77,8 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector          | Compatibility selector                        | Description |
 | -------------------------------- | --------------------------------------------- | ----------- |
-| `<cds-content-group-cards>`      | `data-autoid="cds--content-group-cards"`      | Component   |
-| `<cds-content-group-heading>`    | `data-autoid="cds--content-group__title"`     | Component   |
-| `<cds-content-group-cards-item>` | `data-autoid="cds--content-group-cards-item"` | Component   |
+| `<c4d-content-group-cards>`      | `data-autoid="c4d--content-group-cards"`      | Component   |
+| `<c4d-content-group-heading>`    | `data-autoid="c4d--content-group__title"`     | Component   |
+| `<c4d-content-group-cards-item>` | `data-autoid="c4d--content-group-cards-item"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/content-group-cards/__stories__/README.stories.react.mdx b/packages/web-components/src/components/content-group-cards/__stories__/README.stories.react.mdx
index 3ed92fd3444..6fcb69ee235 100644
--- a/packages/web-components/src/components/content-group-cards/__stories__/README.stories.react.mdx
+++ b/packages/web-components/src/components/content-group-cards/__stories__/README.stories.react.mdx
@@ -8,10 +8,10 @@ import { PropTypesRef } from '@carbon/ibmdotcom-web-components/es/components-rea
 > includes a heading, copy, and card items.
 >
 > 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/content-group-cards)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components-react/content-group-cards)
 > 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-group-cards)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/content-group-cards)
 
 ## Getting started
 
@@ -81,8 +81,8 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector          | Compatibility selector                        | Description |
 | -------------------------------- | --------------------------------------------- | ----------- |
-| `<cds-content-group-cards>`      | `data-autoid="cds--content-group-cards"`      | Component   |
-| `<cds-content-group-heading>`    | `data-autoid="cds--content-group__title"`     | Component   |
-| `<cds-content-group-cards-item>` | `data-autoid="cds--content-group-cards-item"` | Component   |
+| `<c4d-content-group-cards>`      | `data-autoid="c4d--content-group-cards"`      | Component   |
+| `<c4d-content-group-heading>`    | `data-autoid="c4d--content-group__title"`     | Component   |
+| `<c4d-content-group-cards-item>` | `data-autoid="c4d--content-group-cards-item"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/content-group-pictograms/__stories__/README.stories.mdx b/packages/web-components/src/components/content-group-pictograms/__stories__/README.stories.mdx
index 2e6933fa872..1240b185f8a 100644
--- a/packages/web-components/src/components/content-group-pictograms/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/content-group-pictograms/__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-group-pictograms>`
+# `<c4d-content-group-pictograms>`
 
-> The Content Group – Pictograms pattern is a variant of `<cds-content-group>`,
+> The Content Group – Pictograms pattern is a variant of `<c4d-content-group>`,
 > and includes a heading, copy and
 > [Pictogram Items](http://www.ibm.com/standards/carbon/web-components/?path=/story/components-pictogram-item--default)
 > 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/content-group-pictograms)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components/content-group-pictograms)
 > example implementation.
 
 ## Getting started
@@ -31,23 +31,23 @@ import '@carbon/ibmdotcom-web-components/es/components/content-group-pictograms/
 ### HTML
 
 ```html
-<cds-content-group-pictograms>
-  <cds-content-group-heading
-    >Curabitur malesuada varius mi eu posuere</cds-content-group-heading
+<c4d-content-group-pictograms>
+  <c4d-content-group-heading
+    >Curabitur malesuada varius mi eu posuere</c4d-content-group-heading
   >
-  <cds-content-group-copy>Lorem ipsum *dolor* sit amet</cds-content-group-copy>
-  <cds-pictogram-item>
+  <c4d-content-group-copy>Lorem ipsum *dolor* sit amet</c4d-content-group-copy>
+  <c4d-pictogram-item>
     <svg slot="pictogram" ...>...</svg>
-    <cds-content-item-heading
-      >Lorem ipsum dolor sit amet</cds-content-item-heading
+    <c4d-content-item-heading
+      >Lorem ipsum dolor sit amet</c4d-content-item-heading
     >
-    <cds-content-item-copy>Lorem ipsum dolor sit amet</cds-content-item-copy>
-    <cds-link-with-icon href="https://www.ibm.com/" slot="footer">
+    <c4d-content-item-copy>Lorem ipsum dolor sit amet</c4d-content-item-copy>
+    <c4d-link-with-icon href="https://www.ibm.com/" slot="footer">
       Link text
       <svg slot="icon" ...>...</svg>
-    </cds-link-with-icon>
-  </cds-pictogram-item>
-</cds-content-group-pictograms>
+    </c4d-link-with-icon>
+  </c4d-pictogram-item>
+</c4d-content-group-pictograms>
 ```
 
 ## Stable selectors
@@ -58,9 +58,9 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector          | Compatibility selector                    | Description |
 | -------------------------------- | ----------------------------------------- | ----------- |
-| `<cds-content-group-pictograms>` | `data-autoid="cds--content-group-simple"` | Component   |
-| `<cds-content-group-copy>`       | `data-autoid="cds--content-group__copy"`  | Component   |
-| `<cds-content-group-heading>`    | `data-autoid="cds--content-group__title"` | Component   |
-| `<cds-content-item-copy>`        | `data-autoid="cds--content-item__copy"`   | Component   |
+| `<c4d-content-group-pictograms>` | `data-autoid="c4d--content-group-simple"` | Component   |
+| `<c4d-content-group-copy>`       | `data-autoid="c4d--content-group__copy"`  | Component   |
+| `<c4d-content-group-heading>`    | `data-autoid="c4d--content-group__title"` | Component   |
+| `<c4d-content-item-copy>`        | `data-autoid="c4d--content-item__copy"`   | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/content-group-pictograms/__stories__/README.stories.react.mdx b/packages/web-components/src/components/content-group-pictograms/__stories__/README.stories.react.mdx
index b8ce6ec476f..6db1a7d31dd 100644
--- a/packages/web-components/src/components/content-group-pictograms/__stories__/README.stories.react.mdx
+++ b/packages/web-components/src/components/content-group-pictograms/__stories__/README.stories.react.mdx
@@ -8,10 +8,10 @@ import { PropTypesRef } from '@carbon/ibmdotcom-web-components/es/components-rea
 > includes a heading, copy, and pictogram items.
 >
 > 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/content-group-pictograms)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components-react/content-group-pictograms)
 > 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-group-pictograms)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/content-group-pictograms)
 
 ## Getting started
 
@@ -94,12 +94,12 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector          | Compatibility selector                        | Description |
 | -------------------------------- | --------------------------------------------- | ----------- |
-| `<cds-content-group-pictograms>` | `data-autoid="cds--content-group-pictograms"` | Component   |
-| `<cds-content-group-heading>`    | `data-autoid="cds--content-group__heading"`   | Component   |
-| `<cds-content-group-copy>`       | `data-autoid="cds--content-group__copy"`      | Component   |
-| `<cds-pictogram-item>`           | `data-autoid="cds--pictogram-item"`           | Component   |
-| `<cds-content-item-heading>`     | `data-autoid="cds--content-item__heading"`    | Component   |
-| `<cds-content-item-copy>`        | `data-autoid="cds--content-item__copy"`       | Component   |
-| `<cds-link-with-icon>`           | `data-autoid="cds--link-with-icon"`           | Component   |
+| `<c4d-content-group-pictograms>` | `data-autoid="c4d--content-group-pictograms"` | Component   |
+| `<c4d-content-group-heading>`    | `data-autoid="c4d--content-group__heading"`   | Component   |
+| `<c4d-content-group-copy>`       | `data-autoid="c4d--content-group__copy"`      | Component   |
+| `<c4d-pictogram-item>`           | `data-autoid="c4d--pictogram-item"`           | Component   |
+| `<c4d-content-item-heading>`     | `data-autoid="c4d--content-item__heading"`    | Component   |
+| `<c4d-content-item-copy>`        | `data-autoid="c4d--content-item__copy"`       | Component   |
+| `<c4d-link-with-icon>`           | `data-autoid="c4d--link-with-icon"`           | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/content-group-simple/__stories__/README.stories.mdx b/packages/web-components/src/components/content-group-simple/__stories__/README.stories.mdx
index fc9576652dd..509413f92fa 100644
--- a/packages/web-components/src/components/content-group-simple/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/content-group-simple/__stories__/README.stories.mdx
@@ -3,15 +3,15 @@ import markdownContents from '../../../../docs/markdown-contents.md';
 import contributing from '../../../../../../docs/contributing-license.md';
 import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
 
-# `<cds-content-group-simple>`
+# `<c4d-content-group-simple>`
 
-> The Content Group – Simple pattern is a variant of `<cds-content-group>`, and
+> The Content Group – Simple pattern is a variant of `<c4d-content-group>`, and
 > includes a heading, content items, optional media (image or video), and ends
 > with a CTA. 💡 Check our
 > [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/content-group-simple)
 > 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-group-simple)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/content-group-simple)
 
 ## Getting started
 
@@ -30,51 +30,51 @@ import '@carbon/ibmdotcom-web-components/es/components/content-group-simple/inde
 ### HTML
 
 ```html
-<cds-content-group-simple>
-  <cds-content-group-heading
-    >Curabitur malesuada varius mi eu posuere</cds-content-group-heading
+<c4d-content-group-simple>
+  <c4d-content-group-heading
+    >Curabitur malesuada varius mi eu posuere</c4d-content-group-heading
   >
-  <cds-content-group-copy>Lorem ipsum *dolor* sit amet</cds-content-group-copy>
-  <cds-image
+  <c4d-content-group-copy>Lorem ipsum *dolor* sit amet</c4d-content-group-copy>
+  <c4d-image
     slot="media"
     alt="Image alt text"
     default-src="http://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616"
     heading="Curabitur malesuada varius mi eu posuere">
-    <cds-image-item
+    <c4d-image-item
       media="(min-width: 672px)"
       srcset="http://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616">
-    </cds-image-item>
-    <cds-image-item
+    </c4d-image-item>
+    <c4d-image-item
       media="(min-width: 400px)"
       srcset="http://fpoimg.com/400x225?text=16:9&bg_color=ee5396&text_color=161616">
-    </cds-image-item>
-    <cds-image-item
+    </c4d-image-item>
+    <c4d-image-item
       media="(min-width: 320px)"
       srcset="http://fpoimg.com/672x672?text=16:9&bg_color=ee5396&text_color=161616">
-    </cds-image-item>
-  </cds-image>
-  <cds-content-item copy="Lorem ipsum *dolor* sit amet">
-    <cds-content-item-heading
-      >Lorem ipsum dolor sit amet.</cds-content-item-heading
+    </c4d-image-item>
+  </c4d-image>
+  <c4d-content-item copy="Lorem ipsum *dolor* sit amet">
+    <c4d-content-item-heading
+      >Lorem ipsum dolor sit amet.</c4d-content-item-heading
     >
-  </cds-content-item>
-  <cds-content-item copy="Lorem ipsum *dolor* sit amet">
-    <cds-content-item-heading
-      >Lorem ipsum dolor sit amet.</cds-content-item-heading
+  </c4d-content-item>
+  <c4d-content-item copy="Lorem ipsum *dolor* sit amet">
+    <c4d-content-item-heading
+      >Lorem ipsum dolor sit amet.</c4d-content-item-heading
     >
-  </cds-content-item>
-  <cds-card-link-cta slot="footer" href="https://www.ibm.com/" cta-type="local">
-    <cds-card-link-heading>Lorem ipsum dolor sit amet</cds-card-link-heading>
-    <cds-card-cta-footer>
+  </c4d-content-item>
+  <c4d-card link slot="footer" href="https://www.ibm.com/" cta-type="local">
+    <c4d-card-link-heading>Lorem ipsum dolor sit amet</c4d-card-link-heading>
+    <c4d-card-footer>
       <svg slot="icon" ...>...</svg>
-    </cds-card-cta-footer>
-  </cds-card-link-cta>
-</cds-content-group-simple>
+    </c4d-card-footer>
+  </c4d-card>
+</c4d-content-group-simple>
 ```
 
 ## Props
 
-<Props of="cds-content-group-simple" />
+<Props of="c4d-content-group-simple" />
 <Description markdown={markdownContents} />
 
 ## Stable selectors
@@ -85,8 +85,8 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector       | Compatibility selector                    | Description |
 | ----------------------------- | ----------------------------------------- | ----------- |
-| `<cds-content-group-simple>`  | `data-autoid="cds--content-group-simple"` | Component   |
-| `<cds-content-group-copy>`    | `data-autoid="cds--content-group__copy"`  | Component   |
-| `<cds-content-group-heading>` | `data-autoid="cds--content-group__title"` | Component   |
+| `<c4d-content-group-simple>`  | `data-autoid="c4d--content-group-simple"` | Component   |
+| `<c4d-content-group-copy>`    | `data-autoid="c4d--content-group__copy"`  | Component   |
+| `<c4d-content-group-heading>` | `data-autoid="c4d--content-group__title"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/content-group-simple/__stories__/README.stories.react.mdx b/packages/web-components/src/components/content-group-simple/__stories__/README.stories.react.mdx
index 2e597d23db0..d34fefeaf40 100644
--- a/packages/web-components/src/components/content-group-simple/__stories__/README.stories.react.mdx
+++ b/packages/web-components/src/components/content-group-simple/__stories__/README.stories.react.mdx
@@ -4,15 +4,15 @@ import { PropTypesRef } from '@carbon/ibmdotcom-web-components/es/components-rea
 
 # Content Group Simple
 
-> The Content Group – Simple pattern is a variant of `<cds-content-group>`, and
+> The Content Group – Simple pattern is a variant of `<c4d-content-group>`, and
 > includes a heading, content items, optional media (image or video), and ends
 > with a CTA.
 >
 > 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/content-group-simple)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components-react/content-group-simple)
 > 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-group-simple)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/content-group-simple)
 
 ## Getting started
 
@@ -145,8 +145,8 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector       | Compatibility selector                    | Description |
 | ----------------------------- | ----------------------------------------- | ----------- |
-| `<cds-content-group-simple>`  | `data-autoid="cds--content-group-simple"` | Component   |
-| `<cds-content-group-copy>`    | `data-autoid="cds--content-group__copy"`  | Component   |
-| `<cds-content-group-heading>` | `data-autoid="cds--content-group__title"` | Component   |
+| `<c4d-content-group-simple>`  | `data-autoid="c4d--content-group-simple"` | Component   |
+| `<c4d-content-group-copy>`    | `data-autoid="c4d--content-group__copy"`  | Component   |
+| `<c4d-content-group-heading>` | `data-autoid="c4d--content-group__title"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/content-group/__stories__/README.stories.mdx b/packages/web-components/src/components/content-group/__stories__/README.stories.mdx
index 0d16a53f219..a8a12af2511 100644
--- a/packages/web-components/src/components/content-group/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/content-group/__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-group>`
+# `<c4d-content-group>`
 
 > 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/content-group)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components/content-group)
 > 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-group)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/content-group)
 
 ## Getting started
 
@@ -28,22 +28,22 @@ import '@carbon/ibmdotcom-web-components/es/components/content-group/index.js';
 ### HTML
 
 ```html
-<cds-content-group>
-  <cds-content-group-heading>Heading text</cds-content-group-heading>
-  <cds-content-group-copy>Copy test</cds-content-group-copy>
-  <cds-card-link-cta
+<c4d-content-group>
+  <c4d-content-group-heading>Heading text</c4d-content-group-heading>
+  <c4d-content-group-copy>Copy test</c4d-content-group-copy>
+  <c4d-card link
     slot="footer"
     cta-type="local"
     href="https://www.example.com">
-    <cds-card-link-heading>cta copy}</cds-card-link-heading>
-    <cds-card-cta-footer></cds-card-cta-footer>
-  </cds-card-link-cta>
-</cds-content-group>
+    <c4d-card-link-heading>cta copy}</c4d-card-link-heading>
+    <c4d-card-footer></c4d-card-footer>
+  </c4d-card>
+</c4d-content-group>
 ```
 
 ## Props
 
-<Props of="cds-content-group" />
+<Props of="c4d-content-group" />
 <Description markdown={markdownContents} />
 
 ## Stable selectors
@@ -54,8 +54,8 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector       | Compatibility selector                    | Description |
 | ----------------------------- | ----------------------------------------- | ----------- |
-| `<cds-content-group>`         | `data-autoid="cds--content-group-simple"` | Component   |
-| `<cds-content-group-copy>`    | `data-autoid="cds--content-group__copy"`  | Component   |
-| `<cds-content-group-heading>` | `data-autoid="cds--content-group__title"` | Component   |
+| `<c4d-content-group>`         | `data-autoid="c4d--content-group-simple"` | Component   |
+| `<c4d-content-group-copy>`    | `data-autoid="c4d--content-group__copy"`  | Component   |
+| `<c4d-content-group-heading>` | `data-autoid="c4d--content-group__title"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/content-group/__stories__/README.stories.react.mdx b/packages/web-components/src/components/content-group/__stories__/README.stories.react.mdx
index a6911026920..723030f35e5 100644
--- a/packages/web-components/src/components/content-group/__stories__/README.stories.react.mdx
+++ b/packages/web-components/src/components/content-group/__stories__/README.stories.react.mdx
@@ -10,10 +10,10 @@ import { PropTypesRef } from '@carbon/ibmdotcom-web-components/es/components-rea
 # Content Group
 
 > 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/content-group)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components-react/content-group)
 > 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-group)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/content-group)
 
 ## Getting started
 
@@ -60,8 +60,8 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector       | Compatibility selector                    | Description |
 | ----------------------------- | ----------------------------------------- | ----------- |
-| `<cds-content-group>`         | `data-autoid="cds--content-group-simple"` | Component   |
-| `<cds-content-group-copy>`    | `data-autoid="cds--content-group__copy"`  | Component   |
-| `<cds-content-group-heading>` | `data-autoid="cds--content-group__title"` | Component   |
+| `<c4d-content-group>`         | `data-autoid="c4d--content-group-simple"` | Component   |
+| `<c4d-content-group-copy>`    | `data-autoid="c4d--content-group__copy"`  | Component   |
+| `<c4d-content-group-heading>` | `data-autoid="c4d--content-group__title"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/content-item-row/__stories__/README.stories.mdx b/packages/web-components/src/components/content-item-row/__stories__/README.stories.mdx
index 66fe0b1d98f..2927a47faae 100644
--- a/packages/web-components/src/components/content-item-row/__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-row>`
+# `<c4d-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-row)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/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-row)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/content-item-row)
 
 ## Getting started
 
@@ -30,62 +30,62 @@ import '@carbon/ibmdotcom-web-components/es/components/content-item-row/index.js
 ### HTML
 
 ```html
-<cds-content-item-row>
-  <cds-content-item-row-eyebrow
-    >Lorem ipsum</cds-content-item-row-eyebrow
+<c4d-content-item-row>
+  <c4d-content-item-row-eyebrow
+    >Lorem ipsum</c4d-content-item-row-eyebrow
   >
-  <cds-content-item-heading>Aliquam condimentum</cds-content-item-heading>
-  <cds-content-item-row-copy
+  <c4d-content-item-heading>Aliquam condimentum</c4d-content-item-heading>
+  <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.</cds-content-item-row-copy
+    sollicitudin.</c4d-content-item-row-copy
   >
-  <cds-link-list slot="footer" type="vertical">
-    <cds-link-list-item-cta
+  <c4d-link-list slot="footer" type="vertical">
+    <c4d-link-list-item-cta
       icon-placement="right"
       href="https://www.ibm.com"
       cta-type="local">
       Learn more
-    </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">
       Microservices and containers
-    </cds-link-list-item-cta>
-  </cds-link-list>
-</cds-content-item-row>
+    </c4d-link-list-item-cta>
+  </c4d-link-list>
+</c4d-content-item-row>
 ```
 
 ### HTML (with thumbnail)
 
 ```html
-<cds-content-item-row thumbnail>
-  <cds-content-item-heading> Aliquam condimentum </cds-content-item-heading>
-  <cds-content-item-row-thumbnail-copy>
+<c4d-content-item-row thumbnail>
+  <c4d-content-item-heading> Aliquam condimentum </c4d-content-item-heading>
+  <c4d-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-row-thumbnail-copy>
-  <cds-link-list slot="footer" type="vertical">
-    <cds-link-list-item-cta
+  </c4d-content-item-row-thumbnail-copy>
+  <c4d-link-list slot="footer" type="vertical">
+    <c4d-link-list-item-cta
       icon-placement="right"
       href="https://www.ibm.com"
       cta-type="local">
       Learn more
-    </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">
       Microservices and containers
-    </cds-link-list-item-cta>
-  </cds-link-list>
-  <cds-image
+    </c4d-link-list-item-cta>
+  </c4d-link-list>
+  <c4d-image
     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-row>
+    default-src="https://fpoimg.com/960x720?text=4:3&bg_color=ee5396&text_color=161616"></c4d-image>
+</c4d-content-item-row>
 ```
 
 ## With Media (image)
@@ -102,27 +102,27 @@ import '@carbon/ibmdotcom-web-components/es/components/image/image';
 ### HTML
 
 ```html
-<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-row-media-copy
-    >Lorem Ipsum</cds-content-item-row-media-copy
+<c4d-content-item-row-media align="right">
+  <c4d-image slot="media" alt="Alt text" default-src="image.jpg"></c4d-image>
+  <c4d-content-item-heading>Lorem Ipsum</c4d-content-item-heading>
+  <c4d-content-item-row-media-copy
+    >Lorem Ipsum</c4d-content-item-row-media-copy
   >
-  <cds-link-list slot="footer" type="vertical">
-    <cds-link-list-item-cta
+  <c4d-link-list slot="footer" type="vertical">
+    <c4d-link-list-item-cta
       icon-placement="right"
       href="https://www.ibm.com"
       cta-type="local">
       Learn more
-    </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">
       Microservices and containers
-    </cds-link-list-item-cta>
-  </cds-link-list>
-</cds-content-item-row-media>
+    </c4d-link-list-item-cta>
+  </c4d-link-list>
+</c4d-content-item-row-media>
 ```
 
 ## With Media (video)
@@ -139,28 +139,28 @@ import '@carbon/ibmdotcom-web-components/es/components/content-item-row/content-
 ### HTML
 
 ```html
-<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-row-media-copy
-    >Lorem Ipsum</cds-content-item-row-media-copy
+<c4d-content-item-row-media align="right">
+  <c4d-content-item-row-media-video
+    video-id="0_ibuqxqbe"></c4d-content-item-row-media-video>
+  <c4d-content-item-heading>Lorem Ipsum</c4d-content-item-heading>
+  <c4d-content-item-row-media-copy
+    >Lorem Ipsum</c4d-content-item-row-media-copy
   >
-  <cds-link-list slot="footer" type="vertical">
-    <cds-link-list-item-cta
+  <c4d-link-list slot="footer" type="vertical">
+    <c4d-link-list-item-cta
       icon-placement="right"
       href="https://www.ibm.com"
       cta-type="local">
       Learn more
-    </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">
       Microservices and containers
-    </cds-link-list-item-cta>
-  </cds-link-list>
-</cds-content-item-row-media>
+    </c4d-link-list-item-cta>
+  </c4d-link-list>
+</c4d-content-item-row-media>
 ```
 
 ## With Featured Media (image)
@@ -177,32 +177,32 @@ import '@carbon/ibmdotcom-web-components/es/components/image/image';
 ### HTML
 
 ```html
-<cds-content-item-row-media-featured>
-  <cds-content-item-row-eyebrow
-    >Lorem ipsum</cds-content-item-row-eyebrow
+<c4d-content-item-row-media-featured>
+  <c4d-content-item-row-eyebrow
+    >Lorem ipsum</c4d-content-item-row-eyebrow
   >
-  <cds-content-item-heading>Aliquam condimentum</cds-content-item-heading>
-  <cds-content-item-row-media-copy>
+  <c4d-content-item-heading>Aliquam condimentum</c4d-content-item-heading>
+  <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.
-  </cds-content-item-row-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">
       Learn more
-    </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">
       Microservices and containers
-    </cds-link-list-item-cta>
-  </cds-link-list>
-  <cds-image slot="media" alt="Alt text" default-src="image.jpg"></cds-image>
-</cds-content-item-row-media-featured>
+    </c4d-link-list-item-cta>
+  </c4d-link-list>
+  <c4d-image slot="media" alt="Alt text" default-src="image.jpg"></c4d-image>
+</c4d-content-item-row-media-featured>
 ```
 
 ## With Featured Media (video)
@@ -219,38 +219,38 @@ import '@carbon/ibmdotcom-web-components/es/components/content-item-row/content-
 ### HTML
 
 ```html
-<cds-content-item-row-media-featured>
-  <cds-content-item-row-eyebrow
-    >Lorem ipsum</cds-content-item-row-eyebrow
+<c4d-content-item-row-media-featured>
+  <c4d-content-item-row-eyebrow
+    >Lorem ipsum</c4d-content-item-row-eyebrow
   >
-  <cds-content-item-heading>Aliquam condimentum</cds-content-item-heading>
-  <cds-content-item-row-media-copy>
+  <c4d-content-item-heading>Aliquam condimentum</c4d-content-item-heading>
+  <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.
-  </cds-content-item-row-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">
       Learn more
-    </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">
       Microservices and containers
-    </cds-link-list-item-cta>
-  </cds-link-list>
-  <cds-content-item-row-media-video
-    video-id="0_ibuqxqbe"></cds-content-item-row-media-video>
-</cds-content-item-row-media-featured>
+    </c4d-link-list-item-cta>
+  </c4d-link-list>
+  <c4d-content-item-row-media-video
+    video-id="0_ibuqxqbe"></c4d-content-item-row-media-video>
+</c4d-content-item-row-media-featured>
 ```
 
 ## Props
 
-<Props of="cds-content-item-row" />
+<Props of="c4d-content-item-row" />
 <Description markdown={markdownContents} />
 
 ## Stable selectors
@@ -261,11 +261,11 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector               | Compatibility selector                             | Description |
 | ------------------------------------- | -------------------------------------------------- | ----------- |
-| `<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-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   |
+| `<c4d-content-item-row>`       | `data-autoid="c4d--content-item-row"`       | Component   |
+| `<c4d-content-item-row-media>` | `data-autoid="c4d--content-item-row-media"` | Component   |
+| `<c4d-content-item-heading>`          | `data-autoid="c4d--content-item-heading"`          | Component   |
+| `<c4d-content-item-row-copy>`  | `data-autoid="c4d--content-item-row-copy"`  | Component   |
+| `<c4d-link-list>`                     | `data-autoid="c4d--link-list"`                     | Component   |
+| `<c4d-link-list-item-cta>`            | `data-autoid="c4d--link-list-item-cta"`            | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/content-item-row/__stories__/README.stories.react.mdx b/packages/web-components/src/components/content-item-row/__stories__/README.stories.react.mdx
index 33560804674..c6044bfd001 100644
--- a/packages/web-components/src/components/content-item-row/__stories__/README.stories.react.mdx
+++ b/packages/web-components/src/components/content-item-row/__stories__/README.stories.react.mdx
@@ -10,10 +10,10 @@ import { PropTypesRef } from '@carbon/ibmdotcom-web-components/es/components-rea
 # 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-row)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/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-row)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/content-item-row)
 
 ## Getting started
 
@@ -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-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   |
+| `<c4d-content-item-row>`                | `data-autoid="c4d--content-item-row"`                | Component   |
+| `<c4d-content-item-row-copy>`           | `data-autoid="c4d--content-item-row-copy"`           | Component   |
+| `<c4d-content-item-row-eyebrow>`        | `data-autoid="c4d--content-item-row-eyebrow"`        | Component   |
+| `<c4d-content-item-row-media>`          | `data-autoid="c4d--content-item-row-media"`          | Component   |
+| `<c4d-content-item-row-media-copy>`     | `data-autoid="c4d--content-item-row-media-copy"`     | Component   |
+| `<c4d-content-item-row-media-video>`    | `data-autoid="c4d--content-item-row-media-video"`    | Component   |
+| `<c4d-content-item-row-media-featured>` | `data-autoid="c4d--content-item-row-media-featured"` | Component   |
+| `<c4d-content-item-row-thumbnail-copy>` | `data-autoid="c4d--content-item-row-thumbnail-copy"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/content-item/__stories__/README.stories.mdx b/packages/web-components/src/components/content-item/__stories__/README.stories.mdx
index 96f60ce1b68..ef21b99fc70 100644
--- a/packages/web-components/src/components/content-item/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/content-item/__stories__/README.stories.mdx
@@ -6,10 +6,10 @@ import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
 # `<c4d-content-item>`
 
 > 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/content-item)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components/content-item)
 > 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)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/content-item)
 
 ## Getting started
 
diff --git a/packages/web-components/src/components/content-item/__stories__/README.stories.react.mdx b/packages/web-components/src/components/content-item/__stories__/README.stories.react.mdx
index 765c1cb3911..0439bc82a2b 100644
--- a/packages/web-components/src/components/content-item/__stories__/README.stories.react.mdx
+++ b/packages/web-components/src/components/content-item/__stories__/README.stories.react.mdx
@@ -11,10 +11,10 @@ import { PropTypesRef } from '@carbon/ibmdotcom-web-components/es/components-rea
 # Content item
 
 > 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/content-item)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components-react/content-item)
 > 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)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/content-item)
 
 ## Getting started
 
diff --git a/packages/web-components/src/components/content-section/__stories__/README.stories.mdx b/packages/web-components/src/components/content-section/__stories__/README.stories.mdx
index d50104d36a2..88b0c7834c9 100644
--- a/packages/web-components/src/components/content-section/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/content-section/__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-section>`
+# `<c4d-content-section>`
 
 > 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/content-section)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components/content-section)
 > 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-section)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/content-section)
 
 ## Getting started
 
@@ -28,13 +28,13 @@ import '@carbon/ibmdotcom-web-components/es/components/content-section/index.js'
 ### HTML
 
 ```html
-<cds-content-section>
-  <cds-content-section-heading>Heading</cds-content-section-heading>
-  <cds-content-section-copy>Copy</cds-content-section-copy>
-  <cds-text-cta slot="footer" cta-type="local" href="https://www.example.com">
-    CTA text</cds-text-cta
+<c4d-content-section>
+  <c4d-content-section-heading>Heading</c4d-content-section-heading>
+  <c4d-content-section-copy>Copy</c4d-content-section-copy>
+  <c4d-text-cta slot="footer" cta-type="local" href="https://www.example.com">
+    CTA text</c4d-text-cta
   >
-</cds-content-section>
+</c4d-content-section>
 ```
 
 As part of the ongoing upgrade to Carbon for IBM.com v2, we have consolidated
@@ -49,74 +49,74 @@ need to be provided with proper grid class as shown below in order for the
 component to render correctly within the grid.
 
 ```html
-<cds-content-section children-custom-class="cds--col-lg-16 cds--no-gutter">
-  <cds-content-section-heading>Heading</cds-content-section-heading>
-  <cds-content-section-copy>Copy</cds-content-section-copy>
-  <cds-text-cta slot="footer" cta-type="local" href="https://www.example.com">
-    CTA text</cds-text-cta
+<c4d-content-section children-custom-class="cds--col-lg-16 cds--no-gutter">
+  <c4d-content-section-heading>Heading</c4d-content-section-heading>
+  <c4d-content-section-copy>Copy</c4d-content-section-copy>
+  <c4d-text-cta slot="footer" cta-type="local" href="https://www.example.com">
+    CTA text</c4d-text-cta
   >
-  <cds-content-block-simple>
-    <cds-content-block-heading
-      >Content block simple heading</cds-content-block-heading
+  <c4d-content-block-simple>
+    <c4d-content-block-heading
+      >Content block simple heading</c4d-content-block-heading
     >
-    <cds-content-block-copy size="sm"
-      >Content block simple copy</cds-content-block-copy
+    <c4d-content-block-copy size="sm"
+      >Content block simple copy</c4d-content-block-copy
     >
-    <cds-video-player-container
+    <c4d-video-player-container
       slot="media"
-      video-id="0_ibuqxqbe"></cds-video-player-container>
-    <cds-text-cta slot="footer" cta-type="jump" href="https://www.ibm.com"
-      >Jump to AI ethics and trust</cds-text-cta
+      video-id="0_ibuqxqbe"></c4d-video-player-container>
+    <c4d-text-cta slot="footer" cta-type="jump" href="https://www.ibm.com"
+      >Jump to AI ethics and trust</c4d-text-cta
     >
-  </cds-content-block-simple>
-</cds-content-section>
+  </c4d-content-block-simple>
+</c4d-content-section>
 ```
 
 ### Card group
 
 ```html
-<cds-content-section>
-  <cds-content-section-heading>Heading</cds-content-section-heading>
-  <cds-content-section-copy>Copy</cds-content-section-copy>
-  <cds-text-cta slot="footer" cta-type="local" href="https://www.example.com">
-    CTA text</cds-text-cta
+<c4d-content-section>
+  <c4d-content-section-heading>Heading</c4d-content-section-heading>
+  <c4d-content-section-copy>Copy</c4d-content-section-copy>
+  <c4d-text-cta slot="footer" cta-type="local" href="https://www.example.com">
+    CTA text</c4d-text-cta
   >
-  <cds-card-group>
-    <cds-card-group-item href="https://example.com" cta-type="local">
-      <cds-card-heading>Nunc convallis lobortis</cds-card-heading>
+  <c4d-card-group>
+    <c4d-card-group-item href="https://example.com" cta-type="local">
+      <c4d-card-heading>Nunc convallis lobortis</c4d-card-heading>
       <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
         ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at
         elit sollicitudin, sodales nulla quis, consequat libero.
       </p>
-      <cds-card-cta-footer slot="footer"> </cds-card-cta-footer>
-    </cds-card-group-item>
-  </cds-card-group>
-</cds-content-section>
+      <c4d-card-footer slot="footer"> </c4d-card-footer>
+    </c4d-card-group-item>
+  </c4d-card-group>
+</c4d-content-section>
 ```
 
 ### Carousel
 
 ```html
-<cds-content-section>
-  <cds-content-section-heading>Heading</cds-content-section-heading>
-  <cds-content-section-copy>Copy</cds-content-section-copy>
-  <cds-text-cta slot="footer" cta-type="local" href="https://www.example.com">
-    CTA text</cds-text-cta
+<c4d-content-section>
+  <c4d-content-section-heading>Heading</c4d-content-section-heading>
+  <c4d-content-section-copy>Copy</c4d-content-section-copy>
+  <c4d-text-cta slot="footer" cta-type="local" href="https://www.example.com">
+    CTA text</c4d-text-cta
   >
-  <cds-content-section-heading
-    >Lorem ipsum dolor sit amet</cds-content-section-heading
+  <c4d-content-section-heading
+    >Lorem ipsum dolor sit amet</c4d-content-section-heading
   >
-  <cds-content-section-copy>
+  <c4d-content-section-copy>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies
     est.
-  </cds-content-section-copy>
-  <cds-carousel>
-    <cds-card href="https://example.com">
-      <cds-card-heading>Lorem ipsum dolor sit amet</cds-card-heading>
+  </c4d-content-section-copy>
+  <c4d-carousel>
+    <c4d-card href="https://example.com">
+      <c4d-card-heading>Lorem ipsum dolor sit amet</c4d-card-heading>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
       ultricies est.
-      <cds-card-footer>
+      <c4d-card-footer>
         <svg
           slot="footer"
           focusable="false"
@@ -130,13 +130,13 @@ component to render correctly within the grid.
           <path
             d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
         </svg>
-      </cds-card-footer>
-    </cds-card>
-    <cds-card href="https://example.com">
-      <cds-card-heading>Lorem ipsum dolor sit amet</cds-card-heading>
+      </c4d-card-footer>
+    </c4d-card>
+    <c4d-card href="https://example.com">
+      <c4d-card-heading>Lorem ipsum dolor sit amet</c4d-card-heading>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
       ultricies est.
-      <cds-card-footer>
+      <c4d-card-footer>
         <svg
           slot="footer"
           focusable="false"
@@ -150,13 +150,13 @@ component to render correctly within the grid.
           <path
             d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
         </svg>
-      </cds-card-footer>
-    </cds-card>
-    <cds-card href="https://example.com">
-      <cds-card-heading>Lorem ipsum dolor sit amet</cds-card-heading>
+      </c4d-card-footer>
+    </c4d-card>
+    <c4d-card href="https://example.com">
+      <c4d-card-heading>Lorem ipsum dolor sit amet</c4d-card-heading>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
       ultricies est.
-      <cds-card-footer>
+      <c4d-card-footer>
         <svg
           slot="footer"
           focusable="false"
@@ -170,13 +170,13 @@ component to render correctly within the grid.
           <path
             d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
         </svg>
-      </cds-card-footer>
-    </cds-card>
-    <cds-card href="https://example.com">
-      <cds-card-heading>Lorem ipsum dolor sit amet</cds-card-heading>
+      </c4d-card-footer>
+    </c4d-card>
+    <c4d-card href="https://example.com">
+      <c4d-card-heading>Lorem ipsum dolor sit amet</c4d-card-heading>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
       ultricies est.
-      <cds-card-footer>
+      <c4d-card-footer>
         <svg
           slot="footer"
           focusable="false"
@@ -190,13 +190,13 @@ component to render correctly within the grid.
           <path
             d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
         </svg>
-      </cds-card-footer>
-    </cds-card>
-    <cds-card href="https://example.com">
-      <cds-card-heading>Lorem ipsum dolor sit amet</cds-card-heading>
+      </c4d-card-footer>
+    </c4d-card>
+    <c4d-card href="https://example.com">
+      <c4d-card-heading>Lorem ipsum dolor sit amet</c4d-card-heading>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
       ultricies est.
-      <cds-card-footer>
+      <c4d-card-footer>
         <svg
           slot="footer"
           focusable="false"
@@ -210,13 +210,13 @@ component to render correctly within the grid.
           <path
             d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
         </svg>
-      </cds-card-footer>
-    </cds-card>
-    <cds-card href="https://example.com">
-      <cds-card-heading>Lorem ipsum dolor sit amet</cds-card-heading>
+      </c4d-card-footer>
+    </c4d-card>
+    <c4d-card href="https://example.com">
+      <c4d-card-heading>Lorem ipsum dolor sit amet</c4d-card-heading>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
       ultricies est.
-      <cds-card-footer>
+      <c4d-card-footer>
         <svg
           slot="footer"
           focusable="false"
@@ -230,50 +230,50 @@ component to render correctly within the grid.
           <path
             d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
         </svg>
-      </cds-card-footer>
-    </cds-card>
-  </cds-carousel>
-</cds-content-section>
+      </c4d-card-footer>
+    </c4d-card>
+  </c4d-carousel>
+</c4d-content-section>
 ```
 
 ### Link list
 
 ```html
-<cds-content-section>
-  <cds-content-section-heading>Heading</cds-content-section-heading>
-  <cds-content-section-copy>Copy</cds-content-section-copy>
-  <cds-text-cta slot="footer" cta-type="local" href="https://www.example.com">
-    CTA text</cds-text-cta
+<c4d-content-section>
+  <c4d-content-section-heading>Heading</c4d-content-section-heading>
+  <c4d-content-section-copy>Copy</c4d-content-section-copy>
+  <c4d-text-cta slot="footer" cta-type="local" href="https://www.example.com">
+    CTA text</c4d-text-cta
   >
-  <cds-content-section-heading
-    >Lorem ipsum dolor sit amet</cds-content-section-heading
+  <c4d-content-section-heading
+    >Lorem ipsum dolor sit amet</c4d-content-section-heading
   >
-  <cds-content-section-copy>
+  <c4d-content-section-copy>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies
     est.
-  </cds-content-section-copy>
-  <cds-link-list>
-    <cds-link-list-item href="https://example.com">
+  </c4d-content-section-copy>
+  <c4d-link-list>
+    <c4d-link-list-item href="https://example.com">
       Learn more about Kubernetes and automating deployment ${ArrowRight20({
       slot: 'icon' })}
-    </cds-link-list-item>
-    <cds-link-list-item href="https://example.com">
+    </c4d-link-list-item>
+    <c4d-link-list-item href="https://example.com">
       Containerization A Complete Guide ${ArrowRight20({ slot: 'icon' })}
-    </cds-link-list-item>
-    <cds-link-list-item href="https://example.com">
+    </c4d-link-list-item>
+    <c4d-link-list-item href="https://example.com">
       Microservices and containers ${ArrowRight20({ slot: 'icon' })}
-    </cds-link-list-item>
-    <cds-link-list-item href="https://example.com">
+    </c4d-link-list-item>
+    <c4d-link-list-item href="https://example.com">
       Learn more about Kubernetes ${ArrowRight20({ slot: 'icon' })}
-    </cds-link-list-item>
-    <cds-link-list-item href="https://example.com">
+    </c4d-link-list-item>
+    <c4d-link-list-item href="https://example.com">
       Containerization A Complete Guide ${ArrowRight20({ slot: 'icon' })}
-    </cds-link-list-item>
-    <cds-link-list-item href="https://example.com">
+    </c4d-link-list-item>
+    <c4d-link-list-item href="https://example.com">
       Microservices and containers ${ArrowRight20({ slot: 'icon' })}
-    </cds-link-list-item>
-  </cds-link-list>
-</cds-content-section>
+    </c4d-link-list-item>
+  </c4d-link-list>
+</c4d-content-section>
 ```
 
 As part of the ongoing upgrade to Carbon for IBM.com v2, we have consolidated some of the other `Content section` variants under a single one.
@@ -468,7 +468,7 @@ Some of the components that are compatible with the `Content section` component
 
 ## Props
 
-<Props of="cds-content-section" />
+<Props of="c4d-content-section" />
 <Description markdown={markdownContents} />
 
 ## Stable selectors
@@ -479,8 +479,8 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector         | Compatibility selector                        | Description |
 | ------------------------------- | --------------------------------------------- | ----------- |
-| `<cds-content-section>`         | `data-autoid="cds--content-section"`          | Component   |
-| `<cds-content-section-copy>`    | `data-autoid="cds--content-section__copy"`    | Component   |
-| `<cds-content-section-heading>` | `data-autoid="cds--content-section__heading"` | Component   |
+| `<c4d-content-section>`         | `data-autoid="c4d--content-section"`          | Component   |
+| `<c4d-content-section-copy>`    | `data-autoid="c4d--content-section__copy"`    | Component   |
+| `<c4d-content-section-heading>` | `data-autoid="c4d--content-section__heading"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/content-section/__stories__/README.stories.react.mdx b/packages/web-components/src/components/content-section/__stories__/README.stories.react.mdx
index fcaa3b05c23..db25cfd124c 100644
--- a/packages/web-components/src/components/content-section/__stories__/README.stories.react.mdx
+++ b/packages/web-components/src/components/content-section/__stories__/README.stories.react.mdx
@@ -10,10 +10,10 @@ import { PropTypesRef } from '@carbon/ibmdotcom-web-components/es/components-rea
 # Content Section
 
 > 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/content-section)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components-react/content-section)
 > 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-section)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/content-section)
 
 ## Getting started
 
@@ -236,8 +236,8 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector         | Compatibility selector                        | Description |
 | ------------------------------- | --------------------------------------------- | ----------- |
-| `<cds-content-section>`         | `data-autoid="cds--content-section"`          | Component   |
-| `<cds-content-section-copy>`    | `data-autoid="cds--content-section__copy"`    | Component   |
-| `<cds-content-section-heading>` | `data-autoid="cds--content-section__heading"` | Component   |
+| `<c4d-content-section>`         | `data-autoid="c4d--content-section"`          | Component   |
+| `<c4d-content-section-copy>`    | `data-autoid="c4d--content-section__copy"`    | Component   |
+| `<c4d-content-section-heading>` | `data-autoid="c4d--content-section__heading"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/cta-block/__stories__/README.stories.mdx b/packages/web-components/src/components/cta-block/__stories__/README.stories.mdx
index de54996fe25..42b12300255 100644
--- a/packages/web-components/src/components/cta-block/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/cta-block/__stories__/README.stories.mdx
@@ -3,12 +3,12 @@ import markdownContents from '../../../../docs/markdown-contents.md';
 import contributing from '../../../../../../docs/contributing-license.md';
 import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
 
-# `<cds-cta-block>`
+# `<c4d-cta-block>`
 
 > 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/cta-block)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components/cta-block)
 > 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/cta-block)
+> [![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/cta-block)
 
 ## Getting started
 
@@ -30,109 +30,109 @@ import '@carbon/ibmdotcom-web-components/es/components/link-list/index.js';
 ### HTML
 
 ```html
-<cds-cta-block no-border>
-  <cds-content-block-heading
-    >C4D Content Block Heading</cds-content-block-heading
+<c4d-cta-block no-border>
+  <c4d-content-block-heading
+    >C4D Content Block Heading</c4d-content-block-heading
   >
-  <cds-content-block-copy>C4D Content Block Copy</cds-content-block-copy>
+  <c4d-content-block-copy>C4D Content Block Copy</c4d-content-block-copy>
 
-  <cds-button-group slot="action">
-    <cds-button-group-item href="https://example.com">
+  <c4d-button-group slot="action">
+    <c4d-button-group-item href="https://example.com">
       Secondary Button
-    </cds-button-group-item>
-    <cds-button-group-item ref="https://example.com">
+    </c4d-button-group-item>
+    <c4d-button-group-item ref="https://example.com">
       Primary button
-    </cds-button-group-item>
-  </cds-button-group>
+    </c4d-button-group-item>
+  </c4d-button-group>
 
-  <cds-cta-block-item-row>
-    <cds-cta-block-item>
-      <cds-content-item-heading>Get connected</cds-content-item-heading>
-      <cds-content-item-copy
+  <c4d-cta-block-item-row>
+    <c4d-cta-block-item>
+      <c4d-content-item-heading>Get connected</c4d-content-item-heading>
+      <c4d-content-item-copy
         >IBM DevOps partners have a wide range of expertise. Find one to build
-        that right solution for you.</cds-content-item-copy
+        that right solution for you.</c4d-content-item-copy
       >
-      <cds-text-cta
+      <c4d-text-cta
         slot="footer"
         cta-type="local"
         icon-placement="right"
         href="example.com"
-        >Find a partner</cds-text-cta
+        >Find a partner</c4d-text-cta
       >
-    </cds-cta-block-item>
+    </c4d-cta-block-item>
 
-    <cds-cta-block-item>
-      <cds-content-item-heading>Learn how</cds-content-item-heading>
-      <cds-content-item-copy
+    <c4d-cta-block-item>
+      <c4d-content-item-heading>Learn how</c4d-content-item-heading>
+      <c4d-content-item-copy
         >Dig into more self-directed larning about DevOps
-        methodologies.</cds-content-item-copy
+        methodologies.</c4d-content-item-copy
       >
-      <cds-text-cta
+      <c4d-text-cta
         slot="footer"
         cta-type="local"
         icon-placement="right"
         href="example.com"
-        >Browse tutorials</cds-text-cta
+        >Browse tutorials</c4d-text-cta
       >
-    </cds-cta-block-item>
+    </c4d-cta-block-item>
 
-    <cds-cta-block-item>
-      <cds-content-item-heading>Learn how</cds-content-item-heading>
-      <cds-content-item-copy
+    <c4d-cta-block-item>
+      <c4d-content-item-heading>Learn how</c4d-content-item-heading>
+      <c4d-content-item-copy
         >Dig into more self-directed larning about DevOps
-        methodologies.</cds-content-item-copy
+        methodologies.</c4d-content-item-copy
       >
-      <cds-text-cta
+      <c4d-text-cta
         slot="footer"
         cta-type="local"
         icon-placement="right"
         href="example.com"
-        >Browse tutorials</cds-text-cta
+        >Browse tutorials</c4d-text-cta
       >
-    </cds-cta-block-item>
-  </cds-cta-block-item-row>
-</cds-cta-block>
+    </c4d-cta-block-item>
+  </c4d-cta-block-item-row>
+</c4d-cta-block>
 ```
 
 ### With link list
 
 ```html
-<cds-cta-block>
-  <cds-content-block-heading
-    >C4D Content Block Heading</cds-content-block-heading
+<c4d-cta-block>
+  <c4d-content-block-heading
+    >C4D Content Block Heading</c4d-content-block-heading
   >
-  <cds-content-block-copy>C4D Content Block Copy</cds-content-block-copy>
+  <c4d-content-block-copy>C4D Content Block Copy</c4d-content-block-copy>
 
-  <cds-button-group slot="action">
-    <cds-button-group-item target="${target}" href="https://example.com">
+  <c4d-button-group slot="action">
+    <c4d-button-group-item target="${target}" href="https://example.com">
       Secondary Button
-    </cds-button-group-item>
-    <cds-button-group-item target="${target}" href="https://example.com">
+    </c4d-button-group-item>
+    <c4d-button-group-item target="${target}" href="https://example.com">
       Primary button
-    </cds-button-group-item>
-  </cds-button-group>
-
-  <cds-link-list slot="link-list" type="end">
-    <cds-link-list-heading>More ways to explore DevOps</cds-link-list-heading>
-    <cds-link-list-item href="https://example.com"> Events </cds-link-list-item>
-    <cds-link-list-item href="https://example.com"> Blogs </cds-link-list-item>
-    <cds-link-list-item href="https://example.com">
+    </c4d-button-group-item>
+  </c4d-button-group>
+
+  <c4d-link-list slot="link-list" type="end">
+    <c4d-link-list-heading>More ways to explore DevOps</c4d-link-list-heading>
+    <c4d-link-list-item href="https://example.com"> Events </c4d-link-list-item>
+    <c4d-link-list-item href="https://example.com"> Blogs </c4d-link-list-item>
+    <c4d-link-list-item href="https://example.com">
       Training
-    </cds-link-list-item>
-    <cds-link-list-item href="https://example.com">
+    </c4d-link-list-item>
+    <c4d-link-list-item href="https://example.com">
       Developer resources
-    </cds-link-list-item>
-    <cds-link-list-item href="https://example.com">
+    </c4d-link-list-item>
+    <c4d-link-list-item href="https://example.com">
       Research
-    </cds-link-list-item>
-    <cds-link-list-item href="https://example.com"> News </cds-link-list-item>
-  </cds-link-list>
-</cds-cta-block>
+    </c4d-link-list-item>
+    <c4d-link-list-item href="https://example.com"> News </c4d-link-list-item>
+  </c4d-link-list>
+</c4d-cta-block>
 ```
 
 ## Props
 
-<Props of="cds-cta-block" />
+<Props of="c4d-cta-block" />
 <Description markdown={markdownContents} />
 
 ## Stable selectors
@@ -143,8 +143,8 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector    | Compatibility selector              | Description |
 | -------------------------- | ----------------------------------- | ----------- |
-| `<cds-cta-block>`          | `data-autoid="cds--cta-block"`      | Component   |
-| `<cds-cta-block-item>`     | `data-autoid="cds--cta-block-item"` | Component   |
-| `<cds-cta-block-item-row>` | `data-autoid="cds--cta-block-row"`  | Component   |
+| `<c4d-cta-block>`          | `data-autoid="c4d--cta-block"`      | Component   |
+| `<c4d-cta-block-item>`     | `data-autoid="c4d--cta-block-item"` | Component   |
+| `<c4d-cta-block-item-row>` | `data-autoid="c4d--cta-block-row"`  | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/cta-block/__stories__/README.stories.react.mdx b/packages/web-components/src/components/cta-block/__stories__/README.stories.react.mdx
index a3a1ad803fc..ef6cbbf0b30 100644
--- a/packages/web-components/src/components/cta-block/__stories__/README.stories.react.mdx
+++ b/packages/web-components/src/components/cta-block/__stories__/README.stories.react.mdx
@@ -10,10 +10,10 @@ import { PropTypesRef } from '@carbon/ibmdotcom-web-components/es/components-rea
 # CTA block
 
 > 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/cta-block)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components-react/cta-block)
 > 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/cta-block)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/cta-block)
 
 ## Getting started
 
@@ -109,8 +109,8 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector    | Compatibility selector              | Description |
 | -------------------------- | ----------------------------------- | ----------- |
-| `<cds-cta-block>`          | `data-autoid="cds--cta-block"`      | Component   |
-| `<cds-cta-block-item>`     | `data-autoid="cds--cta-block-item"` | Component   |
-| `<cds-cta-block-item-row>` | `data-autoid="cds--cta-block-row"`  | Component   |
+| `<c4d-cta-block>`          | `data-autoid="c4d--cta-block"`      | Component   |
+| `<c4d-cta-block-item>`     | `data-autoid="c4d--cta-block-item"` | Component   |
+| `<c4d-cta-block-item-row>` | `data-autoid="c4d--cta-block-row"`  | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/cta-section/__stories__/README.stories.mdx b/packages/web-components/src/components/cta-section/__stories__/README.stories.mdx
index 95f46a836d5..d7d51edea4f 100644
--- a/packages/web-components/src/components/cta-section/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/cta-section/__stories__/README.stories.mdx
@@ -3,17 +3,17 @@ import markdownContents from '../../../../docs/markdown-contents.md';
 import contributing from '../../../../../../docs/contributing-license.md';
 import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
 
-# `<cds-cta-section>`
+# `<c4d-cta-section>`
 
 > 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/cta-section)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components/cta-section)
 > 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/cta-section)
+> [![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/cta-section)
 
 ## Breaking Changes
 
 As of `Carbon for IBM.com Web Components v1.3.0`, the API for
-`<cds-cta-section>` has changed. Be sure to update to the latest version of CTA
+`<c4d-cta-section>` has changed. Be sure to update to the latest version of CTA
 Section if upgrading from a previous version.
 
 ## Getting started
@@ -40,82 +40,82 @@ import '@carbon/ibmdotcom-web-components/es/components/lightbox-media-viewer/lig
 ### HTML
 
 ```html
-<cds-cta-section>
-  <cds-content-section-heading
-    >Related products and services</cds-content-section-heading
+<c4d-cta-section>
+  <c4d-content-section-heading
+    >Related products and services</c4d-content-section-heading
   >
 
-  <cds-cta-block>
-    <cds-content-block-heading
-      >C4D Content Block Heading</cds-content-block-heading
+  <c4d-cta-block>
+    <c4d-content-block-heading
+      >C4D Content Block Heading</c4d-content-block-heading
     >
-    <cds-content-block-copy>C4D Content Block Copy</cds-content-block-copy>
-    <cds-text-cta
+    <c4d-content-block-copy>C4D Content Block Copy</c4d-content-block-copy>
+    <c4d-text-cta
       slot="action"
       cta-type="local"
       icon-placement="right"
       href="example.com"
-      >Browse tutorials</cds-text-cta
+      >Browse tutorials</c4d-text-cta
     >
 
-    <cds-cta-block-item-row no-border>
-      <cds-cta-block-item>
+    <c4d-cta-block-item-row no-border>
+      <c4d-cta-block-item>
         <span slot="statistics">10%</span>
-        <cds-content-item-heading>Get connected</cds-content-item-heading>
-        <cds-content-item-copy
+        <c4d-content-item-heading>Get connected</c4d-content-item-heading>
+        <c4d-content-item-copy
           >IBM DevOps partners have a wide range of expertise. Find one to build
-          that right solution for you.</cds-content-item-copy
+          that right solution for you.</c4d-content-item-copy
         >
-        <cds-text-cta
+        <c4d-text-cta
           slot="footer"
           cta-type="local"
           icon-placement="right"
           href="https://www.example.com"
-          >Find a partner</cds-text-cta
+          >Find a partner</c4d-text-cta
         >
-      </cds-cta-block-item>
+      </c4d-cta-block-item>
 
-      <cds-cta-block-item>
+      <c4d-cta-block-item>
         <span slot="statistics">11%</span>
-        <cds-content-item-heading>Learn how</cds-content-item-heading>
-        <cds-content-item-copy
+        <c4d-content-item-heading>Learn how</c4d-content-item-heading>
+        <c4d-content-item-copy
           >Dig into more self-directed learning about DevOps
-          methodologies.</cds-content-item-copy
+          methodologies.</c4d-content-item-copy
         >
-        <cds-text-cta
+        <c4d-text-cta
           slot="footer"
           cta-type="local"
           icon-placement="right"
           href="https://www.example.com"
-          >Browse tutorials</cds-text-cta
+          >Browse tutorials</c4d-text-cta
         >
-      </cds-cta-block-item>
+      </c4d-cta-block-item>
 
-      <cds-cta-block-item>
+      <c4d-cta-block-item>
         <span slot="statistics">12%</span>
-        <cds-content-item-heading>Learn how</cds-content-item-heading>
-        <cds-content-item-copy
+        <c4d-content-item-heading>Learn how</c4d-content-item-heading>
+        <c4d-content-item-copy
           >Dig into more self-directed learning about DevOps
-          methodologies.</cds-content-item-copy
+          methodologies.</c4d-content-item-copy
         >
-        <cds-text-cta
+        <c4d-text-cta
           slot="footer"
           cta-type="local"
           icon-placement="right"
           href="https://www.example.com"
-          >Browse tutorials</cds-text-cta
+          >Browse tutorials</c4d-text-cta
         >
-        <cds-text-cta
+        <c4d-text-cta
           slot="footer"
           cta-type="local"
           icon-placement="right"
           href="https://www.example.com"
-          >Browse tutorials</cds-text-cta
+          >Browse tutorials</c4d-text-cta
         >
-      </cds-cta-block-item>
-    </cds-cta-block-item-row>
-    <cds-cta-block-item-row>
-      <cds-cta-block-item>
+      </c4d-cta-block-item>
+    </c4d-cta-block-item-row>
+    <c4d-cta-block-item-row>
+      <c4d-cta-block-item>
         <svg
           slot="media"
           focusable="false"
@@ -140,20 +140,20 @@ import '@carbon/ibmdotcom-web-components/es/components/lightbox-media-viewer/lig
           0 10-1 0 .5.5 0 001 0zm0 9a.5.5 0 10-1 0 .5.5 0 001 0z" />
           <path fill="none" d="M0 0h32v32H0z" />
         </svg>
-        <cds-content-item-heading>Get connected</cds-content-item-heading>
-        <cds-content-item-copy
+        <c4d-content-item-heading>Get connected</c4d-content-item-heading>
+        <c4d-content-item-copy
           >IBM DevOps partners have a wide range of expertise. Find one to build
-          that right solution for you.</cds-content-item-copy
+          that right solution for you.</c4d-content-item-copy
         >
-        <cds-text-cta
+        <c4d-text-cta
           slot="footer"
           cta-type="local"
           icon-placement="right"
           href="https://www.example.com"
-          >Find a partner</cds-text-cta
+          >Find a partner</c4d-text-cta
         >
-      </cds-cta-block-item>
-      <cds-cta-block-item>
+      </c4d-cta-block-item>
+      <c4d-cta-block-item>
         <svg
           slot="media"
           focusable="false"
@@ -178,78 +178,78 @@ import '@carbon/ibmdotcom-web-components/es/components/lightbox-media-viewer/lig
           0 10-1 0 .5.5 0 001 0zm0 9a.5.5 0 10-1 0 .5.5 0 001 0z" />
           <path fill="none" d="M0 0h32v32H0z" />
         </svg>
-        <cds-content-item-heading>Learn how</cds-content-item-heading>
-        <cds-content-item-copy
+        <c4d-content-item-heading>Learn how</c4d-content-item-heading>
+        <c4d-content-item-copy
           >Dig into more self-directed learning about DevOps
-          methodologies.</cds-content-item-copy
+          methodologies.</c4d-content-item-copy
         >
-        <cds-text-cta
+        <c4d-text-cta
           slot="footer"
           cta-type="local"
           icon-placement="right"
           href="example.com"
-          >Browse tutorials</cds-text-cta
+          >Browse tutorials</c4d-text-cta
         >
-      </cds-cta-block-item>
-    </cds-cta-block-item-row>
-    <cds-cta-block-item-row no-border>
-      <cds-cta-block-item>
-        <cds-video-player-container
+      </c4d-cta-block-item>
+    </c4d-cta-block-item-row>
+    <c4d-cta-block-item-row no-border>
+      <c4d-cta-block-item>
+        <c4d-video-player-container
           video-id="0_ibuqxqbe"
           aspect-ratio="4x3"
           playing-mode="lightbox"
           slot="media"
-          hide-caption></cds-video-player-container>
-        <cds-content-item-heading>Get connected</cds-content-item-heading>
-        <cds-content-item-copy
+          hide-caption></c4d-video-player-container>
+        <c4d-content-item-heading>Get connected</c4d-content-item-heading>
+        <c4d-content-item-copy
           >IBM DevOps partners have a wide range of expertise. Find one to build
-          that right solution for you.</cds-content-item-copy
+          that right solution for you.</c4d-content-item-copy
         >
-        <cds-text-cta
+        <c4d-text-cta
           slot="footer"
           cta-type="local"
           icon-placement="right"
           href="example.com"
-          >Find a partner</cds-text-cta
+          >Find a partner</c4d-text-cta
         >
-      </cds-cta-block-item>
-      <cds-cta-block-item>
-        <cds-video-player-container
+      </c4d-cta-block-item>
+      <c4d-cta-block-item>
+        <c4d-video-player-container
           video-id="0_ibuqxqbe"
           aspect-ratio="4x3"
           playing-mode="lightbox"
           slot="media"
-          hide-caption></cds-video-player-container>
-        <cds-lightbox-video-player-container
-          playing-mode="lightbox"></cds-lightbox-video-player-container>
-        <cds-content-item-heading>Learn how</cds-content-item-heading>
-        <cds-content-item-copy
+          hide-caption></c4d-video-player-container>
+        <c4d-lightbox-video-player-container
+          playing-mode="lightbox"></c4d-lightbox-video-player-container>
+        <c4d-content-item-heading>Learn how</c4d-content-item-heading>
+        <c4d-content-item-copy
           >Dig into more self-directed learning about DevOps
-          methodologies.</cds-content-item-copy
+          methodologies.</c4d-content-item-copy
         >
-        <cds-text-cta
+        <c4d-text-cta
           slot="footer"
           cta-type="local"
           icon-placement="right"
           href="example.com"
-          >Browse tutorials</cds-text-cta
+          >Browse tutorials</c4d-text-cta
         >
-        <cds-text-cta
+        <c4d-text-cta
           slot="footer"
           cta-type="local"
           icon-placement="right"
           href="example.com"
-          >Browse tutorials</cds-text-cta
+          >Browse tutorials</c4d-text-cta
         >
-      </cds-cta-block-item>
-    </cds-cta-block-item-row>
-  </cds-cta-block>
-</cds-cta-section>
+      </c4d-cta-block-item>
+    </c4d-cta-block-item-row>
+  </c4d-cta-block>
+</c4d-cta-section>
 ```
 
 ## Props
 
-<Props of="cds-cta-section" />
+<Props of="c4d-cta-section" />
 <Description markdown={markdownContents} />
 
 ## Stable selectors
@@ -260,6 +260,6 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector | Compatibility selector           | Description |
 | ----------------------- | -------------------------------- | ----------- |
-| `<cds-cta-section>`     | `data-autoid="cds--cta-section"` | Component   |
+| `<c4d-cta-section>`     | `data-autoid="c4d--cta-section"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/cta-section/__stories__/README.stories.react.mdx b/packages/web-components/src/components/cta-section/__stories__/README.stories.react.mdx
index 255337f6262..565b9ad8106 100644
--- a/packages/web-components/src/components/cta-section/__stories__/README.stories.react.mdx
+++ b/packages/web-components/src/components/cta-section/__stories__/README.stories.react.mdx
@@ -10,10 +10,10 @@ import { PropTypesRef } from '@carbon/ibmdotcom-web-components/es/components-rea
 # CTA Section
 
 > 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/cta-section)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components-react/cta-section)
 > 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/cta-section)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/cta-section)
 
 ## Getting started
 
@@ -204,6 +204,6 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector | Compatibility selector | Description |
 | ----------------------- | ---------------------- | ----------- |
-| `<cds-cta-section>`     | N/A                    | Component   |
+| `<c4d-cta-section>`     | N/A                    | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/cta/__stories__/README.stories.mdx b/packages/web-components/src/components/cta/__stories__/README.stories.mdx
index 1a13b9b8b45..8cc52abdc4c 100644
--- a/packages/web-components/src/components/cta/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/cta/__stories__/README.stories.mdx
@@ -46,65 +46,65 @@ import '@carbon/ibmdotcom-web-components/es/components/cta/index.js';
 CTA Text is the most basic version of CTA, presented as a simple link.
 
 > 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/cta-text)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components/cta-text)
 > 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/cta-text)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/cta-text)
 
 ### HTML
 
 ```html
-<cds-cta cta-style="text" href="https://www.ibm.com/" cta-type="local">
+<c4d-cta cta-style="text" href="https://www.ibm.com/" cta-type="local">
   Copy text
-</cds-cta>
+</c4d-cta>
 ```
 
 ### Props
 
-<Props of="cds-text-cta" />
+<Props of="c4d-text-cta" />
 
 ## `Button`
 
 CTA Button is a version of CTA presented as a button.
 
 > 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/cta-button)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components/cta-button)
 > 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/cta-button)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/cta-button)
 
 ### HTML
 
 ```html
-<cds-cta
+<c4d-cta
   cta-style="button"
   cta-type="local"
   kind="tertiary"
   href="https://www.example.com">
   Button CTA Copy
-</cds-cta>
+</c4d-cta>
 ```
 
 ### Props
 
-<Props of="cds-button-cta" />
+<Props of="c4d-button-cta" />
 
 ## Card CTA
 
 CTA Card is a version of CTA presented as a card.
 
 > 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/cta-card)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components/cta-card)
 > 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/cta-card)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/cta-card)
 
 ### HTML
 
 ```html
-<cds-cta cta-style="card" href="https://www.ibm.com/" cta-type="local">
+<c4d-cta cta-style="card" href="https://www.ibm.com/" cta-type="local">
   Copy text
-  <cds-card-cta-footer>
+  <c4d-card-footer>
     <svg
       slot="icon"
       focusable="false"
@@ -118,30 +118,30 @@ CTA Card is a version of CTA presented as a card.
       <path
         d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
     </svg>
-  </cds-card-cta-footer>
-</cds-cta>
+  </c4d-card-footer>
+</c4d-cta>
 ```
 
 ### Props
 
-<Props of="cds-card-cta" />
+<Props of="c4d-card-cta" />
 
 ## Card link CTA
 
 Card link CTA is a version of CTA presented as a card.
 
 > 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/cta-card)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components/cta-card)
 > 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/cta-card)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/cta-card)
 
 ### HTML
 
 ```html
-<cds-cta cta-style="card-link" href="https://www.ibm.com/" cta-type="local">
-  <cds-card-link-heading>Heading text</cds-card-link-heading>
-  <cds-card-cta-footer>
+<c4d-cta cta-style="card-link" href="https://www.ibm.com/" cta-type="local">
+  <c4d-card-link-heading>Heading text</c4d-card-link-heading>
+  <c4d-card-footer>
     <svg
       slot="icon"
       focusable="false"
@@ -155,35 +155,35 @@ Card link CTA is a version of CTA presented as a card.
       <path
         d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
     </svg>
-  </cds-card-cta-footer>
-</cds-cta>
+  </c4d-card-footer>
+</c4d-cta>
 ```
 
 ### Props
 
-<Props of="cds-card-link-cta" />
+<Props of="c4d-card-link-cta" />
 
 ## Feature card CTA
 
 Feature card CTA is a version of CTA presented as a feature card.
 
 > 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/cta-feature)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components/cta-feature)
 > 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/cta-feature)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/cta-feature)
 
 ### HTML
 
 ```html
-<cds-cta cta-style="feature" href="https://www.ibm.com/" cta-type="local">
-  <cds-card-heading>This is a heading</cds-card-heading>
-  <cds-image
+<c4d-cta cta-style="feature" href="https://www.ibm.com/" cta-type="local">
+  <c4d-card-heading>This is a heading</c4d-card-heading>
+  <c4d-image
     slot="image"
     alt="Image alt text"
     default-src="https://fpoimg.com/672x672?text=1:1&bg_color=ee5396&text_color=161616">
-  </cds-image>
-  <cds-feature-cta-footer>
+  </c4d-image>
+  <c4d-feature-cta-footer>
     <svg
       slot="icon"
       focusable="false"
@@ -197,40 +197,40 @@ Feature card CTA is a version of CTA presented as a feature card.
       <path
         d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
     </svg>
-  </cds-feature-cta-footer>
-</cds-cta>
+  </c4d-feature-cta-footer>
+</c4d-cta>
 ```
 
 The Feature Card for CTA can also use the 'large' variation, but be sure to at
 least include an eyebrow and heading.
 
 ```html
-<cds-cta
+<c4d-cta
   cta-style="feature"
   size="large"
   href="https://www.ibm.com/"
   cta-type="local">
-  <cds-card-eyebrow>This is an eyebrow</cds-card-eyebrow>
-  <cds-card-heading>This is a heading</cds-card-heading>
-  <cds-image
+  <c4d-card-eyebrow>This is an eyebrow</c4d-card-eyebrow>
+  <c4d-card-heading>This is a heading</c4d-card-heading>
+  <c4d-image
     slot="image"
     alt="Image alt text"
     default-src="https://fpoimg.com/672x672?text=1:1&bg_color=ee5396&text_color=161616">
-  </cds-image>
-</cds-cta>
+  </c4d-image>
+</c4d-cta>
 ```
 
 ### Props
 
-<Props of="cds-feature-cta" />
+<Props of="c4d-feature-cta" />
 
 ## Using a video player
 
-The `<cds-video-cta-container>` component lets you integrate
-`<cds-text-cta>`/`<cds-button-cta>`/`<cds-card-cta>`/`<cds-feature-cta>` with
-video player quickly. Only one `<cds-video-cta-container>` has to be put in
-application. Ensure that `<cds-video-cta-container>` contains all
-`<cds-text-cta>`/`<cds-button-cta>`/`<cds-card-cta>`/`<cds-feature-cta>`:
+The `<c4d-video-cta-container>` component lets you integrate
+`<c4d-text-cta>`/`<c4d-button-cta>`/`<c4d-card>`/`<c4d-feature-cta>` with
+video player quickly. Only one `<c4d-video-cta-container>` has to be put in
+application. Ensure that `<c4d-video-cta-container>` contains all
+`<c4d-text-cta>`/`<c4d-button-cta>`/`<c4d-card>`/`<c4d-feature-cta>`:
 
 ## Using contact methods
 
@@ -259,16 +259,16 @@ import '@carbon/ibmdotcom-web-components/es/components/cta/video-cta-container.j
 ### HTML
 
 ```html
-<cds-video-cta-container>
-  <cds-cta cta-style="text" cta-type="video" href="0_ibuqxqbe"></cds-cta>
-</cds-video-cta-container>
+<c4d-video-cta-container>
+  <c4d-cta cta-style="text" cta-type="video" href="0_ibuqxqbe"></c4d-cta>
+</c4d-video-cta-container>
 ```
 
 > 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/cta/text)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components/cta/text)
 > 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/cta/text)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/cta/text)
 
 ### `cds-cta-run-action` customization
 
@@ -294,8 +294,8 @@ document.addEventListener('cds-cta-run-action', async event => {
     lightboxElem = document.createElement('cds-expressive-modal');
     lightboxElem.size = 'full-width';
     lightboxElem.innerHTML = `
-      <cds-expressive-modal-close-button></cds-expressive-modal-close-button>
-      <cds-lightbox-video-player id="lightbox-video-player-${videoId}"></cds-lightbox-video-player>
+      <c4d-expressive-modal-close-button></c4d-expressive-modal-close-button>
+      <c4d-lightbox-video-player id="lightbox-video-player-${videoId}"></c4d-lightbox-video-player>
     `;
     document.body.appendChild(lightboxElem);
     const videoTarget = document.createElement('div');
diff --git a/packages/web-components/src/components/cta/__stories__/README.stories.react.mdx b/packages/web-components/src/components/cta/__stories__/README.stories.react.mdx
index aa5d52b9533..ff5347d89c0 100644
--- a/packages/web-components/src/components/cta/__stories__/README.stories.react.mdx
+++ b/packages/web-components/src/components/cta/__stories__/README.stories.react.mdx
@@ -24,10 +24,10 @@ import { PropTypesRef as FeatureCTAProps } from '@carbon/ibmdotcom-web-component
 `C4DTextCTA` is the most basic version of CTA, presented as a simple link.
 
 > 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/cta-text)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components-react/cta-text)
 > 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/cta-text)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/cta-text)
 
 ### JS
 
@@ -52,10 +52,10 @@ function App() {
 `C4DButtonCTA` is a version of CTA presented as a button.
 
 > 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/cta-button)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components-react/cta-button)
 > 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/cta-button)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/cta-button)
 
 ### JS
 
@@ -83,10 +83,10 @@ function App() {
 `C4DCardCTA` is a version of CTA presented as a card.
 
 > 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/cta-card)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components-react/cta-card)
 > 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/cta-card)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/cta-card)
 
 ### JS
 
@@ -116,10 +116,10 @@ function App() {
 `C4DCardLinkCTA` is a version of CTA presented as a card.
 
 > 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/cta-card-link)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components-react/cta-card-link)
 > 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/cta-card-link)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/cta-card-link)
 
 ### JS
 
@@ -150,10 +150,10 @@ function App() {
 `C4DFeatureCTA` is a version of CTA presented as a feature card.
 
 > 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/cta-feature)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components-react/cta-feature)
 > 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/cta-feature)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/cta-feature)
 
 ### JS
 
@@ -262,8 +262,8 @@ document.addEventListener('cds-cta-run-action', async event => {
     lightboxElem = document.createElement('cds-expressive-modal');
     lightboxElem.size = 'full-width';
     lightboxElem.innerHTML = `
-      <cds-expressive-modal-close-button></cds-expressive-modal-close-button>
-      <cds-lightbox-video-player id="lightbox-video-player-${videoId}"></cds-lightbox-video-player>
+      <c4d-expressive-modal-close-button></c4d-expressive-modal-close-button>
+      <c4d-lightbox-video-player id="lightbox-video-player-${videoId}"></c4d-lightbox-video-player>
     `;
     document.body.appendChild(lightboxElem);
     const videoTarget = document.createElement('div');
@@ -292,16 +292,16 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector     | Compatibility selector | Description |
 | --------------------------- | ---------------------- | ----------- |
-| `<cds-button-cta>`          | N/A                    | Component   |
-| `<cds-card-cta>`            | N/A                    | Component   |
-| `<cds-card-cta-footer>`     | N/A                    | Component   |
-| `<cds-card-cta-image>`      | N/A                    | Component   |
-| `<cds-card-link-cta>`       | N/A                    | Component   |
-| `<cds-feature-cta>`         | N/A                    | Component   |
-| `<cds-feature-cta-footer>`  | N/A                    | Component   |
-| `<cds-link-list-item-cta>`  | N/A                    | Component   |
-| `<cds-text-cta>`            | N/A                    | Component   |
-| `<cds-video-cta-composite>` | N/A                    | Component   |
-| `<cds-video-cta-container>` | N/A                    | Component   |
+| `<c4d-button-cta>`          | N/A                    | Component   |
+| `<c4d-card>`            | N/A                    | Component   |
+| `<c4d-card-footer>`     | N/A                    | Component   |
+| `<c4d-card-image>`      | N/A                    | Component   |
+| `<c4d-card link>`       | N/A                    | Component   |
+| `<c4d-feature-cta>`         | N/A                    | Component   |
+| `<c4d-feature-cta-footer>`  | N/A                    | Component   |
+| `<c4d-link-list-item-cta>`  | N/A                    | Component   |
+| `<c4d-text-cta>`            | N/A                    | Component   |
+| `<c4d-video-cta-composite>` | N/A                    | Component   |
+| `<c4d-video-cta-container>` | N/A                    | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/dotcom-shell/__stories__/README.stories.mdx b/packages/web-components/src/components/dotcom-shell/__stories__/README.stories.mdx
index 557c8223955..5b6bad5f699 100644
--- a/packages/web-components/src/components/dotcom-shell/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/dotcom-shell/__stories__/README.stories.mdx
@@ -10,16 +10,16 @@ import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
 # Dotcom Shell
 
 > 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/dotcom-shell)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components/dotcom-shell)
 > 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/dotcom-shell)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/dotcom-shell)
 
 ## Getting started
 
 ### Quick start
 
-`<cds-dotcom-shell-container>` automatically renders contents of dotcom shell
+`<c4d-dotcom-shell-container>` automatically renders contents of dotcom shell
 from default service data.
 
 ### JS (via import)
@@ -35,16 +35,16 @@ import '@carbon/ibmdotcom-web-components/es/components/dotcom-shell/index.js';
 ### HTML
 
 ```html
-<cds-dotcom-shell-container>
+<c4d-dotcom-shell-container>
   <main>(The main content)</main>
-</cds-dotcom-shell-container>
+</c4d-dotcom-shell-container>
 ```
 
 ## Props
 
-### `<cds-dotcom-shell-container>`/`<cds-dotcom-shell-composite>`
+### `<c4d-dotcom-shell-container>`/`<c4d-dotcom-shell-composite>`
 
-<Props of="cds-dotcom-shell-composite" />
+<Props of="c4d-dotcom-shell-composite" />
 
 ## Stable selectors
 
@@ -54,6 +54,6 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector | Compatibility selector            | Description |
 | ----------------------- | --------------------------------- | ----------- |
-| `<cds-dotcom-shell>`    | `data-autoid="cds--dotcom-shell"` | Component   |
+| `<c4d-dotcom-shell>`    | `data-autoid="c4d--dotcom-shell"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/dotcom-shell/__stories__/README.stories.react.mdx b/packages/web-components/src/components/dotcom-shell/__stories__/README.stories.react.mdx
index 91216247b39..5f0babb6651 100644
--- a/packages/web-components/src/components/dotcom-shell/__stories__/README.stories.react.mdx
+++ b/packages/web-components/src/components/dotcom-shell/__stories__/README.stories.react.mdx
@@ -10,10 +10,10 @@ import { PropTypesRef } from '@carbon/ibmdotcom-web-components/es/components-rea
 # Dotcom shell
 
 > 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/dotcom-shell)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components-react/dotcom-shell)
 > 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/dotcom-shell)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/dotcom-shell)
 
 ## Getting started
 
@@ -45,6 +45,6 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector | Compatibility selector            | Description |
 | ----------------------- | --------------------------------- | ----------- |
-| `<cds-dotcom-shell>`    | `data-autoid="cds--dotcom-shell"` | Component   |
+| `<c4d-dotcom-shell>`    | `data-autoid="c4d--dotcom-shell"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/expressive-modal/__stories__/README.stories.mdx b/packages/web-components/src/components/expressive-modal/__stories__/README.stories.mdx
index d5886df86b4..6a61368d597 100644
--- a/packages/web-components/src/components/expressive-modal/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/expressive-modal/__stories__/README.stories.mdx
@@ -9,15 +9,15 @@ import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
 
 # Expressive modal
 
-> The `<cds-expressive-modal>` component is based on
+> The `<c4d-expressive-modal>` component is based on
 > [Carbon's Modal component](https://custom-elements.carbondesignsystem.com/?path=/story/components-modal--default-story)
 > with slight styling updates to increase readability and reduce strain.
 
 > 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/expressive-modal)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components/expressive-modal)
 > 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/expressive-modal)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/expressive-modal)
 
 ## Getting started
 
@@ -36,13 +36,13 @@ import '@carbon/ibmdotcom-web-components/es/components/expressive-modal/index.js
 ### HTML
 
 ```html
-<cds-expressive-modal open>
-  <cds-expressive-modal-header>
-    <cds-expressive-modal-close-button
-      role="button"></cds-expressive-modal-close-button>
-    <cds-expressive-modal-heading>Modal Title</cds-expressive-modal-heading>
-  </cds-expressive-modal-header>
-  <cds-expressive-modal-body>
+<c4d-expressive-modal open>
+  <c4d-expressive-modal-header>
+    <c4d-expressive-modal-close-button
+      role="button"></c4d-expressive-modal-close-button>
+    <c4d-expressive-modal-heading>Modal Title</c4d-expressive-modal-heading>
+  </c4d-expressive-modal-header>
+  <c4d-expressive-modal-body>
     Quisque felis odio, egestas vel tempus iaculis, interdum vel eros. Phasellus
     pharetra, purus et pretium posuere, ipsum risus pulvinar leo, non rutrum
     tortor risus vitae quam. Nulla sed nibh felis. Maecenas nec tincidunt eros.
@@ -50,9 +50,9 @@ import '@carbon/ibmdotcom-web-components/es/components/expressive-modal/index.js
     pharetra. Curabitur imperdiet ante sit amet mi laoreet, vitae facilisis ante
     convallis. Aenean quis dapibus augue. Sed nisl dui, scelerisque et augue
     eget, pharetra commodo elit. In venenatis sapien eu nisl congue suscipit.
-  </cds-expressive-modal-body>
-  <cds-expressive-modal-footer slot="footer">
-    <cds-button kind="primary">
+  </c4d-expressive-modal-body>
+  <c4d-expressive-modal-footer slot="footer">
+    <c4d-button kind="primary">
       Lorem ipsum dolor
       <svg
         slot="icon"
@@ -66,9 +66,9 @@ import '@carbon/ibmdotcom-web-components/es/components/expressive-modal/index.js
         <path
           d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
       </svg>
-    </cds-button>
-  </cds-expressive-modal-footer>
-</cds-expressive-modal>
+    </c4d-button>
+  </c4d-expressive-modal-footer>
+</c4d-expressive-modal>
 ```
 
 ## Accessibility Notes
@@ -83,11 +83,11 @@ The header can be visually hidden using the `.cds--visually-hidden` or
 screen, but will still be announced to assistive technology users.
 
 ```html
-<cds-expressive-modal id="my-lightbox" expressive-size="full-width">
-  <cds-expressive-modal-close-button></cds-expressive-modal-close-button>
+<c4d-expressive-modal id="my-lightbox" expressive-size="full-width">
+  <c4d-expressive-modal-close-button></c4d-expressive-modal-close-button>
   <span class="cds--visually-hidden" slot="header">Dialog box label text</span>
   ...
-</cds-expressive-modal>
+</c4d-expressive-modal>
 ```
 
 ## Opening/closing modal from code
@@ -96,8 +96,8 @@ Opening/closing modal from code can be done by changing `open`
 attribute/property. For example we have HTML like this:
 
 ```html
-<cds-button id="my-btn">Open modal</cds-button>
-<cds-expressive-modal id="my-modal"> ... </cds-expressive-modal>
+<c4d-button id="my-btn">Open modal</c4d-button>
+<c4d-expressive-modal id="my-modal"> ... </c4d-expressive-modal>
 ```
 
 We can make the button open the modal by:
@@ -110,20 +110,20 @@ document.getElementById('my-btn').addEventListener('click', () => {
 
 ## Props
 
-### `<cds-expressive-modal>`
+### `<c4d-expressive-modal>`
 
 **Note**: The events with `cds-` prefix and `size` attribute/property came from
-deriving `<cds-modal>`, but _not_ used in `<cds-expressive-modal>`.
+deriving `<c4d-modal>`, but _not_ used in `<c4d-expressive-modal>`.
 
-<Props of="cds-expressive-modal" />
+<Props of="c4d-expressive-modal" />
 
-### `<cds-expressive-modal-header>`
+### `<c4d-expressive-modal-header>`
 
-<Props of="cds-expressive-modal-header" />
+<Props of="c4d-expressive-modal-header" />
 
-### `<cds-expressive-modal-footer>`
+### `<c4d-expressive-modal-footer>`
 
-<Props of="cds-expressive-modal-footer" />
+<Props of="c4d-expressive-modal-footer" />
 
 ## Stable selectors
 
@@ -133,6 +133,6 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector  | Compatibility selector                | Description |
 | ------------------------ | ------------------------------------- | ----------- |
-| `<cds-expressive-modal>` | `data-autoid="cds--expressive-modal"` | Component   |
+| `<c4d-expressive-modal>` | `data-autoid="c4d--expressive-modal"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/expressive-modal/__stories__/README.stories.react.mdx b/packages/web-components/src/components/expressive-modal/__stories__/README.stories.react.mdx
index 5495159cce6..7acabfca2ea 100644
--- a/packages/web-components/src/components/expressive-modal/__stories__/README.stories.react.mdx
+++ b/packages/web-components/src/components/expressive-modal/__stories__/README.stories.react.mdx
@@ -10,10 +10,10 @@ import { PropTypesRef } from '@carbon/ibmdotcom-web-components/es/components-rea
 # Expressive Modal
 
 > 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/expressive-modal)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components-react/expressive-modal)
 > 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/expressive-modal)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/expressive-modal)
 
 ## Getting started
 
@@ -65,9 +65,9 @@ attribute/property.
 
 ```javascript
 <C4DButtonExpressive id="my-btn">Open modal</C4DButtonExpressive>
-<cds-expressive-modal id="my-modal">
+<c4d-expressive-modal id="my-modal">
   ...
-</cds-expressive-modal>
+</c4d-expressive-modal>
 ```
 
 We can make the button open the modal by:
@@ -90,6 +90,6 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector  | Compatibility selector                | Description |
 | ------------------------ | ------------------------------------- | ----------- |
-| `<cds-expressive-modal>` | `data-autoid="cds--expressive-modal"` | Component   |
+| `<c4d-expressive-modal>` | `data-autoid="c4d--expressive-modal"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/feature-card/__stories__/README.stories.mdx b/packages/web-components/src/components/feature-card/__stories__/README.stories.mdx
index 874df8d5a9e..af04066cd4d 100644
--- a/packages/web-components/src/components/feature-card/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/feature-card/__stories__/README.stories.mdx
@@ -10,10 +10,10 @@ import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
 # Feature Card
 
 > 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/feature-card)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components/feature-card)
 > 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/feature-card)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/feature-card)
 
 ## Getting started
 
@@ -32,10 +32,10 @@ import '@carbon/ibmdotcom-web-components/es/components/feature-card/index.js';
 ### HTML
 
 ```html
-<cds-feature-card href="https://example.com">
+<c4d-feature-card href="https://example.com">
   <img />
-  <cds-card-heading>Explore AI use cases in all industries</cds-card-heading>
-  <cds-feature-card-footer>
+  <c4d-card-heading>Explore AI use cases in all industries</c4d-card-heading>
+  <c4d-feature-card-footer>
     <svg
       slot="icon"
       focusable="false"
@@ -49,23 +49,23 @@ import '@carbon/ibmdotcom-web-components/es/components/feature-card/index.js';
       <path
         d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
     </svg>
-  </cds-feature-card-footer>
-</cds-feature-card>
+  </c4d-feature-card-footer>
+</c4d-feature-card>
 ```
 
 Here's an example using the Feature Card Large variant (previously known as
 `FeatureCardBlockLarge`)
 
 ```html
-<cds-feature-card size="large" href="https://example.com">
+<c4d-feature-card size="large" href="https://example.com">
   <img />
-  <cds-card-eyebrow>This is an eyebrow</cds-card-eyebrow>
-  <cds-card-heading>Explore AI use cases in all industries</cds-card-heading>
-  <cds-card-copy
+  <c4d-card-eyebrow>This is an eyebrow</c4d-card-eyebrow>
+  <c4d-card-heading>Explore AI use cases in all industries</c4d-card-heading>
+  <c4d-card-copy
     >Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-    tempor incididunt ut labore et dolore magna aliqua.</cds-card-copy
+    tempor incididunt ut labore et dolore magna aliqua.</c4d-card-copy
   >
-  <cds-feature-card-footer>
+  <c4d-feature-card-footer>
     <svg
       slot="icon"
       focusable="false"
@@ -79,8 +79,8 @@ Here's an example using the Feature Card Large variant (previously known as
       <path
         d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
     </svg>
-  </cds-feature-card-footer>
-</cds-feature-card>
+  </c4d-feature-card-footer>
+</c4d-feature-card>
 ```
 
 ### CTA features
@@ -115,7 +115,7 @@ Notes:
 
 ## Props
 
-<Props of="cds-feature-card" />
+<Props of="c4d-feature-card" />
 
 ## Stable selectors
 
@@ -125,6 +125,6 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector | Compatibility selector            | Description |
 | ----------------------- | --------------------------------- | ----------- |
-| `<cds-feature-card>`    | `data-autoid="cds--feature-card"` | Component   |
+| `<c4d-feature-card>`    | `data-autoid="c4d--feature-card"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/feature-card/__stories__/README.stories.react.mdx b/packages/web-components/src/components/feature-card/__stories__/README.stories.react.mdx
index b20a8bd1f0a..70870ae2f0e 100644
--- a/packages/web-components/src/components/feature-card/__stories__/README.stories.react.mdx
+++ b/packages/web-components/src/components/feature-card/__stories__/README.stories.react.mdx
@@ -10,10 +10,10 @@ import { PropTypesRef } from '@carbon/ibmdotcom-web-components/es/components-rea
 # Feature card
 
 > 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/feature-card)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components-react/feature-card)
 > 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/feature-card)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/feature-card)
 
 ## Getting started
 
@@ -54,6 +54,6 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector | Compatibility selector            | Description |
 | ----------------------- | --------------------------------- | ----------- |
-| `<cds-feature-card>`    | `data-autoid="cds--feature-card"` | Component   |
+| `<c4d-feature-card>`    | `data-autoid="c4d--feature-card"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/feature-section/__stories__/README.stories.mdx b/packages/web-components/src/components/feature-section/__stories__/README.stories.mdx
index d9c45f8df73..c9fec1e108e 100644
--- a/packages/web-components/src/components/feature-section/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/feature-section/__stories__/README.stories.mdx
@@ -9,10 +9,10 @@ import contributing from '../../../../../../docs/contributing-license.md';
 # Feature Section
 
 > 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/feature-section)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components/feature-section)
 > 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/feature-section)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/feature-section)
 
 ## Getting started
 
diff --git a/packages/web-components/src/components/feature-section/__stories__/README.stories.react.mdx b/packages/web-components/src/components/feature-section/__stories__/README.stories.react.mdx
index 78f60f365e6..185fd60d7b3 100644
--- a/packages/web-components/src/components/feature-section/__stories__/README.stories.react.mdx
+++ b/packages/web-components/src/components/feature-section/__stories__/README.stories.react.mdx
@@ -10,10 +10,10 @@ import { PropTypesRef } from '@carbon/ibmdotcom-web-components/es/components-rea
 # Feature Section
 
 > 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/feature-section)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components-react/feature-section)
 > 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/feature-section)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/feature-section)
 
 ## Getting started
 
diff --git a/packages/web-components/src/components/filter-panel/__stories__/README.stories.mdx b/packages/web-components/src/components/filter-panel/__stories__/README.stories.mdx
index 5fe512d8c6a..23e150e2846 100644
--- a/packages/web-components/src/components/filter-panel/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/filter-panel/__stories__/README.stories.mdx
@@ -11,10 +11,10 @@ import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
 # Filter Panel
 
 > 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/filter-panel)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components/filter-panel)
 > 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/filter-panel)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/filter-panel)
 
 ## Getting started
 
@@ -33,136 +33,136 @@ import '@carbon/ibmdotcom-web-components/es/components/filter-panel/index.js';
 ### HTML
 
 ```html
-<cds-filter-panel-composite>
-  <cds-filter-panel-heading slot="heading">Filter</cds-filter-panel-heading>
-  <cds-filter-group>
-    <cds-filter-group-item title="Product types">
-      <cds-filter-panel-checkbox value="API">API</cds-filter-panel-checkbox>
-      <cds-filter-panel-checkbox value="Application"
-        >Application</cds-filter-panel-checkbox
+<c4d-filter-panel-composite>
+  <c4d-filter-panel-heading slot="heading">Filter</c4d-filter-panel-heading>
+  <c4d-filter-group>
+    <c4d-filter-group-item title="Product types">
+      <c4d-filter-panel-checkbox value="API">API</c4d-filter-panel-checkbox>
+      <c4d-filter-panel-checkbox value="Application"
+        >Application</c4d-filter-panel-checkbox
       >
-      <cds-filter-panel-checkbox value="Data Set"
-        >Data Set</cds-filter-panel-checkbox
+      <c4d-filter-panel-checkbox value="Data Set"
+        >Data Set</c4d-filter-panel-checkbox
       >
-      <cds-filter-panel-checkbox value="Free Trial"
-        >Free Trial</cds-filter-panel-checkbox
+      <c4d-filter-panel-checkbox value="Free Trial"
+        >Free Trial</c4d-filter-panel-checkbox
       >
-      <cds-filter-panel-checkbox value="Hardware"
-        >Hardware</cds-filter-panel-checkbox
+      <c4d-filter-panel-checkbox value="Hardware"
+        >Hardware</c4d-filter-panel-checkbox
       >
-      <cds-filter-panel-checkbox value="Service"
-        >Service</cds-filter-panel-checkbox
+      <c4d-filter-panel-checkbox value="Service"
+        >Service</c4d-filter-panel-checkbox
       >
-      <cds-filter-panel-checkbox value="Service Assets"
-        >Service Assets</cds-filter-panel-checkbox
+      <c4d-filter-panel-checkbox value="Service Assets"
+        >Service Assets</c4d-filter-panel-checkbox
       >
-      <cds-filter-panel-checkbox value="Software"
-        >Software</cds-filter-panel-checkbox
+      <c4d-filter-panel-checkbox value="Software"
+        >Software</c4d-filter-panel-checkbox
       >
-    </cds-filter-group-item>
-    <cds-filter-group-item title="Technologies">
-      <cds-filter-panel-input-select
+    </c4d-filter-group-item>
+    <c4d-filter-group-item title="Technologies">
+      <c4d-filter-panel-input-select
         header-value="Analytics"
-        title="Analytics"></cds-filter-panel-input-select>
-      <cds-filter-panel-input-select
+        title="Analytics"></c4d-filter-panel-input-select>
+      <c4d-filter-panel-input-select
         header-value="Artificial intelligence"
         title="Artificial intelligence">
-        <cds-filter-panel-input-select-item value="Machine Learning"
-          >Machine Learning</cds-filter-panel-input-select-item
+        <c4d-filter-panel-input-select-item value="Machine Learning"
+          >Machine Learning</c4d-filter-panel-input-select-item
         >
-        <cds-filter-panel-input-select-item value="Natural language processing"
-          >Natural language processing</cds-filter-panel-input-select-item
+        <c4d-filter-panel-input-select-item value="Natural language processing"
+          >Natural language processing</c4d-filter-panel-input-select-item
         >
-        <cds-filter-panel-input-select-item value="Speech recognition"
-          >Speech recognition</cds-filter-panel-input-select-item
+        <c4d-filter-panel-input-select-item value="Speech recognition"
+          >Speech recognition</c4d-filter-panel-input-select-item
         >
-      </cds-filter-panel-input-select>
-      <cds-filter-panel-input-select
+      </c4d-filter-panel-input-select>
+      <c4d-filter-panel-input-select
         header-value="Automation"
-        title="Automation"></cds-filter-panel-input-select>
-      <cds-filter-panel-input-select
+        title="Automation"></c4d-filter-panel-input-select>
+      <c4d-filter-panel-input-select
         header-value="Blockchain"
-        title="Blockchain"></cds-filter-panel-input-select>
-      <cds-filter-panel-input-select
+        title="Blockchain"></c4d-filter-panel-input-select>
+      <c4d-filter-panel-input-select
         header-value="Cloud computing"
-        title="Cloud computing"></cds-filter-panel-input-select>
-      <cds-filter-panel-input-select
+        title="Cloud computing"></c4d-filter-panel-input-select>
+      <c4d-filter-panel-input-select
         header-value="IT infrastructure"
-        title="IT infrastructure"></cds-filter-panel-input-select>
-      <cds-filter-panel-input-select
+        title="IT infrastructure"></c4d-filter-panel-input-select>
+      <c4d-filter-panel-input-select
         header-value="IT management"
-        title="IT management"></cds-filter-panel-input-select>
-      <cds-filter-panel-input-select
+        title="IT management"></c4d-filter-panel-input-select>
+      <c4d-filter-panel-input-select
         header-value="Mobile technologys"
-        title="Mobile technology"></cds-filter-panel-input-select>
-      <cds-filter-panel-input-select
+        title="Mobile technology"></c4d-filter-panel-input-select>
+      <c4d-filter-panel-input-select
         header-value="Security"
-        title="Security"></cds-filter-panel-input-select>
-      <cds-filter-panel-input-select
+        title="Security"></c4d-filter-panel-input-select>
+      <c4d-filter-panel-input-select
         header-value="Software development"
-        title="Software development"></cds-filter-panel-input-select>
-    </cds-filter-group-item>
-    <cds-filter-group-item title="Business needs">
-      <cds-filter-panel-input-select
+        title="Software development"></c4d-filter-panel-input-select>
+    </c4d-filter-group-item>
+    <c4d-filter-group-item title="Business needs">
+      <c4d-filter-panel-input-select
         header-value="Business operations"
-        title="Business operations"></cds-filter-panel-input-select>
-      <cds-filter-panel-input-select
+        title="Business operations"></c4d-filter-panel-input-select>
+      <c4d-filter-panel-input-select
         header-value="Content Management"
-        title="Content Management"></cds-filter-panel-input-select>
-      <cds-filter-panel-input-select
+        title="Content Management"></c4d-filter-panel-input-select>
+      <c4d-filter-panel-input-select
         header-value="Customer service"
-        title="Customer service"></cds-filter-panel-input-select>
-      <cds-filter-panel-input-select
+        title="Customer service"></c4d-filter-panel-input-select>
+      <c4d-filter-panel-input-select
         header-value="Finance"
-        title="Finance"></cds-filter-panel-input-select>
-      <cds-filter-panel-input-select
+        title="Finance"></c4d-filter-panel-input-select>
+      <c4d-filter-panel-input-select
         header-value="Marketing and sales"
-        title="Marketing and sales"></cds-filter-panel-input-select>
-      <cds-filter-panel-input-select
+        title="Marketing and sales"></c4d-filter-panel-input-select>
+      <c4d-filter-panel-input-select
         header-value="Supply chain management"
-        title="Supply chain management"></cds-filter-panel-input-select>
-    </cds-filter-group-item>
-    <cds-filter-group-item title="Deployment types">
-      <cds-filter-panel-checkbox value="On-premises"
-        >On-premises</cds-filter-panel-checkbox
+        title="Supply chain management"></c4d-filter-panel-input-select>
+    </c4d-filter-group-item>
+    <c4d-filter-group-item title="Deployment types">
+      <c4d-filter-panel-checkbox value="On-premises"
+        >On-premises</c4d-filter-panel-checkbox
       >
-      <cds-filter-panel-checkbox value="SaaS">SaaS</cds-filter-panel-checkbox>
-    </cds-filter-group-item>
-  </cds-filter-group>
-</cds-filter-panel-composite>
+      <c4d-filter-panel-checkbox value="SaaS">SaaS</c4d-filter-panel-checkbox>
+    </c4d-filter-group-item>
+  </c4d-filter-group>
+</c4d-filter-panel-composite>
 ```
 
-## `<cds-filter-panel-composite>` attributes and properties
+## `<c4d-filter-panel-composite>` attributes and properties
 
-<Props of="cds-filter-panel-composite" />
+<Props of="c4d-filter-panel-composite" />
 
-## `<cds-filter-group-item>` attributes and properties
+## `<c4d-filter-group-item>` attributes and properties
 
-<Props of="cds-filter-group-item" />
+<Props of="c4d-filter-group-item" />
 
-## `<cds-filter-panel-checkbox>` attributes and properties
+## `<c4d-filter-panel-checkbox>` attributes and properties
 
-<Props of="cds-filter-panel-checkbox" />
+<Props of="c4d-filter-panel-checkbox" />
 
-## `<cds-filter-panel-heading>` attributes and properties
+## `<c4d-filter-panel-heading>` attributes and properties
 
-<Props of="cds-filter-panel-heading" />
+<Props of="c4d-filter-panel-heading" />
 
-## `<cds-filter-panel-input-select-item>` attributes and properties
+## `<c4d-filter-panel-input-select-item>` attributes and properties
 
-<Props of="cds-filter-panel-input-select-item" />
+<Props of="c4d-filter-panel-input-select-item" />
 
-## `<cds-filter-panel-input-select>` attributes and properties
+## `<c4d-filter-panel-input-select>` attributes and properties
 
-<Props of="cds-filter-panel-input-select" />
+<Props of="c4d-filter-panel-input-select" />
 
-## `<cds-filter-panel-modal>` attributes and properties
+## `<c4d-filter-panel-modal>` attributes and properties
 
-<Props of="cds-filter-panel-modal" />
+<Props of="c4d-filter-panel-modal" />
 
-## `<cds-filter-panel>` attributes and properties
+## `<c4d-filter-panel>` attributes and properties
 
-<Props of="cds-filter-panel" />
+<Props of="c4d-filter-panel" />
 
 ## Stable selectors
 
@@ -172,8 +172,8 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector        | Compatibility selector                      | Description |
 | ------------------------------ | ------------------------------------------- | ----------- |
-| `<cds-filter-panel>`           | `data-autoid="cds--filter-panel"`           | Component   |
-| `<cds-filter-panel-modal>`     | `data-autoid="cds--filter-panel-modal"`     | Component   |
-| `<cds-filter-panel-composite>` | `data-autoid="cds--filter-panel-composite"` | Component   |
+| `<c4d-filter-panel>`           | `data-autoid="c4d--filter-panel"`           | Component   |
+| `<c4d-filter-panel-modal>`     | `data-autoid="c4d--filter-panel-modal"`     | Component   |
+| `<c4d-filter-panel-composite>` | `data-autoid="c4d--filter-panel-composite"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/filter-panel/__stories__/README.stories.react.mdx b/packages/web-components/src/components/filter-panel/__stories__/README.stories.react.mdx
index 924823811d8..920d14aef06 100644
--- a/packages/web-components/src/components/filter-panel/__stories__/README.stories.react.mdx
+++ b/packages/web-components/src/components/filter-panel/__stories__/README.stories.react.mdx
@@ -13,10 +13,10 @@ import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
 # Filter Panel
 
 > 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/filter-panel)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components-react/filter-panel)
 > 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/filter-panel)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/filter-panel)
 
 ## Getting started
 
@@ -158,8 +158,8 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector        | Compatibility selector                      | Description |
 | ------------------------------ | ------------------------------------------- | ----------- |
-| `<cds-filter-panel>`           | `data-autoid="cds--filter-panel"`           | Component   |
-| `<cds-filter-panel-modal>`     | `data-autoid="cds--filter-panel-modal"`     | Component   |
-| `<cds-filter-panel-composite>` | `data-autoid="cds--filter-panel-composite"` | Component   |
+| `<c4d-filter-panel>`           | `data-autoid="c4d--filter-panel"`           | Component   |
+| `<c4d-filter-panel-modal>`     | `data-autoid="c4d--filter-panel-modal"`     | Component   |
+| `<c4d-filter-panel-composite>` | `data-autoid="c4d--filter-panel-composite"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/footer/__stories__/README.stories.mdx b/packages/web-components/src/components/footer/__stories__/README.stories.mdx
index 95665e35fca..72414619f2d 100644
--- a/packages/web-components/src/components/footer/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/footer/__stories__/README.stories.mdx
@@ -13,22 +13,22 @@ import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
 > displays consistently at the bottom of each page.
 
 > 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/footer)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components/footer)
 > example implementation.
 
 ### Footer (locale selector):
 
-[![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/footer)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/footer)
 
 ### Footer (language selector):
 
-[![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/footer-language-only)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/footer-language-only)
 
 ## Getting started
 
 ### Quick start
 
-`<cds-footer-container>` automatically renders contents of footer from default
+`<c4d-footer-container>` automatically renders contents of footer from default
 service data. If you want change in services/data integration, etc., see
 ["Customizing data integration" section](#customizing-data-integration) below.
 
@@ -45,15 +45,15 @@ import '@carbon/ibmdotcom-web-components/es/components/footer/index';
 ### HTML
 
 ```html
-<cds-footer-container></cds-footer-container>
+<c4d-footer-container></c4d-footer-container>
 ```
 
 > 💡 You can get size variants of footer with `size="short"` or `size="micro"`
 > attribute.
 
-#### Attributes and properties `<cds-footer-container>`
+#### Attributes and properties `<c4d-footer-container>`
 
-<Props of="cds-footer-composite" />
+<Props of="c4d-footer-composite" />
 
 ## Stable selectors
 
@@ -63,13 +63,13 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector                          | Compatibility selector                 | Description |
 | ------------------------------------------------ | -------------------------------------- | ----------- |
-| `<cds-footer>`                                   | `data-autoid="cds--footer"`            | Component   |
-| `<cds-footer-nav>`                               | `data-autoid="cds--footer-nav"`        | Component   |
-| `<cds-footer-nav-group>`                         | `data-autoid="cds--footer-nav-group"`  | Component   |
-| `<cds-footer-logo>`                              | `data-autoid="cds--footer-logo"`       | Component   |
-| `<cds-locale-button>`                            | `data-autoid="cds--footer-locale-btn"` | Interactive |
-| `<cds-legal-nav>`                                | `data-autoid="cds--legal-nav"`         | Component   |
-| `<cds-legal-nav-cookie-preferences-placeholder>` | `data-autoid="cds--privacy-cp"`        | Component   |
+| `<c4d-footer>`                                   | `data-autoid="c4d--footer"`            | Component   |
+| `<c4d-footer-nav>`                               | `data-autoid="c4d--footer-nav"`        | Component   |
+| `<c4d-footer-nav-group>`                         | `data-autoid="c4d--footer-nav-group"`  | Component   |
+| `<c4d-footer-logo>`                              | `data-autoid="c4d--footer-logo"`       | Component   |
+| `<c4d-locale-button>`                            | `data-autoid="c4d--footer-locale-btn"` | Interactive |
+| `<c4d-legal-nav>`                                | `data-autoid="c4d--legal-nav"`         | Component   |
+| `<c4d-legal-nav-cookie-preferences-placeholder>` | `data-autoid="c4d--privacy-cp"`        | Component   |
 
 ### Language selector
 
@@ -87,11 +87,11 @@ The following attributes are needed:
 Example implementation:
 
 ```html
-<cds-footer-container
+<c4d-footer-container
   size="regular"
   language-selector-label="Choose a language"
   clear-selection-label="Clear language selection"
-  selected-language="English"></cds-footer-container>
+  selected-language="English"></c4d-footer-container>
 ```
 
 ```javascript
diff --git a/packages/web-components/src/components/footer/__stories__/README.stories.react.mdx b/packages/web-components/src/components/footer/__stories__/README.stories.react.mdx
index 02eb1526235..a470ebb4ad3 100644
--- a/packages/web-components/src/components/footer/__stories__/README.stories.react.mdx
+++ b/packages/web-components/src/components/footer/__stories__/README.stories.react.mdx
@@ -10,10 +10,10 @@ import { PropTypesRef } from '@carbon/ibmdotcom-web-components/es/components-rea
 # Footer
 
 > 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/footer)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components-react/footer)
 > 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/footer)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/footer)
 
 ## Getting started
 
@@ -48,6 +48,6 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector  | Compatibility selector                | Description |
 | ------------------------ | ------------------------------------- | ----------- |
-| `<cds-footer-composite>` | `data-autoid="cds--footer-composite"` | Component   |
+| `<c4d-footer-composite>` | `data-autoid="c4d--footer-composite"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/global-banner/__stories__/README.stories.mdx b/packages/web-components/src/components/global-banner/__stories__/README.stories.mdx
index b2c2004ff67..70582e2b2af 100644
--- a/packages/web-components/src/components/global-banner/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/global-banner/__stories__/README.stories.mdx
@@ -10,10 +10,10 @@ and should be used exclusively for global and critical announcements (e.g. THINK
 global event, COVID 19 messages etc).
 
 > 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/global-banner)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components/global-banner)
 > 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/global-banner)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/global-banner)
 
 ## Getting started
 
@@ -40,21 +40,21 @@ The component should be placed before the Dotcom shell, but in case it is placed
 within, it can move itself to the proper place automatically.
 
 ```html
-<cds-global-banner>
-  <cds-global-banner-heading
-    >Hybrid cloud and AI for smarter business</cds-global-banner-heading
+<c4d-global-banner>
+  <c4d-global-banner-heading
+    >Hybrid cloud and AI for smarter business</c4d-global-banner-heading
   >
-  <cds-global-banner-copy
-    >Las Vegas, June 15-18, 2025</cds-global-banner-copy
+  <c4d-global-banner-copy
+    >Las Vegas, June 15-18, 2025</c4d-global-banner-copy
   >
-  <cds-button
+  <c4d-button
     slot="cta"
     cta-type="local"
     kind="tertiary"
     href="https://www.example.com">
     Register for Think. Free
-  </cds-button>
-</cds-global-banner>
+  </c4d-button>
+</c4d-global-banner>
 ```
 
 ## Example HTML - With image
@@ -69,50 +69,50 @@ It is important to create an image asset that best fits the component to ensure
 a proper aspect ratio.
 
 ```html
-<cds-global-banner image-width="4-col">
-  <cds-global-banner-image
+<c4d-global-banner image-width="4-col">
+  <c4d-global-banner-image
     slot="image"
-    default-src="https://fpoimg.com/672x336?text=2:1&bg_color=ee5396&text_color=161616"></cds-global-banner-image>
-  <cds-global-banner-heading slot="heading"
-    >Hybrid cloud and AI for smarter business</cds-global-banner-heading
+    default-src="https://fpoimg.com/672x336?text=2:1&bg_color=ee5396&text_color=161616"></c4d-global-banner-image>
+  <c4d-global-banner-heading slot="heading"
+    >Hybrid cloud and AI for smarter business</c4d-global-banner-heading
   >
-  <cds-global-banner-copy slot="copy"
-    >Las Vegas, June 15-18, 2025</cds-global-banner-copy
+  <c4d-global-banner-copy slot="copy"
+    >Las Vegas, June 15-18, 2025</c4d-global-banner-copy
   >
-  <cds-button-cta
+  <c4d-button-cta
     slot="cta"
     cta-type="local"
     kind="tertiary"
     href="https://www.example.com">
     Register for Think. Free
-  </cds-button-cta>
-</cds-global-banner>
+  </c4d-button-cta>
+</c4d-global-banner>
 ```
 
 In case you'd like to change images depending on the breakpoint, you can use the
 `cds-image-item` component as such:
 
 ```html
-<cds-global-banner-image
+<c4d-global-banner-image
   default-src="https://fpoimg.com/672x336?text=2:1&bg_color=ee5396&text_color=161616">
-  <cds-image-item
+  <c4d-image-item
     media="(min-width:672px)"
     srcset="https://fpoimg.com/672x336?text=2:1&bg_color=ee5396&text_color=161616">
-  </cds-image-item>
-  <cds-image-item
+  </c4d-image-item>
+  <c4d-image-item
     media="(min-width:400px)"
     srcset="https://fpoimg.com/672x336?text=2:1&bg_color=ee5396&text_color=161616">
-  </cds-image-item>
-  <cds-image-item
+  </c4d-image-item>
+  <c4d-image-item
     media="(min-width:320px)"
     srcset="https://fpoimg.com/672x336?text=2:1&bg_color=ee5396&text_color=161616">
-  </cds-image-item>
-</cds-global-banner-image>
+  </c4d-image-item>
+</c4d-global-banner-image>
 ```
 
 ## Props
 
-<Props of="cds-global-banner" />
+<Props of="c4d-global-banner" />
 
 ## Stable selectors
 
@@ -122,9 +122,9 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector          | Compatibility selector                        | Description |
 | -------------------------------- | --------------------------------------------- | ----------- |
-| `<cds-global-banner>`         | `data-autoid="cds--global-banner"`         | Component   |
-| `<cds-global-banner-heading>` | `data-autoid="cds--global-banner-heading"` | Component   |
-| `<cds-global-banner-copy>`    | `data-autoid="cds--global-banner-copy"`    | Component   |
-| `<cds-global-banner-image>`   | `data-autoid="cds--global-banner-image"`   | Component   |
+| `<c4d-global-banner>`         | `data-autoid="c4d--global-banner"`         | Component   |
+| `<c4d-global-banner-heading>` | `data-autoid="c4d--global-banner-heading"` | Component   |
+| `<c4d-global-banner-copy>`    | `data-autoid="c4d--global-banner-copy"`    | Component   |
+| `<c4d-global-banner-image>`   | `data-autoid="c4d--global-banner-image"`   | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/global-banner/__stories__/README.stories.react.mdx b/packages/web-components/src/components/global-banner/__stories__/README.stories.react.mdx
index 3994246111e..c0161e8be8c 100644
--- a/packages/web-components/src/components/global-banner/__stories__/README.stories.react.mdx
+++ b/packages/web-components/src/components/global-banner/__stories__/README.stories.react.mdx
@@ -14,10 +14,10 @@ and should be used exclusively for global and critical announcements (e.g. THINK
 global event, COVID 19 messages etc).
 
 > 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/global-banner)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components-react/global-banner)
 > 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/global-banner)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/global-banner)
 
 ## Getting started
 
@@ -128,9 +128,9 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector          | Compatibility selector                        | Description |
 | -------------------------------- | --------------------------------------------- | ----------- |
-| `<cds-global-banner>`         | `data-autoid="cds--global-banner"`         | Component   |
-| `<cds-global-banner-heading>` | `data-autoid="cds--global-banner-heading"` | Component   |
-| `<cds-global-banner-copy>`    | `data-autoid="cds--global-banner-copy"`    | Component   |
-| `<cds-global-banner-image>`   | `data-autoid="cds--global-banner-image"`   | Component   |
+| `<c4d-global-banner>`         | `data-autoid="c4d--global-banner"`         | Component   |
+| `<c4d-global-banner-heading>` | `data-autoid="c4d--global-banner-heading"` | Component   |
+| `<c4d-global-banner-copy>`    | `data-autoid="c4d--global-banner-copy"`    | Component   |
+| `<c4d-global-banner-image>`   | `data-autoid="c4d--global-banner-image"`   | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/horizontal-rule/__stories__/README.stories.mdx b/packages/web-components/src/components/horizontal-rule/__stories__/README.stories.mdx
index 98a7b7a970e..cc38ef491c8 100644
--- a/packages/web-components/src/components/horizontal-rule/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/horizontal-rule/__stories__/README.stories.mdx
@@ -11,10 +11,10 @@ import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
 # Horizontal Rule
 
 > 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/horizontal-rule)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components/horizontal-rule)
 > 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/horizontal-rule)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/horizontal-rule)
 
 ## Getting started
 
@@ -33,12 +33,12 @@ import '@carbon/ibmdotcom-web-components/es/components/horizontal-rule/index.js'
 ### HTML
 
 ```html
-<cds-hr></cds-hr>
+<c4d-hr></c4d-hr>
 ```
 
 ## Props
 
-<Props of="cds-hr" />
+<Props of="c4d-hr" />
 
 ## Stable selectors
 
@@ -48,6 +48,6 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector | Compatibility selector  | Description |
 | ----------------------- | ----------------------- | ----------- |
-| `<cds-hr>`              | `data-autoid="cds--hr"` | Component   |
+| `<c4d-hr>`              | `data-autoid="c4d--hr"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/horizontal-rule/__stories__/README.stories.react.mdx b/packages/web-components/src/components/horizontal-rule/__stories__/README.stories.react.mdx
index 66dfe9a0a3c..5f0e80232f5 100644
--- a/packages/web-components/src/components/horizontal-rule/__stories__/README.stories.react.mdx
+++ b/packages/web-components/src/components/horizontal-rule/__stories__/README.stories.react.mdx
@@ -10,10 +10,10 @@ import { PropTypesRef } from '@carbon/ibmdotcom-web-components/es/components-rea
 # Horizontal Rule
 
 > 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/horizontal-rule)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components-react/horizontal-rule)
 > 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/horizontal-rule)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/horizontal-rule)
 
 ## Getting started
 
@@ -43,6 +43,6 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector | Compatibility selector  | Description |
 | ----------------------- | ----------------------- | ----------- |
-| `<cds-hr>`              | `data-autoid="cds--hr"` | Component   |
+| `<c4d-hr>`              | `data-autoid="c4d--hr"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/image/__stories__/README.stories.mdx b/packages/web-components/src/components/image/__stories__/README.stories.mdx
index 944d34b397d..d6434c2544a 100644
--- a/packages/web-components/src/components/image/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/image/__stories__/README.stories.mdx
@@ -19,9 +19,9 @@ import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
 > sizes. Below you'll find an example with and without media query behaviors.
 
 > 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/image)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components/image)
 > 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/image)
+> [![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/image)
 
 ## Getting started
 
@@ -40,27 +40,27 @@ import '@carbon/ibmdotcom-web-components/es/components/image/index.js';
 
 ```html
 // Example without media queries
-<cds-image alt="Image alt text">
-  <cds-image-item
+<c4d-image alt="Image alt text">
+  <c4d-image-item
     srcset="https://fpoimg.com/672x336?text=2:1&bg_color=ee5396&text_color=161616">
-  </cds-image-item>
-</cds-image>
+  </c4d-image-item>
+</c4d-image>
 
 // Example with media queries
-<cds-image alt="Image alt text">
-  <cds-image-item
+<c4d-image alt="Image alt text">
+  <c4d-image-item
     media="(min-wiidth:672px)"
     srcset="https://fpoimg.com/672x336?text=2:1&bg_color=ee5396&text_color=161616">
-  </cds-image-item>
-  <cds-image-item
+  </c4d-image-item>
+  <c4d-image-item
     media="(min-wiidth:400px)"
     srcset="https://fpoimg.com/672x336?text=2:1&bg_color=ee5396&text_color=161616">
-  </cds-image-item>
-  <cds-image-item
+  </c4d-image-item>
+  <c4d-image-item
     media="(min-wiidth:320px)"
     srcset="https://fpoimg.com/672x336?text=2:1&bg_color=ee5396&text_color=161616">
-  </cds-image-item>
-</cds-image>
+  </c4d-image-item>
+</c4d-image>
 ```
 
 ## Image with caption
@@ -70,20 +70,20 @@ caption has been merged within the basic Image component. Simply adding a
 `heading` attribute will display the caption underneath the image component.
 
 ```html
-<cds-image alt="Image alt text" heading="This is a heading">
-  <cds-image-item
+<c4d-image alt="Image alt text" heading="This is a heading">
+  <c4d-image-item
     media="(min-wiidth:672px)"
     srcset="https://fpoimg.com/672x336?text=2:1&bg_color=ee5396&text_color=161616">
-  </cds-image-item>
-  <cds-image-item
+  </c4d-image-item>
+  <c4d-image-item
     media="(min-wiidth:400px)"
     srcset="https://fpoimg.com/672x336?text=2:1&bg_color=ee5396&text_color=161616">
-  </cds-image-item>
-  <cds-image-item
+  </c4d-image-item>
+  <c4d-image-item
     media="(min-wiidth:320px)"
     srcset="https://fpoimg.com/672x336?text=2:1&bg_color=ee5396&text_color=161616">
-  </cds-image-item>
-</cds-image>
+  </c4d-image-item>
+</c4d-image>
 ```
 
 ## Opening image in Lightbox media viewer
@@ -94,49 +94,49 @@ ensure the user can click on the image and launch the media viewer in a lightbox
 modal.
 
 ```html
-<cds-image alt="Image alt text" lightbox="true">
-  <cds-image-item
+<c4d-image alt="Image alt text" lightbox="true">
+  <c4d-image-item
     media="(min-wiidth:672px)"
     srcset="https://fpoimg.com/672x336?text=2:1&bg_color=ee5396&text_color=161616">
-  </cds-image-item>
-  <cds-image-item
+  </c4d-image-item>
+  <c4d-image-item
     media="(min-wiidth:400px)"
     srcset="https://fpoimg.com/672x336?text=2:1&bg_color=ee5396&text_color=161616">
-  </cds-image-item>
-  <cds-image-item
+  </c4d-image-item>
+  <c4d-image-item
     media="(min-wiidth:320px)"
     srcset="https://fpoimg.com/672x336?text=2:1&bg_color=ee5396&text_color=161616">
-  </cds-image-item>
-</cds-image>
+  </c4d-image-item>
+</c4d-image>
 ```
 
 A heading and copy can be added so that it can be displayed underneath the image
 in the lighbox media viewer upon clicking the original image.
 
 ```html
-<cds-image
+<c4d-image
   alt="Image alt text"
   lightbox="true"
   heading="This is a heading"
   copy="This is a copy">
-  <cds-image-item
+  <c4d-image-item
     media="(min-wiidth:672px)"
     srcset="https://fpoimg.com/672x336?text=2:1&bg_color=ee5396&text_color=161616">
-  </cds-image-item>
-  <cds-image-item
+  </c4d-image-item>
+  <c4d-image-item
     media="(min-wiidth:400px)"
     srcset="https://fpoimg.com/672x336?text=2:1&bg_color=ee5396&text_color=161616">
-  </cds-image-item>
-  <cds-image-item
+  </c4d-image-item>
+  <c4d-image-item
     media="(min-wiidth:320px)"
     srcset="https://fpoimg.com/672x336?text=2:1&bg_color=ee5396&text_color=161616">
-  </cds-image-item>
-</cds-image>
+  </c4d-image-item>
+</c4d-image>
 ```
 
 ## Props
 
-<Props of="cds-image" />
+<Props of="c4d-image" />
 
 ## Stable selectors
 
@@ -146,7 +146,7 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector | Compatibility selector          | Description |
 | ----------------------- | ------------------------------- | ----------- |
-| `<cds-image>`           | `data-autoid="cds--image"`      | Component   |
-| `<cds-image-item>`      | `data-autoid="cds--image-item"` | Interactive |
+| `<c4d-image>`           | `data-autoid="c4d--image"`      | Component   |
+| `<c4d-image-item>`      | `data-autoid="c4d--image-item"` | Interactive |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/image/__stories__/README.stories.react.mdx b/packages/web-components/src/components/image/__stories__/README.stories.react.mdx
index c3de151b777..dd2c9593f1f 100644
--- a/packages/web-components/src/components/image/__stories__/README.stories.react.mdx
+++ b/packages/web-components/src/components/image/__stories__/README.stories.react.mdx
@@ -10,10 +10,10 @@ import { PropTypesRef as ImageProps } from '@carbon/ibmdotcom-web-components/es/
 # Image
 
 > 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/image)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components-react/image)
 > 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/image)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/image)
 
 ## Getting started
 
@@ -128,7 +128,7 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector | Compatibility selector | Description |
 | ----------------------- | ---------------------- | ----------- |
-| `<cds-image>`           | N/A                    | Component   |
-| `<cds-image-item>`      | N/A                    | Component   |
+| `<c4d-image>`           | N/A                    | Component   |
+| `<c4d-image-item>`      | N/A                    | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/in-page-banner/__stories__/README.stories.mdx b/packages/web-components/src/components/in-page-banner/__stories__/README.stories.mdx
index aa9c4d9bbb8..3f22dd9c7e9 100644
--- a/packages/web-components/src/components/in-page-banner/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/in-page-banner/__stories__/README.stories.mdx
@@ -9,10 +9,10 @@ import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
 > heading and link list CTAs.
 >
 > 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/in-page-banner)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components/in-page-banner)
 > 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/in-page-banner)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/in-page-banner)
 
 ## Getting started
 
diff --git a/packages/web-components/src/components/in-page-banner/__stories__/README.stories.react.mdx b/packages/web-components/src/components/in-page-banner/__stories__/README.stories.react.mdx
index 827818c024f..966d2edc5d9 100644
--- a/packages/web-components/src/components/in-page-banner/__stories__/README.stories.react.mdx
+++ b/packages/web-components/src/components/in-page-banner/__stories__/README.stories.react.mdx
@@ -10,10 +10,10 @@ import { PropTypesRef } from '@carbon/ibmdotcom-web-components/es/components-rea
 # In Page Banner
 
 > 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/in-page-banner)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components-react/in-page-banner)
 > 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/in-page-banner)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/in-page-banner)
 
 ## Getting started
 
@@ -64,6 +64,6 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector | Compatibility selector | Description |
 | ----------------------- | ---------------------- | ----------- |
-| `<cds-in-page-banner>`  | N/A                    | Component   |
+| `<c4d-in-page-banner>`  | N/A                    | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/leadspace-block/__stories__/README.stories.mdx b/packages/web-components/src/components/leadspace-block/__stories__/README.stories.mdx
index f08460e7ce5..3c4b5e780fa 100644
--- a/packages/web-components/src/components/leadspace-block/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/leadspace-block/__stories__/README.stories.mdx
@@ -10,10 +10,10 @@ import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
 # LeadSpace Block
 
 > 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/leadspace-block)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components/leadspace-block)
 > 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/leadspace-block)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/leadspace-block)
 
 ## Getting started
 
diff --git a/packages/web-components/src/components/leadspace-block/__stories__/README.stories.react.mdx b/packages/web-components/src/components/leadspace-block/__stories__/README.stories.react.mdx
index 1c78499019f..0c499585799 100644
--- a/packages/web-components/src/components/leadspace-block/__stories__/README.stories.react.mdx
+++ b/packages/web-components/src/components/leadspace-block/__stories__/README.stories.react.mdx
@@ -10,10 +10,10 @@ import { PropTypesRef } from '@carbon/ibmdotcom-web-components/es/components-rea
 # Lead space block
 
 > 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/leadspace-block)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components-react/leadspace-block)
 > 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/leadspace-block)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/leadspace-block)
 
 ## Getting started
 
diff --git a/packages/web-components/src/components/leadspace-with-search/__stories__/README.stories.mdx b/packages/web-components/src/components/leadspace-with-search/__stories__/README.stories.mdx
index 243594a370c..997068a9694 100644
--- a/packages/web-components/src/components/leadspace-with-search/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/leadspace-with-search/__stories__/README.stories.mdx
@@ -10,10 +10,10 @@ import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
 # Leadspace with Search
 
 > 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/leadspace-with-search)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components/leadspace-with-search)
 > 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/leadspace-with-search)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/leadspace-with-search)
 
 ## Getting started
 
@@ -32,33 +32,33 @@ import '@carbon/ibmdotcom-web-components/es/components/leadspace-with-search/ind
 ### HTML
 
 ```html
-<cds-leadspace-with-search>
-  <cds-leadspace-heading>Find a product</cds-leadspace-heading>
-    <cds-leadspace-with-search-copy
+<c4d-leadspace-with-search>
+  <c4d-leadspace-heading>Find a product</c4d-leadspace-heading>
+    <c4d-leadspace-with-search-copy
       >Automate your software release process with continuous
       delivery (CD)—the most critical part of adopting DevOps.
       Build, test, and deploy code changes quickly, ensuring
       software is always ready for deployment.
-    </cds-leadspace-with-search-copy>
-  <cds-search-with-typeahead slot='search' leadspace-search><cds-search-with-typeahead/>
-  <cds-hr slot='hr'></cds-hr>
-</cds-leadspace-with-search>
+    </c4d-leadspace-with-search-copy>
+  <c4d-search-with-typeahead slot='search' leadspace-search><c4d-search-with-typeahead/>
+  <c4d-hr slot='hr'></c4d-hr>
+</c4d-leadspace-with-search>
 ```
 
 ### HTML - With Image
 
 ```html
-<cds-leadspace-with-search>
-  <cds-leadspace-heading>Find a product</cds-leadspace-heading>
-    <cds-leadspace-with-search-copy
+<c4d-leadspace-with-search>
+  <c4d-leadspace-heading>Find a product</c4d-leadspace-heading>
+    <c4d-leadspace-with-search-copy
       >Automate your software release process with continuous
       delivery (CD)—the most critical part of adopting DevOps.
       Build, test, and deploy code changes quickly, ensuring
       software is always ready for deployment.
-    </cds-leadspace-with-search-copy>
-  <cds-search-with-typeahead slot='search' leadspace-search><cds-search-with-typeahead/>
-  <cds-hr slot='hr'></cds-hr>
-</cds-leadspace-with-search>
+    </c4d-leadspace-with-search-copy>
+  <c4d-search-with-typeahead slot='search' leadspace-search><c4d-search-with-typeahead/>
+  <c4d-hr slot='hr'></c4d-hr>
+</c4d-leadspace-with-search>
 ```
 
 ## Adjacent Themes
@@ -90,17 +90,17 @@ are the following:
 ### HTML Example
 
 ```html
-<cds-leadspace-with-search adjacent-theme='dual-theme'>
-  <cds-leadspace-heading>Find a product</cds-leadspace-heading>
-    <cds-leadspace-with-search-copy
+<c4d-leadspace-with-search adjacent-theme='dual-theme'>
+  <c4d-leadspace-heading>Find a product</c4d-leadspace-heading>
+    <c4d-leadspace-with-search-copy
       >Automate your software release process with continuous
       delivery (CD)—the most critical part of adopting DevOps.
       Build, test, and deploy code changes quickly, ensuring
       software is always ready for deployment.
-    </cds-leadspace-with-search-copy>
-  <cds-search-with-typeahead slot='search' leadspace-search><cds-search-with-typeahead/>
-  <cds-hr slot='hr'></cds-hr>
-</cds-leadspace-with-search>
+    </c4d-leadspace-with-search-copy>
+  <c4d-search-with-typeahead slot='search' leadspace-search><c4d-search-with-typeahead/>
+  <c4d-hr slot='hr'></c4d-hr>
+</c4d-leadspace-with-search>
 ```
 
 ## Horizontal rule use
@@ -130,19 +130,19 @@ To enable, add the `scroll-behavior` and `sticky-search` attributes to `Leadspac
 ### HTML Example
 
 ```html
-<cds-dotcom-shell-container>
-<cds-leadspace-with-search adjacent-theme='dual-theme' sticky-search scroll-behavior>
-  <cds-leadspace-heading>Find a product</cds-leadspace-heading>
-    <cds-leadspace-with-search-copy
+<c4d-dotcom-shell-container>
+<c4d-leadspace-with-search adjacent-theme='dual-theme' sticky-search scroll-behavior>
+  <c4d-leadspace-heading>Find a product</c4d-leadspace-heading>
+    <c4d-leadspace-with-search-copy
       >Automate your software release process with continuous
       delivery (CD)—the most critical part of adopting DevOps.
       Build, test, and deploy code changes quickly, ensuring
       software is always ready for deployment.
-    </cds-leadspace-with-search-copy>
-  <cds-search-with-typeahead slot='search' leadspace-search><cds-search-with-typeahead/>
-  <cds-hr slot='hr'></cds-hr>
-</cds-leadspace-with-search>
-</cds-dotcom-shell-container>
+    </c4d-leadspace-with-search-copy>
+  <c4d-search-with-typeahead slot='search' leadspace-search><c4d-search-with-typeahead/>
+  <c4d-hr slot='hr'></c4d-hr>
+</c4d-leadspace-with-search>
+</c4d-dotcom-shell-container>
 ```
 
 ## Stable selectors
@@ -153,13 +153,13 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector                       | Compatibility selector                                     | Description |
 | --------------------------------------------- | ---------------------------------------------------------- | ----------- |
-| `<cds-leadspace-with-search>`                 | `data-autoid="cds--leadspace-with-search"`                 | Component   |
-| `<cds-leadspace-with-search-content>`         | `data-autoid="cds--leadspace-with-search__content"`        | Component   |
-| `<cds-leadspace-with-search-heading>`         | `data-autoid="cds--leadspace-with-search__heading"`        | Component   |
-| `<cds-leadspace-with-search-content-copy>`    | `data-autoid="cds--leadspace-with-search-content-copy"`    | Component   |
-| `<cds-leadspace-with-search-content-heading>` | `data-autoid="cds--leadspace-with-search-content-heading"` | Component   |
+| `<c4d-leadspace-with-search>`                 | `data-autoid="c4d--leadspace-with-search"`                 | Component   |
+| `<c4d-leadspace-with-search-content>`         | `data-autoid="c4d--leadspace-with-search__content"`        | Component   |
+| `<c4d-leadspace-with-search-heading>`         | `data-autoid="c4d--leadspace-with-search__heading"`        | Component   |
+| `<c4d-leadspace-with-search-content-copy>`    | `data-autoid="c4d--leadspace-with-search-content-copy"`    | Component   |
+| `<c4d-leadspace-with-search-content-heading>` | `data-autoid="c4d--leadspace-with-search-content-heading"` | Component   |
 
 ## Props
 
-<Props of="cds-leadspace-with-search" />
+<Props of="c4d-leadspace-with-search" />
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/leadspace-with-search/__stories__/README.stories.react.mdx b/packages/web-components/src/components/leadspace-with-search/__stories__/README.stories.react.mdx
index 6f9ebb27c34..28a3aac1e46 100644
--- a/packages/web-components/src/components/leadspace-with-search/__stories__/README.stories.react.mdx
+++ b/packages/web-components/src/components/leadspace-with-search/__stories__/README.stories.react.mdx
@@ -10,10 +10,10 @@ import { PropTypesRef } from '@carbon/ibmdotcom-web-components/es/components-rea
 # Leadspace with Search
 
 > 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/leadspace-with-search)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components-react/leadspace-with-search)
 > 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/leadspace-with-search)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/leadspace-with-search)
 
 ## Getting started
 
@@ -62,10 +62,10 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector                       | Compatibility selector                                     | Description |
 | --------------------------------------------- | ---------------------------------------------------------- | ----------- |
-| `<cds-leadspace-with-search>`                 | `data-autoid="cds--leadspace-with-search"`                 | Component   |
-| `<cds-leadspace-with-search-content>`         | `data-autoid="cds--leadspace-with-search__content"`        | Component   |
-| `<cds-leadspace-with-search-heading>`         | `data-autoid="cds--leadspace-with-search__heading"`        | Component   |
-| `<cds-leadspace-with-search-content-copy>`    | `data-autoid="cds--leadspace-with-search-content-copy"`    | Component   |
-| `<cds-leadspace-with-search-content-heading>` | `data-autoid="cds--leadspace-with-search-content-heading"` | Component   |
+| `<c4d-leadspace-with-search>`                 | `data-autoid="c4d--leadspace-with-search"`                 | Component   |
+| `<c4d-leadspace-with-search-content>`         | `data-autoid="c4d--leadspace-with-search__content"`        | Component   |
+| `<c4d-leadspace-with-search-heading>`         | `data-autoid="c4d--leadspace-with-search__heading"`        | Component   |
+| `<c4d-leadspace-with-search-content-copy>`    | `data-autoid="c4d--leadspace-with-search-content-copy"`    | Component   |
+| `<c4d-leadspace-with-search-content-heading>` | `data-autoid="c4d--leadspace-with-search-content-heading"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/leadspace/__stories__/README.stories.mdx b/packages/web-components/src/components/leadspace/__stories__/README.stories.mdx
index 8dcdc26de8d..815290471cd 100644
--- a/packages/web-components/src/components/leadspace/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/leadspace/__stories__/README.stories.mdx
@@ -11,10 +11,10 @@ import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
 # LeadSpace
 
 > 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/leadspace)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components/leadspace)
 > 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/leadspace)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/leadspace)
 
 ## Getting started
 
diff --git a/packages/web-components/src/components/leadspace/__stories__/README.stories.react.mdx b/packages/web-components/src/components/leadspace/__stories__/README.stories.react.mdx
index 148d04a86e5..be09f808ae4 100644
--- a/packages/web-components/src/components/leadspace/__stories__/README.stories.react.mdx
+++ b/packages/web-components/src/components/leadspace/__stories__/README.stories.react.mdx
@@ -10,10 +10,10 @@ import { PropTypesRef } from '@carbon/ibmdotcom-web-components/es/components-rea
 # Leadspace
 
 > 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/leadspace)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components-react/leadspace)
 > 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/leadspace)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/leadspace)
 
 ## Getting started
 
diff --git a/packages/web-components/src/components/leaving-ibm/__stories__/README.stories.mdx b/packages/web-components/src/components/leaving-ibm/__stories__/README.stories.mdx
index 739dfd95b9e..95a58e9d568 100644
--- a/packages/web-components/src/components/leaving-ibm/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/leaving-ibm/__stories__/README.stories.mdx
@@ -10,10 +10,10 @@ import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
 # Leaving IBM
 
 > 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/leaving-ibm)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components/leaving-ibm)
 > 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/leaving-ibm)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/leaving-ibm)
 
 ## Getting started
 
@@ -33,16 +33,16 @@ import '@carbon/ibmdotcom-web-components/es/components/leaving-ibm/index';
 
 ```html
 <!-- Add component to document -->
-<cds-leaving-ibm-container></cds-leaving-ibm-container>
+<c4d-leaving-ibm-container></c4d-leaving-ibm-container>
 
 ...
 
 <!-- Trigger modal on click -->
-<cds-link-with-icon
+<c4d-link-with-icon
   href="https://www.carbondesignsystem.com/all-about-carbon/what-is-carbon/"
   data-leaving-ibm>
   Learn more about the Carbon Design System
-</cds-link-with-icon>
+</c4d-link-with-icon>
 ```
 
 > 💡 Give your link the `data-leaving-ibm` attribute to trigger the modal on
@@ -58,10 +58,10 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector   | Compatibility selector                 | Description |
 | ------------------------- | -------------------------------------- | ----------- |
-| `<cds-leaving-ibm-modal>` | `data-autoid="cds--leaving-ibm-modal"` | Component   |
-| `cds--leaving-ibm-cta`    | `data-autoid="cds--leaving-ibm-cta"`   | Interactive |
+| `<c4d-leaving-ibm-modal>` | `data-autoid="c4d--leaving-ibm-modal"` | Component   |
+| `cds--leaving-ibm-cta`    | `data-autoid="c4d--leaving-ibm-cta"`   | Interactive |
 
 ## Props
 
-<Props of="cds-leaving-ibm-composite" />
+<Props of="c4d-leaving-ibm-composite" />
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/leaving-ibm/__stories__/README.stories.react.mdx b/packages/web-components/src/components/leaving-ibm/__stories__/README.stories.react.mdx
index a613d7aeabd..97936fb2b4c 100644
--- a/packages/web-components/src/components/leaving-ibm/__stories__/README.stories.react.mdx
+++ b/packages/web-components/src/components/leaving-ibm/__stories__/README.stories.react.mdx
@@ -10,10 +10,10 @@ import { PropTypesRef } from '@carbon/ibmdotcom-web-components/es/components-rea
 # Leaving IBM
 
 > 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/leaving-ibm)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components-react/leaving-ibm)
 > 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/leaving-ibm)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/leaving-ibm)
 
 ## Getting started
 
@@ -64,7 +64,7 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector   | Compatibility selector                 | Description |
 | ------------------------- | -------------------------------------- | ----------- |
-| `<cds-leaving-ibm-modal>` | `data-autoid="cds--leaving-ibm-modal"` | Component   |
-| `cds--leaving-ibm-cta`    | `data-autoid="cds--leaving-ibm-cta"`   | Interactive |
+| `<c4d-leaving-ibm-modal>` | `data-autoid="c4d--leaving-ibm-modal"` | Component   |
+| `cds--leaving-ibm-cta`    | `data-autoid="c4d--leaving-ibm-cta"`   | Interactive |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/lightbox-media-viewer/__stories__/README.stories.mdx b/packages/web-components/src/components/lightbox-media-viewer/__stories__/README.stories.mdx
index 168aa97dd1d..9419c0ba503 100644
--- a/packages/web-components/src/components/lightbox-media-viewer/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/lightbox-media-viewer/__stories__/README.stories.mdx
@@ -40,11 +40,11 @@ The header can be visually hidden using the `.cds--visually-hidden` or
 screen, but will still be announced to assistive technology users.
 
 ```html
-<cds-expressive-modal id="my-lightbox" expressive-size="full-width">
-  <cds-expressive-modal-close-button></cds-expressive-modal-close-button>
+<c4d-expressive-modal id="my-lightbox" expressive-size="full-width">
+  <c4d-expressive-modal-close-button></c4d-expressive-modal-close-button>
   <span class="cds--visually-hidden" slot="header">Dialog box label text</span>
-  <cds-lightbox-media-viewer ...> </cds-lightbox-media-viewer>
-</cds-expressive-modal>
+  <c4d-lightbox-media-viewer ...> </c4d-lightbox-media-viewer>
+</c4d-expressive-modal>
 ```
 
 ## Using Images
@@ -52,15 +52,15 @@ screen, but will still be announced to assistive technology users.
 ### HTML
 
 ```html
-<cds-expressive-modal id="my-lightbox" expressive-size="full-width">
-  <cds-expressive-modal-close-button></cds-expressive-modal-close-button>
-  <cds-lightbox-media-viewer
+<c4d-expressive-modal id="my-lightbox" expressive-size="full-width">
+  <c4d-expressive-modal-close-button></c4d-expressive-modal-close-button>
+  <c4d-lightbox-media-viewer
     alt="Image alt text"
     default-src="https://fpoimg.com/1280x720?text=16:9&bg_color=ee5396&text_color=161616"
     description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est.Mauris iaculis eget dolor nec hendrerit."
     title="Curabitur malesuada varius mi eu posuere">
-  </cds-lightbox-media-viewer>
-</cds-expressive-modal>
+  </c4d-lightbox-media-viewer>
+</c4d-expressive-modal>
 ```
 
 ## Using Videos
@@ -68,12 +68,12 @@ screen, but will still be announced to assistive technology users.
 ### HTML
 
 ```html
-<cds-expressive-modal id="my-lightbox" expressive-size="full-width">
-  <cds-expressive-modal-close-button></cds-expressive-modal-close-button>
-  <cds-lightbox-media-viewer
+<c4d-expressive-modal id="my-lightbox" expressive-size="full-width">
+  <c4d-expressive-modal-close-button></c4d-expressive-modal-close-button>
+  <c4d-lightbox-media-viewer
     id="my-video"
-    video-id="0_ibuqxqbe"></cds-lightbox-media-viewer>
-</cds-expressive-modal>
+    video-id="0_ibuqxqbe"></c4d-lightbox-media-viewer>
+</c4d-expressive-modal>
 ```
 
 ## Viewing multiple images/videos
@@ -81,15 +81,15 @@ screen, but will still be announced to assistive technology users.
 ### HTML
 
 ```html
-<cds-expressive-modal id="my-lightbox" expressive-size="full-width">
-  <cds-expressive-modal-close-button></cds-expressive-modal-close-button>
-  <cds-carousel>
-    <cds-lightbox-media-viewer ...></cds-lightbox-media-viewer>
-    <cds-lightbox-media-viewer ...></cds-lightbox-media-viewer>
-    <cds-lightbox-media-viewer ...></cds-lightbox-media-viewer>
-    <cds-lightbox-media-viewer ...></cds-lightbox-media-viewer>
-  </cds-carousel>
-</cds-expressive-modal>
+<c4d-expressive-modal id="my-lightbox" expressive-size="full-width">
+  <c4d-expressive-modal-close-button></c4d-expressive-modal-close-button>
+  <c4d-carousel>
+    <c4d-lightbox-media-viewer ...></c4d-lightbox-media-viewer>
+    <c4d-lightbox-media-viewer ...></c4d-lightbox-media-viewer>
+    <c4d-lightbox-media-viewer ...></c4d-lightbox-media-viewer>
+    <c4d-lightbox-media-viewer ...></c4d-lightbox-media-viewer>
+  </c4d-carousel>
+</c4d-expressive-modal>
 ```
 
 ## Stable selectors
@@ -100,14 +100,14 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector                                | Compatibility selector                                     | Description |
 | ------------------------------------------------------ | ---------------------------------------------------------- | ----------- |
-| `<cds-expressive-modal>`                               | `data-autoid="cds--expressive-modal"`                      | Component   |
-| `::part(title)` in `<cds-lightbox-media-viewer>`       | `data-autoid="cds--Lightbox-media-viewer__content__title"` | Interactive |
-| `::part(description)` in `<cds-lightbox-media-viewer>` | `data-autoid="cds--Lightbox-media-viewer__content__desc"`  | Interactive |
+| `<c4d-expressive-modal>`                               | `data-autoid="c4d--expressive-modal"`                      | Component   |
+| `::part(title)` in `<c4d-lightbox-media-viewer>`       | `data-autoid="c4d--Lightbox-media-viewer__content__title"` | Interactive |
+| `::part(description)` in `<c4d-lightbox-media-viewer>` | `data-autoid="c4d--Lightbox-media-viewer__content__desc"`  | Interactive |
 
 ## Under the Hood
 
-### `<cds-lightbox-media-viewer>`
+### `<c4d-lightbox-media-viewer>`
 
-<Props of="cds-lightbox-media-viewer" />
+<Props of="c4d-lightbox-media-viewer" />
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/lightbox-media-viewer/__stories__/README.stories.react.mdx b/packages/web-components/src/components/lightbox-media-viewer/__stories__/README.stories.react.mdx
index aeb208de41f..0fdc6a04486 100644
--- a/packages/web-components/src/components/lightbox-media-viewer/__stories__/README.stories.react.mdx
+++ b/packages/web-components/src/components/lightbox-media-viewer/__stories__/README.stories.react.mdx
@@ -10,10 +10,10 @@ import { PropTypesRef } from '@carbon/ibmdotcom-web-components/es/components-rea
 # Lightbox Media Viewer
 
 > 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/lightbox-media-viewer)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components-react/lightbox-media-viewer)
 > 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/lightbox-media-viewer)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/lightbox-media-viewer)
 
 ## Getting started
 
@@ -94,8 +94,8 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector                                | Compatibility selector                                     | Description |
 | ------------------------------------------------------ | ---------------------------------------------------------- | ----------- |
-| `<cds-expressive-modal>`                               | `data-autoid="cds--expressive-modal"`                      | Component   |
-| `::part(title)` in `<cds-lightbox-media-viewer>`       | `data-autoid="cds--Lightbox-media-viewer__content__title"` | Interactive |
-| `::part(description)` in `<cds-lightbox-media-viewer>` | `data-autoid="cds--Lightbox-media-viewer__content__desc"`  | Interactive |
+| `<c4d-expressive-modal>`                               | `data-autoid="c4d--expressive-modal"`                      | Component   |
+| `::part(title)` in `<c4d-lightbox-media-viewer>`       | `data-autoid="c4d--Lightbox-media-viewer__content__title"` | Interactive |
+| `::part(description)` in `<c4d-lightbox-media-viewer>` | `data-autoid="c4d--Lightbox-media-viewer__content__desc"`  | Interactive |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/link-list-section/__stories__/README.stories.mdx b/packages/web-components/src/components/link-list-section/__stories__/README.stories.mdx
index ac5ccb9eb73..5d6c658bbc6 100644
--- a/packages/web-components/src/components/link-list-section/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/link-list-section/__stories__/README.stories.mdx
@@ -10,10 +10,10 @@ import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
 # Link List Section
 
 > 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/link-list-section)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components/link-list-section)
 > 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/link-list-section)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/link-list-section)
 
 ## Getting started
 
@@ -32,12 +32,12 @@ import '@carbon/ibmdotcom-web-components/es/components/link-list-section/index.j
 ### HTML
 
 ```html
-<cds-link-list-section>
-  <cds-content-section-heading
-    >Lorem ipsum dolor sit amet</cds-content-section-heading
+<c4d-link-list-section>
+  <c4d-content-section-heading
+    >Lorem ipsum dolor sit amet</c4d-content-section-heading
   >
-  <cds-link-list>
-    <cds-link-list-item href="https://example.com">
+  <c4d-link-list>
+    <c4d-link-list-item href="https://example.com">
       Learn more about Kubernetes
       <svg
         slot="footer"
@@ -52,8 +52,8 @@ import '@carbon/ibmdotcom-web-components/es/components/link-list-section/index.j
         <path
           d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
       </svg>
-    </cds-link-list-item>
-    <cds-link-list-item href="https://example.com">
+    </c4d-link-list-item>
+    <c4d-link-list-item href="https://example.com">
       Containerization A Complete Guide
       <svg
         slot="footer"
@@ -68,8 +68,8 @@ import '@carbon/ibmdotcom-web-components/es/components/link-list-section/index.j
         <path
           d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
       </svg>
-    </cds-link-list-item>
-    <cds-link-list-item href="https://example.com">
+    </c4d-link-list-item>
+    <c4d-link-list-item href="https://example.com">
       Microservices and containers
       <svg
         slot="footer"
@@ -84,8 +84,8 @@ import '@carbon/ibmdotcom-web-components/es/components/link-list-section/index.j
         <path
           d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
       </svg>
-    </cds-link-list-item>
-    <cds-link-list-item href="https://example.com">
+    </c4d-link-list-item>
+    <c4d-link-list-item href="https://example.com">
       Learn more about Kubernetes
       <svg
         slot="footer"
@@ -100,8 +100,8 @@ import '@carbon/ibmdotcom-web-components/es/components/link-list-section/index.j
         <path
           d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
       </svg>
-    </cds-link-list-item>
-    <cds-link-list-item href="https://example.com">
+    </c4d-link-list-item>
+    <c4d-link-list-item href="https://example.com">
       Containerization A Complete Guide
       <svg
         slot="footer"
@@ -116,8 +116,8 @@ import '@carbon/ibmdotcom-web-components/es/components/link-list-section/index.j
         <path
           d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
       </svg>
-    </cds-link-list-item>
-    <cds-link-list-item href="https://example.com">
+    </c4d-link-list-item>
+    <c4d-link-list-item href="https://example.com">
       Microservices and containers
       <svg
         slot="footer"
@@ -132,14 +132,14 @@ import '@carbon/ibmdotcom-web-components/es/components/link-list-section/index.j
         <path
           d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
       </svg>
-    </cds-link-list-item>
-  </cds-link-list>
-</cds-link-list-section>
+    </c4d-link-list-item>
+  </c4d-link-list>
+</c4d-link-list-section>
 ```
 
 ## Props
 
-<Props of="cds-content-section" />
+<Props of="c4d-content-section" />
 
 ## Stable selectors
 
@@ -149,6 +149,6 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector   | Compatibility selector               | Description |
 | ------------------------- | ------------------------------------ | ----------- |
-| `<cds-link-list-section>` | data-autoid="cds--link-list-section" | Component   |
+| `<c4d-link-list-section>` | data-autoid="c4d--link-list-section" | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/link-list-section/__stories__/README.stories.react.mdx b/packages/web-components/src/components/link-list-section/__stories__/README.stories.react.mdx
index 143b1ac2488..cbd03e82b50 100644
--- a/packages/web-components/src/components/link-list-section/__stories__/README.stories.react.mdx
+++ b/packages/web-components/src/components/link-list-section/__stories__/README.stories.react.mdx
@@ -10,10 +10,10 @@ import { PropTypesRef } from '@carbon/ibmdotcom-web-components/es/components-rea
 # Link list section
 
 > 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/link-list-section)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components-react/link-list-section)
 > 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/link-list-section)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/link-list-section)
 
 ## Getting started
 
@@ -70,6 +70,6 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector  | Compatibility selector | Description |
 | ------------------------ | ---------------------- | ----------- |
-| `<cds-link-list-section` | N/A                    | Component   |
+| `<c4d-link-list-section` | N/A                    | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/link-list/__stories__/README.stories.mdx b/packages/web-components/src/components/link-list/__stories__/README.stories.mdx
index 04fbc5d4a7c..a36906f5a6e 100644
--- a/packages/web-components/src/components/link-list/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/link-list/__stories__/README.stories.mdx
@@ -10,10 +10,10 @@ import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
 # Link List
 
 > 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/link-list)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components/link-list)
 > 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/link-list)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/link-list)
 
 ## Getting started
 
@@ -32,9 +32,9 @@ import '@carbon/ibmdotcom-web-components/es/components/link-list/index.js';
 ### HTML
 
 ```html
-<cds-link-list>
-  <cds-link-list-heading>Tutorial</cds-link-list-heading>
-  <cds-link-list-item href="https://example.com">
+<c4d-link-list>
+  <c4d-link-list-heading>Tutorial</c4d-link-list-heading>
+  <c4d-link-list-item href="https://example.com">
     <p>Copy text</p>
     <svg
       slot="icon"
@@ -49,13 +49,13 @@ import '@carbon/ibmdotcom-web-components/es/components/link-list/index.js';
       <path
         d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
     </svg>
-  </cds-link-list-item>
-</cds-link-list>
+  </c4d-link-list-item>
+</c4d-link-list>
 ```
 
 ## Props
 
-<Props of="cds-link-list" />
+<Props of="c4d-link-list" />
 
 ## Stable selectors
 
@@ -65,6 +65,6 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector | Compatibility selector       | Description |
 | ----------------------- | ---------------------------- | ----------- |
-| `<cds-link-list>`       | data-autoid="cds--link-list" | Component   |
+| `<c4d-link-list>`       | data-autoid="c4d--link-list" | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/link-list/__stories__/README.stories.react.mdx b/packages/web-components/src/components/link-list/__stories__/README.stories.react.mdx
index 69e3deec1b7..b5b7893004b 100644
--- a/packages/web-components/src/components/link-list/__stories__/README.stories.react.mdx
+++ b/packages/web-components/src/components/link-list/__stories__/README.stories.react.mdx
@@ -10,10 +10,10 @@ import { PropTypesRef } from '@carbon/ibmdotcom-web-components/es/components-rea
 # Link list
 
 > 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/link-list)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components-react/link-list)
 > 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/link-list)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/link-list)
 
 ## Getting started
 
@@ -84,6 +84,6 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector | Compatibility selector         | Description |
 | ----------------------- | ------------------------------ | ----------- |
-| `<cds-link-list>`       | `data-autoid="cds--link-list"` | Component   |
+| `<c4d-link-list>`       | `data-autoid="c4d--link-list"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/link-with-icon/__stories__/README.stories.mdx b/packages/web-components/src/components/link-with-icon/__stories__/README.stories.mdx
index 833f33e0fe7..49405541861 100644
--- a/packages/web-components/src/components/link-with-icon/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/link-with-icon/__stories__/README.stories.mdx
@@ -8,17 +8,17 @@ import '../link-with-icon';
 import contributing from '../../../../../../docs/contributing-license.md';
 import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
 
-# `<cds-link-with-icon>`
+# `<c4d-link-with-icon>`
 
-> The `<cds-link-with-icon>` component should be used primarily as a
+> The `<c4d-link-with-icon>` component should be used primarily as a
 > navigational element, with an icon as an indicator to the type of content
 > being referenced, e.g. url, external url, file.
 
 > 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/link-with-icon)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components/link-with-icon)
 > 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/link-with-icon)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/link-with-icon)
 
 ## Getting started
 
@@ -35,10 +35,10 @@ import '@carbon/ibmdotcom-web-components/es/components/link-with-icon/index.js';
 ### HTML
 
 ```html
-<cds-link-with-icon href="https://www.ibm.com/">
+<c4d-link-with-icon href="https://www.ibm.com/">
   Link text
   <svg slot="icon" ...>...</svg>
-</cds-link-with-icon>
+</c4d-link-with-icon>
 ```
 
 ### CTA features
@@ -73,7 +73,7 @@ Notes:
 
 ## Props
 
-<Props of="cds-link-with-icon" />
+<Props of="c4d-link-with-icon" />
 
 ## Stable selectors
 
@@ -83,6 +83,6 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector | Compatibility selector              | Description |
 | ----------------------- | ----------------------------------- | ----------- |
-| `<cds-link-with-icon>`  | `data-autoid="cds--link-with-icon"` | Component   |
+| `<c4d-link-with-icon>`  | `data-autoid="c4d--link-with-icon"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/locale-modal/__stories__/README.stories.mdx b/packages/web-components/src/components/locale-modal/__stories__/README.stories.mdx
index 2b399aa0a43..b4571a36ac4 100644
--- a/packages/web-components/src/components/locale-modal/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/locale-modal/__stories__/README.stories.mdx
@@ -15,10 +15,10 @@ import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
 > to those region languages, if available.
 
 > 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/locale-modal)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components/locale-modal)
 > 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/locale-modal)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/locale-modal)
 
 ## Getting started
 
@@ -35,12 +35,12 @@ import '@carbon/ibmdotcom-web-components/es/components/locale-modal/index.js';
 ### HTML
 
 ```html
-<cds-locale-modal-container open></cds-locale-modal-container>
+<c4d-locale-modal-container open></c4d-locale-modal-container>
 ```
 
 ## Props
 
-<Props of="cds-locale-modal-container" />
+<Props of="c4d-locale-modal-container" />
 
 ## Stable selectors
 
@@ -50,7 +50,7 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector                       | Compatibility selector                 | Description |
 | --------------------------------------------- | -------------------------------------- | ----------- |
-| `<cds-locale-modal>`                          | `cds--locale-modal`                    | Component   |
-| `<cds-region-item name="${region}">`          | `cds--locale-modal__geo-btn-${region}` | Interactive |
-| `::part(searchbox)` in `<cds-locale-search>`  | `cds--locale-modal__filter`            | Interactive |
-| `::part(back-button)` in `<cds-locale-modal>` | `cds--locale-modal__region-back`       | Interactive |
+| `<c4d-locale-modal>`                          | `cds--locale-modal`                    | Component   |
+| `<c4d-region-item name="${region}">`          | `cds--locale-modal__geo-btn-${region}` | Interactive |
+| `::part(searchbox)` in `<c4d-locale-search>`  | `cds--locale-modal__filter`            | Interactive |
+| `::part(back-button)` in `<c4d-locale-modal>` | `cds--locale-modal__region-back`       | Interactive |
diff --git a/packages/web-components/src/components/locale-modal/__stories__/README.stories.react.mdx b/packages/web-components/src/components/locale-modal/__stories__/README.stories.react.mdx
index c98316c85be..a828015e106 100644
--- a/packages/web-components/src/components/locale-modal/__stories__/README.stories.react.mdx
+++ b/packages/web-components/src/components/locale-modal/__stories__/README.stories.react.mdx
@@ -10,10 +10,10 @@ import { PropTypesRef as LocaleModalProps } from '@carbon/ibmdotcom-web-componen
 # Locale modal
 
 > 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/locale-modal)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components-react/locale-modal)
 > 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/locale-modal)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/locale-modal)
 
 ## Getting started
 
@@ -46,6 +46,6 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector        | Compatibility selector | Description |
 | ------------------------------ | ---------------------- | ----------- |
-| `<cds-locale-modal-container>` | N/A                    | Component   |
+| `<c4d-locale-modal-container>` | N/A                    | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/logo-grid/__stories__/README.stories.mdx b/packages/web-components/src/components/logo-grid/__stories__/README.stories.mdx
index 080d1bde8b3..a46e7273d9c 100644
--- a/packages/web-components/src/components/logo-grid/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/logo-grid/__stories__/README.stories.mdx
@@ -11,10 +11,10 @@ import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
 # Logo Grid
 
 > 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/logo-grid)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components/logo-grid)
 > 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/logo-grid)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/logo-grid)
 
 ## Getting started
 
@@ -33,13 +33,13 @@ import '@carbon/ibmdotcom-web-components/es/components/logo-grid/index.js';
 ### HTML
 
 ```html
-<cds-logo-grid>
-  <cds-content-block-heading> Our customers </cds-content-block-heading>
-  <cds-logo-grid-item
+<c4d-logo-grid>
+  <c4d-content-block-heading> Our customers </c4d-content-block-heading>
+  <c4d-logo-grid-item
     default-src="https://fpoimg.com/288x216?text=Example%20Logo&bg_color=ee5396&text_color=161616"
-    alt=""></cds-logo-grid-item>
-  <cds-logo-grid-link href="https://example.com">
-    <cds-card-link-heading>Lorem Ipsum</cds-card-link-heading>
+    alt=""></c4d-logo-grid-item>
+  <c4d-logo-grid-link href="https://example.com">
+    <c4d-card-link-heading>Lorem Ipsum</c4d-card-link-heading>
     <svg
       slot="footer"
       focusable="false"
@@ -53,13 +53,13 @@ import '@carbon/ibmdotcom-web-components/es/components/logo-grid/index.js';
       <path
         d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
     </svg>
-  </cds-logo-grid-link>
-</cds-logo-grid>
+  </c4d-logo-grid-link>
+</c4d-logo-grid>
 ```
 
 ## Props
 
-<Props of="cds-logo-grid" />
+<Props of="c4d-logo-grid" />
 
 ## Stable selectors
 
@@ -69,8 +69,8 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector | Compatibility selector              | Description                     |
 | ----------------------- | ----------------------------------- | ------------------------------- |
-| `<cds-logo-grid>`       | `data-autoid="cds--logo-grid"`      | Logo Grid main component        |
-| `<cds-logo-link>`       | `data-autoid="cds--logo-grid-link"` | Logo Grid bottom link component |
-| `<cds-logo-item>`       | `data-autoid="cds--logo-grid-item"` | Logo Grid item component        |
+| `<c4d-logo-grid>`       | `data-autoid="c4d--logo-grid"`      | Logo Grid main component        |
+| `<c4d-logo-link>`       | `data-autoid="c4d--logo-grid-link"` | Logo Grid bottom link component |
+| `<c4d-logo-item>`       | `data-autoid="c4d--logo-grid-item"` | Logo Grid item component        |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/logo-grid/__stories__/README.stories.react.mdx b/packages/web-components/src/components/logo-grid/__stories__/README.stories.react.mdx
index 7960d9b8c6f..3a95cd38d8a 100644
--- a/packages/web-components/src/components/logo-grid/__stories__/README.stories.react.mdx
+++ b/packages/web-components/src/components/logo-grid/__stories__/README.stories.react.mdx
@@ -10,10 +10,10 @@ import { PropTypesRef } from '@carbon/ibmdotcom-web-components/es/components-rea
 # Logo Grid
 
 > 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/logo-grid)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components-react/logo-grid)
 > 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/logo-grid)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/logo-grid)
 
 ## Getting started
 
@@ -60,6 +60,6 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector | Compatibility selector | Description |
 | ----------------------- | ---------------------- | ----------- |
-| `<cds-logo-grid>`       | N/A                    | Component   |
+| `<c4d-logo-grid>`       | N/A                    | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/masthead/__stories__/README.stories.mdx b/packages/web-components/src/components/masthead/__stories__/README.stories.mdx
index bcf4169f66b..6666316f18d 100644
--- a/packages/web-components/src/components/masthead/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/masthead/__stories__/README.stories.mdx
@@ -14,16 +14,16 @@ import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
 > profile services for IBM.com.
 
 > 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/masthead)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components/masthead)
 > example implementation.
 
 ### Masthead (L0):
 
-[![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/masthead)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/masthead)
 
 ### Masthead (L1):
 
-[![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/masthead-l1)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/masthead-l1)
 
 ## Getting Started
 
diff --git a/packages/web-components/src/components/masthead/__stories__/README.stories.react.mdx b/packages/web-components/src/components/masthead/__stories__/README.stories.react.mdx
index 3c701ac40ca..d6779151469 100644
--- a/packages/web-components/src/components/masthead/__stories__/README.stories.react.mdx
+++ b/packages/web-components/src/components/masthead/__stories__/README.stories.react.mdx
@@ -14,16 +14,16 @@ import { PropTypesRef } from '@carbon/ibmdotcom-web-components/es/components-rea
 > profile services for IBM.com.
 
 > 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/masthead)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components-react/masthead)
 > example implementation.
 
 ### Masthead (L0):
 
-[![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/masthead)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/masthead)
 
 ### Masthead (L1):
 
-[![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/masthead-l1)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/masthead-l1)
 
 ## Getting Started
 
@@ -344,7 +344,7 @@ document.querySelector('cds-search-with-typeahead').placeholderFormatter =
 [cds-masthead-container props](https://carbon-design-system.github.io/carbon-for-ibm-dotcom/canary/web-components/?path=/docs/components-masthead--with-alternate-logo-and-tooltip#props)
 
 For Cloud-specific version of masthead-container,
-`<cds-cloud-masthead-container>`, we support two user authentication methods,
+`<c4d-cloud-masthead-container>`, we support two user authentication methods,
 via cookie or api. To select between the two, provide the `auth-method` prop
 with a value of either 'cookie' or 'api'.
 
@@ -362,14 +362,14 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector                                                                   | Compatibility selector                                                   | Description |
 | ----------------------------------------------------------------------------------------- | ------------------------------------------------------------------------ | ----------- |
-| `<cds-masthead>`                                                                          | `data-autoid="cds--masthead"`                                            | Component   |
-| `<cds-masthead-menu-button>`                                                              | `data-autoid="cds--masthead__hamburger"`                                 | Interactive |
-| `<cds-top-nav-name>`                                                                      | `data-autoid="cds--masthead__platform-name"`                             | Interactive |
-| `<cds-top-nav>`                                                                           | `data-autoid="cds--masthead__l0-nav"`                                    | Component   |
-| `<cds-top-nav-menu trigger-content="${item}">` and `<cds-top-nav-item title="${item}">`   | `data-autoid="cds--masthead__l0-nav--nav${item}"`                        | Interactive |
-| `<cds-top-nav-menu-item title="${item}">`                                                 | `data-autoid="cds--masthead__l0-nav--subnav-col${item}-item${item}"`     | Interactive |
-| `<cds-left-nav>`                                                                          | `data-autoid="cds--masthead__l0-sidenav"`                                | Component   |
-| `<cds-left-nav-menu trigger-content="${item}">`                                           | `data-autoid="cds--masthead__l0-sidenav--nav${item}"`                    | Interactive |
-| `<cds-left-nav-menu-item title="${item}">`                                                | `data-autoid="cds--masthead__l0-sidenav--subnav-col${item}-item${item}"` | Interactive |
+| `<c4d-masthead>`                                                                          | `data-autoid="c4d--masthead"`                                            | Component   |
+| `<c4d-masthead-menu-button>`                                                              | `data-autoid="c4d--masthead__hamburger"`                                 | Interactive |
+| `<c4d-top-nav-name>`                                                                      | `data-autoid="c4d--masthead__platform-name"`                             | Interactive |
+| `<c4d-top-nav>`                                                                           | `data-autoid="c4d--masthead__l0-nav"`                                    | Component   |
+| `<c4d-top-nav-menu trigger-content="${item}">` and `<c4d-top-nav-item title="${item}">`   | `data-autoid="c4d--masthead__l0-nav--nav${item}"`                        | Interactive |
+| `<c4d-top-nav-menu-item title="${item}">`                                                 | `data-autoid="c4d--masthead__l0-nav--subnav-col${item}-item${item}"`     | Interactive |
+| `<c4d-left-nav>`                                                                          | `data-autoid="c4d--masthead__l0-sidenav"`                                | Component   |
+| `<c4d-left-nav-menu trigger-content="${item}">`                                           | `data-autoid="c4d--masthead__l0-sidenav--nav${item}"`                    | Interactive |
+| `<c4d-left-nav-menu-item title="${item}">`                                                | `data-autoid="c4d--masthead__l0-sidenav--subnav-col${item}-item${item}"` | Interactive |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/notice-choice/__stories__/README.stories.mdx b/packages/web-components/src/components/notice-choice/__stories__/README.stories.mdx
index d16c346585c..8e0e3fb6397 100644
--- a/packages/web-components/src/components/notice-choice/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/notice-choice/__stories__/README.stories.mdx
@@ -10,10 +10,10 @@ import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
 # Notice Choice
 
 > 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/notice-choice)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components/notice-choice)
 > 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/notice-choice)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/notice-choice)
 
 ## Getting started
 
@@ -61,7 +61,7 @@ document.addEventListener('cds-notice-choice-change', (event) => {
 
 ## Props
 
-<Props of="cds-notice-choice" />
+<Props of="c4d-notice-choice" />
 
 ## Stable selectors
 
@@ -71,6 +71,6 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector | Compatibility selector             | Description |
 | ----------------------- | ---------------------------------- | ----------- |
-| `<cds-notice-choice>`   | `data-autoid="cds--notice-choice"` | Component   |
+| `<c4d-notice-choice>`   | `data-autoid="c4d--notice-choice"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/pricing-table/__stories__/README.stories.mdx b/packages/web-components/src/components/pricing-table/__stories__/README.stories.mdx
index 8963323edc5..04df61153dd 100644
--- a/packages/web-components/src/components/pricing-table/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/pricing-table/__stories__/README.stories.mdx
@@ -5,10 +5,10 @@ import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
 # Structured List
 
 > 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/pricing-table)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components/pricing-table)
 > 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/pricing-table)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/pricing-table)
 
 ## Getting started
 
@@ -27,121 +27,121 @@ import '@carbon/ibmdotcom-web-components/es/components/pricing-table/index.js';
 ### HTML
 
 ```html
-<cds-pricing-table highlight-column="2" highlight-label="Featured">
-  <cds-pricing-table-head>
-    <cds-pricing-table-header-row>
-      <cds-pricing-table-header-cell type="simple"
-        >Optional table header</cds-pricing-table-header-cell
+<c4d-pricing-table highlight-column="2" highlight-label="Featured">
+  <c4d-pricing-table-head>
+    <c4d-pricing-table-header-row>
+      <c4d-pricing-table-header-cell type="simple"
+        >Optional table header</c4d-pricing-table-header-cell
       >
-      <cds-pricing-table-header-cell>
-        <cds-pricing-table-header-cell-headline
-          >Variation 1</cds-pricing-table-header-cell-headline
+      <c4d-pricing-table-header-cell>
+        <c4d-pricing-table-header-cell-headline
+          >Variation 1</c4d-pricing-table-header-cell-headline
         >
-        <cds-pricing-table-header-cell-caption
-          >Starting at $X.XX per user</cds-pricing-table-header-cell-caption
+        <c4d-pricing-table-header-cell-caption
+          >Starting at $X.XX per user</c4d-pricing-table-header-cell-caption
         >
-        <cds-pricing-table-header-cell-tag
+        <c4d-pricing-table-header-cell-tag
           href="https://www.carbondesignsystem.com/all-about-carbon/what-is-carbon/"
-          >Merchandising</cds-pricing-table-header-cell-tag
+          >Merchandising</c4d-pricing-table-header-cell-tag
         >
-        <cds-pricing-table-header-cell-description>
+        <c4d-pricing-table-header-cell-description>
           Lorem ipsum dolor sit amet consectetur.
-          <cds-unordered-list>
-            <cds-list-item>Lorem ipsum dolor</cds-list-item>
-            <cds-list-item>sit amet</cds-list-item>
-            <cds-list-item
+          <c4d-unordered-list>
+            <c4d-list-item>Lorem ipsum dolor</c4d-list-item>
+            <c4d-list-item>sit amet</c4d-list-item>
+            <c4d-list-item
               >consectetur retention adispiscing elit sed do eiusm Eiusmod
-              tempor</cds-list-item
+              tempor</c4d-list-item
             >
-          </cds-unordered-list>
-        </cds-pricing-table-header-cell-description>
-        <cds-pricing-table-header-cell-cta
+          </c4d-unordered-list>
+        </c4d-pricing-table-header-cell-description>
+        <c4d-pricing-table-header-cell-cta
           cta-type="local"
           href="https://www.carbondesignsystem.com/all-about-carbon/what-is-carbon/"
-          >Call to action</cds-pricing-table-header-cell-cta
+          >Call to action</c4d-pricing-table-header-cell-cta
         >
-      </cds-pricing-table-header-cell>
-      <cds-pricing-table-header-cell>
-        <cds-pricing-table-header-cell-headline
-          >Variation 2</cds-pricing-table-header-cell-headline
+      </c4d-pricing-table-header-cell>
+      <c4d-pricing-table-header-cell>
+        <c4d-pricing-table-header-cell-headline
+          >Variation 2</c4d-pricing-table-header-cell-headline
         >
-        <cds-pricing-table-header-cell-caption
-          >Starting at $X.XX per user</cds-pricing-table-header-cell-caption
+        <c4d-pricing-table-header-cell-caption
+          >Starting at $X.XX per user</c4d-pricing-table-header-cell-caption
         >
-        <cds-pricing-table-header-cell-description>
+        <c4d-pricing-table-header-cell-description>
           Lorem ipsum dolor sit amet consectetur.
-          <cds-unordered-list>
-            <cds-list-item>Lorem ipsum dolor</cds-list-item>
-            <cds-list-item>sit amet</cds-list-item>
-            <cds-list-item
+          <c4d-unordered-list>
+            <c4d-list-item>Lorem ipsum dolor</c4d-list-item>
+            <c4d-list-item>sit amet</c4d-list-item>
+            <c4d-list-item
               >consectetur retention adispiscing elit sed do eiusm Eiusmod
-              tempor</cds-list-item
+              tempor</c4d-list-item
             >
-          </cds-unordered-list>
-        </cds-pricing-table-header-cell-description>
-        <cds-pricing-table-header-cell-cta
+          </c4d-unordered-list>
+        </c4d-pricing-table-header-cell-description>
+        <c4d-pricing-table-header-cell-cta
           cta-type="local"
           href="https://www.carbondesignsystem.com/all-about-carbon/what-is-carbon/"
-          >Call to action</cds-pricing-table-header-cell-cta
+          >Call to action</c4d-pricing-table-header-cell-cta
         >
-      </cds-pricing-table-header-cell>
-    </cds-pricing-table-header-row>
-  </cds-pricing-table-head>
-  <cds-pricing-table-body>
-    <cds-pricing-table-row>
-      <cds-pricing-table-header-cell scope="row"
-        >Row 1</cds-pricing-table-header-cell
+      </c4d-pricing-table-header-cell>
+    </c4d-pricing-table-header-row>
+  </c4d-pricing-table-head>
+  <c4d-pricing-table-body>
+    <c4d-pricing-table-row>
+      <c4d-pricing-table-header-cell scope="row"
+        >Row 1</c4d-pricing-table-header-cell
       >
-      <cds-pricing-table-cell icon="checkmark">
-        <cds-pricing-table-cell-annotation>
+      <c4d-pricing-table-cell icon="checkmark">
+        <c4d-pricing-table-cell-annotation>
           Sed quis neque ultrices, convallis augue non, scelerisque massa.
-        </cds-pricing-table-cell-annotation>
-      </cds-pricing-table-cell>
-      <cds-pricing-table-cell>
+        </c4d-pricing-table-cell-annotation>
+      </c4d-pricing-table-cell>
+      <c4d-pricing-table-cell>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna,
         finibus id tortor sed, aliquet bibendum augue. Aenean posuere sem vel
         euismod dignissim.
-        <cds-pricing-table-cell-annotation>
+        <c4d-pricing-table-cell-annotation>
           Sed quis neque ultrices, convallis augue non, scelerisque massa.
-        </cds-pricing-table-cell-annotation>
-      </cds-pricing-table-cell>
-    </cds-pricing-table-row>
-    <cds-pricing-table-row>
-      <cds-pricing-table-header-cell scope="row"
-        >Row 2</cds-pricing-table-header-cell
+        </c4d-pricing-table-cell-annotation>
+      </c4d-pricing-table-cell>
+    </c4d-pricing-table-row>
+    <c4d-pricing-table-row>
+      <c4d-pricing-table-header-cell scope="row"
+        >Row 2</c4d-pricing-table-header-cell
       >
-      <cds-pricing-table-cell icon="checkmark"> </cds-pricing-table-cell>
-      <cds-pricing-table-cell>
+      <c4d-pricing-table-cell icon="checkmark"> </c4d-pricing-table-cell>
+      <c4d-pricing-table-cell>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna,
         finibus id tortor sed, aliquet bibendum augue. Aenean posuere sem vel
         euismod dignissim.
-      </cds-pricing-table-cell>
-    </cds-pricing-table-row>
-    <cds-pricing-table-row>
-      <cds-pricing-table-header-cell scope="row"
-        >Row 3</cds-pricing-table-header-cell
+      </c4d-pricing-table-cell>
+    </c4d-pricing-table-row>
+    <c4d-pricing-table-row>
+      <c4d-pricing-table-header-cell scope="row"
+        >Row 3</c4d-pricing-table-header-cell
       >
-      <cds-pricing-table-cell>
-        <cds-pricing-table-cell-annotation>
+      <c4d-pricing-table-cell>
+        <c4d-pricing-table-cell-annotation>
           Sed quis neque ultrices, convallis augue non, scelerisque massa.
-        </cds-pricing-table-cell-annotation>
-      </cds-pricing-table-cell>
-      <cds-pricing-table-cell>
+        </c4d-pricing-table-cell-annotation>
+      </c4d-pricing-table-cell>
+      <c4d-pricing-table-cell>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna,
         finibus id tortor sed, aliquet bibendum augue. Aenean posuere sem vel
         euismod dignissim.
-        <cds-pricing-table-cell-annotation>
+        <c4d-pricing-table-cell-annotation>
           Sed quis neque ultrices, convallis augue non, scelerisque massa.
-        </cds-pricing-table-cell-annotation>
-      </cds-pricing-table-cell>
-    </cds-pricing-table-row>
-  </cds-pricing-table-body>
-</cds-pricing-table>
+        </c4d-pricing-table-cell-annotation>
+      </c4d-pricing-table-cell>
+    </c4d-pricing-table-row>
+  </c4d-pricing-table-body>
+</c4d-pricing-table>
 ```
 
 ## Props
 
-<Props of="cds-pricing-table" />
+<Props of="c4d-pricing-table" />
 
 ## Stable selectors
 
@@ -151,6 +151,6 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector | Compatibility selector             | Description |
 | ----------------------- | ---------------------------------- | ----------- |
-| `<cds-pricing-table>`   | `data-autoid="cds--pricing-table"` | Component   |
+| `<c4d-pricing-table>`   | `data-autoid="c4d--pricing-table"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/quote/__stories__/README.stories.mdx b/packages/web-components/src/components/quote/__stories__/README.stories.mdx
index 09b1285dbdb..a7bec42f60e 100644
--- a/packages/web-components/src/components/quote/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/quote/__stories__/README.stories.mdx
@@ -11,10 +11,10 @@ import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
 # Quote
 
 > 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/quote)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components/quote)
 > 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/quote)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/quote)
 
 ## Getting started
 
diff --git a/packages/web-components/src/components/quote/__stories__/README.stories.react.mdx b/packages/web-components/src/components/quote/__stories__/README.stories.react.mdx
index e329eefa908..cec4e6c0936 100644
--- a/packages/web-components/src/components/quote/__stories__/README.stories.react.mdx
+++ b/packages/web-components/src/components/quote/__stories__/README.stories.react.mdx
@@ -10,10 +10,10 @@ import { PropTypesRef } from '@carbon/ibmdotcom-web-components/es/components-rea
 # Quote
 
 > 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/quote)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components-react/quote)
 > 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/quote)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/quote)
 
 ## Getting started
 
@@ -56,4 +56,4 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector | Compatibility selector     | Description |
 | ----------------------- | -------------------------- | ----------- |
-| `<cds-quote>`           | `data-autoid="cds--quote"` | Component   |
+| `<c4d-quote>`           | `data-autoid="c4d--quote"` | Component   |
diff --git a/packages/web-components/src/components/scroll-animations/__stories__/README.stories.mdx b/packages/web-components/src/components/scroll-animations/__stories__/README.stories.mdx
index 0bbba19bcca..196f2b90268 100644
--- a/packages/web-components/src/components/scroll-animations/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/scroll-animations/__stories__/README.stories.mdx
@@ -16,10 +16,10 @@ import {
 > Function component that handles fade transition for selected elements.
 
 > 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/scroll-animations)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components/scroll-animations)
 > 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/scroll-animations)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/scroll-animations)
 
 ## Getting started
 
@@ -27,7 +27,7 @@ import {
 
 ##### (Note: Animation effect won't be noticeable unless the page is long enough to scroll through)
 
-In order to use the `<cds-scroll-animations>` component, it needs to be wrapped
+In order to use the `<c4d-scroll-animations>` component, it needs to be wrapped
 around the elements that need to be targeted, passing in a querystring
 containing the exact identifiers to control which elements it should target.
 
@@ -60,7 +60,7 @@ import '@carbon/ibmdotcom-web-components/es/components/scroll-animations/index.j
 ## Example HTML
 
 ```html
-<cds-scroll-animations animation="fade" selector-targets=".targeted-class">
+<c4d-scroll-animations animation="fade" selector-targets=".targeted-class">
   <div class="targeted-class">
     <p>This content will fade in upon scrolled into view.</p>
   </div>
@@ -68,7 +68,7 @@ import '@carbon/ibmdotcom-web-components/es/components/scroll-animations/index.j
   <div>
     <p>This content is not included in the selector, it will not fade.</p>
   </div>
-</cds-scroll-animations>
+</c4d-scroll-animations>
 ```
 
 ### Customizing Delay
@@ -100,6 +100,6 @@ attribute (e.g. `animation='slide-left'`):
 
 ## Props
 
-<Props of="cds-scroll-animations" />
+<Props of="c4d-scroll-animations" />
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/search-with-typeahead/__stories__/README.stories.mdx b/packages/web-components/src/components/search-with-typeahead/__stories__/README.stories.mdx
index 2c2b13e9ac6..c511ea75a6f 100644
--- a/packages/web-components/src/components/search-with-typeahead/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/search-with-typeahead/__stories__/README.stories.mdx
@@ -9,10 +9,10 @@ import '../index';
 > search suggestions depending on input.
 
 > 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/search-with-typeahead)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components/search-with-typeahead)
 > 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/search-with-typeahead)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/search-with-typeahead)
 
 ## Getting started
 
@@ -38,7 +38,7 @@ button, the search bar will contract back to its single search button, ready to
 be activated again.
 
 ```html
-<cds-search-with-typeahead></search-with-typeahead>
+<c4d-search-with-typeahead></search-with-typeahead>
 ```
 
 ### Search Open On Load
@@ -48,7 +48,7 @@ page. The close functionality will still apply upon focusing out or clicking the
 close button.
 
 ```html
-<cds-search-with-typeahead active></search-with-typeahead>
+<c4d-search-with-typeahead active></search-with-typeahead>
 ```
 
 ### Search Should Remain Open
@@ -58,12 +58,12 @@ out or close button is clicked. You can combine the previous attribute with this
 one to ensure it will always be open.
 
 ```html
-<cds-search-with-typeahead should-remain-open></search-with-typeahead>
+<c4d-search-with-typeahead should-remain-open></search-with-typeahead>
 ```
 
 ## Slots
 
-<Props of="cds-search-with-typeahead" />
+<Props of="c4d-search-with-typeahead" />
 
 ## Stable selectors
 
@@ -73,6 +73,6 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector       | Compatibility selector                     | Description |
 | ----------------------------- | ------------------------------------------ | ----------- |
-| `<cds-search-with-typeahead>` | `data-autoid="cds--search-with-typeahead"` | Component   |
+| `<c4d-search-with-typeahead>` | `data-autoid="c4d--search-with-typeahead"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/search-with-typeahead/__stories__/README.stories.react.mdx b/packages/web-components/src/components/search-with-typeahead/__stories__/README.stories.react.mdx
index 0e4f687fa23..ca01c5cd04d 100644
--- a/packages/web-components/src/components/search-with-typeahead/__stories__/README.stories.react.mdx
+++ b/packages/web-components/src/components/search-with-typeahead/__stories__/README.stories.react.mdx
@@ -10,10 +10,10 @@ import { PropTypesRef } from '@carbon/ibmdotcom-web-components/es/components-rea
 # Search with Typeahead
 
 > 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/search-with-typeahead)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components-react/search-with-typeahead)
 > 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/search-with-typeahead)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/search-with-typeahead)
 
 ## Getting started
 
@@ -54,6 +54,6 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector       | Compatibility selector                    | Description |
 | ----------------------------- | ----------------------------------------- | ----------- |
-| `<cds-search-with-typeahead>` | `data-autoid="cds--search-with-typeahead` | Component   |
+| `<c4d-search-with-typeahead>` | `data-autoid="c4d--search-with-typeahead` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/structured-list/__stories__/README.stories.mdx b/packages/web-components/src/components/structured-list/__stories__/README.stories.mdx
index 48555b9256c..0c695ebd603 100644
--- a/packages/web-components/src/components/structured-list/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/structured-list/__stories__/README.stories.mdx
@@ -6,10 +6,10 @@ import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
 # Structured List
 
 > 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/structured-list)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components/structured-list)
 > 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/structured-list)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/structured-list)
 
 ## Getting started
 
@@ -28,55 +28,55 @@ import '@carbon/ibmdotcom-web-components/es/components/structured-list/index.js'
 ### HTML
 
 ```html
-<cds-structured-list>
-  <cds-structured-list-head>
-    <cds-structured-list-header-row>
-      <cds-structured-list-header-cell
-        >Column A</cds-structured-list-header-cell
+<c4d-structured-list>
+  <c4d-structured-list-head>
+    <c4d-structured-list-header-row>
+      <c4d-structured-list-header-cell
+        >Column A</c4d-structured-list-header-cell
       >
-      <cds-structured-list-header-cell
-        >Column B</cds-structured-list-header-cell
+      <c4d-structured-list-header-cell
+        >Column B</c4d-structured-list-header-cell
       >
-      <cds-structured-list-header-cell
-        >Column C</cds-structured-list-header-cell
+      <c4d-structured-list-header-cell
+        >Column C</c4d-structured-list-header-cell
       >
-    </cds-structured-list-header-row>
-  </cds-structured-list-head>
-  <cds-structured-list-body>
-    <cds-structured-list-row>
-      <cds-structured-list-cell>Row 1</cds-structured-list-cell>
-      <cds-structured-list-cell>Row 1</cds-structured-list-cell>
-      <cds-structured-list-cell>
+    </c4d-structured-list-header-row>
+  </c4d-structured-list-head>
+  <c4d-structured-list-body>
+    <c4d-structured-list-row>
+      <c4d-structured-list-cell>Row 1</c4d-structured-list-cell>
+      <c4d-structured-list-cell>Row 1</c4d-structured-list-cell>
+      <c4d-structured-list-cell>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna,
         finibus id tortor sed, aliquet bibendum augue. Aenean posuere sem vel
         euismod dignissim.
-      </cds-structured-list-cell>
-    </cds-structured-list-row>
-    <cds-structured-list-row>
-      <cds-structured-list-cell>Row 2</cds-structured-list-cell>
-      <cds-structured-list-cell>Row 2</cds-structured-list-cell>
-      <cds-structured-list-cell>
+      </c4d-structured-list-cell>
+    </c4d-structured-list-row>
+    <c4d-structured-list-row>
+      <c4d-structured-list-cell>Row 2</c4d-structured-list-cell>
+      <c4d-structured-list-cell>Row 2</c4d-structured-list-cell>
+      <c4d-structured-list-cell>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna,
         finibus id tortor sed, aliquet bibendum augue. Aenean posuere sem vel
         euismod dignissim.
-      </cds-structured-list-cell>
-    </cds-structured-list-row>
-    <cds-structured-list-row>
-      <cds-structured-list-cell>Row 3</cds-structured-list-cell>
-      <cds-structured-list-cell>Row 3</cds-structured-list-cell>
-      <cds-structured-list-cell>
+      </c4d-structured-list-cell>
+    </c4d-structured-list-row>
+    <c4d-structured-list-row>
+      <c4d-structured-list-cell>Row 3</c4d-structured-list-cell>
+      <c4d-structured-list-cell>Row 3</c4d-structured-list-cell>
+      <c4d-structured-list-cell>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna,
         finibus id tortor sed, aliquet bibendum augue. Aenean posuere sem vel
         euismod dignissim.
-      </cds-structured-list-cell>
-    </cds-structured-list-row>
-  </cds-structured-list-body>
-</cds-structured-list>
+      </c4d-structured-list-cell>
+    </c4d-structured-list-row>
+  </c4d-structured-list-body>
+</c4d-structured-list>
 ```
 
 ## Props
 
-<Props of="cds-structured-list" />
+<Props of="c4d-structured-list" />
 
 ## Stable selectors
 
@@ -86,6 +86,6 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector | Compatibility selector               | Description |
 | ----------------------- | ------------------------------------ | ----------- |
-| `<cds-structured-list>` | `data-autoid="cds--structured-list"` | Component   |
+| `<c4d-structured-list>` | `data-autoid="c4d--structured-list"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/structured-list/__stories__/README.stories.react.mdx b/packages/web-components/src/components/structured-list/__stories__/README.stories.react.mdx
index 850519cbf51..286f6097673 100644
--- a/packages/web-components/src/components/structured-list/__stories__/README.stories.react.mdx
+++ b/packages/web-components/src/components/structured-list/__stories__/README.stories.react.mdx
@@ -5,10 +5,10 @@ import { PropTypesRef } from '@carbon/ibmdotcom-web-components/es/components-rea
 # Structured List
 
 > 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/structured-list)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components-react/structured-list)
 > 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/structured-list)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/structured-list)
 
 ## Getting started
 
@@ -96,6 +96,6 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector | Compatibility selector               | Description |
 | ----------------------- | ------------------------------------ | ----------- |
-| `<cds-structured-list>` | `data-autoid="cds--structured-list"` | Component   |
+| `<c4d-structured-list>` | `data-autoid="c4d--structured-list"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/table-of-contents/__stories__/README.stories.mdx b/packages/web-components/src/components/table-of-contents/__stories__/README.stories.mdx
index ebb8fdb1fd4..1042819ef3e 100644
--- a/packages/web-components/src/components/table-of-contents/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/table-of-contents/__stories__/README.stories.mdx
@@ -6,17 +6,17 @@ import {
   cdnCssAdditional,
 } from '../../../globals/internal/storybook-cdn';
 
-# `<cds-table-of-contents>`
+# `<c4d-table-of-contents>`
 
 > Table of contents display pre-defined sections of the page and provide a
 > convenient way to navigate to those sections. It also sticks to the top of the
 > page when scrolling for easy access.
 
 > 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/table-of-contents)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components/table-of-contents)
 > 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/table-of-contents)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/table-of-contents)
 
 ## Getting started
 
@@ -62,7 +62,7 @@ body {
 ## Example HTML
 
 ```html
-<cds-table-of-contents>
+<c4d-table-of-contents>
   <div class="cds--tableofcontents__contents">
     <a name="1" data-title="Section - 1"></a>
     <h3>Section - 1</h3>
@@ -74,13 +74,13 @@ body {
     <h3>Section - 3</h3>
     <p>Section 3 content</p>
   </div>
-</cds-table-of-contents>
+</c4d-table-of-contents>
 ```
 
 ### Horizontal variation
 
 ```html
-<cds-table-of-contents toc-layout="horizontal">
+<c4d-table-of-contents toc-layout="horizontal">
   <div class="cds--tableofcontents-horizontal__contents">
     <a name="1" data-title="Section - 1"></a>
     <h3>Section - 1</h3>
@@ -92,21 +92,21 @@ body {
     <h3>Section - 3</h3>
     <p>Section 3 content</p>
   </div>
-</cds-table-of-contents>
+</c4d-table-of-contents>
 ```
 
 ## Harvesting the table of contents
 
-`<cds-table-of-contents>` automatically harvests the table of contents by
+`<c4d-table-of-contents>` automatically harvests the table of contents by
 looking for elements with the `name` attribute. The titles in the table of
 contents are harvested from the text content in the element by default. You can
 add `data-title` attribute to the elements to change the titles.
 
 ## Adjusting the position of `<select>` box
 
-`<cds-table-of-contents>` uses `<select>` as the table if the browser viewport
+`<c4d-table-of-contents>` uses `<select>` as the table if the browser viewport
 has narrow width. It sticks at the very top by default, but you can adjust the
-position via CSS. This is useful e.g. when you use `<cds-table-of-contents>`
+position via CSS. This is useful e.g. when you use `<c4d-table-of-contents>`
 with ibm.com masthead.
 
 ```css
@@ -132,7 +132,7 @@ document.dispatchEvent(
 
 ## Slots
 
-<Props of="cds-table-of-contents" />
+<Props of="c4d-table-of-contents" />
 
 ## Stable selectors
 
@@ -142,6 +142,6 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector   | Compatibility selector               | Description |
 | ------------------------- | ------------------------------------ | ----------- |
-| `<cds-table-of-contents>` | `data-autoid="cds--tableofcontents"` | Component   |
+| `<c4d-table-of-contents>` | `data-autoid="c4d--tableofcontents"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/table-of-contents/__stories__/README.stories.react.mdx b/packages/web-components/src/components/table-of-contents/__stories__/README.stories.react.mdx
index 13ea9d0b54f..5e6921ac2c8 100644
--- a/packages/web-components/src/components/table-of-contents/__stories__/README.stories.react.mdx
+++ b/packages/web-components/src/components/table-of-contents/__stories__/README.stories.react.mdx
@@ -10,10 +10,10 @@ import { PropTypesRef } from '@carbon/ibmdotcom-web-components/es/components-rea
 # Table Of Contents
 
 > 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/table-of-contents)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components-react/table-of-contents)
 > 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/table-of-contents)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/table-of-contents)
 
 ## Getting started
 
@@ -67,16 +67,16 @@ function App() {
 
 ## Harvesting the table of contents
 
-`<cds-table-of-contents>` automatically harvests the table of contents by
+`<c4d-table-of-contents>` automatically harvests the table of contents by
 looking for `<a>`s with their `name` attribute. The titles in the table of
 contents are harvested from the text content in `<a>` by default. You can add
 `data-title` attribute to the `<a>`s to change the titles.
 
 ## Adjusting the position of `<select>` box
 
-`<cds-table-of-contents>` uses `<select>` as the table if the browser viewport
+`<c4d-table-of-contents>` uses `<select>` as the table if the browser viewport
 has narrow width. It sticks at the very top by default, but you can adjust the
-position via CSS. This is useful e.g. when you use `<cds-table-of-contents>`
+position via CSS. This is useful e.g. when you use `<c4d-table-of-contents>`
 with ibm.com masthead.
 
 ```css
@@ -97,6 +97,6 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector   | Compatibility selector | Description |
 | ------------------------- | ---------------------- | ----------- |
-| `<cds-table-of-contents>` | N/A                    | Component   |
+| `<c4d-table-of-contents>` | N/A                    | Component   |
 
 <Description markdown={contributing} />
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 2a695c8af88..29db86af4d3 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
@@ -3,15 +3,15 @@ import contributing from '../../../../../../docs/contributing-license.md';
 import markdownContents from '../../../../docs/markdown-contents.md';
 import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
 
-# `<cds-tabs-extended-media>`
+# `<c4d-tabs-extended-media>`
 
-> The Tabs extended with media - Tabbed collection of `<cds-tab>` content items.
+> The Tabs extended with media - Tabbed collection of `<c4d-tab>` content items.
 
 > 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/tabs-extended-media)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components/tabs-extended-media)
 > 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/tabs-extended-media)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/tabs-extended-media)
 
 ## Getting started
 
@@ -30,44 +30,44 @@ import '@carbon/ibmdotcom-web-components/es/components/tabs-extended-media/index
 ### HTML
 
 ```html
-<cds-tabs-extended-media>
-  <cds-content-section-heading>Section heading</cds-content-section-heading>
-  <cds-tab label="First tab">
-    <cds-content-item-row-media align="right">
-      <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="right">
+      <c4d-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-row-copy
+        default-src="https://fpoimg.com/672x336?text=2:1&bg_color=ee5396&text_color=161616"></c4d-image>
+      <c4d-content-item-heading>Aliquam condimentum</c4d-content-item-heading>
+      <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.</cds-content-item-row-copy
+        elit sollicitudin.</c4d-content-item-row-copy
       >
-      <cds-link-list slot="footer" type="vertical">
-        <cds-link-list-item-cta
+      <c4d-link-list slot="footer" type="vertical">
+        <c4d-link-list-item-cta
           icon-placement="right"
           href="https://www.ibm.com"
           cta-type="local">
           Learn more
-        </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">
           Microservices and containers
-        </cds-link-list-item-cta>
-      </cds-link-list>
-    </cds-content-item-row-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>
 ```
 
 ## Props
 
-### `<cds-tab>`
+### `<c4d-tab>`
 
-<Props of="cds-tab" />
+<Props of="c4d-tab" />
 <Description markdown={markdownContents} />
 
 ## Stable selectors
@@ -78,6 +78,6 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector     | Compatibility selector                   | Description |
 | --------------------------- | ---------------------------------------- | ----------- |
-| `<cds-tabs-extended-media>` | `data-autoid="cds--tabs-extended-media"` | Component   |
+| `<c4d-tabs-extended-media>` | `data-autoid="c4d--tabs-extended-media"` | Component   |
 
 <Description markdown={contributing} />
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 ce5e4f68203..2cfc08765cf 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
@@ -10,10 +10,10 @@ import { PropTypesRef } from '@carbon/ibmdotcom-web-components/es/components-rea
 # Tabs Extended Media
 
 > 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/tabs-extended-media)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components-react/tabs-extended-media)
 > 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/tabs-extended-media)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/tabs-extended-media)
 
 ## Getting started
 
@@ -157,6 +157,6 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector     | Compatibility selector | Description |
 | --------------------------- | ---------------------- | ----------- |
-| `<cds-tabs-extended-media>` | N/A                    | Component   |
+| `<c4d-tabs-extended-media>` | N/A                    | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/tabs-extended/__stories__/README.stories.mdx b/packages/web-components/src/components/tabs-extended/__stories__/README.stories.mdx
index 58899371657..3884740aa21 100644
--- a/packages/web-components/src/components/tabs-extended/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/tabs-extended/__stories__/README.stories.mdx
@@ -3,15 +3,15 @@ import contributing from '../../../../../../docs/contributing-license.md';
 import markdownContents from '../../../../docs/markdown-contents.md';
 import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
 
-# `<cds-tabs-extended>`
+# `<c4d-tabs-extended>`
 
-> The Tabs Extended - Tabbed collection of `<cds-tab>` content items.
+> The Tabs Extended - Tabbed collection of `<c4d-tab>` content items.
 
 > 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/tabs-extended)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components/tabs-extended)
 > 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/tabs-extended)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/tabs-extended)
 
 ## Getting started
 
@@ -30,23 +30,23 @@ import '@carbon/ibmdotcom-web-components/es/components/tabs-extended/index.js';
 ### HTML
 
 ```html
-<cds-tabs-extended orientation="horizontal">
-  <cds-tab label="First tab">
+<c4d-tabs-extended orientation="horizontal">
+  <c4d-tab label="First tab">
     <p>Content for first tab goes here.</p>
-  </cds-tab>
-  <cds-tab label="Second tab">
+  </c4d-tab>
+  <c4d-tab label="Second tab">
     <p>Content for second tab goes here.</p>
-  </cds-tab>
-  <cds-tab label="Third tab" selected="true">
+  </c4d-tab>
+  <c4d-tab label="Third tab" selected="true">
     <p>Content for third tab goes here.</p>
-  </cds-tab>
-  <cds-tab label="Fourth tab">
+  </c4d-tab>
+  <c4d-tab label="Fourth tab">
     <p>Content for fourth tab goes here.</p>
-  </cds-tab>
-  <cds-tab label="Fifth tab" disabled="true">
+  </c4d-tab>
+  <c4d-tab label="Fifth tab" disabled="true">
     <p>Content for fifth tab goes here.</p>
-  </cds-tab>
-</cds-tabs-extended>
+  </c4d-tab>
+</c4d-tabs-extended>
 ```
 
 ## Setting active tab
@@ -58,30 +58,30 @@ Here's an example targetting the third tab. Note that the indexing starts at 0,
 which means the third tab is the one at index 2.
 
 ```html
-<cds-tabs-extended active-tab="2" orientation="horizontal">
-  <cds-tab label="First tab">
+<c4d-tabs-extended active-tab="2" orientation="horizontal">
+  <c4d-tab label="First tab">
     <p>Content for first tab goes here.</p>
-  </cds-tab>
-  <cds-tab label="Second tab">
+  </c4d-tab>
+  <c4d-tab label="Second tab">
     <p>Content for second tab goes here.</p>
-  </cds-tab>
-  <cds-tab label="Third tab" selected="true">
+  </c4d-tab>
+  <c4d-tab label="Third tab" selected="true">
     <p>Content for third tab goes here.</p>
-  </cds-tab>
-  <cds-tab label="Fourth tab">
+  </c4d-tab>
+  <c4d-tab label="Fourth tab">
     <p>Content for fourth tab goes here.</p>
-  </cds-tab>
-  <cds-tab label="Fifth tab" disabled="true">
+  </c4d-tab>
+  <c4d-tab label="Fifth tab" disabled="true">
     <p>Content for fifth tab goes here.</p>
-  </cds-tab>
-</cds-tabs-extended>
+  </c4d-tab>
+</c4d-tabs-extended>
 ```
 
 ## Props
 
-### `<cds-tab>`
+### `<c4d-tab>`
 
-<Props of="cds-tab" />
+<Props of="c4d-tab" />
 <Description markdown={markdownContents} />
 
 ## Stable selectors
@@ -92,7 +92,7 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector | Compatibility selector             | Description |
 | ----------------------- | ---------------------------------- | ----------- |
-| `<cds-tabs-extended>`   | `data-autoid="cds--tabs-extended"` | Component   |
-| `<cds-tab>`             | `data-autoid="cds--tab"`           | Component   |
+| `<c4d-tabs-extended>`   | `data-autoid="c4d--tabs-extended"` | Component   |
+| `<c4d-tab>`             | `data-autoid="c4d--tab"`           | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/tabs-extended/__stories__/README.stories.react.mdx b/packages/web-components/src/components/tabs-extended/__stories__/README.stories.react.mdx
index 03024263e4f..6ab315522c3 100644
--- a/packages/web-components/src/components/tabs-extended/__stories__/README.stories.react.mdx
+++ b/packages/web-components/src/components/tabs-extended/__stories__/README.stories.react.mdx
@@ -10,10 +10,10 @@ import { PropTypesRef } from '@carbon/ibmdotcom-web-components/es/components-rea
 # Tabs Extended
 
 > 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/tabs-extended)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components-react/tabs-extended)
 > 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/tabs-extended)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/tabs-extended)
 
 ## Getting started
 
@@ -80,7 +80,7 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector | Compatibility selector | Description |
 | ----------------------- | ---------------------- | ----------- |
-| `<cds-tabs-extended>`   | N/A                    | Component   |
-| `<cds-tab>`             | N/A                    | Component   |
+| `<c4d-tabs-extended>`   | N/A                    | Component   |
+| `<c4d-tab>`             | N/A                    | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/video-player/__stories__/README.stories.mdx b/packages/web-components/src/components/video-player/__stories__/README.stories.mdx
index 6185f4f9f4b..dd5249f9891 100644
--- a/packages/web-components/src/components/video-player/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/video-player/__stories__/README.stories.mdx
@@ -25,8 +25,8 @@ import '@carbon/ibmdotcom-web-components/es/components/video-player/index.js';
 ### HTML
 
 ```html
-<cds-video-player-container id="my-video" video-id="0_ibuqxqbe">
-</cds-video-player-container>
+<c4d-video-player-container id="my-video" video-id="0_ibuqxqbe">
+</c4d-video-player-container>
 ```
 
 ## Manual usage of Kaltura API
@@ -57,7 +57,7 @@ KalturaPlayerAPI.checkScript().then(() => {
 });
 ```
 
-> 💡 We don't test `<cds-video-player>` against arbitrary usage of Kaltura API.
+> 💡 We don't test `<c4d-video-player>` against arbitrary usage of Kaltura API.
 > Use this technique at your own risk.
 
 ## Video player with onClick Lightbox Trigger
@@ -80,20 +80,20 @@ import '@carbon/ibmdotcom-web-components/es/components/lightbox-media-viewer/lig
 ### HTML
 
 ```html
-<cds-video-player-container
+<c4d-video-player-container
   video-id="0_ibuqxqbe"
   aspect-ratio="16x9"
-  playing-mode="lightbox"></cds-video-player-container>
-<cds-lightbox-video-player-container></cds-lightbox-video-player-container>
+  playing-mode="lightbox"></c4d-video-player-container>
+<c4d-lightbox-video-player-container></c4d-lightbox-video-player-container>
 ```
 
 ## Under the Hood
 
-### `<cds-video-player>`
+### `<c4d-video-player>`
 
-`<cds-video-player>` works as the video player in lightbox media viewer.
+`<c4d-video-player>` works as the video player in lightbox media viewer.
 
-<Props of="cds-video-player" />
+<Props of="c4d-video-player" />
 
 ## Stable selectors
 
@@ -103,6 +103,6 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector | Compatibility selector | Description |
 | ----------------------- | ---------------------- | ----------- |
-| `<cds-video-player>`    | N/A                    | Component   |
+| `<c4d-video-player>`    | N/A                    | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/video-player/__stories__/README.stories.react.mdx b/packages/web-components/src/components/video-player/__stories__/README.stories.react.mdx
index ece52779372..f53047ce224 100644
--- a/packages/web-components/src/components/video-player/__stories__/README.stories.react.mdx
+++ b/packages/web-components/src/components/video-player/__stories__/README.stories.react.mdx
@@ -10,10 +10,10 @@ import { PropTypesRef } from '@carbon/ibmdotcom-web-components/es/components-rea
 # Video Player
 
 > 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/video-player)
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components-react/video-player)
 > 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/video-player)
+[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/video-player)
 
 ## Getting started