From 4f7d48f498a4bcee6cf9e12674c8af639daf8567 Mon Sep 17 00:00:00 2001
From: Jeff Chew <jeff.chew@gmail.com>
Date: Thu, 21 Oct 2021 12:55:09 -0400
Subject: [PATCH] docs(web-components): adding code links for web components
 (#2588)

* docs(web-components): adding code links for web components

* fix(components): fixing quotes for web components

* docs(components): adding web components links to usage tabs

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
---
 src/pages/components/UI-shell-header/code.mdx     | 10 ++++++++++
 src/pages/components/UI-shell-left-panel/code.mdx | 10 ++++++++++
 src/pages/components/accordion/code.mdx           | 11 +++++++++++
 src/pages/components/accordion/usage.mdx          |  1 +
 src/pages/components/breadcrumb/code.mdx          | 12 ++++++++++++
 src/pages/components/breadcrumb/usage.mdx         |  2 ++
 src/pages/components/button/code.mdx              | 13 +++++++++++++
 src/pages/components/button/usage.mdx             |  3 +++
 src/pages/components/checkbox/code.mdx            | 11 +++++++++++
 src/pages/components/checkbox/usage.mdx           |  1 +
 src/pages/components/code-snippet/code.mdx        | 13 +++++++++++++
 src/pages/components/code-snippet/usage.mdx       |  3 +++
 src/pages/components/content-switcher/code.mdx    | 11 +++++++++++
 src/pages/components/content-switcher/usage.mdx   |  1 +
 src/pages/components/data-table/code.mdx          | 14 ++++++++++++++
 src/pages/components/data-table/usage.mdx         |  4 ++++
 src/pages/components/date-picker/code.mdx         | 14 ++++++++++++++
 src/pages/components/date-picker/usage.mdx        |  4 ++++
 src/pages/components/dropdown/code.mdx            | 14 ++++++++++++++
 src/pages/components/dropdown/usage.mdx           |  4 ++++
 src/pages/components/file-uploader/code.mdx       | 13 +++++++++++++
 src/pages/components/file-uploader/usage.mdx      |  3 +++
 src/pages/components/form/code.mdx                | 11 +++++++++++
 src/pages/components/form/usage.mdx               |  1 +
 src/pages/components/inline-loading/code.mdx      | 11 +++++++++++
 src/pages/components/inline-loading/usage.mdx     |  1 +
 src/pages/components/link/code.mdx                | 11 +++++++++++
 src/pages/components/link/usage.mdx               |  1 +
 src/pages/components/list/code.mdx                | 12 ++++++++++++
 src/pages/components/list/usage.mdx               |  2 ++
 src/pages/components/loading/code.mdx             | 11 +++++++++++
 src/pages/components/loading/usage.mdx            |  1 +
 src/pages/components/modal/code.mdx               | 14 ++++++++++++++
 src/pages/components/modal/usage.mdx              |  4 ++++
 src/pages/components/notification/code.mdx        | 12 ++++++++++++
 src/pages/components/notification/usage.mdx       |  2 ++
 src/pages/components/number-input/code.mdx        | 12 ++++++++++++
 src/pages/components/number-input/usage.mdx       |  2 ++
 src/pages/components/overflow-menu/code.mdx       | 11 +++++++++++
 src/pages/components/overflow-menu/usage.mdx      |  1 +
 src/pages/components/pagination/code.mdx          | 11 +++++++++++
 src/pages/components/pagination/usage.mdx         |  1 +
 src/pages/components/progress-indicator/code.mdx  | 11 +++++++++++
 src/pages/components/progress-indicator/usage.mdx |  1 +
 src/pages/components/radio-button/code.mdx        | 11 +++++++++++
 src/pages/components/radio-button/usage.mdx       |  1 +
 src/pages/components/search/code.mdx              | 11 +++++++++++
 src/pages/components/search/usage.mdx             |  1 +
 src/pages/components/select/code.mdx              | 11 +++++++++++
 src/pages/components/select/usage.mdx             |  1 +
 src/pages/components/slider/code.mdx              | 11 +++++++++++
 src/pages/components/slider/usage.mdx             |  1 +
 src/pages/components/structured-list/code.mdx     | 12 ++++++++++++
 src/pages/components/structured-list/usage.mdx    |  2 ++
 src/pages/components/tabs/code.mdx                | 11 +++++++++++
 src/pages/components/tabs/usage.mdx               |  1 +
 src/pages/components/tag/code.mdx                 | 11 +++++++++++
 src/pages/components/tag/usage.mdx                |  1 +
 src/pages/components/text-input/code.mdx          | 13 +++++++++++++
 src/pages/components/text-input/usage.mdx         |  3 +++
 src/pages/components/tile/code.mdx                | 15 +++++++++++++++
 src/pages/components/tile/usage.mdx               |  5 +++++
 src/pages/components/toggle/code.mdx              | 12 ++++++++++++
 src/pages/components/toggle/usage.mdx             |  2 ++
 src/pages/components/tooltip/code.mdx             | 13 +++++++++++++
 src/pages/components/tooltip/usage.mdx            |  3 +++
 66 files changed, 468 insertions(+)

diff --git a/src/pages/components/UI-shell-header/code.mdx b/src/pages/components/UI-shell-header/code.mdx
index 2c392d4104b..755e6d9cd16 100644
--- a/src/pages/components/UI-shell-header/code.mdx
+++ b/src/pages/components/UI-shell-header/code.mdx
@@ -46,6 +46,16 @@ the Storybooks for each framework below.
 
   </ResourceCard>
 </Column>
+<Column colLg={4} colMd={4} noGutterSm>
+  <ResourceCard
+      subTitle="Web Components (Community)"
+      href="https://web-components.carbondesignsystem.com/?path=/story/components-ui-shell--header"
+      >
+
+<MdxIcon name="webcomponents" />
+
+  </ResourceCard>
+</Column>
 </Row>
 
 ## Demo
diff --git a/src/pages/components/UI-shell-left-panel/code.mdx b/src/pages/components/UI-shell-left-panel/code.mdx
index b58d01733cb..a3103367593 100644
--- a/src/pages/components/UI-shell-left-panel/code.mdx
+++ b/src/pages/components/UI-shell-left-panel/code.mdx
@@ -46,6 +46,16 @@ see the Storybooks for each framework below.
 
   </ResourceCard>
 </Column>
+<Column colLg={4} colMd={4} noGutterSm>
+  <ResourceCard
+      subTitle="Web Components (Community)"
+      href="https://web-components.carbondesignsystem.com/?path=/story/components-ui-shell--side-nav"
+      >
+
+<MdxIcon name="webcomponents" />
+
+  </ResourceCard>
+</Column>
 </Row>
 
 ## Demo
diff --git a/src/pages/components/accordion/code.mdx b/src/pages/components/accordion/code.mdx
index 8ae84b37b8c..cae7f9a1c3a 100755
--- a/src/pages/components/accordion/code.mdx
+++ b/src/pages/components/accordion/code.mdx
@@ -47,6 +47,16 @@ usage documentation, see the Storybooks for each framework below.
 
   </ResourceCard>
 </Column>
+<Column colLg={4} colMd={4} noGutterSm>
+  <ResourceCard
+      subTitle="Web Components (Community)"
+      href="https://web-components.carbondesignsystem.com/?path=/story/components-accordion--default"
+      >
+
+<MdxIcon name="webcomponents" />
+
+  </ResourceCard>
+</Column>
 </Row>
 
 ## Live demo
@@ -72,6 +82,7 @@ usage documentation, see the Storybooks for each framework below.
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvaccordion--default',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=accordion',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-accordion--default',
     }}>
     {`
   <Accordion>
diff --git a/src/pages/components/accordion/usage.mdx b/src/pages/components/accordion/usage.mdx
index f6cb46d6d6a..b7cbf842316 100755
--- a/src/pages/components/accordion/usage.mdx
+++ b/src/pages/components/accordion/usage.mdx
@@ -69,6 +69,7 @@ extra click; instead use a full scrolling page with normal headers.
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvaccordion--default',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=accordion',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-accordion--default',
     }}>
     {`
   <Accordion>
diff --git a/src/pages/components/breadcrumb/code.mdx b/src/pages/components/breadcrumb/code.mdx
index 3ec541d5da0..ab084e4b340 100755
--- a/src/pages/components/breadcrumb/code.mdx
+++ b/src/pages/components/breadcrumb/code.mdx
@@ -46,6 +46,16 @@ usage documentation, see the Storybooks for each framework below.
 
   </ResourceCard>
 </Column>
+<Column colLg={4} colMd={4} noGutterSm>
+  <ResourceCard
+      subTitle="Web Components (Community)"
+      href="https://web-components.carbondesignsystem.com/?path=/story/components-breadcrumb--default"
+      >
+
+<MdxIcon name="webcomponents" />
+
+  </ResourceCard>
+</Column>
 </Row>
 
 ## Live demo
@@ -68,6 +78,7 @@ usage documentation, see the Storybooks for each framework below.
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvbreadcrumb--default',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=breadcrumb',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-breadcrumb--default',
     }}>{`
 <Breadcrumb noTrailingSlash>
   <BreadcrumbItem href="/">Breadcrumb 1</BreadcrumbItem>
@@ -85,6 +96,7 @@ usage documentation, see the Storybooks for each framework below.
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvbreadcrumb--default',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=breadcrumb',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-breadcrumb--default',
     }}>{`
 <Breadcrumb>
   <BreadcrumbItem href="/">Breadcrumb 1</BreadcrumbItem>
diff --git a/src/pages/components/breadcrumb/usage.mdx b/src/pages/components/breadcrumb/usage.mdx
index 26e7fdca5a3..fce702a96ce 100755
--- a/src/pages/components/breadcrumb/usage.mdx
+++ b/src/pages/components/breadcrumb/usage.mdx
@@ -79,6 +79,7 @@ type used should be consistent across a product.
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvbreadcrumb--default',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=breadcrumb',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-breadcrumb--default',
     }}>{`
 <Breadcrumb noTrailingSlash>
   <BreadcrumbItem href="/">Breadcrumb 1</BreadcrumbItem>
@@ -96,6 +97,7 @@ type used should be consistent across a product.
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvbreadcrumb--default',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=breadcrumb',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-breadcrumb--default',
     }}>{`
 <Breadcrumb>
   <BreadcrumbItem href="/">Breadcrumb 1</BreadcrumbItem>
diff --git a/src/pages/components/button/code.mdx b/src/pages/components/button/code.mdx
index bbf669317d8..f723acce83d 100755
--- a/src/pages/components/button/code.mdx
+++ b/src/pages/components/button/code.mdx
@@ -48,6 +48,16 @@ documentation, see the Storybooks for each framework below.
 
   </ResourceCard>
 </Column>
+<Column colLg={4} colMd={4} noGutterSm>
+  <ResourceCard
+      subTitle="Web Components (Community)"
+      href="https://web-components.carbondesignsystem.com/?path=/story/components-button--default"
+      >
+
+<MdxIcon name="webcomponents" />
+
+  </ResourceCard>
+</Column>
 </Row>
 
 ## Live demo
@@ -81,6 +91,7 @@ documentation, see the Storybooks for each framework below.
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvbutton--default',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=button',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-button--default',
     }}>{`
       <Button>Button</Button>
     `}</ComponentVariant>
