diff --git a/src/pages/components/UI-shell-header/code.mdx b/src/pages/components/UI-shell-header/code.mdx
index 8ecf617ccc0..e361aa67519 100644
--- a/src/pages/components/UI-shell-header/code.mdx
+++ b/src/pages/components/UI-shell-header/code.mdx
@@ -28,31 +28,31 @@ the Storybooks for each framework below.
 </Column>
 <Column colLg={4} colMd={4} noGutterSm>
   <ResourceCard
-      subTitle="Angular (Community)"
-      href="https://angular.carbondesignsystem.com/?path=/story/components-ui-shell--header"
+      subTitle="Web Components"
+      href="https://web-components.carbondesignsystem.com/?path=/story/components-ui-shell--header"
       >
 
-<MdxIcon name="angular" />
+<MdxIcon name="webcomponents" />
 
   </ResourceCard>
 </Column>
 <Column colLg={4} colMd={4} noGutterSm>
   <ResourceCard
-      subTitle="Vue (Community)"
-      href="https://vue.carbondesignsystem.com/?path=/story/components-cvuishell-header--header-base"
+      subTitle="Angular (Community)"
+      href="https://angular.carbondesignsystem.com/?path=/story/components-ui-shell--header"
       >
 
-<MdxIcon name="vue" />
+<MdxIcon name="angular" />
 
   </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"
+      subTitle="Vue (Community)"
+      href="https://vue.carbondesignsystem.com/?path=/story/components-cvuishell-header--header-base"
       >
 
-<MdxIcon name="webcomponents" />
+<MdxIcon name="vue" />
 
   </ResourceCard>
 </Column>
diff --git a/src/pages/components/UI-shell-left-panel/code.mdx b/src/pages/components/UI-shell-left-panel/code.mdx
index d682ade0b76..538234b0623 100644
--- a/src/pages/components/UI-shell-left-panel/code.mdx
+++ b/src/pages/components/UI-shell-left-panel/code.mdx
@@ -28,31 +28,31 @@ see the Storybooks for each framework below.
 </Column>
 <Column colLg={4} colMd={4} noGutterSm>
   <ResourceCard
-      subTitle="Angular (Community)"
-      href="https://angular.carbondesignsystem.com/?path=/story/components-ui-shell--side-navigation"
+      subTitle="Web Components"
+      href="https://web-components.carbondesignsystem.com/?path=/story/components-ui-shell--side-nav"
       >
 
-<MdxIcon name="angular" />
+<MdxIcon name="webcomponents" />
 
   </ResourceCard>
 </Column>
 <Column colLg={4} colMd={4} noGutterSm>
   <ResourceCard
-      subTitle="Vue (Community)"
-      href="https://vue.carbondesignsystem.com/?path=/story/components-cvuishell-header--fixed-side-nav"
+      subTitle="Angular (Community)"
+      href="https://angular.carbondesignsystem.com/?path=/story/components-ui-shell--side-navigation"
       >
 
-<MdxIcon name="vue" />
+<MdxIcon name="angular" />
 
   </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"
+      subTitle="Vue (Community)"
+      href="https://vue.carbondesignsystem.com/?path=/story/components-cvuishell-header--fixed-side-nav"
       >
 
-<MdxIcon name="webcomponents" />
+<MdxIcon name="vue" />
 
   </ResourceCard>
 </Column>
diff --git a/src/pages/components/accordion/code.mdx b/src/pages/components/accordion/code.mdx
index d37bae103da..03efde3227a 100755
--- a/src/pages/components/accordion/code.mdx
+++ b/src/pages/components/accordion/code.mdx
@@ -29,31 +29,31 @@ usage documentation, see the Storybooks for each framework below.
 </Column>
 <Column colLg={4} colMd={4} noGutterSm>
   <ResourceCard
-      subTitle="Angular (Community)"
-      href="https://angular.carbondesignsystem.com/?path=/story/components-accordion--basic"
+      subTitle="Web Components"
+      href="https://web-components.carbondesignsystem.com/?path=/story/components-accordion--default"
       >
 
-<MdxIcon name="angular" />
+<MdxIcon name="webcomponents" />
 
   </ResourceCard>
 </Column>
 <Column colLg={4} colMd={4} noGutterSm>
   <ResourceCard
-      subTitle="Vue (Community)"
-      href="http://vue.carbondesignsystem.com/?path=/story/components-cvaccordion--default"
+      subTitle="Angular (Community)"
+      href="https://angular.carbondesignsystem.com/?path=/story/components-accordion--basic"
       >
 
-<MdxIcon name="vue" />
+<MdxIcon name="angular" />
 
   </ResourceCard>
 </Column>
 <Column colLg={4} colMd={4} noGutterSm>
   <ResourceCard
-      subTitle="Web Components (Community)"
-      href="https://web-components.carbondesignsystem.com/?path=/story/components-accordion--default"
+      subTitle="Vue (Community)"
+      href="http://vue.carbondesignsystem.com/?path=/story/components-cvaccordion--default"
       >
 
-<MdxIcon name="webcomponents" />
+<MdxIcon name="vue" />
 
   </ResourceCard>
 </Column>