@@ -97,6 +108,7 @@ documentation, see the Storybooks for each framework below.
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvbutton--default',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=button',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-button--default',
     }}>{`
       <Button renderIcon={Add16}>Button</Button>
     `}</ComponentVariant>
@@ -113,6 +125,7 @@ documentation, see the Storybooks for each framework below.
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvbutton--icon-only',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=button',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-button--icon',
     }}>{`
       <Button
         hasIconOnly
diff --git a/src/pages/components/button/usage.mdx b/src/pages/components/button/usage.mdx
index 1fc946ad02f..7e98a826cd8 100755
--- a/src/pages/components/button/usage.mdx
+++ b/src/pages/components/button/usage.mdx
@@ -111,6 +111,7 @@ import { Add16 } from '@carbon/icons-react';
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvbutton--default',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=button',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-button--default',
     }}>{`
       <Button>Button</Button>
     `}</ComponentVariant>
@@ -127,6 +128,7 @@ import { Add16 } from '@carbon/icons-react';
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvbutton--default',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=button',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-button--default',
     }}>{`
       <Button renderIcon={Add16}>Button</Button>
     `}</ComponentVariant>
@@ -143,6 +145,7 @@ import { Add16 } from '@carbon/icons-react';
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvbutton--icon-only',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=button',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-button--icon',
     }}>{`
       <Button
         hasIconOnly
diff --git a/src/pages/components/checkbox/code.mdx b/src/pages/components/checkbox/code.mdx
index 6b71d9c78c8..28be0f0d790 100755
--- a/src/pages/components/checkbox/code.mdx
+++ b/src/pages/components/checkbox/code.mdx
@@ -46,6 +46,16 @@ documentation, see the Storybooks for each framework below.
 
   </ResourceCard>
 </Column>
+<Column colLg={4} colMd={4} noGutterSm>
+  <ResourceCard
+      subTitle="Web Components (Community)"
+      href="https://web-components.carbondesignsystem.com/?path=/story/components-checkbox--default"
+      >
+
+<MdxIcon name="webcomponents" />
+
+  </ResourceCard>
+</Column>
 </Row>
 
 ## Live demo
@@ -68,6 +78,7 @@ documentation, see the Storybooks for each framework below.
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvcheckbox--default',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=checkbox',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-checkbox--default',
     }}>{`
 <fieldset className="bx--fieldset">
   <legend className="bx--label">Checkbox heading</legend>
diff --git a/src/pages/components/checkbox/usage.mdx b/src/pages/components/checkbox/usage.mdx
index 912a8d33aa3..8e00ace30a0 100755
--- a/src/pages/components/checkbox/usage.mdx
+++ b/src/pages/components/checkbox/usage.mdx
@@ -107,6 +107,7 @@ set whereas radio buttons allow the user to select only one option.
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvcheckbox--default',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=checkbox',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-checkbox--default',
     }}>{`
 <fieldset className="bx--fieldset">
   <legend className="bx--label">Checkbox heading</legend>
diff --git a/src/pages/components/code-snippet/code.mdx b/src/pages/components/code-snippet/code.mdx
index 278a11c94dd..b73fc692cc0 100755
--- a/src/pages/components/code-snippet/code.mdx
+++ b/src/pages/components/code-snippet/code.mdx
@@ -46,6 +46,16 @@ usage documentation, see the Storybooks for each framework below.
 
   </ResourceCard>
 </Column>
+<Column colLg={4} colMd={4} noGutterSm>
+  <ResourceCard
+      subTitle="Web Components (Community)"
+      href="https://web-components.carbondesignsystem.com/?path=/story/components-code-snippet--single-line"
+      >
+
+<MdxIcon name="webcomponents" />
+
+  </ResourceCard>
+</Column>
 </Row>
 
 ## Live demo
@@ -82,6 +92,7 @@ import {
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvcodesnippet--default',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=code-snippet',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-code-snippet--single-line',
     }}>{`
     <CodeSnippet type="single">
     ${codeSnippetSingle}
@@ -98,6 +109,7 @@ import {
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvcodesnippet--default',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=code-snippet',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-code-snippet--multi-line',
     }}>{`
     <CodeSnippet type="multi">
     ${codeSnippet}
@@ -114,6 +126,7 @@ import {
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvcodesnippet--default',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=code-snippet',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-code-snippet--inline',
     }}>{`
     <CodeSnippet type="inline">${codeSnippetSingle}</CodeSnippet>
 `}</ComponentVariant>
diff --git a/src/pages/components/code-snippet/usage.mdx b/src/pages/components/code-snippet/usage.mdx
index 996e889ff58..451a97504e0 100644
--- a/src/pages/components/code-snippet/usage.mdx
+++ b/src/pages/components/code-snippet/usage.mdx
@@ -87,6 +87,7 @@ length use cases—inline, single line, and multi-line.
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvcodesnippet--default',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=code-snippet',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-code-snippet--single-line',
     }}>{`
     <CodeSnippet type="single">${codeSnippetSingle}</CodeSnippet>
 `}</ComponentVariant>
@@ -101,6 +102,7 @@ length use cases—inline, single line, and multi-line.
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvcodesnippet--default',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=code-snippet',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-code-snippet--multi-line',
     }}>{`
     <CodeSnippet type="multi">
     {codeSnippet}
@@ -117,6 +119,7 @@ length use cases—inline, single line, and multi-line.
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvcodesnippet--default',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=code-snippet',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-code-snippet--inline',
     }}>{`
     <CodeSnippet type="inline">${codeSnippetSingle}</CodeSnippet>
 `}</ComponentVariant>
diff --git a/src/pages/components/content-switcher/code.mdx b/src/pages/components/content-switcher/code.mdx
index f212df1c4ba..e3f66f04de6 100755
--- a/src/pages/components/content-switcher/code.mdx
+++ b/src/pages/components/content-switcher/code.mdx
@@ -47,6 +47,16 @@ code usage documentation, see the Storybooks for each framework below.
 
   </ResourceCard>
 </Column>
+<Column colLg={4} colMd={4} noGutterSm>
+  <ResourceCard
+      subTitle="Web Components (Community)"
+      href="https://web-components.carbondesignsystem.com/?path=/story/components-content-switcher--default"
+      >
+
+<MdxIcon name="webcomponents" />
+
+  </ResourceCard>
+</Column>
 </Row>
 
 ## Live demo
@@ -73,6 +83,7 @@ code usage documentation, see the Storybooks for each framework below.
         'http://vue.carbondesignsystem.com/?path=/story/components-cvcontentswitcher--default',
       Vanilla:
         'https://the-carbon-components.netlify.com/?nav=content-switcher',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-content-switcher--default',
     }}>{`
 <ContentSwitcher onChange={console.log}>
   <Switch name={'first'} text='First section' />
diff --git a/src/pages/components/content-switcher/usage.mdx b/src/pages/components/content-switcher/usage.mdx
index 7e5b0e172ce..383a17c5729 100755
--- a/src/pages/components/content-switcher/usage.mdx
+++ b/src/pages/components/content-switcher/usage.mdx
@@ -86,6 +86,7 @@ binary decision.
         'http://vue.carbondesignsystem.com/?path=/story/components-cvcontentswitcher--default',
       Vanilla:
         'https://the-carbon-components.netlify.com/?nav=content-switcher',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-content-switcher--default',
     }}>{`
 <ContentSwitcher onChange={console.log}>
   <Switch name={'first'} text='First section' />
diff --git a/src/pages/components/data-table/code.mdx b/src/pages/components/data-table/code.mdx
index 9d864fd2f79..e59adba4035 100644
--- a/src/pages/components/data-table/code.mdx
+++ b/src/pages/components/data-table/code.mdx
@@ -53,6 +53,16 @@ usage documentation, see the Storybooks for each framework below.
 
   </ResourceCard>
 </Column>
+<Column colLg={4} colMd={4} noGutterSm>
+  <ResourceCard
+      subTitle="Web Components (Community)"
+      href="https://web-components.carbondesignsystem.com/?path=/story/components-data-table--default"
+      >
+
+<MdxIcon name="webcomponents" />
+
+  </ResourceCard>
+</Column>
 </Row>
 
 ## Live demo
@@ -88,6 +98,7 @@ usage documentation, see the Storybooks for each framework below.
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvdatatable--minimal',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=data-table',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-data-table--default',
     }}>
     {`<DataTable rows={rowData} headers={headerData}>
   {({ rows, headers, getHeaderProps, getTableProps }) => (
@@ -127,6 +138,7 @@ usage documentation, see the Storybooks for each framework below.
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvdatatable--default',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=data-table',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-data-table--default',
     }}>
     {`<DataTable rows={rowData} headers={headerData}>
   {({
@@ -175,6 +187,7 @@ usage documentation, see the Storybooks for each framework below.
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvdatatable--slotted-expanding-data',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=data-table',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-data-table--expandable',
     }}>
     {`<DataTable
   rows={rowData}
@@ -223,6 +236,7 @@ usage documentation, see the Storybooks for each framework below.
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvdatatable--default',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=data-table',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-data-table--default',
     }}>
     {`<DataTable rows={rowData} headers={headerData}>
   {({
diff --git a/src/pages/components/data-table/usage.mdx b/src/pages/components/data-table/usage.mdx
index 9d43a170514..f0707052eab 100755
--- a/src/pages/components/data-table/usage.mdx
+++ b/src/pages/components/data-table/usage.mdx
@@ -96,6 +96,7 @@ import {
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvdatatable--minimal',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=data-table',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-data-table--default',
     }}>
     {`<DataTable rows={rowData} headers={headerData}>
   {({ rows, headers, getHeaderProps, getTableProps }) => (
@@ -135,6 +136,7 @@ import {
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvdatatable--default',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=data-table',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-data-table--default',
     }}>
     {`<DataTable rows={rowData} headers={headerData}>
   {({
@@ -183,6 +185,7 @@ import {
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvdatatable--slotted-expanding-data',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=data-table',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-data-table--expandable',
     }}>
     {`<DataTable
   rows={rowData}
@@ -231,6 +234,7 @@ import {
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvdatatable--default',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=data-table',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-data-table--default',
     }}>
     {`<DataTable rows={rowData} headers={headerData}>
   {({
diff --git a/src/pages/components/date-picker/code.mdx b/src/pages/components/date-picker/code.mdx
index 75f30a063ec..9016dd58bd2 100755
--- a/src/pages/components/date-picker/code.mdx
+++ b/src/pages/components/date-picker/code.mdx
@@ -46,6 +46,16 @@ usage documentation, see the Storybooks for each framework below.
 
   </ResourceCard>
 </Column>
+<Column colLg={4} colMd={4} noGutterSm>
+  <ResourceCard
+      subTitle="Web Components (Community)"
+      href="https://web-components.carbondesignsystem.com/?path=/story/components-date-picker--default"
+      >
+
+<MdxIcon name="webcomponents" />
+
+  </ResourceCard>
+</Column>
 </Row>
 
 ## Live demo
@@ -84,6 +94,7 @@ usage documentation, see the Storybooks for each framework below.
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvdatepicker--default',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=date-picker',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-date-picker--default',
     }}>{`
     <DatePicker dateFormat="m/d/Y" datePickerType="simple">
       <DatePickerInput
@@ -108,6 +119,7 @@ usage documentation, see the Storybooks for each framework below.
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvdatepicker--single',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=date-picker',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-date-picker--single-with-calendar',
     }}>{`
     <DatePicker dateFormat="m/d/Y" datePickerType="single">
       <DatePickerInput
@@ -132,6 +144,7 @@ usage documentation, see the Storybooks for each framework below.
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvdatepicker--range',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=date-picker',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-date-picker--range-with-calendar',
     }}>{`
     <DatePicker dateFormat="m/d/Y" datePickerType="range">
       <DatePickerInput
@@ -161,6 +174,7 @@ usage documentation, see the Storybooks for each framework below.
       Vue:
         'http://vue.carbondesignsystem.com/?path=/storycomponents-cvdatepicker--default',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=date-picker',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-date-picker--default',
     }}>{`
     <TimePicker id="time-picker">
       <TimePickerSelect id="time-picker-select-1">
diff --git a/src/pages/components/date-picker/usage.mdx b/src/pages/components/date-picker/usage.mdx
index 9073dfd71a9..bfc79311a0b 100755
--- a/src/pages/components/date-picker/usage.mdx
+++ b/src/pages/components/date-picker/usage.mdx
@@ -84,6 +84,7 @@ for scheduling tasks.
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvdatepicker--default',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=date-picker',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-date-picker--default',
     }}>{`
     <DatePicker dateFormat="m/d/Y" datePickerType="simple">
       <DatePickerInput
@@ -108,6 +109,7 @@ for scheduling tasks.
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvdatepicker--single',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=date-picker',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-date-picker--single-with-calendar',
     }}>{`
     <DatePicker dateFormat="m/d/Y" datePickerType="single">
       <DatePickerInput
@@ -132,6 +134,7 @@ for scheduling tasks.
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvdatepicker--range',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=date-picker',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-date-picker--range-with-calendar',
     }}>{`
     <DatePicker dateFormat="m/d/Y" datePickerType="range">
       <DatePickerInput
@@ -161,6 +164,7 @@ for scheduling tasks.
       Vue:
         'http://vue.carbondesignsystem.com/?path=/storycomponents-cvdatepicker--default',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=date-picker',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-date-picker--default',
     }}>{`
     <TimePicker id="time-picker">
       <TimePickerSelect id="time-picker-select-1">
diff --git a/src/pages/components/dropdown/code.mdx b/src/pages/components/dropdown/code.mdx
index 699f5deb57b..7b33a783674 100755
--- a/src/pages/components/dropdown/code.mdx
+++ b/src/pages/components/dropdown/code.mdx
@@ -48,6 +48,16 @@ documentation, see the Storybooks for each framework below.
 
   </ResourceCard>
 </Column>
+<Column colLg={4} colMd={4} noGutterSm>
+  <ResourceCard
+      subTitle="Web Components (Community)"
+      href="https://web-components.carbondesignsystem.com/?path=/story/components-dropdown--default"
+      >
+
+<MdxIcon name="webcomponents" />
+
+  </ResourceCard>
+</Column>
 </Row>
 
 ## Live demo
@@ -85,6 +95,7 @@ documentation, see the Storybooks for each framework below.
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvdropdown--default',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=dropdown',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-dropdown--default',
     }}>{`
     <Dropdown
       ariaLabel="Dropdown"
@@ -107,6 +118,7 @@ documentation, see the Storybooks for each framework below.
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvcombobox--default',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=dropdown',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-combo-box--default',
     }}>{`
     <ComboBox
       ariaLabel="ComboBox"
@@ -129,6 +141,7 @@ documentation, see the Storybooks for each framework below.
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvmultiselect--default',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=dropdown',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-multi-select--default',
     }}>{`
     <MultiSelect
       ariaLabel="MultiSelect"
@@ -148,6 +161,7 @@ documentation, see the Storybooks for each framework below.
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvmultiselect--user-filter-and-or-highlight',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=dropdown',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-multi-select--default',
     }}>{`
     <MultiSelect.Filterable
       ariaLabel="Filterable MultiSelect"
diff --git a/src/pages/components/dropdown/usage.mdx b/src/pages/components/dropdown/usage.mdx
index 7c1c8a30f13..b384a962f1b 100755
--- a/src/pages/components/dropdown/usage.mdx
+++ b/src/pages/components/dropdown/usage.mdx
@@ -102,6 +102,7 @@ functionality—dropdown, multiselect, and combo box.
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvdropdown--default',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=dropdown',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-dropdown--default',
     }}>{`
     <Dropdown
       ariaLabel="Dropdown"
@@ -124,6 +125,7 @@ functionality—dropdown, multiselect, and combo box.
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvcombobox--default',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=dropdown',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-combo-box--default',
     }}>{`
     <ComboBox
       ariaLabel="ComboBox"
@@ -146,6 +148,7 @@ functionality—dropdown, multiselect, and combo box.
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvmultiselect--default',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=dropdown',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-multi-select--default',
     }}>{`
     <MultiSelect
       ariaLabel="MultiSelect"
@@ -165,6 +168,7 @@ functionality—dropdown, multiselect, and combo box.
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvmultiselect--user-filter-and-or-highlight',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=dropdown',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-multi-select--default',
     }}>{`
     <MultiSelect.Filterable
       ariaLabel="Filterable MultiSelect"
diff --git a/src/pages/components/file-uploader/code.mdx b/src/pages/components/file-uploader/code.mdx
index e33186a60c1..7d5520d7eda 100755
--- a/src/pages/components/file-uploader/code.mdx
+++ b/src/pages/components/file-uploader/code.mdx
@@ -46,6 +46,16 @@ usage documentation, see the Storybooks for each framework below.
 
   </ResourceCard>
 </Column>
+<Column colLg={4} colMd={4} noGutterSm>
+  <ResourceCard
+      subTitle="Web Components (Community)"
+      href="https://web-components.carbondesignsystem.com/?path=/story/components-file-uploader--default"
+      >
+
+<MdxIcon name="webcomponents" />
+
+  </ResourceCard>
+</Column>
 </Row>
 
 ## Live demo
@@ -78,6 +88,7 @@ usage documentation, see the Storybooks for each framework below.
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvfileuploader--default',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=file-uploader',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-file-uploader--default',
     }}>{`
       <div className="bx--file__container">
         <FileUploader
@@ -107,6 +118,7 @@ usage documentation, see the Storybooks for each framework below.
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvfileuploader--default',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=file-uploader',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-file-uploader--default',
     }}>{`
       <div className="bx--file__container">
         <strong className='bx--file--label'>Account photo</strong>
@@ -136,6 +148,7 @@ usage documentation, see the Storybooks for each framework below.
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvfileuploader--default',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=file-uploader',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-file-uploader--default',
     }}>{`
       <div className="bx--file__container">
         <FileUploaderItem name='color.jpg' errorSubject='File size exceeds limits' errorBody='500 kb max file size. Select a new file and try again.'/>
diff --git a/src/pages/components/file-uploader/usage.mdx b/src/pages/components/file-uploader/usage.mdx
index 830bbf76d04..ced6d29198c 100755
--- a/src/pages/components/file-uploader/usage.mdx
+++ b/src/pages/components/file-uploader/usage.mdx
@@ -82,6 +82,7 @@ file uploader.
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvfileuploader--default',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=file-uploader',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-file-uploader--default',
     }}>{`
       <div className="bx--file__container">
         <FileUploader
@@ -111,6 +112,7 @@ file uploader.
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvfileuploader--default',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=file-uploader',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-file-uploader--default',
     }}>{`
       <div className="bx--file__container">
         <strong className='bx--file--label'>Account photo</strong>
@@ -140,6 +142,7 @@ file uploader.
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvfileuploader--default',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=file-uploader',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-file-uploader--default',
     }}>{`
       <div className="bx--file__container">
         <FileUploaderItem name='color.jpg' errorSubject='File size exceeds limits' errorBody='500 kb max file size. Select a new file and try again.'/>
diff --git a/src/pages/components/form/code.mdx b/src/pages/components/form/code.mdx
index d14e09bb93c..63f6e1fa283 100755
--- a/src/pages/components/form/code.mdx
+++ b/src/pages/components/form/code.mdx
@@ -46,6 +46,16 @@ documentation, see the Storybooks for each framework below.
 
   </ResourceCard>
 </Column>
+<Column colLg={4} colMd={4} noGutterSm>
+  <ResourceCard
+      subTitle="Web Components (Community)"
+      href="https://web-components.carbondesignsystem.com/?path=/story/components-input--form-item"
+      >
+
+<MdxIcon name="webcomponents" />
+
+  </ResourceCard>
+</Column>
 </Row>
 
 ## Live demo
@@ -73,6 +83,7 @@ documentation, see the Storybooks for each framework below.
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvform--default',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=form',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-input--form-item',
     }}>{`
   <Form>
   <div style={{marginBottom: '2rem'}}>
diff --git a/src/pages/components/form/usage.mdx b/src/pages/components/form/usage.mdx
index f542d12e616..7534a340755 100755
--- a/src/pages/components/form/usage.mdx
+++ b/src/pages/components/form/usage.mdx
@@ -61,6 +61,7 @@ do you gain by collecting this information?
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvform--default',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=form',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-input--form-item',
     }}>{`
   <Form>
   <div style={{marginBottom: '2rem'}}>
diff --git a/src/pages/components/inline-loading/code.mdx b/src/pages/components/inline-loading/code.mdx
index 28cb24ab638..d53d093036c 100755
--- a/src/pages/components/inline-loading/code.mdx
+++ b/src/pages/components/inline-loading/code.mdx
@@ -45,6 +45,16 @@ usage documentation, see the Storybooks for each framework below.
 
   </ResourceCard>
 </Column>
+<Column colLg={4} colMd={4} noGutterSm>
+  <ResourceCard
+      subTitle="Web Components (Community)"
+      href="https://web-components.carbondesignsystem.com/?path=/story/components-inline-loading--default"
+      >
+
+<MdxIcon name="webcomponents" />
+
+  </ResourceCard>
+</Column>
 </Row>
 
 ## Live demo
@@ -69,6 +79,7 @@ usage documentation, see the Storybooks for each framework below.
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvinlineloading--default',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=inline-loading',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-inline-loading--default',
     }}>{`
     <InlineLoading description="Loading..." />
   `}</ComponentVariant>
diff --git a/src/pages/components/inline-loading/usage.mdx b/src/pages/components/inline-loading/usage.mdx
index 15af49b5750..42594465169 100755
--- a/src/pages/components/inline-loading/usage.mdx
+++ b/src/pages/components/inline-loading/usage.mdx
@@ -70,6 +70,7 @@ table, after a primary or secondary button click, or even in a modal.
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvinlineloading--default',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=inline-loading',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-inline-loading--default',
     }}>{`
     <InlineLoading description="Loading..." />
   `}</ComponentVariant>
diff --git a/src/pages/components/link/code.mdx b/src/pages/components/link/code.mdx
index 747c8c4336a..eb3caa372c1 100755
--- a/src/pages/components/link/code.mdx
+++ b/src/pages/components/link/code.mdx
@@ -46,6 +46,16 @@ documentation, see the Storybooks for each framework below.
 
   </ResourceCard>
 </Column>
+<Column colLg={4} colMd={4} noGutterSm>
+  <ResourceCard
+      subTitle="Web Components (Community)"
+      href="https://web-components.carbondesignsystem.com/?path=/story/components-link--default"
+      >
+
+<MdxIcon name="webcomponents" />
+
+  </ResourceCard>
+</Column>
 </Row>
 
 ## Live demo
@@ -68,6 +78,7 @@ documentation, see the Storybooks for each framework below.
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvlink--a',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=link',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-link--default',
     }}>{`
   <Link href="#">Link</Link>
   `}</ComponentVariant>
diff --git a/src/pages/components/link/usage.mdx b/src/pages/components/link/usage.mdx
index a895ec6a392..1a6ae7cf6fb 100755
--- a/src/pages/components/link/usage.mdx
+++ b/src/pages/components/link/usage.mdx
@@ -77,6 +77,7 @@ be used for navigational actions.
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvlink--a',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=link',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-link--default',
     }}>{`
   <Link href="#">Link</Link>
   `}</ComponentVariant>
diff --git a/src/pages/components/list/code.mdx b/src/pages/components/list/code.mdx
index 4a3d0073134..16876163205 100755
--- a/src/pages/components/list/code.mdx
+++ b/src/pages/components/list/code.mdx
@@ -45,6 +45,16 @@ documentation, see the Storybooks for each framework below.
 
   </ResourceCard>
 </Column>
+<Column colLg={4} colMd={4} noGutterSm>
+  <ResourceCard
+      subTitle="Web Components (Community)"
+      href="https://web-components.carbondesignsystem.com/?path=/story/components-list--ordered"
+      >
+
+<MdxIcon name="webcomponents" />
+
+  </ResourceCard>
+</Column>
 </Row>
 
 ## Live demo
@@ -70,6 +80,7 @@ documentation, see the Storybooks for each framework below.
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvlist--default',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=list',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-list--ordered',
     }}>{`
     <OrderedList>
       <ListItem>
@@ -104,6 +115,7 @@ documentation, see the Storybooks for each framework below.
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvlist--default',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=list',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-list--unordered',
     }}>{`
       <UnorderedList>
         <ListItem>
diff --git a/src/pages/components/list/usage.mdx b/src/pages/components/list/usage.mdx
index 47aa66586c7..99708c99b5c 100755
--- a/src/pages/components/list/usage.mdx
+++ b/src/pages/components/list/usage.mdx
@@ -56,6 +56,7 @@ between list items.
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvlist--default',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=list',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-list--ordered',
     }}>{`
     <OrderedList>
       <ListItem>
@@ -90,6 +91,7 @@ between list items.
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvlist--default',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=list',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-list--unordered',
     }}>{`
       <UnorderedList>
         <ListItem>
diff --git a/src/pages/components/loading/code.mdx b/src/pages/components/loading/code.mdx
index 54dbf333eba..952b5943b9c 100755
--- a/src/pages/components/loading/code.mdx
+++ b/src/pages/components/loading/code.mdx
@@ -46,6 +46,16 @@ documentation, see the Storybooks for each framework below.
 
   </ResourceCard>
 </Column>
+<Column colLg={4} colMd={4} noGutterSm>
+  <ResourceCard
+      subTitle="Web Components (Community)"
+      href="https://web-components.carbondesignsystem.com/?path=/story/components-loading--default"
+      >
+
+<MdxIcon name="webcomponents" />
+
+  </ResourceCard>
+</Column>
 </Row>
 
 ## Live demo
@@ -68,6 +78,7 @@ documentation, see the Storybooks for each framework below.
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvloading--default',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=loading',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-loading--default',
     }}>{`
     <Loading
       description="Active loading indicator" withOverlay={false}
diff --git a/src/pages/components/loading/usage.mdx b/src/pages/components/loading/usage.mdx
index 194e7848a77..6e04a13c3b0 100755
--- a/src/pages/components/loading/usage.mdx
+++ b/src/pages/components/loading/usage.mdx
@@ -52,6 +52,7 @@ three seconds.
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvloading--default',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=loading',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-loading--default',
     }}>{`
     <Loading
       description="Active loading indicator" withOverlay={false}
diff --git a/src/pages/components/modal/code.mdx b/src/pages/components/modal/code.mdx
index 7004b3b8db3..1950e8bd37c 100755
--- a/src/pages/components/modal/code.mdx
+++ b/src/pages/components/modal/code.mdx
@@ -46,6 +46,16 @@ documentation, see the Storybooks for each framework below.
 
   </ResourceCard>
 </Column>
+<Column colLg={4} colMd={4} noGutterSm>
+  <ResourceCard
+      subTitle="Web Components (Community)"
+      href="https://web-components.carbondesignsystem.com/?path=/story/components-modal--default"
+      >
+
+<MdxIcon name="webcomponents" />
+
+  </ResourceCard>
+</Column>
 </Row>
 
 ## Live demo
@@ -82,6 +92,7 @@ documentation, see the Storybooks for each framework below.
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvmodal--default',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=modal',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-modal--default',
     }}>{`
     <ModalWrapper
       buttonTriggerText="Launch modal"
@@ -101,6 +112,7 @@ documentation, see the Storybooks for each framework below.
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvmodal--default',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=modal',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-modal--default',
     }}>{`
     <ModalWrapper
       hasScrollingContent
@@ -147,6 +159,7 @@ documentation, see the Storybooks for each framework below.
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvmodal--default',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=modal',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-modal--single-button',
     }}>{`
     <ModalWrapper
       buttonTriggerText="Launch modal"
@@ -167,6 +180,7 @@ documentation, see the Storybooks for each framework below.
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvmodal--default',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=modal',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-modal--three-buttons',
     }}>{`
     <ModalWrapper
       buttonTriggerText="Launch modal"
diff --git a/src/pages/components/modal/usage.mdx b/src/pages/components/modal/usage.mdx
index 32cf2d00127..ef29b13f09a 100755
--- a/src/pages/components/modal/usage.mdx
+++ b/src/pages/components/modal/usage.mdx
@@ -103,6 +103,7 @@ destructive or irreversible then use a transactional danger modal.
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvmodal--default',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=modal',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-modal--default',
     }}>{`
     <ModalWrapper
       buttonTriggerText="Launch modal"
@@ -122,6 +123,7 @@ destructive or irreversible then use a transactional danger modal.
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvmodal--default',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=modal',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-modal--default',
     }}>{`
     <ModalWrapper
       hasScrollingContent
@@ -168,6 +170,7 @@ destructive or irreversible then use a transactional danger modal.
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvmodal--default',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=modal',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-modal--single-button',
     }}>{`
     <ModalWrapper
       buttonTriggerText="Launch modal"
@@ -188,6 +191,7 @@ destructive or irreversible then use a transactional danger modal.
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvmodal--default',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=modal',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-modal--three-buttons',
     }}>{`
     <ModalWrapper
       buttonTriggerText="Launch modal"
diff --git a/src/pages/components/notification/code.mdx b/src/pages/components/notification/code.mdx
index 97d758265ec..933bd48beef 100755
--- a/src/pages/components/notification/code.mdx
+++ b/src/pages/components/notification/code.mdx
@@ -46,6 +46,16 @@ usage documentation, see the Storybooks for each framework below.
 
   </ResourceCard>
 </Column>
+<Column colLg={4} colMd={4} noGutterSm>
+  <ResourceCard
+      subTitle="Web Components (Community)"
+      href="https://web-components.carbondesignsystem.com/?path=/story/components-notifications--inline"
+      >
+
+<MdxIcon name="webcomponents" />
+
+  </ResourceCard>
+</Column>
 </Row>
 
 ## Live demo
@@ -74,6 +84,7 @@ usage documentation, see the Storybooks for each framework below.
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvtoastnotification--default',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=notification',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-notifications--toast',
     }}>{`
     <div>
       <ToastNotification
@@ -98,6 +109,7 @@ usage documentation, see the Storybooks for each framework below.
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvinlinenotification--default',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=notification',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-notifications--inline',
     }}>{`
   <div>
     <InlineNotification
diff --git a/src/pages/components/notification/usage.mdx b/src/pages/components/notification/usage.mdx
index cbfb9c47346..17e1b08eaaf 100755
--- a/src/pages/components/notification/usage.mdx
+++ b/src/pages/components/notification/usage.mdx
@@ -75,6 +75,7 @@ product teams also support banners and notification centers.
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvtoastnotification--default',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=notification',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-notifications--toast',
     }}>{`
     <div>
       <ToastNotification
@@ -99,6 +100,7 @@ product teams also support banners and notification centers.
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvinlinenotification--default',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=notification',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-notifications--inline',
     }}>{`
   <div>
     <InlineNotification
diff --git a/src/pages/components/number-input/code.mdx b/src/pages/components/number-input/code.mdx
index 49132f95bd3..913956130bb 100755
--- a/src/pages/components/number-input/code.mdx
+++ b/src/pages/components/number-input/code.mdx
@@ -46,6 +46,16 @@ usage documentation, see the Storybooks for each framework below.
 
   </ResourceCard>
 </Column>
+<Column colLg={4} colMd={4} noGutterSm>
+  <ResourceCard
+      subTitle="Web Components (Community)"
+      href="https://web-components.carbondesignsystem.com/?path=/story/components-number-input--default"
+      >
+
+<MdxIcon name="webcomponents" />
+
+  </ResourceCard>
+</Column>
 </Row>
 
 ## Live demo
@@ -71,6 +81,7 @@ usage documentation, see the Storybooks for each framework below.
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvnumberinput--default',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=number-input',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-number-input--default',
     }}>{`
     <NumberInput
       helperText="Optional helper text"
@@ -93,6 +104,7 @@ usage documentation, see the Storybooks for each framework below.
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvnumberinput--default',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=number-input',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-number-input--default',
     }}>{`
         <NumberInput
           isMobile
diff --git a/src/pages/components/number-input/usage.mdx b/src/pages/components/number-input/usage.mdx
index 5bda95242a3..d6dec63d396 100755
--- a/src/pages/components/number-input/usage.mdx
+++ b/src/pages/components/number-input/usage.mdx
@@ -50,6 +50,7 @@ or decrease an incremental value.
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvnumberinput--default',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=number-input',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-number-input--default',
     }}>{`
     <NumberInput
       helperText="Optional helper text"
@@ -72,6 +73,7 @@ or decrease an incremental value.
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvnumberinput--default',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=number-input',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-number-input--default',
     }}>{`
         <NumberInput
           isMobile
diff --git a/src/pages/components/overflow-menu/code.mdx b/src/pages/components/overflow-menu/code.mdx
index b0fb373ef82..79ec555b13d 100755
--- a/src/pages/components/overflow-menu/code.mdx
+++ b/src/pages/components/overflow-menu/code.mdx
@@ -46,6 +46,16 @@ usage documentation, see the Storybooks for each framework below.
 
   </ResourceCard>
 </Column>
+<Column colLg={4} colMd={4} noGutterSm>
+  <ResourceCard
+      subTitle="Web Components (Community)"
+      href="https://web-components.carbondesignsystem.com/?path=/story/components-overflow-menu--default"
+      >
+
+<MdxIcon name="webcomponents" />
+
+  </ResourceCard>
+</Column>
 </Row>
 
 ## Live demo
@@ -69,6 +79,7 @@ usage documentation, see the Storybooks for each framework below.
         'https://angular.carbondesignsystem.com/?path=/story/components-overflow-menu--basic',
       Vue: 'http://vue.carbondesignsystem.com/?path=/story/components-cvoverflowmenu--default',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=overflow-menu',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-overflow-menu--default',
     }}>{`
     <OverflowMenu
       data-floating-menu-container
diff --git a/src/pages/components/overflow-menu/usage.mdx b/src/pages/components/overflow-menu/usage.mdx
index 0ada613407f..1f4a76b0fcf 100755
--- a/src/pages/components/overflow-menu/usage.mdx
+++ b/src/pages/components/overflow-menu/usage.mdx
@@ -48,6 +48,7 @@ there is a space constraint.
         'https://angular.carbondesignsystem.com/?path=/story/components-overflow-menu--basic',
       Vue: 'http://vue.carbondesignsystem.com/?path=/story/components-cvoverflowmenu--default',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=overflow-menu',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-overflow-menu--default',
     }}>{`
     <OverflowMenu
       data-floating-menu-container
diff --git a/src/pages/components/pagination/code.mdx b/src/pages/components/pagination/code.mdx
index c5a20e79f23..4f1e4bbf236 100755
--- a/src/pages/components/pagination/code.mdx
+++ b/src/pages/components/pagination/code.mdx
@@ -46,6 +46,16 @@ usage documentation, see the Storybooks for each framework below.
 
   </ResourceCard>
 </Column>
+<Column colLg={4} colMd={4} noGutterSm>
+  <ResourceCard
+      subTitle="Web Components (Community)"
+      href="https://web-components.carbondesignsystem.com/?path=/story/components-pagination--default"
+      >
+
+<MdxIcon name="webcomponents" />
+
+  </ResourceCard>
+</Column>
 </Row>
 
 ## Live demo
@@ -75,6 +85,7 @@ usage documentation, see the Storybooks for each framework below.
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvpagination--default',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=pagination',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-pagination--default',
     }}>{`
   <div style={{width: '800px'}}>
     <Pagination
diff --git a/src/pages/components/pagination/usage.mdx b/src/pages/components/pagination/usage.mdx
index 915a8b1af08..c9d9946cef8 100755
--- a/src/pages/components/pagination/usage.mdx
+++ b/src/pages/components/pagination/usage.mdx
@@ -56,6 +56,7 @@ The default number displayed will vary depending on the context.
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvpagination--default',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=pagination',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-pagination--default',
     }}>{`
   <div style={{width: '800px'}}>
     <Pagination
diff --git a/src/pages/components/progress-indicator/code.mdx b/src/pages/components/progress-indicator/code.mdx
index cd4882fd7d3..f8118a9a082 100755
--- a/src/pages/components/progress-indicator/code.mdx
+++ b/src/pages/components/progress-indicator/code.mdx
@@ -47,6 +47,16 @@ code usage documentation, see the Storybooks for each framework below.
 
   </ResourceCard>
 </Column>
+<Column colLg={4} colMd={4} noGutterSm>
+  <ResourceCard
+      subTitle="Web Components (Community)"
+      href="https://web-components.carbondesignsystem.com/?path=/story/components-progress-indicator--default"
+      >
+
+<MdxIcon name="webcomponents" />
+
+  </ResourceCard>
+</Column>
 </Row>
 
 ## Live demo
@@ -73,6 +83,7 @@ code usage documentation, see the Storybooks for each framework below.
         'http://vue.carbondesignsystem.com/?path=/story/components-cvprogress--default',
       Vanilla:
         'https://the-carbon-components.netlify.com/?nav=progress-indicator',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-progress-indicator--default',
     }}>{`
   <div className="some-container">
     <ProgressIndicator currentIndex={1}>
diff --git a/src/pages/components/progress-indicator/usage.mdx b/src/pages/components/progress-indicator/usage.mdx
index b30b887f9c1..476d9167bfc 100755
--- a/src/pages/components/progress-indicator/usage.mdx
+++ b/src/pages/components/progress-indicator/usage.mdx
@@ -52,6 +52,7 @@ percentage of completeness as each task is completed.
         'http://vue.carbondesignsystem.com/?path=/story/components-cvprogress--default',
       Vanilla:
         'https://the-carbon-components.netlify.com/?nav=progress-indicator',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-progress-indicator--default',
     }}>{`
   <div className="some-container">
     <ProgressIndicator currentIndex={1}>
diff --git a/src/pages/components/radio-button/code.mdx b/src/pages/components/radio-button/code.mdx
index 7f0dce1b069..1f19aa23595 100755
--- a/src/pages/components/radio-button/code.mdx
+++ b/src/pages/components/radio-button/code.mdx
@@ -46,6 +46,16 @@ usage documentation, see the Storybooks for each framework below.
 
   </ResourceCard>
 </Column>
+<Column colLg={4} colMd={4} noGutterSm>
+  <ResourceCard
+      subTitle="Web Components (Community)"
+      href="https://web-components.carbondesignsystem.com/?path=/story/components-radio-button--default"
+      >
+
+<MdxIcon name="webcomponents" />
+
+  </ResourceCard>
+</Column>
 </Row>
 
 ## Live demo
@@ -70,6 +80,7 @@ usage documentation, see the Storybooks for each framework below.
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvradiobutton--default',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=radio-button',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-radio-button--default',
     }}>{`
   <FormGroup
   legendText="Radio button heading"
diff --git a/src/pages/components/radio-button/usage.mdx b/src/pages/components/radio-button/usage.mdx
index 2db3e4ee8de..b09689571e9 100755
--- a/src/pages/components/radio-button/usage.mdx
+++ b/src/pages/components/radio-button/usage.mdx
@@ -95,6 +95,7 @@ checkboxes allow the user to select multiple options.
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvradiobutton--default',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=radio-button',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-radio-button--default',
     }}>{`
   <FormGroup
   legendText="Radio button heading"
diff --git a/src/pages/components/search/code.mdx b/src/pages/components/search/code.mdx
index da3d4cadda8..b1c842842ac 100755
--- a/src/pages/components/search/code.mdx
+++ b/src/pages/components/search/code.mdx
@@ -46,6 +46,16 @@ documentation, see the Storybooks for each framework below.
 
   </ResourceCard>
 </Column>
+<Column colLg={4} colMd={4} noGutterSm>
+  <ResourceCard
+      subTitle="Web Components (Community)"
+      href="https://web-components.carbondesignsystem.com/?path=/story/components-search--default"
+      >
+
+<MdxIcon name="webcomponents" />
+
+  </ResourceCard>
+</Column>
 </Row>
 
 ## Live demo
@@ -68,6 +78,7 @@ documentation, see the Storybooks for each framework below.
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvsearch--default',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=search',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-search--default',
     }}>{`
 <Search
   id="search-1"
diff --git a/src/pages/components/search/usage.mdx b/src/pages/components/search/usage.mdx
index 1ede6a6955c..e1cb49f4857 100755
--- a/src/pages/components/search/usage.mdx
+++ b/src/pages/components/search/usage.mdx
@@ -49,6 +49,7 @@ to aid the user in finding content.
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvsearch--default',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=search',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-search--default',
     }}>{`
 <Search
   id="search-1"
diff --git a/src/pages/components/select/code.mdx b/src/pages/components/select/code.mdx
index 125621d3360..4feb008f46c 100755
--- a/src/pages/components/select/code.mdx
+++ b/src/pages/components/select/code.mdx
@@ -46,6 +46,16 @@ documentation, see the Storybooks for each framework below.
 
   </ResourceCard>
 </Column>
+<Column colLg={4} colMd={4} noGutterSm>
+  <ResourceCard
+      subTitle="Web Components (Community)"
+      href="https://web-components.carbondesignsystem.com/?path=/story/components-select--default"
+      >
+
+<MdxIcon name="webcomponents" />
+
+  </ResourceCard>
+</Column>
 </Row>
 
 ## Live demo
@@ -72,6 +82,7 @@ documentation, see the Storybooks for each framework below.
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvselect--default',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=select',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-select--default',
     }}>{`
 <Select
   defaultValue="placeholder-item"
diff --git a/src/pages/components/select/usage.mdx b/src/pages/components/select/usage.mdx
index 43601553ad4..0d823ec1b6c 100755
--- a/src/pages/components/select/usage.mdx
+++ b/src/pages/components/select/usage.mdx
@@ -66,6 +66,7 @@ while the dropdown component can be styled as needed.
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvselect--default',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=select',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-select--default',
     }}>{`
 <Select
   defaultValue="placeholder-item"
diff --git a/src/pages/components/slider/code.mdx b/src/pages/components/slider/code.mdx
index 530136b593a..e7bf8661d8b 100755
--- a/src/pages/components/slider/code.mdx
+++ b/src/pages/components/slider/code.mdx
@@ -46,6 +46,16 @@ documentation, see the Storybooks for each framework below.
 
   </ResourceCard>
 </Column>
+<Column colLg={4} colMd={4} noGutterSm>
+  <ResourceCard
+      subTitle="Web Components (Community)"
+      href="https://web-components.carbondesignsystem.com/?path=/story/components-slider--default"
+      >
+
+<MdxIcon name="webcomponents" />
+
+  </ResourceCard>
+</Column>
 </Row>
 
 ## Live demo
@@ -68,6 +78,7 @@ documentation, see the Storybooks for each framework below.
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvslider--default',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=slider',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-slider--default',
     }}>{`
   <div className="some-container">
 <Slider
diff --git a/src/pages/components/slider/usage.mdx b/src/pages/components/slider/usage.mdx
index bfd434944d8..8d2f1800662 100755
--- a/src/pages/components/slider/usage.mdx
+++ b/src/pages/components/slider/usage.mdx
@@ -65,6 +65,7 @@ value range.
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvslider--default',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=slider',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-slider--default',
     }}>{`
   <div className="some-container">
 <Slider
diff --git a/src/pages/components/structured-list/code.mdx b/src/pages/components/structured-list/code.mdx
index 563297700a1..5f1dabd133b 100755
--- a/src/pages/components/structured-list/code.mdx
+++ b/src/pages/components/structured-list/code.mdx
@@ -48,6 +48,16 @@ code usage documentation, see the Storybooks for each framework below.
 
   </ResourceCard>
 </Column>
+<Column colLg={4} colMd={4} noGutterSm>
+  <ResourceCard
+      subTitle="Web Components (Community)"
+      href="https://web-components.carbondesignsystem.com/?path=/story/components-structured-list--default"
+      >
+
+<MdxIcon name="webcomponents" />
+
+  </ResourceCard>
+</Column>
 </Row>
 
 ## Live demo
@@ -74,6 +84,7 @@ code usage documentation, see the Storybooks for each framework below.
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvstructuredlist--default',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=structured-list',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-structured-list--default',
     }}>{`
     <StructuredListWrapper ariaLabel="Structured list">
       <StructuredListHead>
@@ -128,6 +139,7 @@ code usage documentation, see the Storybooks for each framework below.
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvstructuredlist--selectable-with-events',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=structured-list',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-structured-list--default',
     }}>{`
     <StructuredListWrapper selection ariaLabel="Structured list">
       <StructuredListHead>
diff --git a/src/pages/components/structured-list/usage.mdx b/src/pages/components/structured-list/usage.mdx
index e171180fe92..435ddf8941a 100755
--- a/src/pages/components/structured-list/usage.mdx
+++ b/src/pages/components/structured-list/usage.mdx
@@ -45,6 +45,7 @@ import { CheckmarkFilled16 } from '@carbon/icons-react';
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvstructuredlist--default',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=structured-list',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-structured-list--default',
     }}>{`
     <StructuredListWrapper ariaLabel="Structured list">
       <StructuredListHead>
@@ -99,6 +100,7 @@ import { CheckmarkFilled16 } from '@carbon/icons-react';
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvstructuredlist--selectable-with-events',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=structured-list',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-structured-list--default',
     }}>{`
     <StructuredListWrapper selection ariaLabel="Structured list">
       <StructuredListHead>
diff --git a/src/pages/components/tabs/code.mdx b/src/pages/components/tabs/code.mdx
index 0de11feecc7..7b1bae003c8 100755
--- a/src/pages/components/tabs/code.mdx
+++ b/src/pages/components/tabs/code.mdx
@@ -45,6 +45,16 @@ documentation, see the Storybooks for each framework below.
 
   </ResourceCard>
 </Column>
+<Column colLg={4} colMd={4} noGutterSm>
+  <ResourceCard
+      subTitle="Web Components (Community)"
+      href="https://web-components.carbondesignsystem.com/?path=/story/components-tabs--default"
+      >
+
+<MdxIcon name="webcomponents" />
+
+  </ResourceCard>
+</Column>
 </Row>
 
 ## Live demo
@@ -67,6 +77,7 @@ documentation, see the Storybooks for each framework below.
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvtabs--default',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=tabs',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-tabs--default',
     }}>{`
 <div style={{ width: '50%' }}>
   <Tabs scrollIntoView={false}>
diff --git a/src/pages/components/tabs/usage.mdx b/src/pages/components/tabs/usage.mdx
index c83155812ce..3da84ddbd32 100755
--- a/src/pages/components/tabs/usage.mdx
+++ b/src/pages/components/tabs/usage.mdx
@@ -55,6 +55,7 @@ Tabs are used to quickly navigate between views within the same context.
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvtabs--default',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=tabs',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-tabs--default',
     }}>{`
 <div style={{ width: '50%' }}>
   <Tabs scrollIntoView={false}>
diff --git a/src/pages/components/tag/code.mdx b/src/pages/components/tag/code.mdx
index c7ebfb33f70..252c9376699 100755
--- a/src/pages/components/tag/code.mdx
+++ b/src/pages/components/tag/code.mdx
@@ -46,6 +46,16 @@ documentation, see the Storybooks for each framework below.
 
   </ResourceCard>
 </Column>
+<Column colLg={4} colMd={4} noGutterSm>
+  <ResourceCard
+      subTitle="Web Components (Community)"
+      href="https://web-components.carbondesignsystem.com/?path=/story/components-tag--default"
+      >
+
+<MdxIcon name="webcomponents" />
+
+  </ResourceCard>
+</Column>
 </Row>
 
 ## Live demo
@@ -68,6 +78,7 @@ documentation, see the Storybooks for each framework below.
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvtag--filter',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=tag',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-tag--default',
     }}>{`
   <>
 <Tag type="red" title="Clear Filter"> Red </Tag>
diff --git a/src/pages/components/tag/usage.mdx b/src/pages/components/tag/usage.mdx
index 1bdcdced3b6..d8894224d45 100755
--- a/src/pages/components/tag/usage.mdx
+++ b/src/pages/components/tag/usage.mdx
@@ -72,6 +72,7 @@ that particular category.
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvtag--filter',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=tag',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-tag--default',
     }}>{`
   <>
 <Tag type="red" title="Clear Filter"> Red </Tag>
diff --git a/src/pages/components/text-input/code.mdx b/src/pages/components/text-input/code.mdx
index 9b9b9c9a7bb..37437f0da2b 100755
--- a/src/pages/components/text-input/code.mdx
+++ b/src/pages/components/text-input/code.mdx
@@ -46,6 +46,16 @@ usage documentation, see the Storybooks for each framework below.
 
   </ResourceCard>
 </Column>
+<Column colLg={4} colMd={4} noGutterSm>
+  <ResourceCard
+      subTitle="Web Components (Community)"
+      href="https://web-components.carbondesignsystem.com/?path=/story/components-input--default"
+      >
+
+<MdxIcon name="webcomponents" />
+
+  </ResourceCard>
+</Column>
 </Row>
 
 ## Live demo
@@ -78,6 +88,7 @@ usage documentation, see the Storybooks for each framework below.
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvtextinput--default',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=text-input',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-input--default',
     }}>{`
     <div>
       <TextInput
@@ -99,6 +110,7 @@ usage documentation, see the Storybooks for each framework below.
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvtextinput--default',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=text-input',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-input--default',
     }}>{`
     <div>
     <TextInput.PasswordInput
@@ -125,6 +137,7 @@ usage documentation, see the Storybooks for each framework below.
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvtextarea--default',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=text-input',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-textarea--default',
     }}>{`
     <div>
     <TextArea
diff --git a/src/pages/components/text-input/usage.mdx b/src/pages/components/text-input/usage.mdx
index 593bbf5f9cc..3b2f9597113 100755
--- a/src/pages/components/text-input/usage.mdx
+++ b/src/pages/components/text-input/usage.mdx
@@ -64,6 +64,7 @@ reflect the length of the content you expect the user to enter.
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvtextinput--default',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=text-input',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-input--default',
     }}>{`
     <div>
       <TextInput
@@ -85,6 +86,7 @@ reflect the length of the content you expect the user to enter.
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvtextinput--default',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=text-input',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-input--default',
     }}>{`
     <div>
     <TextInput.PasswordInput
@@ -111,6 +113,7 @@ reflect the length of the content you expect the user to enter.
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvtextarea--default',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=text-input',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-textarea--default',
     }}>{`
     <div>
     <TextArea
diff --git a/src/pages/components/tile/code.mdx b/src/pages/components/tile/code.mdx
index bf63a122627..b780a938428 100755
--- a/src/pages/components/tile/code.mdx
+++ b/src/pages/components/tile/code.mdx
@@ -46,6 +46,16 @@ documentation, see the Storybooks for each framework below.
 
   </ResourceCard>
 </Column>
+<Column colLg={4} colMd={4} noGutterSm>
+  <ResourceCard
+      subTitle="Web Components (Community)"
+      href="https://web-components.carbondesignsystem.com/?path=/story/components-tile--default"
+      >
+
+<MdxIcon name="webcomponents" />
+
+  </ResourceCard>
+</Column>
 </Row>
 
 ## Live demo
@@ -86,6 +96,7 @@ documentation, see the Storybooks for each framework below.
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvtile--default',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=tile',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-tile--default',
     }}>{`
     <Tile>
       Default tile
@@ -104,6 +115,7 @@ documentation, see the Storybooks for each framework below.
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvtile--default',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=tile',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-tile--clickable',
     }}>{`
     <ClickableTile
       href="#"
@@ -124,6 +136,7 @@ documentation, see the Storybooks for each framework below.
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvtile--clickable',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=tile',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-tile--single-selectable',
     }}>{`
     <TileGroup
       defaultSelected="default-selected"
@@ -169,6 +182,7 @@ documentation, see the Storybooks for each framework below.
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvtile--selectable',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=tile',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-tile--single-selectable',
     }}>{`
     <div
       aria-label="selectable tiles"
@@ -216,6 +230,7 @@ documentation, see the Storybooks for each framework below.
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvtile--expandable',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=tile',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-tile--expandable',
     }}>{`
     <ExpandableTile
       tabIndex={0}
diff --git a/src/pages/components/tile/usage.mdx b/src/pages/components/tile/usage.mdx
index 19f16012ac2..87b5b478514 100755
--- a/src/pages/components/tile/usage.mdx
+++ b/src/pages/components/tile/usage.mdx
@@ -97,6 +97,7 @@ modules. Here are some common use cases for when to use tiles:
         'https://angular.carbondesignsystem.com/?path=/story/components-tiles--basic',
       Vue: 'http://vue.carbondesignsystem.com/?path=/story/components-cvtile--default',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=tile',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-tile--default',
     }}>{`
     <Tile>
       Default tile
@@ -114,6 +115,7 @@ modules. Here are some common use cases for when to use tiles:
         'https://angular.carbondesignsystem.com/?path=/story/components-tiles--basic',
       Vue: 'http://vue.carbondesignsystem.com/?path=/story/components-cvtile--default',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=tile',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-tile--clickable',
     }}>{`
     <ClickableTile
       href="#"
@@ -133,6 +135,7 @@ modules. Here are some common use cases for when to use tiles:
         'https://angular.carbondesignsystem.com/?path=/story/components-tiles--clickable',
       Vue: 'http://vue.carbondesignsystem.com/?path=/story/components-cvtile--clickable',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=tile',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-tile--single-selectable',
     }}>{`
     <TileGroup
       defaultSelected="default-selected"
@@ -177,6 +180,7 @@ modules. Here are some common use cases for when to use tiles:
         'https://angular.carbondesignsystem.com/?path=/story/components-tiles--selectable',
       Vue: 'http://vue.carbondesignsystem.com/?path=/story/components-cvtile--selectable',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=tile',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-tile--single-selectable',
     }}>{`
     <div
       aria-label="selectable tiles"
@@ -223,6 +227,7 @@ modules. Here are some common use cases for when to use tiles:
         'https://angular.carbondesignsystem.com/?path=/story/components-tiles--expandable',
       Vue: 'http://vue.carbondesignsystem.com/?path=/story/components-cvtile--expandable',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=tile',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-tile--expandable',
     }}>{`
     <ExpandableTile
       tabIndex={0}
diff --git a/src/pages/components/toggle/code.mdx b/src/pages/components/toggle/code.mdx
index 7a4b6f3f4c1..f834057b761 100755
--- a/src/pages/components/toggle/code.mdx
+++ b/src/pages/components/toggle/code.mdx
@@ -46,6 +46,16 @@ documentation, see the Storybooks for each framework below.
 
   </ResourceCard>
 </Column>
+<Column colLg={4} colMd={4} noGutterSm>
+  <ResourceCard
+      subTitle="Web Components (Community)"
+      href="https://web-components.carbondesignsystem.com/?path=/story/components-toggle--default"
+      >
+
+<MdxIcon name="webcomponents" />
+
+  </ResourceCard>
+</Column>
 </Row>
 
 ## Live demo
@@ -71,6 +81,7 @@ documentation, see the Storybooks for each framework below.
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvtoggle--default',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=toggle',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-toggle--default',
     }}>{`
     <Toggle
       aria-label="toggle button"
@@ -89,6 +100,7 @@ documentation, see the Storybooks for each framework below.
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvtoggle--default',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=toggle',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-toggle--default',
     }}>{`
     <ToggleSmall
       aria-label="toggle button"
diff --git a/src/pages/components/toggle/usage.mdx b/src/pages/components/toggle/usage.mdx
index 9222da01a63..84c1a653e36 100755
--- a/src/pages/components/toggle/usage.mdx
+++ b/src/pages/components/toggle/usage.mdx
@@ -60,6 +60,7 @@ user “flips the switch”. They are commonly used for “on/off” switches.
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvtoggle--default',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=toggle',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-toggle--default',
     }}>{`
     <Toggle
       aria-label="toggle button"
@@ -78,6 +79,7 @@ user “flips the switch”. They are commonly used for “on/off” switches.
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvtoggle--default',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=toggle',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-toggle--default',
     }}>{`
     <ToggleSmall
       aria-label="toggle button"
diff --git a/src/pages/components/tooltip/code.mdx b/src/pages/components/tooltip/code.mdx
index 8ff78a42682..88f77d2296d 100755
--- a/src/pages/components/tooltip/code.mdx
+++ b/src/pages/components/tooltip/code.mdx
@@ -48,6 +48,16 @@ documentation, see the Storybooks for each framework below.
 
   </ResourceCard>
 </Column>
+<Column colLg={4} colMd={4} noGutterSm>
+  <ResourceCard
+      subTitle="Web Components (Community)"
+      href="https://web-components.carbondesignsystem.com/?path=/story/components-tooltip--default"
+      >
+
+<MdxIcon name="webcomponents" />
+
+  </ResourceCard>
+</Column>
 </Row>
 
 ## Live demo
@@ -78,6 +88,7 @@ documentation, see the Storybooks for each framework below.
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvtooltip--default-interactive-tootlip',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=tooltip',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-tooltip--default',
     }}>{`
     <Tooltip
       direction="bottom"
@@ -108,6 +119,7 @@ documentation, see the Storybooks for each framework below.
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvtooltip--default-tootlip',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=tooltip',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-tooltip--icon',
     }}>{`
     <TooltipIcon
       tooltipText="Filter"
@@ -128,6 +140,7 @@ documentation, see the Storybooks for each framework below.
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvtooltip--default-definition-tootlip',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=tooltip',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-tooltip--definition',
     }}>{`
     <TooltipDefinition
       tooltipText="Brief description of the dotted, underlined word above."
diff --git a/src/pages/components/tooltip/usage.mdx b/src/pages/components/tooltip/usage.mdx
index 60bb3d604ed..e4215ad100c 100755
--- a/src/pages/components/tooltip/usage.mdx
+++ b/src/pages/components/tooltip/usage.mdx
@@ -64,6 +64,7 @@ import { Filter16 } from '@carbon/icons-react';
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvtooltip--default-interactive-tootlip',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=tooltip',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-tooltip--default',
     }}>{`
     <Tooltip
       direction="bottom"
@@ -94,6 +95,7 @@ import { Filter16 } from '@carbon/icons-react';
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvtooltip--default-tootlip',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=tooltip',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-tooltip--icon',
     }}>{`
     <TooltipIcon
       tooltipText="Filter"
@@ -114,6 +116,7 @@ import { Filter16 } from '@carbon/icons-react';
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvtooltip--default-definition-tootlip',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=tooltip',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-tooltip--definition',
     }}>{`
     <TooltipDefinition
       tooltipText="Brief description of the dotted, underlined word above."