@@ -78,11 +78,11 @@ usage documentation, see the Storybooks for each framework below.
     links={{
       React:
         'https://react.carbondesignsystem.com/?path=/story/components-accordion--accordion',
+      'Web Components':
+        'https://web-components.carbondesignsystem.com/?path=/story/components-accordion--default',
       Angular:
         'https://angular.carbondesignsystem.com/?path=/story/components-accordion--basic',
       Vue: 'http://vue.carbondesignsystem.com/?path=/story/components-cvaccordion--default',
-      'Web Components':
-        'https://web-components.carbondesignsystem.com/?path=/story/components-accordion--default',
     }}
   >
     {`
diff --git a/src/pages/components/accordion/usage.mdx b/src/pages/components/accordion/usage.mdx
index 8df1ca7e156..e65e27c0602 100755
--- a/src/pages/components/accordion/usage.mdx
+++ b/src/pages/components/accordion/usage.mdx
@@ -66,11 +66,11 @@ extra click; instead use a full scrolling page with normal headers.
     links={{
       React:
         'https://react.carbondesignsystem.com/?path=/story/components-accordion--accordion',
+      'Web Components':
+        'https://web-components.carbondesignsystem.com/?path=/story/components-accordion--default',
       Angular:
         'https://angular.carbondesignsystem.com/?path=/story/components-accordion--basic',
       Vue: 'http://vue.carbondesignsystem.com/?path=/story/components-cvaccordion--default',
-      'Web Components':
-        'https://web-components.carbondesignsystem.com/?path=/story/components-accordion--default',
     }}
   >
     {`
diff --git a/src/pages/components/breadcrumb/code.mdx b/src/pages/components/breadcrumb/code.mdx
index 716badb534c..1fcd4609c30 100755
--- a/src/pages/components/breadcrumb/code.mdx
+++ b/src/pages/components/breadcrumb/code.mdx
@@ -28,31 +28,31 @@ usage documentation, see the Storybooks for each framework below.
 </Column>
 <Column colLg={4} colMd={4} noGutterSm>
   <ResourceCard
-      subTitle="Angular (Community)"
-      href="https://angular.carbondesignsystem.com/?path=/story/components-breadcrumb--basic"
+      subTitle="Web Components"
+      href="https://web-components.carbondesignsystem.com/?path=/story/components-breadcrumb--default"
       >
 
-<MdxIcon name="angular" />
+<MdxIcon name="webcomponents" />
 
   </ResourceCard>
 </Column>
 <Column colLg={4} colMd={4} noGutterSm>
   <ResourceCard
-      subTitle="Vue (Community)"
-      href="http://vue.carbondesignsystem.com/?path=/story/components-cvbreadcrumb--default"
+      subTitle="Angular (Community)"
+      href="https://angular.carbondesignsystem.com/?path=/story/components-breadcrumb--basic"
       >
 
-<MdxIcon name="vue" />
+<MdxIcon name="angular" />
 
   </ResourceCard>
 </Column>
 <Column colLg={4} colMd={4} noGutterSm>
   <ResourceCard
-      subTitle="Web Components (Community)"
-      href="https://web-components.carbondesignsystem.com/?path=/story/components-breadcrumb--default"
+      subTitle="Vue (Community)"
+      href="http://vue.carbondesignsystem.com/?path=/story/components-cvbreadcrumb--default"
       >
 
-<MdxIcon name="webcomponents" />
+<MdxIcon name="vue" />
 
   </ResourceCard>
 </Column>
@@ -74,11 +74,11 @@ usage documentation, see the Storybooks for each framework below.
     links={{
       React:
         'https://react.carbondesignsystem.com/?path=/story/components-breadcrumb--breadcrumb',
+      'Web Components':
+        'https://web-components.carbondesignsystem.com/?path=/story/components-breadcrumb--default',
       Angular:
         'https://angular.carbondesignsystem.com/?path=/story/components-breadcrumb--basic',
       Vue: 'http://vue.carbondesignsystem.com/?path=/story/components-cvbreadcrumb--default',
-      'Web Components':
-        'https://web-components.carbondesignsystem.com/?path=/story/components-breadcrumb--default',
     }}
   >
     {`
@@ -94,11 +94,11 @@ usage documentation, see the Storybooks for each framework below.
     links={{
       React:
         'https://react.carbondesignsystem.com/?path=/story/components-breadcrumb--breadcrumb',
+      'Web Components':
+        'https://web-components.carbondesignsystem.com/?path=/story/components-breadcrumb--default',
       Angular:
         'https://angular.carbondesignsystem.com/?path=/story/components-breadcrumb--basic',
       Vue: 'http://vue.carbondesignsystem.com/?path=/story/components-cvbreadcrumb--default',
-      'Web Components':
-        'https://web-components.carbondesignsystem.com/?path=/story/components-breadcrumb--default',
     }}
   >
     {`
diff --git a/src/pages/components/breadcrumb/usage.mdx b/src/pages/components/breadcrumb/usage.mdx
index 771a93dd60c..7666b309d20 100755
--- a/src/pages/components/breadcrumb/usage.mdx
+++ b/src/pages/components/breadcrumb/usage.mdx
@@ -75,11 +75,11 @@ type used should be consistent across a product.
     links={{
       React:
         'https://react.carbondesignsystem.com/?path=/story/components-breadcrumb--breadcrumb',
+      'Web Components':
+        'https://web-components.carbondesignsystem.com/?path=/story/components-breadcrumb--default',
       Angular:
         'https://angular.carbondesignsystem.com/?path=/story/components-breadcrumb--basic',
       Vue: 'http://vue.carbondesignsystem.com/?path=/story/components-cvbreadcrumb--default',
-      'Web Components':
-        'https://web-components.carbondesignsystem.com/?path=/story/components-breadcrumb--default',
     }}
   >
     {`
@@ -95,11 +95,11 @@ type used should be consistent across a product.
     links={{
       React:
         'https://react.carbondesignsystem.com/?path=/story/components-breadcrumb--breadcrumb',
+      'Web Components':
+        'https://web-components.carbondesignsystem.com/?path=/story/components-breadcrumb--default',
       Angular:
         'https://angular.carbondesignsystem.com/?path=/story/components-breadcrumb--basic',
       Vue: 'http://vue.carbondesignsystem.com/?path=/story/components-cvbreadcrumb--default',
-      'Web Components':
-        'https://web-components.carbondesignsystem.com/?path=/story/components-breadcrumb--default',
     }}
   >
     {`
diff --git a/src/pages/components/button/code.mdx b/src/pages/components/button/code.mdx
index 921ecb09b60..1f3336dbac1 100755
--- a/src/pages/components/button/code.mdx
+++ b/src/pages/components/button/code.mdx
@@ -28,31 +28,31 @@ documentation, see the Storybooks for each framework below.
 </Column>
 <Column colLg={4} colMd={4} noGutterSm>
   <ResourceCard
-      subTitle="Angular (Community)"
-      href="https://angular.carbondesignsystem.com/?path=/story/components-button--basic"
+      subTitle="Web Components"
+      href="https://web-components.carbondesignsystem.com/?path=/story/components-button--default"
       >
 
-<MdxIcon name="angular" />
+<MdxIcon name="webcomponents" />
 
   </ResourceCard>
 </Column>
 <Column colLg={4} colMd={4} noGutterSm>
   <ResourceCard
-      subTitle="Vue (Community)"
-      href="http://vue.carbondesignsystem.com/?path=/story/components-cvbutton--default"
+      subTitle="Angular (Community)"
+      href="https://angular.carbondesignsystem.com/?path=/story/components-button--basic"
       >
 
-<MdxIcon name="vue" />
+<MdxIcon name="angular" />
 
   </ResourceCard>
 </Column>
 <Column colLg={4} colMd={4} noGutterSm>
   <ResourceCard
-      subTitle="Web Components (Community)"
-      href="https://web-components.carbondesignsystem.com/?path=/story/components-button--default"
+      subTitle="Vue (Community)"
+      href="http://vue.carbondesignsystem.com/?path=/story/components-cvbutton--default"
       >
 
-<MdxIcon name="webcomponents" />
+<MdxIcon name="vue" />
 
   </ResourceCard>
 </Column>
@@ -87,11 +87,11 @@ import { Add } from '@carbon/react/icons';
     links={{
       React:
         'https://react.carbondesignsystem.com/?path=/story/components-button--default',
+      'Web Components':
+        'https://web-components.carbondesignsystem.com/?path=/story/components-button--default',
       Angular:
         'https://angular.carbondesignsystem.com/?path=/story/components-button--basic',
       Vue: 'http://vue.carbondesignsystem.com/?path=/story/components-cvbutton--default',
-      'Web Components':
-        'https://web-components.carbondesignsystem.com/?path=/story/components-button--default',
     }}
   >
     {`
@@ -106,11 +106,11 @@ import { Add } from '@carbon/react/icons';
     links={{
       React:
         'https://react.carbondesignsystem.com/?path=/story/components-button--default',
+      'Web Components':
+        'https://web-components.carbondesignsystem.com/?path=/story/components-button--default',
       Angular:
         'https://angular.carbondesignsystem.com/?path=/story/components-button--basic',
       Vue: 'http://vue.carbondesignsystem.com/?path=/story/components-cvbutton--default',
-      'Web Components':
-        'https://web-components.carbondesignsystem.com/?path=/story/components-button--default',
     }}
   >
     {`
@@ -123,11 +123,11 @@ import { Add } from '@carbon/react/icons';
     links={{
       React:
         'https://react.carbondesignsystem.com/?path=/story/components-button--icon-button',
+      'Web Components':
+        'https://web-components.carbondesignsystem.com/?path=/story/components-button--icon',
       Angular:
         'https://angular.carbondesignsystem.com/?path=/story/components-button--basic',
       Vue: 'http://vue.carbondesignsystem.com/?path=/story/components-cvbutton--icon-only',
-      'Web Components':
-        'https://web-components.carbondesignsystem.com/?path=/story/components-button--icon',
     }}
   >
     {`
diff --git a/src/pages/components/button/usage.mdx b/src/pages/components/button/usage.mdx
index cd4338e3ed8..68993497c30 100755
--- a/src/pages/components/button/usage.mdx
+++ b/src/pages/components/button/usage.mdx
@@ -107,11 +107,11 @@ import { Add } from '@carbon/react/icons';
     links={{
       React:
         'https://react.carbondesignsystem.com/?path=/story/components-button--default',
+      'Web Components':
+        'https://web-components.carbondesignsystem.com/?path=/story/components-button--default',
       Angular:
         'https://angular.carbondesignsystem.com/?path=/story/components-button--basic',
       Vue: 'http://vue.carbondesignsystem.com/?path=/story/components-cvbutton--default',
-      'Web Components':
-        'https://web-components.carbondesignsystem.com/?path=/story/components-button--default',
     }}
   >
     {`
@@ -126,11 +126,11 @@ import { Add } from '@carbon/react/icons';
     links={{
       React:
         'https://react.carbondesignsystem.com/?path=/story/components-button--default',
+      'Web Components':
+        'https://web-components.carbondesignsystem.com/?path=/story/components-button--default',
       Angular:
         'https://angular.carbondesignsystem.com/?path=/story/components-button--basic',
       Vue: 'http://vue.carbondesignsystem.com/?path=/story/components-cvbutton--default',
-      'Web Components':
-        'https://web-components.carbondesignsystem.com/?path=/story/components-button--default',
     }}
   >
     {`
@@ -143,11 +143,11 @@ import { Add } from '@carbon/react/icons';
     links={{
       React:
         'https://react.carbondesignsystem.com/?path=/story/components-button--icon-button',
+      'Web Components':
+        'https://web-components.carbondesignsystem.com/?path=/story/components-button--icon',
       Angular:
         'https://angular.carbondesignsystem.com/?path=/story/components-button--basic',
       Vue: 'http://vue.carbondesignsystem.com/?path=/story/components-cvbutton--icon-only',
-      'Web Components':
-        'https://web-components.carbondesignsystem.com/?path=/story/components-button--icon',
     }}
   >
     {`
diff --git a/src/pages/components/checkbox/code.mdx b/src/pages/components/checkbox/code.mdx
index 6eedb5b59f2..eb380ca740c 100755
--- a/src/pages/components/checkbox/code.mdx
+++ b/src/pages/components/checkbox/code.mdx
@@ -28,31 +28,31 @@ documentation, see the Storybooks for each framework below.
 </Column>
 <Column colLg={4} colMd={4} noGutterSm>
   <ResourceCard
-      subTitle="Angular (Community)"
-      href="https://angular.carbondesignsystem.com/?path=/story/components-checkbox--basic"
+      subTitle="Web Components"
+      href="https://web-components.carbondesignsystem.com/?path=/story/components-checkbox--default"
       >
 
-<MdxIcon name="angular" />
+<MdxIcon name="webcomponents" />
 
   </ResourceCard>
 </Column>
 <Column colLg={4} colMd={4} noGutterSm>
   <ResourceCard
-      subTitle="Vue (Community)"
-      href="http://vue.carbondesignsystem.com/?path=/story/components-cvcheckbox--default"
+      subTitle="Angular (Community)"
+      href="https://angular.carbondesignsystem.com/?path=/story/components-checkbox--basic"
       >
 
-<MdxIcon name="vue" />
+<MdxIcon name="angular" />
 
   </ResourceCard>
 </Column>
 <Column colLg={4} colMd={4} noGutterSm>
   <ResourceCard
-      subTitle="Web Components (Community)"
-      href="https://web-components.carbondesignsystem.com/?path=/story/components-checkbox--default"
+      subTitle="Vue (Community)"
+      href="http://vue.carbondesignsystem.com/?path=/story/components-cvcheckbox--default"
       >
 
-<MdxIcon name="webcomponents" />
+<MdxIcon name="vue" />
 
   </ResourceCard>
 </Column>
@@ -74,11 +74,11 @@ documentation, see the Storybooks for each framework below.
     links={{
       React:
         'https://react.carbondesignsystem.com/?path=/story/components-checkbox--checkbox',
+      'Web Components':
+        'https://web-components.carbondesignsystem.com/?path=/story/components-checkbox--default',
       Angular:
         'https://angular.carbondesignsystem.com/?path=/story/components-checkbox--basic',
       Vue: 'http://vue.carbondesignsystem.com/?path=/story/components-cvcheckbox--default',
-      'Web Components':
-        'https://web-components.carbondesignsystem.com/?path=/story/components-checkbox--default',
     }}
   >
     {`
diff --git a/src/pages/components/checkbox/usage.mdx b/src/pages/components/checkbox/usage.mdx
index 9f572880506..00fa29284c5 100755
--- a/src/pages/components/checkbox/usage.mdx
+++ b/src/pages/components/checkbox/usage.mdx
@@ -103,11 +103,11 @@ set whereas radio buttons allow the user to select only one option.
     links={{
       React:
         'https://react.carbondesignsystem.com/?path=/story/components-checkbox--checkbox',
+      'Web Components':
+        'https://web-components.carbondesignsystem.com/?path=/story/components-checkbox--default',
       Angular:
         'https://angular.carbondesignsystem.com/?path=/story/components-checkbox--basic',
       Vue: 'http://vue.carbondesignsystem.com/?path=/story/components-cvcheckbox--default',
-      'Web Components':
-        'https://web-components.carbondesignsystem.com/?path=/story/components-checkbox--default',
     }}
   >
     {`
diff --git a/src/pages/components/code-snippet/code.mdx b/src/pages/components/code-snippet/code.mdx
index bd96fff8581..4e7a2101708 100755
--- a/src/pages/components/code-snippet/code.mdx
+++ b/src/pages/components/code-snippet/code.mdx
@@ -28,31 +28,31 @@ usage documentation, see the Storybooks for each framework below.
 </Column>
 <Column colLg={4} colMd={4} noGutterSm>
   <ResourceCard
-      subTitle="Angular (Community)"
-      href="https://angular.carbondesignsystem.com/?path=/story/components-code-snippet--basic"
+      subTitle="Web Components"
+      href="https://web-components.carbondesignsystem.com/?path=/story/components-code-snippet--single-line"
       >
 
-<MdxIcon name="angular" />
+<MdxIcon name="webcomponents" />
 
   </ResourceCard>
 </Column>
 <Column colLg={4} colMd={4} noGutterSm>
   <ResourceCard
-      subTitle="Vue (Community)"
-      href="http://vue.carbondesignsystem.com/?path=/story/components-cvcodesnippet--default"
+      subTitle="Angular (Community)"
+      href="https://angular.carbondesignsystem.com/?path=/story/components-code-snippet--basic"
       >
 
-<MdxIcon name="vue" />
+<MdxIcon name="angular" />
 
   </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"
+      subTitle="Vue (Community)"
+      href="http://vue.carbondesignsystem.com/?path=/story/components-cvcodesnippet--default"
       >
 
-<MdxIcon name="webcomponents" />
+<MdxIcon name="vue" />
 
   </ResourceCard>
 </Column>
@@ -88,11 +88,11 @@ import {
     links={{
       React:
         'https://react.carbondesignsystem.com/?path=/story/components-codesnippet--singleline',
+      'Web Components':
+        'https://web-components.carbondesignsystem.com/?path=/story/components-code-snippet--single-line',
       Angular:
         'https://angular.carbondesignsystem.com/?path=/story/components-code-snippet--basic',
       Vue: 'http://vue.carbondesignsystem.com/?path=/story/components-cvcodesnippet--default',
-      'Web Components':
-        'https://web-components.carbondesignsystem.com/?path=/story/components-code-snippet--single-line',
     }}
   >
     {`
@@ -107,11 +107,11 @@ import {
     links={{
       React:
         'https://react.carbondesignsystem.com/?path=/story/components-codesnippet--multiline',
+      'Web Components':
+        'https://web-components.carbondesignsystem.com/?path=/story/components-code-snippet--multi-line',
       Angular:
         'https://angular.carbondesignsystem.com/?path=/story/components-code-snippet--basic',
       Vue: 'http://vue.carbondesignsystem.com/?path=/story/components-cvcodesnippet--default',
-      'Web Components':
-        'https://web-components.carbondesignsystem.com/?path=/story/components-code-snippet--multi-line',
     }}
   >
     {`
@@ -126,11 +126,11 @@ import {
     links={{
       React:
         'https://react.carbondesignsystem.com/?path=/story/components-codesnippet--inline',
+      'Web Components':
+        'https://web-components.carbondesignsystem.com/?path=/story/components-code-snippet--inline',
       Angular:
         'https://angular.carbondesignsystem.com/?path=/story/components-code-snippet--basic',
       Vue: 'http://vue.carbondesignsystem.com/?path=/story/components-cvcodesnippet--default',
-      'Web Components':
-        'https://web-components.carbondesignsystem.com/?path=/story/components-code-snippet--inline',
     }}
   >
     {`
diff --git a/src/pages/components/code-snippet/usage.mdx b/src/pages/components/code-snippet/usage.mdx
index 9f7873dae7f..fadad44b770 100644
--- a/src/pages/components/code-snippet/usage.mdx
+++ b/src/pages/components/code-snippet/usage.mdx
@@ -83,11 +83,11 @@ length use cases—inline, single line, and multi-line.
     links={{
       React:
         'https://react.carbondesignsystem.com/?path=/story/components-codesnippet--singleline',
+      'Web Components':
+        'https://web-components.carbondesignsystem.com/?path=/story/components-code-snippet--single-line',
       Angular:
         'https://angular.carbondesignsystem.com/?path=/story/components-code-snippet--basic',
       Vue: 'http://vue.carbondesignsystem.com/?path=/story/components-cvcodesnippet--default',
-      'Web Components':
-        'https://web-components.carbondesignsystem.com/?path=/story/components-code-snippet--single-line',
     }}
   >
     {`
@@ -100,11 +100,11 @@ length use cases—inline, single line, and multi-line.
     links={{
       React:
         'https://react.carbondesignsystem.com/?path=/story/components-codesnippet--multiline',
+      'Web Components':
+        'https://web-components.carbondesignsystem.com/?path=/story/components-code-snippet--multi-line',
       Angular:
         'https://angular.carbondesignsystem.com/?path=/story/components-code-snippet--basic',
       Vue: 'http://vue.carbondesignsystem.com/?path=/story/components-cvcodesnippet--default',
-      'Web Components':
-        'https://web-components.carbondesignsystem.com/?path=/story/components-code-snippet--multi-line',
     }}
   >
     {`
@@ -119,11 +119,11 @@ length use cases—inline, single line, and multi-line.
     links={{
       React:
         'https://react.carbondesignsystem.com/?path=/story/components-codesnippet--inline',
+      'Web Components':
+        'https://web-components.carbondesignsystem.com/?path=/story/components-code-snippet--inline',
       Angular:
         'https://angular.carbondesignsystem.com/?path=/story/components-code-snippet--basic',
       Vue: 'http://vue.carbondesignsystem.com/?path=/story/components-cvcodesnippet--default',
-      'Web Components':
-        'https://web-components.carbondesignsystem.com/?path=/story/components-code-snippet--inline',
     }}
   >
     {`
diff --git a/src/pages/components/content-switcher/code.mdx b/src/pages/components/content-switcher/code.mdx
index 2b41f551f4b..60466f7c345 100755
--- a/src/pages/components/content-switcher/code.mdx
+++ b/src/pages/components/content-switcher/code.mdx
@@ -29,31 +29,31 @@ code usage documentation, see the Storybooks for each framework below.
 </Column>
 <Column colLg={4} colMd={4} noGutterSm>
   <ResourceCard
-      subTitle="Angular (Community)"
-      href="https://angular.carbondesignsystem.com/?path=/story/components-content-switcher--basic"
+      subTitle="Web Components"
+      href="https://web-components.carbondesignsystem.com/?path=/story/components-content-switcher--default"
       >
 
-<MdxIcon name="angular" />
+<MdxIcon name="webcomponents" />
 
   </ResourceCard>
 </Column>
 <Column colLg={4} colMd={4} noGutterSm>
   <ResourceCard
-      subTitle="Vue (Community)"
-      href="http://vue.carbondesignsystem.com/?path=/story/components-cvcontentswitcher--default"
+      subTitle="Angular (Community)"
+      href="https://angular.carbondesignsystem.com/?path=/story/components-content-switcher--basic"
       >
 
-<MdxIcon name="vue" />
+<MdxIcon name="angular" />
 
   </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"
+      subTitle="Vue (Community)"
+      href="http://vue.carbondesignsystem.com/?path=/story/components-cvcontentswitcher--default"
       >
 
-<MdxIcon name="webcomponents" />
+<MdxIcon name="vue" />
 
   </ResourceCard>
 </Column>
@@ -78,11 +78,11 @@ code usage documentation, see the Storybooks for each framework below.
     links={{
       React:
         'https://react.carbondesignsystem.com/?path=/story/components-contentswitcher--default',
+      'Web Components':
+        'https://web-components.carbondesignsystem.com/?path=/story/components-content-switcher--default',
       Angular:
         'https://angular.carbondesignsystem.com/?path=/story/components-content-switcher--basic',
       Vue: 'http://vue.carbondesignsystem.com/?path=/story/components-cvcontentswitcher--default',
-      'Web Components':
-        'https://web-components.carbondesignsystem.com/?path=/story/components-content-switcher--default',
     }}
   >
     {`
diff --git a/src/pages/components/content-switcher/usage.mdx b/src/pages/components/content-switcher/usage.mdx
index b084992a787..b41ad20a808 100755
--- a/src/pages/components/content-switcher/usage.mdx
+++ b/src/pages/components/content-switcher/usage.mdx
@@ -81,11 +81,11 @@ binary decision.
     links={{
       React:
         'https://react.carbondesignsystem.com/?path=/story/components-contentswitcher--default',
+      'Web Components':
+        'https://web-components.carbondesignsystem.com/?path=/story/components-content-switcher--default',
       Angular:
         'https://angular.carbondesignsystem.com/?path=/story/components-content-switcher--basic',
       Vue: 'http://vue.carbondesignsystem.com/?path=/story/components-cvcontentswitcher--default',
-      'Web Components':
-        'https://web-components.carbondesignsystem.com/?path=/story/components-content-switcher--default',
     }}
   >
     {`
diff --git a/src/pages/components/data-table/code.mdx b/src/pages/components/data-table/code.mdx
index 3e27f898971..1a4fc83c43f 100644
--- a/src/pages/components/data-table/code.mdx
+++ b/src/pages/components/data-table/code.mdx
@@ -31,31 +31,31 @@ usage documentation, see the Storybooks for each framework below.
 </Column>
 <Column colLg={4} colMd={4} noGutterSm>
   <ResourceCard
-      subTitle="Angular (Community)"
-      href="https://angular.carbondesignsystem.com/?path=/story/components-data-table--basic"
+      subTitle="Web Components"
+      href="https://web-components.carbondesignsystem.com/?path=/story/components-data-table--default"
       >
 
-<MdxIcon name="angular" />
+<MdxIcon name="webcomponents" />
 
   </ResourceCard>
 </Column>
 <Column colLg={4} colMd={4} noGutterSm>
   <ResourceCard
-      subTitle="Vue (Community)"
-      href="http://vue.carbondesignsystem.com/?path=/story/components-cvdatatable--minimal"
+      subTitle="Angular (Community)"
+      href="https://angular.carbondesignsystem.com/?path=/story/components-data-table--basic"
       >
 
-<MdxIcon name="vue" />
+<MdxIcon name="angular" />
 
   </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"
+      subTitle="Vue (Community)"
+      href="http://vue.carbondesignsystem.com/?path=/story/components-cvdatatable--minimal"
       >
 
-<MdxIcon name="webcomponents" />
+<MdxIcon name="vue" />
 
   </ResourceCard>
 </Column>
@@ -90,11 +90,11 @@ usage documentation, see the Storybooks for each framework below.
     links={{
       React:
         'https://react.carbondesignsystem.com/?path=/story/components-datatable--default',
+      'Web Components':
+        'https://web-components.carbondesignsystem.com/?path=/story/components-data-table--default',
       Angular:
         'https://angular.carbondesignsystem.com/?path=/story/components-table--basic',
       Vue: 'http://vue.carbondesignsystem.com/?path=/story/components-cvdatatable--minimal',
-      'Web Components':
-        'https://web-components.carbondesignsystem.com/?path=/story/components-data-table--default',
     }}
   >
     {`<DataTable rows={rowData} headers={headerData}>
@@ -130,11 +130,11 @@ usage documentation, see the Storybooks for each framework below.
     links={{
       React:
         'https://react.carbondesignsystem.com/?path=/story/components-datatable-selection--default',
+      'Web Components':
+        'https://web-components.carbondesignsystem.com/?path=/story/components-data-table--default',
       Angular:
         'https://angular.carbondesignsystem.com/?path=/story/components-table--basic',
       Vue: 'http://vue.carbondesignsystem.com/?path=/story/components-cvdatatable--default',
-      'Web Components':
-        'https://web-components.carbondesignsystem.com/?path=/story/components-data-table--default',
     }}
   >
     {`<DataTable rows={rowData} headers={headerData}>
@@ -179,11 +179,11 @@ usage documentation, see the Storybooks for each framework below.
     links={{
       React:
         'https://react.carbondesignsystem.com/?path=/story/components-datatable-expansion--default',
+      'Web Components':
+        'https://web-components.carbondesignsystem.com/?path=/story/components-data-table--expandable',
       Angular:
         'https://angular.carbondesignsystem.com/?path=/story/components-table--with-expansion',
       Vue: 'http://vue.carbondesignsystem.com/?path=/story/components-cvdatatable--slotted-expanding-data',
-      'Web Components':
-        'https://web-components.carbondesignsystem.com/?path=/story/components-data-table--expandable',
     }}
   >
     {`<DataTable
@@ -228,11 +228,11 @@ usage documentation, see the Storybooks for each framework below.
     links={{
       React:
         'https://react.carbondesignsystem.com/?path=/story/components-datatable-batch-actions--default',
+      'Web Components':
+        'https://web-components.carbondesignsystem.com/?path=/story/components-data-table--default',
       Angular:
         'https://angular.carbondesignsystem.com/?path=/story/components-table--with-toolbar',
       Vue: 'http://vue.carbondesignsystem.com/?path=/story/components-cvdatatable--default',
-      '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 727aa36519c..fe0cdb5fbe7 100755
--- a/src/pages/components/data-table/usage.mdx
+++ b/src/pages/components/data-table/usage.mdx
@@ -89,11 +89,11 @@ import { TrashCan, Save, Download } from '@carbon/icons-react';
     links={{
       React:
         'https://react.carbondesignsystem.com/?path=/story/components-datatable--default',
+      'Web Components':
+        'https://web-components.carbondesignsystem.com/?path=/story/components-data-table--default',
       Angular:
         'https://angular.carbondesignsystem.com/?path=/story/components-table--basic',
       Vue: 'http://vue.carbondesignsystem.com/?path=/story/components-cvdatatable--minimal',
-      'Web Components':
-        'https://web-components.carbondesignsystem.com/?path=/story/components-data-table--default',
     }}
   >
     {`<DataTable rows={rowData} headers={headerData}>
@@ -129,11 +129,11 @@ import { TrashCan, Save, Download } from '@carbon/icons-react';
     links={{
       React:
         'https://react.carbondesignsystem.com/?path=/story/components-datatable-selection--default',
+      'Web Components':
+        'https://web-components.carbondesignsystem.com/?path=/story/components-data-table--default',
       Angular:
         'https://angular.carbondesignsystem.com/?path=/story/components-table--basic',
       Vue: 'http://vue.carbondesignsystem.com/?path=/story/components-cvdatatable--default',
-      'Web Components':
-        'https://web-components.carbondesignsystem.com/?path=/story/components-data-table--default',
     }}
   >
     {`<DataTable rows={rowData} headers={headerData}>
@@ -178,11 +178,11 @@ import { TrashCan, Save, Download } from '@carbon/icons-react';
     links={{
       React:
         'https://react.carbondesignsystem.com/?path=/story/components-datatable-expansion--default',
+      'Web Components':
+        'https://web-components.carbondesignsystem.com/?path=/story/components-data-table--expandable',
       Angular:
         'https://angular.carbondesignsystem.com/?path=/story/components-table--with-expansion',
       Vue: 'http://vue.carbondesignsystem.com/?path=/story/components-cvdatatable--slotted-expanding-data',
-      'Web Components':
-        'https://web-components.carbondesignsystem.com/?path=/story/components-data-table--expandable',
     }}
   >
     {`<DataTable
@@ -227,11 +227,11 @@ import { TrashCan, Save, Download } from '@carbon/icons-react';
     links={{
       React:
         'https://react.carbondesignsystem.com/?path=/story/components-datatable-batch-actions--default',
+      'Web Components':
+        'https://web-components.carbondesignsystem.com/?path=/story/components-data-table--default',
       Angular:
         'https://angular.carbondesignsystem.com/?path=/story/components-table--with-toolbar',
       Vue: 'http://vue.carbondesignsystem.com/?path=/story/components-cvdatatable--default',
-      '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 6ffa6e11298..e3ff8e36a3d 100755
--- a/src/pages/components/date-picker/code.mdx
+++ b/src/pages/components/date-picker/code.mdx
@@ -28,31 +28,31 @@ usage documentation, see the Storybooks for each framework below.
 </Column>
 <Column colLg={4} colMd={4} noGutterSm>
   <ResourceCard
-      subTitle="Angular (Community)"
-      href="https://angular.carbondesignsystem.com/?path=/story/components-date-picker--basic"
+      subTitle="Web Components"
+      href="https://web-components.carbondesignsystem.com/?path=/story/components-date-picker--default"
       >
 
-<MdxIcon name="angular" />
+<MdxIcon name="webcomponents" />
 
   </ResourceCard>
 </Column>
 <Column colLg={4} colMd={4} noGutterSm>
   <ResourceCard
-      subTitle="Vue (Community)"
-      href="http://vue.carbondesignsystem.com/?path=/story/components-cvdatepicker--default"
+      subTitle="Angular (Community)"
+      href="https://angular.carbondesignsystem.com/?path=/story/components-date-picker--basic"
       >
 
-<MdxIcon name="vue" />
+<MdxIcon name="angular" />
 
   </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"
+      subTitle="Vue (Community)"
+      href="http://vue.carbondesignsystem.com/?path=/story/components-cvdatepicker--default"
       >
 
-<MdxIcon name="webcomponents" />
+<MdxIcon name="vue" />
 
   </ResourceCard>
 </Column>
@@ -90,11 +90,11 @@ usage documentation, see the Storybooks for each framework below.
     links={{
       React:
         'https://react.carbondesignsystem.com/?path=/story/components-datepicker--simple',
+      'Web Components':
+        'https://web-components.carbondesignsystem.com/?path=/story/components-date-picker--default',
       Angular:
         'https://angular.carbondesignsystem.com/?path=/story/components-date-picker--simple',
       Vue: 'http://vue.carbondesignsystem.com/?path=/story/components-cvdatepicker--default',
-      'Web Components':
-        'https://web-components.carbondesignsystem.com/?path=/story/components-date-picker--default',
     }}
   >
     {`
@@ -117,11 +117,11 @@ usage documentation, see the Storybooks for each framework below.
     links={{
       React:
         'https://react.carbondesignsystem.com/?path=/story/components-datepicker--single',
+      'Web Components':
+        'https://web-components.carbondesignsystem.com/?path=/story/components-date-picker--single-with-calendar',
       Angular:
         'https://angular.carbondesignsystem.com/?path=/story/components-date-picker--single',
       Vue: 'http://vue.carbondesignsystem.com/?path=/story/components-cvdatepicker--single',
-      'Web Components':
-        'https://web-components.carbondesignsystem.com/?path=/story/components-date-picker--single-with-calendar',
     }}
   >
     {`
@@ -144,11 +144,11 @@ usage documentation, see the Storybooks for each framework below.
     links={{
       React:
         'https://react.carbondesignsystem.com/?path=/story/components-datepicker--range',
+      'Web Components':
+        'https://web-components.carbondesignsystem.com/?path=/story/components-date-picker--range-with-calendar',
       Angular:
         'https://angular.carbondesignsystem.com/?path=/story/components-date-picker--range',
       Vue: 'http://vue.carbondesignsystem.com/?path=/story/components-cvdatepicker--range',
-      'Web Components':
-        'https://web-components.carbondesignsystem.com/?path=/story/components-date-picker--range-with-calendar',
     }}
   >
     {`
@@ -176,11 +176,11 @@ usage documentation, see the Storybooks for each framework below.
     links={{
       React:
         'https://react.carbondesignsystem.com/?path=/story/components-timepicker--default',
+      'Web Components':
+        'https://web-components.carbondesignsystem.com/?path=/story/components-date-picker--default',
       Angular:
         'https://angular.carbondesignsystem.com/?path=/story/components-time-picker--simple',
       Vue: 'http://vue.carbondesignsystem.com/?path=/storycomponents-cvdatepicker--default',
-      'Web Components':
-        'https://web-components.carbondesignsystem.com/?path=/story/components-date-picker--default',
     }}
   >
     {`
diff --git a/src/pages/components/date-picker/usage.mdx b/src/pages/components/date-picker/usage.mdx
index 1bdd17e71cf..c943167ae13 100755
--- a/src/pages/components/date-picker/usage.mdx
+++ b/src/pages/components/date-picker/usage.mdx
@@ -80,11 +80,11 @@ You can customize the time picker's format depending on location or need.
     links={{
       React:
         'https://react.carbondesignsystem.com/?path=/story/components-datepicker--simple',
+      'Web Components':
+        'https://web-components.carbondesignsystem.com/?path=/story/components-date-picker--default',
       Angular:
         'https://angular.carbondesignsystem.com/?path=/story/components-date-picker--simple',
       Vue: 'http://vue.carbondesignsystem.com/?path=/story/components-cvdatepicker--default',
-      'Web Components':
-        'https://web-components.carbondesignsystem.com/?path=/story/components-date-picker--default',
     }}
   >
     {`
@@ -107,11 +107,11 @@ You can customize the time picker's format depending on location or need.
     links={{
       React:
         'https://react.carbondesignsystem.com/?path=/story/components-datepicker--single',
+      'Web Components':
+        'https://web-components.carbondesignsystem.com/?path=/story/components-date-picker--single-with-calendar',
       Angular:
         'https://angular.carbondesignsystem.com/?path=/story/components-date-picker--single',
       Vue: 'http://vue.carbondesignsystem.com/?path=/story/components-cvdatepicker--single',
-      'Web Components':
-        'https://web-components.carbondesignsystem.com/?path=/story/components-date-picker--single-with-calendar',
     }}
   >
     {`
@@ -134,11 +134,11 @@ You can customize the time picker's format depending on location or need.
     links={{
       React:
         'https://react.carbondesignsystem.com/?path=/story/components-datepicker--range',
+      'Web Components':
+        'https://web-components.carbondesignsystem.com/?path=/story/components-date-picker--range-with-calendar',
       Angular:
         'https://angular.carbondesignsystem.com/?path=/story/components-date-picker--range',
       Vue: 'http://vue.carbondesignsystem.com/?path=/story/components-cvdatepicker--range',
-      'Web Components':
-        'https://web-components.carbondesignsystem.com/?path=/story/components-date-picker--range-with-calendar',
     }}
   >
     {`
@@ -166,11 +166,11 @@ You can customize the time picker's format depending on location or need.
     links={{
       React:
         'https://react.carbondesignsystem.com/?path=/story/components-timepicker--default',
+      'Web Components':
+        'https://web-components.carbondesignsystem.com/?path=/story/components-date-picker--default',
       Angular:
         'https://angular.carbondesignsystem.com/?path=/story/components-time-picker--simple',
       Vue: 'http://vue.carbondesignsystem.com/?path=/storycomponents-cvdatepicker--default',
-      'Web Components':
-        'https://web-components.carbondesignsystem.com/?path=/story/components-date-picker--default',
     }}
   >
     {`
diff --git a/src/pages/components/dropdown/code.mdx b/src/pages/components/dropdown/code.mdx
index ae53d3f85bf..cd4e41af589 100755
--- a/src/pages/components/dropdown/code.mdx
+++ b/src/pages/components/dropdown/code.mdx
@@ -30,31 +30,31 @@ documentation, see the Storybooks for each framework below.
 </Column>
 <Column colLg={4} colMd={4} noGutterSm>
   <ResourceCard
-      subTitle="Angular (Community)"
-      href="https://angular.carbondesignsystem.com/?path=/story/components-dropdown--basic"
+      subTitle="Web Components"
+      href="https://web-components.carbondesignsystem.com/?path=/story/components-dropdown--default"
       >
 
-<MdxIcon name="angular" />
+<MdxIcon name="webcomponents" />
 
   </ResourceCard>
 </Column>
 <Column colLg={4} colMd={4} noGutterSm>
   <ResourceCard
-      subTitle="Vue (Community)"
-      href="http://vue.carbondesignsystem.com/?path=/story/components-cvdropdown--default"
+      subTitle="Angular (Community)"
+      href="https://angular.carbondesignsystem.com/?path=/story/components-dropdown--basic"
       >
 
-<MdxIcon name="vue" />
+<MdxIcon name="angular" />
 
   </ResourceCard>
 </Column>
 <Column colLg={4} colMd={4} noGutterSm>
   <ResourceCard
-      subTitle="Web Components (Community)"
-      href="https://web-components.carbondesignsystem.com/?path=/story/components-dropdown--default"
+      subTitle="Vue (Community)"
+      href="http://vue.carbondesignsystem.com/?path=/story/components-cvdropdown--default"
       >
 
-<MdxIcon name="webcomponents" />
+<MdxIcon name="vue" />
 
   </ResourceCard>
 </Column>
@@ -91,11 +91,11 @@ documentation, see the Storybooks for each framework below.
     links={{
       React:
         'https://react.carbondesignsystem.com/?path=/story/components-dropdown--default',
+      'Web Components':
+        'https://web-components.carbondesignsystem.com/?path=/story/components-dropdown--default',
       Angular:
         'https://angular.carbondesignsystem.com/?path=/story/components-dropdown--basic',
       Vue: 'http://vue.carbondesignsystem.com/?path=/story/components-cvdropdown--default',
-      'Web Components':
-        'https://web-components.carbondesignsystem.com/?path=/story/components-dropdown--default',
     }}
   >
     {`
@@ -118,11 +118,11 @@ documentation, see the Storybooks for each framework below.
     links={{
       React:
         'https://react.carbondesignsystem.com/?path=/story/components-combobox--combobox',
+      'Web Components':
+        'https://web-components.carbondesignsystem.com/?path=/story/components-combo-box--default',
       Angular:
         'https://angular.carbondesignsystem.com/?path=/story/components-dropdown--basic',
       Vue: 'http://vue.carbondesignsystem.com/?path=/story/components-cvcombobox--default',
-      'Web Components':
-        'https://web-components.carbondesignsystem.com/?path=/story/components-combo-box--default',
     }}
   >
     {`
@@ -145,11 +145,11 @@ documentation, see the Storybooks for each framework below.
     links={{
       React:
         'https://react.carbondesignsystem.com/?path=/story/components-multiselect--default',
+      'Web Components':
+        'https://web-components.carbondesignsystem.com/?path=/story/components-multi-select--default',
       Angular:
         'https://angular.carbondesignsystem.com/?path=/story/components-dropdown--basic',
       Vue: 'http://vue.carbondesignsystem.com/?path=/story/components-cvmultiselect--default',
-      'Web Components':
-        'https://web-components.carbondesignsystem.com/?path=/story/components-multi-select--default',
     }}
   >
     {`
@@ -170,11 +170,11 @@ documentation, see the Storybooks for each framework below.
     links={{
       React:
         'https://react.carbondesignsystem.com/?path=/story/components-multiselect--filterable',
+      'Web Components':
+        'https://web-components.carbondesignsystem.com/?path=/story/components-multi-select--default',
       Angular:
         'https://angular.carbondesignsystem.com/?path=/story/components-dropdown--basic',
       Vue: 'http://vue.carbondesignsystem.com/?path=/story/components-cvmultiselect--user-filter-and-or-highlight',
-      'Web Components':
-        'https://web-components.carbondesignsystem.com/?path=/story/components-multi-select--default',
     }}
   >
     {`
diff --git a/src/pages/components/dropdown/usage.mdx b/src/pages/components/dropdown/usage.mdx
index cfe949747d8..e416ebca15c 100755
--- a/src/pages/components/dropdown/usage.mdx
+++ b/src/pages/components/dropdown/usage.mdx
@@ -98,11 +98,11 @@ functionality—dropdown, multiselect, and combo box.
     links={{
       React:
         'https://react.carbondesignsystem.com/?path=/story/components-dropdown--default',
+      'Web Components':
+        'https://web-components.carbondesignsystem.com/?path=/story/components-dropdown--default',
       Angular:
         'https://angular.carbondesignsystem.com/?path=/story/components-dropdown--basic',
       Vue: 'http://vue.carbondesignsystem.com/?path=/story/components-cvdropdown--default',
-      'Web Components':
-        'https://web-components.carbondesignsystem.com/?path=/story/components-dropdown--default',
     }}
   >
     {`
@@ -125,11 +125,11 @@ functionality—dropdown, multiselect, and combo box.
     links={{
       React:
         'https://react.carbondesignsystem.com/?path=/story/components-combobox--combobox',
+      'Web Components':
+        'https://web-components.carbondesignsystem.com/?path=/story/components-combo-box--default',
       Angular:
         'https://angular.carbondesignsystem.com/?path=/story/components-dropdown--basic',
       Vue: 'http://vue.carbondesignsystem.com/?path=/story/components-cvcombobox--default',
-      'Web Components':
-        'https://web-components.carbondesignsystem.com/?path=/story/components-combo-box--default',
     }}
   >
     {`
@@ -152,11 +152,11 @@ functionality—dropdown, multiselect, and combo box.
     links={{
       React:
         'https://react.carbondesignsystem.com/?path=/story/components-multiselect--default',
+      'Web Components':
+        'https://web-components.carbondesignsystem.com/?path=/story/components-multi-select--default',
       Angular:
         'https://angular.carbondesignsystem.com/?path=/story/components-dropdown--basic',
       Vue: 'http://vue.carbondesignsystem.com/?path=/story/components-cvmultiselect--default',
-      'Web Components':
-        'https://web-components.carbondesignsystem.com/?path=/story/components-multi-select--default',
     }}
   >
     {`
@@ -177,11 +177,11 @@ functionality—dropdown, multiselect, and combo box.
     links={{
       React:
         'https://react.carbondesignsystem.com/?path=/story/components-multiselect--filterable',
+      'Web Components':
+        'https://web-components.carbondesignsystem.com/?path=/story/components-multi-select--default',
       Angular:
         'https://angular.carbondesignsystem.com/?path=/story/components-dropdown--basic',
       Vue: 'http://vue.carbondesignsystem.com/?path=/story/components-cvmultiselect--user-filter-and-or-highlight',
-      'Web Components':
-        'https://web-components.carbondesignsystem.com/?path=/story/components-multi-select--default',
     }}
   >
     {`
diff --git a/src/pages/components/file-uploader/code.mdx b/src/pages/components/file-uploader/code.mdx
index 08666011765..80ce15c8d2b 100755
--- a/src/pages/components/file-uploader/code.mdx
+++ b/src/pages/components/file-uploader/code.mdx
@@ -28,31 +28,31 @@ usage documentation, see the Storybooks for each framework below.
 </Column>
 <Column colLg={4} colMd={4} noGutterSm>
   <ResourceCard
-      subTitle="Angular (Community)"
-      href="https://angular.carbondesignsystem.com/?path=/story/components-file-uploader--basic"
+      subTitle="Web Components"
+      href="https://web-components.carbondesignsystem.com/?path=/story/components-file-uploader--default"
       >
 
-<MdxIcon name="angular" />
+<MdxIcon name="webcomponents" />
 
   </ResourceCard>
 </Column>
 <Column colLg={4} colMd={4} noGutterSm>
   <ResourceCard
-      subTitle="Vue (Community)"
-      href="http://vue.carbondesignsystem.com/?path=/story/components-cvfileuploader--default"
+      subTitle="Angular (Community)"
+      href="https://angular.carbondesignsystem.com/?path=/story/components-file-uploader--basic"
       >
 
-<MdxIcon name="vue" />
+<MdxIcon name="angular" />
 
   </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"
+      subTitle="Vue (Community)"
+      href="http://vue.carbondesignsystem.com/?path=/story/components-cvfileuploader--default"
       >
 
-<MdxIcon name="webcomponents" />
+<MdxIcon name="vue" />
 
   </ResourceCard>
 </Column>
@@ -84,11 +84,11 @@ usage documentation, see the Storybooks for each framework below.
     links={{
       React:
         'https://react.carbondesignsystem.com/?path=/story/components-fileuploader--file-uploader',
+      'Web Components':
+        'https://web-components.carbondesignsystem.com/?path=/story/components-file-uploader--default',
       Angular:
         'https://angular.carbondesignsystem.com/?path=/story/components-file-uploader--basic',
       Vue: 'http://vue.carbondesignsystem.com/?path=/story/components-cvfileuploader--default',
-      'Web Components':
-        'https://web-components.carbondesignsystem.com/?path=/story/components-file-uploader--default',
     }}
   >
     {`
@@ -116,11 +116,11 @@ usage documentation, see the Storybooks for each framework below.
     links={{
       React:
         'https://react.carbondesignsystem.com/?path=/story/components-fileuploader--drag-and-drop-upload-container-example-application',
+      'Web Components':
+        'https://web-components.carbondesignsystem.com/?path=/story/components-file-uploader--default',
       Angular:
         'https://angular.carbondesignsystem.com/?path=/story/components-file-uploader--drag-and-drop',
       Vue: 'http://vue.carbondesignsystem.com/?path=/story/components-cvfileuploader--default',
-      'Web Components':
-        'https://web-components.carbondesignsystem.com/?path=/story/components-file-uploader--default',
     }}
   >
     {`
@@ -148,11 +148,11 @@ usage documentation, see the Storybooks for each framework below.
     links={{
       React:
         'https://react.carbondesignsystem.com/?path=/story/components-fileuploader--file-uploader-item',
+      'Web Components':
+        'https://web-components.carbondesignsystem.com/?path=/story/components-file-uploader--default',
       Angular:
         'https://angular.carbondesignsystem.com/?path=/story/components-file-uploader--basic',
       Vue: 'http://vue.carbondesignsystem.com/?path=/story/components-cvfileuploader--default',
-      'Web Components':
-        'https://web-components.carbondesignsystem.com/?path=/story/components-file-uploader--default',
     }}
   >
     {`
diff --git a/src/pages/components/file-uploader/usage.mdx b/src/pages/components/file-uploader/usage.mdx
index a287d12285e..add610441e5 100755
--- a/src/pages/components/file-uploader/usage.mdx
+++ b/src/pages/components/file-uploader/usage.mdx
@@ -78,11 +78,11 @@ file uploader.
     links={{
       React:
         'https://react.carbondesignsystem.com/?path=/story/components-fileuploader--file-uploader',
+      'Web Components':
+        'https://web-components.carbondesignsystem.com/?path=/story/components-file-uploader--default',
       Angular:
         'https://angular.carbondesignsystem.com/?path=/story/components-file-uploader--basic',
       Vue: 'http://vue.carbondesignsystem.com/?path=/story/components-cvfileuploader--default',
-      'Web Components':
-        'https://web-components.carbondesignsystem.com/?path=/story/components-file-uploader--default',
     }}
   >
     {`
@@ -110,11 +110,11 @@ file uploader.
     links={{
       React:
         'https://react.carbondesignsystem.com/?path=/story/components-fileuploader--drag-and-drop-upload-container-example-application',
+      'Web Components':
+        'https://web-components.carbondesignsystem.com/?path=/story/components-file-uploader--default',
       Angular:
         'https://angular.carbondesignsystem.com/?path=/story/components-file-uploader--drag-and-drop',
       Vue: 'http://vue.carbondesignsystem.com/?path=/story/components-cvfileuploader--default',
-      'Web Components':
-        'https://web-components.carbondesignsystem.com/?path=/story/components-file-uploader--default',
     }}
   >
     {`
@@ -142,11 +142,11 @@ file uploader.
     links={{
       React:
         'https://react.carbondesignsystem.com/?path=/story/components-fileuploader--file-uploader-item',
+      'Web Components':
+        'https://web-components.carbondesignsystem.com/?path=/story/components-file-uploader--default',
       Angular:
         'https://angular.carbondesignsystem.com/?path=/story/components-file-uploader--basic',
       Vue: 'http://vue.carbondesignsystem.com/?path=/story/components-cvfileuploader--default',
-      'Web Components':
-        'https://web-components.carbondesignsystem.com/?path=/story/components-file-uploader--default',
     }}
   >
     {`
diff --git a/src/pages/components/form/code.mdx b/src/pages/components/form/code.mdx
index 21a673eb953..d0af55aa876 100755
--- a/src/pages/components/form/code.mdx
+++ b/src/pages/components/form/code.mdx
@@ -28,31 +28,31 @@ documentation, see the Storybooks for each framework below.
 </Column>
 <Column colLg={4} colMd={4} noGutterSm>
   <ResourceCard
-      subTitle="Angular (Community)"
-      href="https://angular.carbondesignsystem.com/?path=/story/components-input--label"
+      subTitle="Web Components"
+      href="https://web-components.carbondesignsystem.com/?path=/story/components-input--form-item"
       >
 
-<MdxIcon name="angular" />
+<MdxIcon name="webcomponents" />
 
   </ResourceCard>
 </Column>
 <Column colLg={4} colMd={4} noGutterSm>
   <ResourceCard
-      subTitle="Vue (Community)"
-      href="http://vue.carbondesignsystem.com/?path=/story/components-cvform--default"
+      subTitle="Angular (Community)"
+      href="https://angular.carbondesignsystem.com/?path=/story/components-input--label"
       >
 
-<MdxIcon name="vue" />
+<MdxIcon name="angular" />
 
   </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"
+      subTitle="Vue (Community)"
+      href="http://vue.carbondesignsystem.com/?path=/story/components-cvform--default"
       >
 
-<MdxIcon name="webcomponents" />
+<MdxIcon name="vue" />
 
   </ResourceCard>
 </Column>
diff --git a/src/pages/components/inline-loading/code.mdx b/src/pages/components/inline-loading/code.mdx
index 7ca986f245e..62d9c3010c8 100755
--- a/src/pages/components/inline-loading/code.mdx
+++ b/src/pages/components/inline-loading/code.mdx
@@ -27,31 +27,31 @@ usage documentation, see the Storybooks for each framework below.
 </Column>
 <Column colLg={4} colMd={4} noGutterSm>
   <ResourceCard
-      subTitle="Angular (Community)"
-      href="https://angular.carbondesignsystem.com/?path=/story/components-inline-loading--basic"
+      subTitle="Web Components"
+      href="https://web-components.carbondesignsystem.com/?path=/story/components-inline-loading--default"
       >
 
-<MdxIcon name="angular" />
+<MdxIcon name="webcomponents" />
 
   </ResourceCard>
 </Column>
 <Column colLg={4} colMd={4} noGutterSm>
   <ResourceCard
-      subTitle="Vue (Community)"
-      href="http://vue.carbondesignsystem.com/?path=/story/components-cvinlineloading--default"
+      subTitle="Angular (Community)"
+      href="https://angular.carbondesignsystem.com/?path=/story/components-inline-loading--basic"
       >
 
-<MdxIcon name="vue" />
+<MdxIcon name="angular" />
 
   </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"
+      subTitle="Vue (Community)"
+      href="http://vue.carbondesignsystem.com/?path=/story/components-cvinlineloading--default"
       >
 
-<MdxIcon name="webcomponents" />
+<MdxIcon name="vue" />
 
   </ResourceCard>
 </Column>
@@ -75,11 +75,11 @@ usage documentation, see the Storybooks for each framework below.
     links={{
       React:
         'https://react.carbondesignsystem.com/?path=/story/components-inlineloading--inline-loading',
+      'Web Components':
+        'https://web-components.carbondesignsystem.com/?path=/story/components-inline-loading--default',
       Angular:
         'https://angular.carbondesignsystem.com/?path=/story/components-inline-loading--basic',
       Vue: 'http://vue.carbondesignsystem.com/?path=/story/components-cvinlineloading--default',
-      'Web Components':
-        'https://web-components.carbondesignsystem.com/?path=/story/components-inline-loading--default',
     }}
   >
     {`
diff --git a/src/pages/components/inline-loading/usage.mdx b/src/pages/components/inline-loading/usage.mdx
index 18b75d096b0..5a379b0c1b1 100755
--- a/src/pages/components/inline-loading/usage.mdx
+++ b/src/pages/components/inline-loading/usage.mdx
@@ -66,11 +66,11 @@ table, after a primary or secondary button click, or even in a modal.
     links={{
       React:
         'https://react.carbondesignsystem.com/?path=/story/components-inlineloading--inline-loading',
+      'Web Components':
+        'https://web-components.carbondesignsystem.com/?path=/story/components-inline-loading--default',
       Angular:
         'https://angular.carbondesignsystem.com/?path=/story/components-inline-loading--basic',
       Vue: 'http://vue.carbondesignsystem.com/?path=/story/components-cvinlineloading--default',
-      'Web Components':
-        'https://web-components.carbondesignsystem.com/?path=/story/components-inline-loading--default',
     }}
   >
     {`
diff --git a/src/pages/components/link/code.mdx b/src/pages/components/link/code.mdx
index 006d76ca56d..a6d3b445017 100755
--- a/src/pages/components/link/code.mdx
+++ b/src/pages/components/link/code.mdx
@@ -28,31 +28,31 @@ documentation, see the Storybooks for each framework below.
 </Column>
 <Column colLg={4} colMd={4} noGutterSm>
   <ResourceCard
-      subTitle="Angular (Community)"
-      href="https://angular.carbondesignsystem.com/?path=/story/components-link--basic"
+      subTitle="Web Components"
+      href="https://web-components.carbondesignsystem.com/?path=/story/components-link--default"
       >
 
-<MdxIcon name="angular" />
+<MdxIcon name="webcomponents" />
 
   </ResourceCard>
 </Column>
 <Column colLg={4} colMd={4} noGutterSm>
   <ResourceCard
-      subTitle="Vue (Community)"
-      href="http://vue.carbondesignsystem.com/?path=/story/components-cvlink--default"
+      subTitle="Angular (Community)"
+      href="https://angular.carbondesignsystem.com/?path=/story/components-link--basic"
       >
 
-<MdxIcon name="vue" />
+<MdxIcon name="angular" />
 
   </ResourceCard>
 </Column>
 <Column colLg={4} colMd={4} noGutterSm>
   <ResourceCard
-      subTitle="Web Components (Community)"
-      href="https://web-components.carbondesignsystem.com/?path=/story/components-link--default"
+      subTitle="Vue (Community)"
+      href="http://vue.carbondesignsystem.com/?path=/story/components-cvlink--default"
       >
 
-<MdxIcon name="webcomponents" />
+<MdxIcon name="vue" />
 
   </ResourceCard>
 </Column>
diff --git a/src/pages/components/list/code.mdx b/src/pages/components/list/code.mdx
index d6024cdadf0..0c913668d9b 100755
--- a/src/pages/components/list/code.mdx
+++ b/src/pages/components/list/code.mdx
@@ -27,31 +27,31 @@ documentation, see the Storybooks for each framework below.
 </Column>
 <Column colLg={4} colMd={4} noGutterSm>
   <ResourceCard
-      subTitle="Angular (Community)"
-      href="https://angular.carbondesignsystem.com/?path=/story/components-list--basic"
+      subTitle="Web Components"
+      href="https://web-components.carbondesignsystem.com/?path=/story/components-list--ordered"
       >
 
-<MdxIcon name="angular" />
+<MdxIcon name="webcomponents" />
 
   </ResourceCard>
 </Column>
 <Column colLg={4} colMd={4} noGutterSm>
   <ResourceCard
-      subTitle="Vue (Community)"
-      href="http://vue.carbondesignsystem.com/?path=/story/components-cvlist--default"
+      subTitle="Angular (Community)"
+      href="https://angular.carbondesignsystem.com/?path=/story/components-list--basic"
       >
 
-<MdxIcon name="vue" />
+<MdxIcon name="angular" />
 
   </ResourceCard>
 </Column>
 <Column colLg={4} colMd={4} noGutterSm>
   <ResourceCard
-      subTitle="Web Components (Community)"
-      href="https://web-components.carbondesignsystem.com/?path=/story/components-list--ordered"
+      subTitle="Vue (Community)"
+      href="http://vue.carbondesignsystem.com/?path=/story/components-cvlist--default"
       >
 
-<MdxIcon name="webcomponents" />
+<MdxIcon name="vue" />
 
   </ResourceCard>
 </Column>
diff --git a/src/pages/components/loading/code.mdx b/src/pages/components/loading/code.mdx
index fdb4eb95397..d6634e8899e 100755
--- a/src/pages/components/loading/code.mdx
+++ b/src/pages/components/loading/code.mdx
@@ -28,31 +28,31 @@ documentation, see the Storybooks for each framework below.
 </Column>
 <Column colLg={4} colMd={4} noGutterSm>
   <ResourceCard
-      subTitle="Angular (Community)"
-      href="https://angular.carbondesignsystem.com/?path=/story/components-loading--basic"
+      subTitle="Web Components"
+      href="https://web-components.carbondesignsystem.com/?path=/story/components-loading--default"
       >
 
-<MdxIcon name="angular" />
+<MdxIcon name="webcomponents" />
 
   </ResourceCard>
 </Column>
 <Column colLg={4} colMd={4} noGutterSm>
   <ResourceCard
-      subTitle="Vue (Community)"
-      href="http://vue.carbondesignsystem.com/?path=/story/components-cvloading--default"
+      subTitle="Angular (Community)"
+      href="https://angular.carbondesignsystem.com/?path=/story/components-loading--basic"
       >
 
-<MdxIcon name="vue" />
+<MdxIcon name="angular" />
 
   </ResourceCard>
 </Column>
 <Column colLg={4} colMd={4} noGutterSm>
   <ResourceCard
-      subTitle="Web Components (Community)"
-      href="https://web-components.carbondesignsystem.com/?path=/story/components-loading--default"
+      subTitle="Vue (Community)"
+      href="http://vue.carbondesignsystem.com/?path=/story/components-cvloading--default"
       >
 
-<MdxIcon name="webcomponents" />
+<MdxIcon name="vue" />
 
   </ResourceCard>
 </Column>
@@ -74,11 +74,11 @@ documentation, see the Storybooks for each framework below.
     links={{
       React:
         'https://react.carbondesignsystem.com/?path=/story/components-loading--default',
+      'Web Components':
+        'https://web-components.carbondesignsystem.com/?path=/story/components-loading--default',
       Angular:
         'https://angular.carbondesignsystem.com/?path=/story/components-loading--basic',
       Vue: 'http://vue.carbondesignsystem.com/?path=/story/components-cvloading--default',
-      'Web Components':
-        'https://web-components.carbondesignsystem.com/?path=/story/components-loading--default',
     }}
   >
     {`
diff --git a/src/pages/components/loading/usage.mdx b/src/pages/components/loading/usage.mdx
index 0dd8530b2a4..b3a8be1e181 100755
--- a/src/pages/components/loading/usage.mdx
+++ b/src/pages/components/loading/usage.mdx
@@ -48,11 +48,11 @@ three seconds.
     links={{
       React:
         'https://react.carbondesignsystem.com/?path=/story/components-loading--default',
+      'Web Components':
+        'https://web-components.carbondesignsystem.com/?path=/story/components-loading--default',
       Angular:
         'https://angular.carbondesignsystem.com/?path=/story/components-loading--basic',
       Vue: 'http://vue.carbondesignsystem.com/?path=/story/components-cvloading--default',
-      'Web Components':
-        'https://web-components.carbondesignsystem.com/?path=/story/components-loading--default',
     }}
   >
     {`
diff --git a/src/pages/components/modal/code.mdx b/src/pages/components/modal/code.mdx
index e36081844cf..e0f9bc58530 100755
--- a/src/pages/components/modal/code.mdx
+++ b/src/pages/components/modal/code.mdx
@@ -28,31 +28,31 @@ documentation, see the Storybooks for each framework below.
 </Column>
 <Column colLg={4} colMd={4} noGutterSm>
   <ResourceCard
-      subTitle="Angular (Community)"
-      href="https://angular.carbondesignsystem.com/?path=/story/components-modal--basic"
+      subTitle="Web Components"
+      href="https://web-components.carbondesignsystem.com/?path=/story/components-modal--default"
       >
 
-<MdxIcon name="angular" />
+<MdxIcon name="webcomponents" />
 
   </ResourceCard>
 </Column>
 <Column colLg={4} colMd={4} noGutterSm>
   <ResourceCard
-      subTitle="Vue (Community)"
-      href="http://vue.carbondesignsystem.com/?path=/story/components-cvmodal--default"
+      subTitle="Angular (Community)"
+      href="https://angular.carbondesignsystem.com/?path=/story/components-modal--basic"
       >
 
-<MdxIcon name="vue" />
+<MdxIcon name="angular" />
 
   </ResourceCard>
 </Column>
 <Column colLg={4} colMd={4} noGutterSm>
   <ResourceCard
-      subTitle="Web Components (Community)"
-      href="https://web-components.carbondesignsystem.com/?path=/story/components-modal--default"
+      subTitle="Vue (Community)"
+      href="http://vue.carbondesignsystem.com/?path=/story/components-cvmodal--default"
       >
 
-<MdxIcon name="webcomponents" />
+<MdxIcon name="vue" />
 
   </ResourceCard>
 </Column>
@@ -88,11 +88,11 @@ documentation, see the Storybooks for each framework below.
     links={{
       React:
         'https://react.carbondesignsystem.com/?path=/story/components-modal--default',
+      'Web Components':
+        'https://web-components.carbondesignsystem.com/?path=/story/components-modal--default',
       Angular:
         'https://angular.carbondesignsystem.com/?path=/story/components-modal--basic',
       Vue: 'http://vue.carbondesignsystem.com/?path=/story/components-cvmodal--default',
-      'Web Components':
-        'https://web-components.carbondesignsystem.com/?path=/story/components-modal--default',
     }}
   >
     {`
@@ -110,11 +110,11 @@ documentation, see the Storybooks for each framework below.
     links={{
       React:
         'https://react.carbondesignsystem.com/?path=/story/components-modal--default',
+      'Web Components':
+        'https://web-components.carbondesignsystem.com/?path=/story/components-modal--default',
       Angular:
         'https://angular.carbondesignsystem.com/?path=/story/components-modal--basic',
       Vue: 'http://vue.carbondesignsystem.com/?path=/story/components-cvmodal--default',
-      'Web Components':
-        'https://web-components.carbondesignsystem.com/?path=/story/components-modal--default',
     }}
   >
     {`
@@ -159,11 +159,11 @@ documentation, see the Storybooks for each framework below.
     links={{
       React:
         'https://react.carbondesignsystem.com/?path=/story/components-modal--default',
+      'Web Components':
+        'https://web-components.carbondesignsystem.com/?path=/story/components-modal--single-button',
       Angular:
         'https://angular.carbondesignsystem.com/?path=/story/components-modal--basic',
       Vue: 'http://vue.carbondesignsystem.com/?path=/story/components-cvmodal--default',
-      'Web Components':
-        'https://web-components.carbondesignsystem.com/?path=/story/components-modal--single-button',
     }}
   >
     {`
diff --git a/src/pages/components/notification/code.mdx b/src/pages/components/notification/code.mdx
index 8f7596bc8b1..d5a0683545a 100755
--- a/src/pages/components/notification/code.mdx
+++ b/src/pages/components/notification/code.mdx
@@ -28,31 +28,31 @@ usage documentation, see the Storybooks for each framework below.
 </Column>
 <Column colLg={4} colMd={4} noGutterSm>
   <ResourceCard
-      subTitle="Angular (Community)"
-      href="https://angular.carbondesignsystem.com/?path=/story/components-notification--toast"
+      subTitle="Web Components"
+      href="https://web-components.carbondesignsystem.com/?path=/story/components-notifications--inline"
       >
 
-<MdxIcon name="angular" />
+<MdxIcon name="webcomponents" />
 
   </ResourceCard>
 </Column>
 <Column colLg={4} colMd={4} noGutterSm>
   <ResourceCard
-      subTitle="Vue (Community)"
-      href="http://vue.carbondesignsystem.com/?path=/story/components-cvtoastnotification--default"
+      subTitle="Angular (Community)"
+      href="https://angular.carbondesignsystem.com/?path=/story/components-notification--toast"
       >
 
-<MdxIcon name="vue" />
+<MdxIcon name="angular" />
 
   </ResourceCard>
 </Column>
 <Column colLg={4} colMd={4} noGutterSm>
   <ResourceCard
-      subTitle="Web Components (Community)"
-      href="https://web-components.carbondesignsystem.com/?path=/story/components-notifications--inline"
+      subTitle="Vue (Community)"
+      href="http://vue.carbondesignsystem.com/?path=/story/components-cvtoastnotification--default"
       >
 
-<MdxIcon name="webcomponents" />
+<MdxIcon name="vue" />
 
   </ResourceCard>
 </Column>
@@ -80,11 +80,11 @@ usage documentation, see the Storybooks for each framework below.
     links={{
       React:
         'https://react.carbondesignsystem.com/?path=/story/components-notifications-toast--default',
+      'Web Components':
+        'https://web-components.carbondesignsystem.com/?path=/story/components-notifications--toast',
       Angular:
         'https://angular.carbondesignsystem.com/?path=/story/components-notification--toast',
       Vue: 'http://vue.carbondesignsystem.com/?path=/story/components-cvtoastnotification--default',
-      'Web Components':
-        'https://web-components.carbondesignsystem.com/?path=/story/components-notifications--toast',
     }}
   >
     {`
@@ -107,11 +107,11 @@ usage documentation, see the Storybooks for each framework below.
     links={{
       React:
         'https://react.carbondesignsystem.com/?path=/story/components-notifications-inline--default',
+      'Web Components':
+        'https://web-components.carbondesignsystem.com/?path=/story/components-notifications--inline',
       Angular:
         'https://angular.carbondesignsystem.com/?path=/story/components-notification--basic',
       Vue: 'http://vue.carbondesignsystem.com/?path=/story/components-cvinlinenotification--default',
-      'Web Components':
-        'https://web-components.carbondesignsystem.com/?path=/story/components-notifications--inline',
     }}
   >
     {`
diff --git a/src/pages/components/notification/usage.mdx b/src/pages/components/notification/usage.mdx
index 3f9f7827f88..cf13f960319 100755
--- a/src/pages/components/notification/usage.mdx
+++ b/src/pages/components/notification/usage.mdx
@@ -85,11 +85,11 @@ although some product teams also support banners and notification centers.
     links={{
       React:
         'https://react.carbondesignsystem.com/?path=/story/components-notifications-toast--default',
+      'Web Components':
+        'https://web-components.carbondesignsystem.com/?path=/story/components-notifications--toast',
       Angular:
         'https://angular.carbondesignsystem.com/?path=/story/components-notification--toast',
       Vue: 'http://vue.carbondesignsystem.com/?path=/story/components-cvtoastnotification--default',
-      'Web Components':
-        'https://web-components.carbondesignsystem.com/?path=/story/components-notifications--toast',
     }}
   >
     {`
@@ -112,11 +112,11 @@ although some product teams also support banners and notification centers.
     links={{
       React:
         'https://react.carbondesignsystem.com/?path=/story/components-notifications-inline--default',
+      'Web Components':
+        'https://web-components.carbondesignsystem.com/?path=/story/components-notifications--inline',
       Angular:
         'https://angular.carbondesignsystem.com/?path=/story/components-notification--basic',
       Vue: 'http://vue.carbondesignsystem.com/?path=/story/components-cvinlinenotification--default',
-      'Web Components':
-        'https://web-components.carbondesignsystem.com/?path=/story/components-notifications--inline',
     }}
   >
     {`
diff --git a/src/pages/components/number-input/code.mdx b/src/pages/components/number-input/code.mdx
index f6e79ffa0de..2f8aa02aa85 100755
--- a/src/pages/components/number-input/code.mdx
+++ b/src/pages/components/number-input/code.mdx
@@ -28,31 +28,31 @@ usage documentation, see the Storybooks for each framework below.
 </Column>
 <Column colLg={4} colMd={4} noGutterSm>
   <ResourceCard
-      subTitle="Angular (Community)"
-      href="https://angular.carbondesignsystem.com/?path=/story/components-number--basic"
+      subTitle="Web Components"
+      href="https://web-components.carbondesignsystem.com/?path=/story/components-number-input--default"
       >
 
-<MdxIcon name="angular" />
+<MdxIcon name="webcomponents" />
 
   </ResourceCard>
 </Column>
 <Column colLg={4} colMd={4} noGutterSm>
   <ResourceCard
-      subTitle="Vue (Community)"
-      href="http://vue.carbondesignsystem.com/?path=/story/components-cvnumberinput--default"
+      subTitle="Angular (Community)"
+      href="https://angular.carbondesignsystem.com/?path=/story/components-number--basic"
       >
 
-<MdxIcon name="vue" />
+<MdxIcon name="angular" />
 
   </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"
+      subTitle="Vue (Community)"
+      href="http://vue.carbondesignsystem.com/?path=/story/components-cvnumberinput--default"
       >
 
-<MdxIcon name="webcomponents" />
+<MdxIcon name="vue" />
 
   </ResourceCard>
 </Column>
@@ -77,11 +77,11 @@ usage documentation, see the Storybooks for each framework below.
     links={{
       React:
         'https://react.carbondesignsystem.com/?path=/story/components-numberinput--default',
+      'Web Components':
+        'https://web-components.carbondesignsystem.com/?path=/story/components-number-input--default',
       Angular:
         'https://angular.carbondesignsystem.com/?path=/story/components-number--basic',
       Vue: 'http://vue.carbondesignsystem.com/?path=/story/components-cvnumberinput--default',
-      'Web Components':
-        'https://web-components.carbondesignsystem.com/?path=/story/components-number-input--default',
     }}
   >
     {`
@@ -102,11 +102,11 @@ usage documentation, see the Storybooks for each framework below.
     links={{
       React:
         'https://react.carbondesignsystem.com/?path=/story/components-numberinput--default',
+      'Web Components':
+        'https://web-components.carbondesignsystem.com/?path=/story/components-number-input--default',
       Angular:
         'https://angular.carbondesignsystem.com/?path=/story/components-number--basic',
       Vue: 'http://vue.carbondesignsystem.com/?path=/story/components-cvnumberinput--default',
-      'Web Components':
-        'https://web-components.carbondesignsystem.com/?path=/story/components-number-input--default',
     }}
   >
     {`
diff --git a/src/pages/components/number-input/usage.mdx b/src/pages/components/number-input/usage.mdx
index 9500267b031..66849873308 100755
--- a/src/pages/components/number-input/usage.mdx
+++ b/src/pages/components/number-input/usage.mdx
@@ -81,11 +81,11 @@ values.
     links={{
       React:
         'https://react.carbondesignsystem.com/?path=/story/components-numberinput--default',
+      'Web Components':
+        'https://web-components.carbondesignsystem.com/?path=/story/components-number-input--default',
       Angular:
         'https://angular.carbondesignsystem.com/?path=/story/components-number--basic',
       Vue: 'http://vue.carbondesignsystem.com/?path=/story/components-cvnumberinput--default',
-      'Web Components':
-        'https://web-components.carbondesignsystem.com/?path=/story/components-number-input--default',
     }}
   >
     {`
@@ -106,11 +106,11 @@ values.
     links={{
       React:
         'https://react.carbondesignsystem.com/?path=/story/components-numberinput--default',
+      'Web Components':
+        'https://web-components.carbondesignsystem.com/?path=/story/components-number-input--default',
       Angular:
         'https://angular.carbondesignsystem.com/?path=/story/components-number--basic',
       Vue: 'http://vue.carbondesignsystem.com/?path=/story/components-cvnumberinput--default',
-      'Web Components':
-        'https://web-components.carbondesignsystem.com/?path=/story/components-number-input--default',
     }}
   >
     {`
diff --git a/src/pages/components/overflow-menu/code.mdx b/src/pages/components/overflow-menu/code.mdx
index 4aef4e0c42c..df72913faf2 100755
--- a/src/pages/components/overflow-menu/code.mdx
+++ b/src/pages/components/overflow-menu/code.mdx
@@ -28,31 +28,31 @@ usage documentation, see the Storybooks for each framework below.
 </Column>
 <Column colLg={4} colMd={4} noGutterSm>
   <ResourceCard
-      subTitle="Angular (Community)"
-      href="https://angular.carbondesignsystem.com/?path=/story/components-overflow-menu--basic"
+      subTitle="Web Components"
+      href="https://web-components.carbondesignsystem.com/?path=/story/components-overflow-menu--default"
       >
 
-<MdxIcon name="angular" />
+<MdxIcon name="webcomponents" />
 
   </ResourceCard>
 </Column>
 <Column colLg={4} colMd={4} noGutterSm>
   <ResourceCard
-      subTitle="Vue (Community)"
-      href="http://vue.carbondesignsystem.com/?path=/story/components-cvoverflowmenu--default"
+      subTitle="Angular (Community)"
+      href="https://angular.carbondesignsystem.com/?path=/story/components-overflow-menu--basic"
       >
 
-<MdxIcon name="vue" />
+<MdxIcon name="angular" />
 
   </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"
+      subTitle="Vue (Community)"
+      href="http://vue.carbondesignsystem.com/?path=/story/components-cvoverflowmenu--default"
       >
 
-<MdxIcon name="webcomponents" />
+<MdxIcon name="vue" />
 
   </ResourceCard>
 </Column>
@@ -76,11 +76,11 @@ usage documentation, see the Storybooks for each framework below.
     links={{
       React:
         'https://react.carbondesignsystem.com/?path=/story/components-overflowmenu--default',
+      'Web Components':
+        'https://web-components.carbondesignsystem.com/?path=/story/components-overflow-menu--default',
       Angular:
         'https://angular.carbondesignsystem.com/?path=/story/components-overflow-menu--basic',
       Vue: 'http://vue.carbondesignsystem.com/?path=/story/components-cvoverflowmenu--default',
-      'Web Components':
-        'https://web-components.carbondesignsystem.com/?path=/story/components-overflow-menu--default',
     }}
   >
     {`
diff --git a/src/pages/components/overflow-menu/usage.mdx b/src/pages/components/overflow-menu/usage.mdx
index 59435d60661..53aafc4af88 100755
--- a/src/pages/components/overflow-menu/usage.mdx
+++ b/src/pages/components/overflow-menu/usage.mdx
@@ -45,11 +45,11 @@ there is a space constraint.
     links={{
       React:
         'https://react.carbondesignsystem.com/?path=/story/components-overflowmenu--default',
+      'Web Components':
+        'https://web-components.carbondesignsystem.com/?path=/story/components-overflow-menu--default',
       Angular:
         'https://angular.carbondesignsystem.com/?path=/story/components-overflow-menu--basic',
       Vue: 'http://vue.carbondesignsystem.com/?path=/story/components-cvoverflowmenu--default',
-      'Web Components':
-        'https://web-components.carbondesignsystem.com/?path=/story/components-overflow-menu--default',
     }}
   >
     {`
diff --git a/src/pages/components/pagination/code.mdx b/src/pages/components/pagination/code.mdx
index e28fb0ba281..c687a21c3ef 100755
--- a/src/pages/components/pagination/code.mdx
+++ b/src/pages/components/pagination/code.mdx
@@ -28,31 +28,31 @@ usage documentation, see the Storybooks for each framework below.
 </Column>
 <Column colLg={4} colMd={4} noGutterSm>
   <ResourceCard
-      subTitle="Angular (Community)"
-      href="https://angular.carbondesignsystem.com/?path=/story/components-pagination--basic"
+      subTitle="Web Components"
+      href="https://web-components.carbondesignsystem.com/?path=/story/components-pagination--default"
       >
 
-<MdxIcon name="angular" />
+<MdxIcon name="webcomponents" />
 
   </ResourceCard>
 </Column>
 <Column colLg={4} colMd={4} noGutterSm>
   <ResourceCard
-      subTitle="Vue (Community)"
-      href="http://vue.carbondesignsystem.com/?path=/story/components-cvpagination--default"
+      subTitle="Angular (Community)"
+      href="https://angular.carbondesignsystem.com/?path=/story/components-pagination--basic"
       >
 
-<MdxIcon name="vue" />
+<MdxIcon name="angular" />
 
   </ResourceCard>
 </Column>
 <Column colLg={4} colMd={4} noGutterSm>
   <ResourceCard
-      subTitle="Web Components (Community)"
-      href="https://web-components.carbondesignsystem.com/?path=/story/components-pagination--default"
+      subTitle="Vue (Community)"
+      href="http://vue.carbondesignsystem.com/?path=/story/components-cvpagination--default"
       >
 
-<MdxIcon name="webcomponents" />
+<MdxIcon name="vue" />
 
   </ResourceCard>
 </Column>
@@ -81,11 +81,11 @@ usage documentation, see the Storybooks for each framework below.
     links={{
       React:
         'https://react.carbondesignsystem.com/?path=/story/components-pagination--pagination',
+      'Web Components':
+        'https://web-components.carbondesignsystem.com/?path=/story/components-pagination--default',
       Angular:
         'https://angular.carbondesignsystem.com/?path=/story/components-pagination--basic',
       Vue: 'http://vue.carbondesignsystem.com/?path=/story/components-cvpagination--default',
-      'Web Components':
-        'https://web-components.carbondesignsystem.com/?path=/story/components-pagination--default',
     }}
   >
     {`
diff --git a/src/pages/components/pagination/usage.mdx b/src/pages/components/pagination/usage.mdx
index 0a69391daf7..5d9549b6607 100755
--- a/src/pages/components/pagination/usage.mdx
+++ b/src/pages/components/pagination/usage.mdx
@@ -52,11 +52,11 @@ The default number displayed will vary depending on the context.
     links={{
       React:
         'https://react.carbondesignsystem.com/?path=/story/components-pagination--pagination',
+      'Web Components':
+        'https://web-components.carbondesignsystem.com/?path=/story/components-pagination--default',
       Angular:
         'https://angular.carbondesignsystem.com/?path=/story/components-pagination--basic',
       Vue: 'http://vue.carbondesignsystem.com/?path=/story/components-cvpagination--default',
-      'Web Components':
-        'https://web-components.carbondesignsystem.com/?path=/story/components-pagination--default',
     }}
   >
     {`
diff --git a/src/pages/components/progress-indicator/code.mdx b/src/pages/components/progress-indicator/code.mdx
index 7d2b3f2439b..60ac72b0034 100755
--- a/src/pages/components/progress-indicator/code.mdx
+++ b/src/pages/components/progress-indicator/code.mdx
@@ -29,31 +29,31 @@ code usage documentation, see the Storybooks for each framework below.
 </Column>
 <Column colLg={4} colMd={4} noGutterSm>
   <ResourceCard
-      subTitle="Angular (Community)"
-      href="https://angular.carbondesignsystem.com/?path=/story/components-progress-indicator--basic"
+      subTitle="Web Components"
+      href="https://web-components.carbondesignsystem.com/?path=/story/components-progress-indicator--default"
       >
 
-<MdxIcon name="angular" />
+<MdxIcon name="webcomponents" />
 
   </ResourceCard>
 </Column>
 <Column colLg={4} colMd={4} noGutterSm>
   <ResourceCard
-      subTitle="Vue (Community)"
-      href="http://vue.carbondesignsystem.com/?path=/story/components-cvprogress--default"
+      subTitle="Angular (Community)"
+      href="https://angular.carbondesignsystem.com/?path=/story/components-progress-indicator--basic"
       >
 
-<MdxIcon name="vue" />
+<MdxIcon name="angular" />
 
   </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"
+      subTitle="Vue (Community)"
+      href="http://vue.carbondesignsystem.com/?path=/story/components-cvprogress--default"
       >
 
-<MdxIcon name="webcomponents" />
+<MdxIcon name="vue" />
 
   </ResourceCard>
 </Column>
@@ -77,11 +77,11 @@ code usage documentation, see the Storybooks for each framework below.
     links={{
       React:
         'https://react.carbondesignsystem.com/?path=/story/components-progressindicator--default',
+      'Web Components':
+        'https://web-components.carbondesignsystem.com/?path=/story/components-progress-indicator--default',
       Angular:
         'https://angular.carbondesignsystem.com/?path=/story/components-progress-indicator--basic',
       Vue: 'http://vue.carbondesignsystem.com/?path=/story/components-cvprogress--default',
-      'Web Components':
-        'https://web-components.carbondesignsystem.com/?path=/story/components-progress-indicator--default',
     }}
   >
     {`
diff --git a/src/pages/components/progress-indicator/usage.mdx b/src/pages/components/progress-indicator/usage.mdx
index aec8baca524..4722f2427f4 100755
--- a/src/pages/components/progress-indicator/usage.mdx
+++ b/src/pages/components/progress-indicator/usage.mdx
@@ -46,11 +46,11 @@ percentage of completeness as each task is completed.
     links={{
       React:
         'https://react.carbondesignsystem.com/?path=/story/components-progressindicator--default',
+      'Web Components':
+        'https://web-components.carbondesignsystem.com/?path=/story/components-progress-indicator--default',
       Angular:
         'https://angular.carbondesignsystem.com/?path=/story/components-progress-indicator--basic',
       Vue: 'http://vue.carbondesignsystem.com/?path=/story/components-cvprogress--default',
-      'Web Components':
-        'https://web-components.carbondesignsystem.com/?path=/story/components-progress-indicator--default',
     }}
   >
     {`
diff --git a/src/pages/components/radio-button/code.mdx b/src/pages/components/radio-button/code.mdx
index 23582f12149..ece181bf4e9 100755
--- a/src/pages/components/radio-button/code.mdx
+++ b/src/pages/components/radio-button/code.mdx
@@ -28,31 +28,31 @@ usage documentation, see the Storybooks for each framework below.
 </Column>
 <Column colLg={4} colMd={4} noGutterSm>
   <ResourceCard
-      subTitle="Angular (Community)"
-      href="https://angular.carbondesignsystem.com/?path=/story/components-radio--basic"
+      subTitle="Web Components"
+      href="https://web-components.carbondesignsystem.com/?path=/story/components-radio-button--default"
       >
 
-<MdxIcon name="angular" />
+<MdxIcon name="webcomponents" />
 
   </ResourceCard>
 </Column>
 <Column colLg={4} colMd={4} noGutterSm>
   <ResourceCard
-      subTitle="Vue (Community)"
-      href="http://vue.carbondesignsystem.com/?path=/story/components-cvradiobutton--default"
+      subTitle="Angular (Community)"
+      href="https://angular.carbondesignsystem.com/?path=/story/components-radio--basic"
       >
 
-<MdxIcon name="vue" />
+<MdxIcon name="angular" />
 
   </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"
+      subTitle="Vue (Community)"
+      href="http://vue.carbondesignsystem.com/?path=/story/components-cvradiobutton--default"
       >
 
-<MdxIcon name="webcomponents" />
+<MdxIcon name="vue" />
 
   </ResourceCard>
 </Column>
@@ -76,11 +76,11 @@ usage documentation, see the Storybooks for each framework below.
     links={{
       React:
         'https://react.carbondesignsystem.com/?path=/story/components-radiobutton--default',
+      'Web Components':
+        'https://web-components.carbondesignsystem.com/?path=/story/components-radio-button--default',
       Angular:
         'https://angular.carbondesignsystem.com/?path=/story/components-radio--basic',
       Vue: 'http://vue.carbondesignsystem.com/?path=/story/components-cvradiobutton--default',
-      'Web Components':
-        'https://web-components.carbondesignsystem.com/?path=/story/components-radio-button--default',
     }}
   >
     {`
diff --git a/src/pages/components/radio-button/usage.mdx b/src/pages/components/radio-button/usage.mdx
index 61561672b68..a46c06b836e 100755
--- a/src/pages/components/radio-button/usage.mdx
+++ b/src/pages/components/radio-button/usage.mdx
@@ -89,11 +89,11 @@ checkboxes allow the user to select multiple items.
     links={{
       React:
         'https://react.carbondesignsystem.com/?path=/story/components-radiobutton--default',
+      'Web Components':
+        'https://web-components.carbondesignsystem.com/?path=/story/components-radio-button--default',
       Angular:
         'https://angular.carbondesignsystem.com/?path=/story/components-radio--basic',
       Vue: 'http://vue.carbondesignsystem.com/?path=/story/components-cvradiobutton--default',
-      'Web Components':
-        'https://web-components.carbondesignsystem.com/?path=/story/components-radio-button--default',
     }}
   >
     {`
diff --git a/src/pages/components/search/code.mdx b/src/pages/components/search/code.mdx
index f9899d69d0a..933b8cd178c 100755
--- a/src/pages/components/search/code.mdx
+++ b/src/pages/components/search/code.mdx
@@ -28,31 +28,31 @@ documentation, see the Storybooks for each framework below.
 </Column>
 <Column colLg={4} colMd={4} noGutterSm>
   <ResourceCard
-      subTitle="Angular (Community)"
-      href="https://angular.carbondesignsystem.com/?path=/story/components-search--basic"
+      subTitle="Web Components"
+      href="https://web-components.carbondesignsystem.com/?path=/story/components-search--default"
       >
 
-<MdxIcon name="angular" />
+<MdxIcon name="webcomponents" />
 
   </ResourceCard>
 </Column>
 <Column colLg={4} colMd={4} noGutterSm>
   <ResourceCard
-      subTitle="Vue (Community)"
-      href="http://vue.carbondesignsystem.com/?path=/story/components-cvsearch--default"
+      subTitle="Angular (Community)"
+      href="https://angular.carbondesignsystem.com/?path=/story/components-search--basic"
       >
 
-<MdxIcon name="vue" />
+<MdxIcon name="angular" />
 
   </ResourceCard>
 </Column>
 <Column colLg={4} colMd={4} noGutterSm>
   <ResourceCard
-      subTitle="Web Components (Community)"
-      href="https://web-components.carbondesignsystem.com/?path=/story/components-search--default"
+      subTitle="Vue (Community)"
+      href="http://vue.carbondesignsystem.com/?path=/story/components-cvsearch--default"
       >
 
-<MdxIcon name="webcomponents" />
+<MdxIcon name="vue" />
 
   </ResourceCard>
 </Column>
@@ -74,11 +74,11 @@ documentation, see the Storybooks for each framework below.
     links={{
       React:
         'https://react.carbondesignsystem.com/?path=/story/components-search--default',
+      'Web Components':
+        'https://web-components.carbondesignsystem.com/?path=/story/components-search--default',
       Angular:
         'https://angular.carbondesignsystem.com/?path=/story/components-search--basic',
       Vue: 'http://vue.carbondesignsystem.com/?path=/story/components-cvsearch--default',
-      'Web Components':
-        'https://web-components.carbondesignsystem.com/?path=/story/components-search--default',
     }}
   >
     {`
diff --git a/src/pages/components/search/usage.mdx b/src/pages/components/search/usage.mdx
index 62325f8d6ea..383e0549a2b 100755
--- a/src/pages/components/search/usage.mdx
+++ b/src/pages/components/search/usage.mdx
@@ -61,11 +61,11 @@ aid the user in finding content.
     links={{
       React:
         'https://react.carbondesignsystem.com/?path=/story/components-search--default',
+      'Web Components':
+        'https://web-components.carbondesignsystem.com/?path=/story/components-search--default',
       Angular:
         'https://angular.carbondesignsystem.com/?path=/story/components-search--basic',
       Vue: 'http://vue.carbondesignsystem.com/?path=/story/components-cvsearch--default',
-      'Web Components':
-        'https://web-components.carbondesignsystem.com/?path=/story/components-search--default',
     }}
   >
     {`
diff --git a/src/pages/components/select/code.mdx b/src/pages/components/select/code.mdx
index 325c0919654..069c33044c8 100755
--- a/src/pages/components/select/code.mdx
+++ b/src/pages/components/select/code.mdx
@@ -28,31 +28,31 @@ documentation, see the Storybooks for each framework below.
 </Column>
 <Column colLg={4} colMd={4} noGutterSm>
   <ResourceCard
-      subTitle="Angular (Community)"
-      href="https://angular.carbondesignsystem.com/?path=/story/components-select--basic"
+      subTitle="Web Components"
+      href="https://web-components.carbondesignsystem.com/?path=/story/components-select--default"
       >
 
-<MdxIcon name="angular" />
+<MdxIcon name="webcomponents" />
 
   </ResourceCard>
 </Column>
 <Column colLg={4} colMd={4} noGutterSm>
   <ResourceCard
-      subTitle="Vue (Community)"
-      href="http://vue.carbondesignsystem.com/?path=/story/components-cvselect--default"
+      subTitle="Angular (Community)"
+      href="https://angular.carbondesignsystem.com/?path=/story/components-select--basic"
       >
 
-<MdxIcon name="vue" />
+<MdxIcon name="angular" />
 
   </ResourceCard>
 </Column>
 <Column colLg={4} colMd={4} noGutterSm>
   <ResourceCard
-      subTitle="Web Components (Community)"
-      href="https://web-components.carbondesignsystem.com/?path=/story/components-select--default"
+      subTitle="Vue (Community)"
+      href="http://vue.carbondesignsystem.com/?path=/story/components-cvselect--default"
       >
 
-<MdxIcon name="webcomponents" />
+<MdxIcon name="vue" />
 
   </ResourceCard>
 </Column>
@@ -78,11 +78,11 @@ documentation, see the Storybooks for each framework below.
     links={{
       React:
         'https://react.carbondesignsystem.com/?path=/story/components-select--default',
+      'Web Components':
+        'https://web-components.carbondesignsystem.com/?path=/story/components-select--default',
       Angular:
         'https://angular.carbondesignsystem.com/?path=/story/components-select--basic',
       Vue: 'http://vue.carbondesignsystem.com/?path=/story/components-cvselect--default',
-      'Web Components':
-        'https://web-components.carbondesignsystem.com/?path=/story/components-select--default',
     }}
   >
     {`
diff --git a/src/pages/components/slider/code.mdx b/src/pages/components/slider/code.mdx
index ad81435a950..294c5d17b26 100755
--- a/src/pages/components/slider/code.mdx
+++ b/src/pages/components/slider/code.mdx
@@ -28,31 +28,31 @@ documentation, see the Storybooks for each framework below.
 </Column>
 <Column colLg={4} colMd={4} noGutterSm>
   <ResourceCard
-      subTitle="Angular (Community)"
-      href="https://angular.carbondesignsystem.com/?path=/story/components-slider--basic"
+      subTitle="Web Components"
+      href="https://web-components.carbondesignsystem.com/?path=/story/components-slider--default"
       >
 
-<MdxIcon name="angular" />
+<MdxIcon name="webcomponents" />
 
   </ResourceCard>
 </Column>
 <Column colLg={4} colMd={4} noGutterSm>
   <ResourceCard
-      subTitle="Vue (Community)"
-      href="http://vue.carbondesignsystem.com/?path=/story/components-cvslider--default"
+      subTitle="Angular (Community)"
+      href="https://angular.carbondesignsystem.com/?path=/story/components-slider--basic"
       >
 
-<MdxIcon name="vue" />
+<MdxIcon name="angular" />
 
   </ResourceCard>
 </Column>
 <Column colLg={4} colMd={4} noGutterSm>
   <ResourceCard
-      subTitle="Web Components (Community)"
-      href="https://web-components.carbondesignsystem.com/?path=/story/components-slider--default"
+      subTitle="Vue (Community)"
+      href="http://vue.carbondesignsystem.com/?path=/story/components-cvslider--default"
       >
 
-<MdxIcon name="webcomponents" />
+<MdxIcon name="vue" />
 
   </ResourceCard>
 </Column>
@@ -74,11 +74,11 @@ documentation, see the Storybooks for each framework below.
     links={{
       React:
         'https://react.carbondesignsystem.com/?path=/story/components-slider--default',
+      'Web Components':
+        'https://web-components.carbondesignsystem.com/?path=/story/components-slider--default',
       Angular:
         'https://angular.carbondesignsystem.com/?path=/story/components-slider--basic',
       Vue: 'http://vue.carbondesignsystem.com/?path=/story/components-cvslider--default',
-      'Web Components':
-        'https://web-components.carbondesignsystem.com/?path=/story/components-slider--default',
     }}
   >
     {`
diff --git a/src/pages/components/slider/usage.mdx b/src/pages/components/slider/usage.mdx
index e996600afe5..746596b8e7e 100755
--- a/src/pages/components/slider/usage.mdx
+++ b/src/pages/components/slider/usage.mdx
@@ -62,11 +62,11 @@ value range.
     links={{
       React:
         'https://react.carbondesignsystem.com/?path=/story/components-slider--default',
+      'Web Components':
+        'https://web-components.carbondesignsystem.com/?path=/story/components-slider--default',
       Angular:
         'https://angular.carbondesignsystem.com/?path=/story/components-slider--basic',
       Vue: 'http://vue.carbondesignsystem.com/?path=/story/components-cvslider--default',
-      'Web Components':
-        'https://web-components.carbondesignsystem.com/?path=/story/components-slider--default',
     }}
   >
     {`
diff --git a/src/pages/components/structured-list/code.mdx b/src/pages/components/structured-list/code.mdx
index 25813ce5c54..068b65b7cd6 100755
--- a/src/pages/components/structured-list/code.mdx
+++ b/src/pages/components/structured-list/code.mdx
@@ -30,31 +30,31 @@ code usage documentation, see the Storybooks for each framework below.
 </Column>
 <Column colLg={4} colMd={4} noGutterSm>
   <ResourceCard
-      subTitle="Angular (Community)"
-      href="https://angular.carbondesignsystem.com/?path=/story/components-structured-list--basic"
+      subTitle="Web Components"
+      href="https://web-components.carbondesignsystem.com/?path=/story/components-structured-list--default"
       >
 
-<MdxIcon name="angular" />
+<MdxIcon name="webcomponents" />
 
   </ResourceCard>
 </Column>
 <Column colLg={4} colMd={4} noGutterSm>
   <ResourceCard
-      subTitle="Vue (Community)"
-      href="http://vue.carbondesignsystem.com/?path=/story/components-cvstructuredlist--default"
+      subTitle="Angular (Community)"
+      href="https://angular.carbondesignsystem.com/?path=/story/components-structured-list--basic"
       >
 
-<MdxIcon name="vue" />
+<MdxIcon name="angular" />
 
   </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"
+      subTitle="Vue (Community)"
+      href="http://vue.carbondesignsystem.com/?path=/story/components-cvstructuredlist--default"
       >
 
-<MdxIcon name="webcomponents" />
+<MdxIcon name="vue" />
 
   </ResourceCard>
 </Column>
@@ -80,11 +80,11 @@ code usage documentation, see the Storybooks for each framework below.
     links={{
       React:
         'https://react.carbondesignsystem.com/?path=/story/components-structuredlist--simple',
+      'Web Components':
+        'https://web-components.carbondesignsystem.com/?path=/story/components-structured-list--default',
       Angular:
         'https://angular.carbondesignsystem.com/?path=/story/components-structured-list--basic',
       Vue: 'http://vue.carbondesignsystem.com/?path=/story/components-cvstructuredlist--default',
-      'Web Components':
-        'https://web-components.carbondesignsystem.com/?path=/story/components-structured-list--default',
     }}
   >
     {`
@@ -137,11 +137,11 @@ code usage documentation, see the Storybooks for each framework below.
     links={{
       React:
         'https://react.carbondesignsystem.com/?path=/story/components-structuredlist--selection',
+      'Web Components':
+        'https://web-components.carbondesignsystem.com/?path=/story/components-structured-list--default',
       Angular:
         'https://angular.carbondesignsystem.com/?path=/story/components-structured-list--with-selection',
       Vue: 'http://vue.carbondesignsystem.com/?path=/story/components-cvstructuredlist--selectable-with-events',
-      'Web Components':
-        'https://web-components.carbondesignsystem.com/?path=/story/components-structured-list--default',
     }}
   >
     {`
diff --git a/src/pages/components/structured-list/usage.mdx b/src/pages/components/structured-list/usage.mdx
index e311b4df684..498ee8e8b27 100755
--- a/src/pages/components/structured-list/usage.mdx
+++ b/src/pages/components/structured-list/usage.mdx
@@ -75,11 +75,11 @@ import { CheckmarkFilled } from '@carbon/icons-react';
     links={{
       React:
         'https://react.carbondesignsystem.com/?path=/story/components-structuredlist--simple',
+      'Web Components':
+        'https://web-components.carbondesignsystem.com/?path=/story/components-structured-list--default',
       Angular:
         'https://angular.carbondesignsystem.com/?path=/story/components-structured-list--basic',
       Vue: 'http://vue.carbondesignsystem.com/?path=/story/components-cvstructuredlist--default',
-      'Web Components':
-        'https://web-components.carbondesignsystem.com/?path=/story/components-structured-list--default',
     }}
   >
     {`
@@ -132,11 +132,11 @@ import { CheckmarkFilled } from '@carbon/icons-react';
     links={{
       React:
         'https://react.carbondesignsystem.com/?path=/story/components-structuredlist--selection',
+      'Web Components':
+        'https://web-components.carbondesignsystem.com/?path=/story/components-structured-list--default',
       Angular:
         'https://angular.carbondesignsystem.com/?path=/story/components-structured-list--with-selection',
       Vue: 'http://vue.carbondesignsystem.com/?path=/story/components-cvstructuredlist--selectable-with-events',
-      'Web Components':
-        'https://web-components.carbondesignsystem.com/?path=/story/components-structured-list--default',
     }}
   >
     {`
diff --git a/src/pages/components/tabs/code.mdx b/src/pages/components/tabs/code.mdx
index 864ac9835d0..0cafb2ffdcc 100755
--- a/src/pages/components/tabs/code.mdx
+++ b/src/pages/components/tabs/code.mdx
@@ -29,31 +29,31 @@ documentation, see the Storybooks for each framework below.
 </Column>
 <Column colLg={4} colMd={4} noGutterSm>
   <ResourceCard
-      subTitle="Angular (Community)"
-      href="https://angular.carbondesignsystem.com/?path=/story/components-tabs--basic"
+      subTitle="Web Components"
+      href="https://web-components.carbondesignsystem.com/?path=/story/components-tabs--default"
       >
 
-<MdxIcon name="angular" />
+<MdxIcon name="webcomponents" />
 
   </ResourceCard>
 </Column>
 <Column colLg={4} colMd={4} noGutterSm>
   <ResourceCard
-      subTitle="Vue (Community)"
-      href="http://vue.carbondesignsystem.com/?path=/story/components-cvtabs--default"
+      subTitle="Angular (Community)"
+      href="https://angular.carbondesignsystem.com/?path=/story/components-tabs--basic"
       >
 
-<MdxIcon name="vue" />
+<MdxIcon name="angular" />
 
   </ResourceCard>
 </Column>
 <Column colLg={4} colMd={4} noGutterSm>
   <ResourceCard
-      subTitle="Web Components (Community)"
-      href="https://web-components.carbondesignsystem.com/?path=/story/components-tabs--default"
+      subTitle="Vue (Community)"
+      href="http://vue.carbondesignsystem.com/?path=/story/components-cvtabs--default"
       >
 
-<MdxIcon name="webcomponents" />
+<MdxIcon name="vue" />
 
   </ResourceCard>
 </Column>
diff --git a/src/pages/components/tag/code.mdx b/src/pages/components/tag/code.mdx
index 7ff884c1899..203169052ee 100755
--- a/src/pages/components/tag/code.mdx
+++ b/src/pages/components/tag/code.mdx
@@ -28,31 +28,31 @@ documentation, see the Storybooks for each framework below.
 </Column>
 <Column colLg={4} colMd={4} noGutterSm>
   <ResourceCard
-      subTitle="Angular (Community)"
-      href="https://angular.carbondesignsystem.com/?path=/story/components-tag--basic"
+      subTitle="Web Components"
+      href="https://web-components.carbondesignsystem.com/?path=/story/components-tag--default"
       >
 
-<MdxIcon name="angular" />
+<MdxIcon name="webcomponents" />
 
   </ResourceCard>
 </Column>
 <Column colLg={4} colMd={4} noGutterSm>
   <ResourceCard
-      subTitle="Vue (Community)"
-      href="http://vue.carbondesignsystem.com/?path=/story/components-cvtag--default"
+      subTitle="Angular (Community)"
+      href="https://angular.carbondesignsystem.com/?path=/story/components-tag--basic"
       >
 
-<MdxIcon name="vue" />
+<MdxIcon name="angular" />
 
   </ResourceCard>
 </Column>
 <Column colLg={4} colMd={4} noGutterSm>
   <ResourceCard
-      subTitle="Web Components (Community)"
-      href="https://web-components.carbondesignsystem.com/?path=/story/components-tag--default"
+      subTitle="Vue (Community)"
+      href="http://vue.carbondesignsystem.com/?path=/story/components-cvtag--default"
       >
 
-<MdxIcon name="webcomponents" />
+<MdxIcon name="vue" />
 
   </ResourceCard>
 </Column>
diff --git a/src/pages/components/text-input/code.mdx b/src/pages/components/text-input/code.mdx
index 0c3f663b9d2..b8d3d0bad60 100755
--- a/src/pages/components/text-input/code.mdx
+++ b/src/pages/components/text-input/code.mdx
@@ -28,31 +28,31 @@ usage documentation, see the Storybooks for each framework below.
 </Column>
 <Column colLg={4} colMd={4} noGutterSm>
   <ResourceCard
-      subTitle="Angular (Community)"
-      href="https://angular.carbondesignsystem.com/?path=/story/components-input--label"
+      subTitle="Web Components"
+      href="https://web-components.carbondesignsystem.com/?path=/story/components-input--default"
       >
 
-<MdxIcon name="angular" />
+<MdxIcon name="webcomponents" />
 
   </ResourceCard>
 </Column>
 <Column colLg={4} colMd={4} noGutterSm>
   <ResourceCard
-      subTitle="Vue (Community)"
-      href="http://vue.carbondesignsystem.com/?path=/story/components-cvtextinput--default"
+      subTitle="Angular (Community)"
+      href="https://angular.carbondesignsystem.com/?path=/story/components-input--label"
       >
 
-<MdxIcon name="vue" />
+<MdxIcon name="angular" />
 
   </ResourceCard>
 </Column>
 <Column colLg={4} colMd={4} noGutterSm>
   <ResourceCard
-      subTitle="Web Components (Community)"
-      href="https://web-components.carbondesignsystem.com/?path=/story/components-input--default"
+      subTitle="Vue (Community)"
+      href="http://vue.carbondesignsystem.com/?path=/story/components-cvtextinput--default"
       >
 
-<MdxIcon name="webcomponents" />
+<MdxIcon name="vue" />
 
   </ResourceCard>
 </Column>
@@ -84,11 +84,11 @@ usage documentation, see the Storybooks for each framework below.
     links={{
       React:
         'https://react.carbondesignsystem.com/?path=/story/components-textinput--default',
+      'Web Components':
+        'https://web-components.carbondesignsystem.com/?path=/story/components-input--default',
       Angular:
         'https://angular.carbondesignsystem.com/?path=/story/components-input--label',
       Vue: 'http://vue.carbondesignsystem.com/?path=/story/components-cvtextinput--default',
-      'Web Components':
-        'https://web-components.carbondesignsystem.com/?path=/story/components-input--default',
     }}
   >
     {`
@@ -108,11 +108,11 @@ usage documentation, see the Storybooks for each framework below.
     links={{
       React:
         'https://react.carbondesignsystem.com/?path=/story/components-textinput--toggle-password-visibility',
+      'Web Components':
+        'https://web-components.carbondesignsystem.com/?path=/story/components-input--default',
       Angular:
         'https://angular.carbondesignsystem.com/?path=/story/components-input--label',
       Vue: 'http://vue.carbondesignsystem.com/?path=/story/components-cvtextinput--default',
-      'Web Components':
-        'https://web-components.carbondesignsystem.com/?path=/story/components-input--default',
     }}
   >
     {`
@@ -137,11 +137,11 @@ usage documentation, see the Storybooks for each framework below.
     links={{
       React:
         'https://react.carbondesignsystem.com/?path=/story/components-textarea--default',
+      'Web Components':
+        'https://web-components.carbondesignsystem.com/?path=/story/components-textarea--default',
       Angular:
         'https://angular.carbondesignsystem.com/?path=/story/components-input--textarea',
       Vue: 'http://vue.carbondesignsystem.com/?path=/story/components-cvtextarea--default',
-      'Web Components':
-        'https://web-components.carbondesignsystem.com/?path=/story/components-textarea--default',
     }}
   >
     {`
diff --git a/src/pages/components/text-input/usage.mdx b/src/pages/components/text-input/usage.mdx
index ce466e794a0..88f42878bc6 100755
--- a/src/pages/components/text-input/usage.mdx
+++ b/src/pages/components/text-input/usage.mdx
@@ -89,11 +89,11 @@ longer, multi-line entries.
     links={{
       React:
         'https://react.carbondesignsystem.com/?path=/story/components-textinput--default',
+      'Web Components':
+        'https://web-components.carbondesignsystem.com/?path=/story/components-input--default',
       Angular:
         'https://angular.carbondesignsystem.com/?path=/story/components-input--label',
       Vue: 'http://vue.carbondesignsystem.com/?path=/story/components-cvtextinput--default',
-      'Web Components':
-        'https://web-components.carbondesignsystem.com/?path=/story/components-input--default',
     }}
   >{`
     <div>
@@ -111,11 +111,11 @@ longer, multi-line entries.
     links={{
       React:
         'https://react.carbondesignsystem.com/?path=/story/components-textinput--toggle-password-visibility',
+      'Web Components':
+        'https://web-components.carbondesignsystem.com/?path=/story/components-input--default',
       Angular:
         'https://angular.carbondesignsystem.com/?path=/story/components-input--label',
       Vue: 'http://vue.carbondesignsystem.com/?path=/story/components-cvtextinput--default',
-      'Web Components':
-        'https://web-components.carbondesignsystem.com/?path=/story/components-input--default',
     }}
   >{`
     <div>
@@ -138,11 +138,11 @@ longer, multi-line entries.
     links={{
       React:
         'https://react.carbondesignsystem.com/?path=/story/components-textarea--default',
+      'Web Components':
+        'https://web-components.carbondesignsystem.com/?path=/story/components-textarea--default',
       Angular:
         'https://angular.carbondesignsystem.com/?path=/story/components-input--textarea',
       Vue: 'http://vue.carbondesignsystem.com/?path=/story/components-cvtextarea--default',
-      'Web Components':
-        'https://web-components.carbondesignsystem.com/?path=/story/components-textarea--default',
     }}
   >{`
     <div>
diff --git a/src/pages/components/tile/code.mdx b/src/pages/components/tile/code.mdx
index f1d162575e0..0abae0b9e3e 100755
--- a/src/pages/components/tile/code.mdx
+++ b/src/pages/components/tile/code.mdx
@@ -28,31 +28,31 @@ documentation, see the Storybooks for each framework below.
 </Column>
 <Column colLg={4} colMd={4} noGutterSm>
   <ResourceCard
-      subTitle="Angular (Community)"
-      href="https://angular.carbondesignsystem.com/?path=/story/components-tiles--basic"
+      subTitle="Web Components"
+      href="https://web-components.carbondesignsystem.com/?path=/story/components-tile--default"
       >
 
-<MdxIcon name="angular" />
+<MdxIcon name="webcomponents" />
 
   </ResourceCard>
 </Column>
 <Column colLg={4} colMd={4} noGutterSm>
   <ResourceCard
-      subTitle="Vue (Community)"
-      href="http://vue.carbondesignsystem.com/?path=/story/components-cvtile--default"
+      subTitle="Angular (Community)"
+      href="https://angular.carbondesignsystem.com/?path=/story/components-tiles--basic"
       >
 
-<MdxIcon name="vue" />
+<MdxIcon name="angular" />
 
   </ResourceCard>
 </Column>
 <Column colLg={4} colMd={4} noGutterSm>
   <ResourceCard
-      subTitle="Web Components (Community)"
-      href="https://web-components.carbondesignsystem.com/?path=/story/components-tile--default"
+      subTitle="Vue (Community)"
+      href="http://vue.carbondesignsystem.com/?path=/story/components-cvtile--default"
       >
 
-<MdxIcon name="webcomponents" />
+<MdxIcon name="vue" />
 
   </ResourceCard>
 </Column>
@@ -92,11 +92,11 @@ documentation, see the Storybooks for each framework below.
     links={{
       React:
         'https://react.carbondesignsystem.com/?path=/story/components-tile--default',
+      'Web Components':
+        'https://web-components.carbondesignsystem.com/?path=/story/components-tile--default',
       Angular:
         'https://angular.carbondesignsystem.com/?path=/story/components-tiles--basic',
       Vue: 'http://vue.carbondesignsystem.com/?path=/story/components-cvtile--default',
-      'Web Components':
-        'https://web-components.carbondesignsystem.com/?path=/story/components-tile--default',
     }}
   >
     {`
@@ -113,11 +113,11 @@ documentation, see the Storybooks for each framework below.
     links={{
       React:
         'https://react.carbondesignsystem.com/?path=/story/components-tile--clickable',
+      'Web Components':
+        'https://web-components.carbondesignsystem.com/?path=/story/components-tile--clickable',
       Angular:
         'https://angular.carbondesignsystem.com/?path=/story/components-tiles--basic',
       Vue: 'http://vue.carbondesignsystem.com/?path=/story/components-cvtile--default',
-      'Web Components':
-        'https://web-components.carbondesignsystem.com/?path=/story/components-tile--clickable',
     }}
   >
     {`
@@ -136,11 +136,11 @@ documentation, see the Storybooks for each framework below.
     links={{
       React:
         'https://react.carbondesignsystem.com/?path=/story/components-tile--radio',
+      'Web Components':
+        'https://web-components.carbondesignsystem.com/?path=/story/components-tile--single-selectable',
       Angular:
         'https://angular.carbondesignsystem.com/?path=/story/components-tiles--clickable',
       Vue: 'http://vue.carbondesignsystem.com/?path=/story/components-cvtile--clickable',
-      'Web Components':
-        'https://web-components.carbondesignsystem.com/?path=/story/components-tile--single-selectable',
     }}
   >
     {`
@@ -184,11 +184,11 @@ documentation, see the Storybooks for each framework below.
     links={{
       React:
         'https://react.carbondesignsystem.com/?path=/story/components-tile--multi-select',
+      'Web Components':
+        'https://web-components.carbondesignsystem.com/?path=/story/components-tile--single-selectable',
       Angular:
         'https://angular.carbondesignsystem.com/?path=/story/components-tiles--selectable',
       Vue: 'http://vue.carbondesignsystem.com/?path=/story/components-cvtile--selectable',
-      'Web Components':
-        'https://web-components.carbondesignsystem.com/?path=/story/components-tile--single-selectable',
     }}
   >
     {`
@@ -234,11 +234,11 @@ documentation, see the Storybooks for each framework below.
     links={{
       React:
         'https://react.carbondesignsystem.com/?path=/story/components-tile--expandable',
+      'Web Components':
+        'https://web-components.carbondesignsystem.com/?path=/story/components-tile--expandable',
       Angular:
         'https://angular.carbondesignsystem.com/?path=/story/components-tiles--expandable',
       Vue: 'http://vue.carbondesignsystem.com/?path=/story/components-cvtile--expandable',
-      'Web Components':
-        'https://web-components.carbondesignsystem.com/?path=/story/components-tile--expandable',
     }}
   >
     {`
diff --git a/src/pages/components/toggle/code.mdx b/src/pages/components/toggle/code.mdx
index 37e4e126e86..81da13a3349 100755
--- a/src/pages/components/toggle/code.mdx
+++ b/src/pages/components/toggle/code.mdx
@@ -28,31 +28,31 @@ documentation, see the Storybooks for each framework below.
 </Column>
 <Column colLg={4} colMd={4} noGutterSm>
   <ResourceCard
-      subTitle="Angular (Community)"
-      href="https://angular.carbondesignsystem.com/?path=/story/components-toggle--basic"
+      subTitle="Web Components"
+      href="https://web-components.carbondesignsystem.com/?path=/story/components-toggle--default"
       >
 
-<MdxIcon name="angular" />
+<MdxIcon name="webcomponents" />
 
   </ResourceCard>
 </Column>
 <Column colLg={4} colMd={4} noGutterSm>
   <ResourceCard
-      subTitle="Vue (Community)"
-      href="http://vue.carbondesignsystem.com/?path=/story/components-cvtoggle--default"
+      subTitle="Angular (Community)"
+      href="https://angular.carbondesignsystem.com/?path=/story/components-toggle--basic"
       >
 
-<MdxIcon name="vue" />
+<MdxIcon name="angular" />
 
   </ResourceCard>
 </Column>
 <Column colLg={4} colMd={4} noGutterSm>
   <ResourceCard
-      subTitle="Web Components (Community)"
-      href="https://web-components.carbondesignsystem.com/?path=/story/components-toggle--default"
+      subTitle="Vue (Community)"
+      href="http://vue.carbondesignsystem.com/?path=/story/components-cvtoggle--default"
       >
 
-<MdxIcon name="webcomponents" />
+<MdxIcon name="vue" />
 
   </ResourceCard>
 </Column>
@@ -77,11 +77,11 @@ documentation, see the Storybooks for each framework below.
     links={{
       React:
         'https://react.carbondesignsystem.com/?path=/story/components-toggle--default',
+      'Web Components':
+        'https://web-components.carbondesignsystem.com/?path=/story/components-toggle--default',
       Angular:
         'https://angular.carbondesignsystem.com/?path=/story/components-toggle--basic',
       Vue: 'http://vue.carbondesignsystem.com/?path=/story/components-cvtoggle--default',
-      'Web Components':
-        'https://web-components.carbondesignsystem.com/?path=/story/components-toggle--default',
     }}
   >
     {`
@@ -98,11 +98,11 @@ documentation, see the Storybooks for each framework below.
     links={{
       React:
         'https://react.carbondesignsystem.com/?path=/story/components-toggle--default',
+      'Web Components':
+        'https://web-components.carbondesignsystem.com/?path=/story/components-toggle--default',
       Angular:
         'https://angular.carbondesignsystem.com/?path=/story/components-toggle--basic',
       Vue: 'http://vue.carbondesignsystem.com/?path=/story/components-cvtoggle--default',
-      'Web Components':
-        'https://web-components.carbondesignsystem.com/?path=/story/components-toggle--default',
     }}
   >
     {`
diff --git a/src/pages/components/toggle/usage.mdx b/src/pages/components/toggle/usage.mdx
index a3ff8d10570..83ed2916f63 100755
--- a/src/pages/components/toggle/usage.mdx
+++ b/src/pages/components/toggle/usage.mdx
@@ -50,11 +50,11 @@ user “flips the switch”. They are commonly used for “on/off” switches.
     links={{
       React:
         'https://react.carbondesignsystem.com/?path=/story/components-toggle--default',
+      'Web Components':
+        'https://web-components.carbondesignsystem.com/?path=/story/components-toggle--default',
       Angular:
         'https://angular.carbondesignsystem.com/?path=/story/components-toggle--basic',
       Vue: 'http://vue.carbondesignsystem.com/?path=/story/components-cvtoggle--default',
-      'Web Components':
-        'https://web-components.carbondesignsystem.com/?path=/story/components-toggle--default',
     }}
   >
     {`
@@ -71,11 +71,11 @@ user “flips the switch”. They are commonly used for “on/off” switches.
     links={{
       React:
         'https://react.carbondesignsystem.com/?path=/story/components-toggle--default',
+      'Web Components':
+        'https://web-components.carbondesignsystem.com/?path=/story/components-toggle--default',
       Angular:
         'https://angular.carbondesignsystem.com/?path=/story/components-toggle--basic',
       Vue: 'http://vue.carbondesignsystem.com/?path=/story/components-cvtoggle--default',
-      'Web Components':
-        'https://web-components.carbondesignsystem.com/?path=/story/components-toggle--default',
     }}
   >
     {`
diff --git a/src/pages/components/tooltip/code.mdx b/src/pages/components/tooltip/code.mdx
index 97eb755f007..ba3fd1af3a7 100755
--- a/src/pages/components/tooltip/code.mdx
+++ b/src/pages/components/tooltip/code.mdx
@@ -28,31 +28,31 @@ documentation, see the Storybooks for each framework below.
 </Column>
 <Column colLg={4} colMd={4} noGutterSm>
   <ResourceCard
-      subTitle="Angular (Community)"
-      href="https://angular.carbondesignsystem.com/?path=/story/components-tooltip--basic"
+      subTitle="Web Components"
+      href="https://web-components.carbondesignsystem.com/?path=/story/components-tooltip--default"
       >
 
-<MdxIcon name="angular" />
+<MdxIcon name="webcomponents" />
 
   </ResourceCard>
 </Column>
 <Column colLg={4} colMd={4} noGutterSm>
   <ResourceCard
-      subTitle="Vue (Community)"
-      href="http://vue.carbondesignsystem.com/?path=/story/components-cvtooltip--default-interactive-tootlip"
+      subTitle="Angular (Community)"
+      href="https://angular.carbondesignsystem.com/?path=/story/components-tooltip--basic"
       >
 
-<MdxIcon name="vue" />
+<MdxIcon name="angular" />
 
   </ResourceCard>
 </Column>
 <Column colLg={4} colMd={4} noGutterSm>
   <ResourceCard
-      subTitle="Web Components (Community)"
-      href="https://web-components.carbondesignsystem.com/?path=/story/components-tooltip--default"
+      subTitle="Vue (Community)"
+      href="http://vue.carbondesignsystem.com/?path=/story/components-cvtooltip--default-interactive-tootlip"
       >
 
-<MdxIcon name="webcomponents" />
+<MdxIcon name="vue" />
 
   </ResourceCard>
 </Column>
@@ -80,11 +80,11 @@ import { Information } from '@carbon/react/icons';
     links={{
       React:
         'https://react.carbondesignsystem.com/?path=/story/components-tooltip--default-bottom',
+      'Web Components':
+        'https://web-components.carbondesignsystem.com/?path=/story/components-tooltip--default',
       Angular:
         'https://angular.carbondesignsystem.com/?path=/story/components-tooltip--basic',
       Vue: 'http://vue.carbondesignsystem.com/?path=/story/components-cvtooltip--default-interactive-tootlip',
-      'Web Components':
-        'https://web-components.carbondesignsystem.com/?path=/story/components-tooltip--default',
     }}
   >
     {`
@@ -108,11 +108,11 @@ import { Information } from '@carbon/react/icons';
     links={{
       React:
         'https://react.carbondesignsystem.com/?path=/story/components-tooltipdefinition--default',
+      'Web Components':
+        'https://web-components.carbondesignsystem.com/?path=/story/components-tooltip--definition',
       Angular:
         'https://angular.carbondesignsystem.com/?path=/story/components-tooltip-definition--basic',
       Vue: 'http://vue.carbondesignsystem.com/?path=/story/components-cvtooltip--default-definition-tootlip',
-      'Web Components':
-        'https://web-components.carbondesignsystem.com/?path=/story/components-tooltip--definition',
     }}
   >
     {`
diff --git a/src/pages/components/tooltip/usage.mdx b/src/pages/components/tooltip/usage.mdx
index d3de78745d2..0c675369f38 100755
--- a/src/pages/components/tooltip/usage.mdx
+++ b/src/pages/components/tooltip/usage.mdx
@@ -175,11 +175,11 @@ import { Information } from '@carbon/react/icons';
     links={{
       React:
         'https://react.carbondesignsystem.com/?path=/story/components-tooltip--default-bottom',
+      'Web Components':
+        'https://web-components.carbondesignsystem.com/?path=/story/components-tooltip--default',
       Angular:
         'https://angular.carbondesignsystem.com/?path=/story/components-tooltip--basic',
       Vue: 'http://vue.carbondesignsystem.com/?path=/story/components-cvtooltip--default-interactive-tootlip',
-      'Web Components':
-        'https://web-components.carbondesignsystem.com/?path=/story/components-tooltip--default',
     }}
   >
     {`
@@ -203,11 +203,11 @@ import { Information } from '@carbon/react/icons';
     links={{
       React:
         'https://react.carbondesignsystem.com/?path=/story/components-tooltipdefinition--default',
+      'Web Components':
+        'https://web-components.carbondesignsystem.com/?path=/story/components-tooltip--definition',
       Angular:
         'https://angular.carbondesignsystem.com/?path=/story/components-tooltip-definition--basic',
       Vue: 'http://vue.carbondesignsystem.com/?path=/story/components-cvtooltip--default-definition-tootlip',
-      'Web Components':
-        'https://web-components.carbondesignsystem.com/?path=/story/components-tooltip--definition',
     }}
   >
     {`