diff --git a/docs/dotcom-v2-migration.md b/docs/dotcom-v2-migration.md
index afa46835026..83c63cee266 100644
--- a/docs/dotcom-v2-migration.md
+++ b/docs/dotcom-v2-migration.md
@@ -18,6 +18,7 @@ For Carbon v11 migration guidance, see their
 | back-to-top               | View changes [here](#backtotop)        |
 | background-media          | No API changes.                        |
 | button                    | This component is deprecated in v2 in favor for Carbon's core Button |
+| button-group              | No API changes. |
 | callout-with-media        | View changes [here](#callout-with-media)          |
 | callout-quote             | View changes [here](#callout-quote)          |
 | card                      | View changes [here] (#card)            |
diff --git a/packages/styles/scss/components/button-group/_button-group.scss b/packages/styles/scss/components/button-group/_button-group.scss
index 6d9f38e7171..b593a850bef 100644
--- a/packages/styles/scss/components/button-group/_button-group.scss
+++ b/packages/styles/scss/components/button-group/_button-group.scss
@@ -7,42 +7,20 @@
 
 @use '@carbon/styles/scss/breakpoint' as *;
 @use '@carbon/styles/scss/colors' as *;
-@use '@carbon/styles/scss/components/button' as *;
 @use '@carbon/styles/scss/config' as *;
 @use '@carbon/styles/scss/motion' as *;
 @use '@carbon/styles/scss/spacing' as *;
+
 @use '../../globals/vars' as *;
 @use '../lightbox-media-viewer';
+@use '../button';
 
 @mixin button-group {
-  @include button;
-
-  .#{$prefix}--button-group,
-  :host(#{$c4d-prefix}-button-group),
-  :host(#{$c4d-prefix}-leadspace-block-cta) {
-    --#{$c4d-prefix}--button-group--item-count: 3;
-
-    display: grid;
-    grid-template-columns: 1fr;
-    grid-auto-rows: 1fr;
-    grid-gap: $spacing-05;
-
-    @include breakpoint(md) {
-      display: inline-grid;
-      grid-template-columns: repeat(
-        var(--#{$c4d-prefix}--button-group--item-count),
-        1fr
-      );
-    }
-
-    @media print {
-      display: block;
-    }
-  }
-
-  .#{$prefix}--button-group-item,
   :host(#{$c4d-prefix}-button-group-item),
   :host(#{$c4d-prefix}-button-cta) {
+    @extend :host(#{$c4d-prefix}-button);
+
+    outline: none;
     max-width: 100%;
     min-width: 0;
 
@@ -53,10 +31,7 @@
     }
 
     .#{$prefix}--btn {
-      font-size: $spacing-05;
-      position: relative;
       width: 100%;
-      height: 100%;
       word-break: break-word;
       transition: all $duration-fast-01 motion(entrance, productive), width 0s,
         height 0s;
@@ -100,26 +75,33 @@
     }
   }
 
+  :host(#{$c4d-prefix}-button-group),
+  :host(#{$c4d-prefix}-leadspace-block-cta) {
+    --#{$c4d-prefix}--button-group--item-count: 3;
+
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-auto-rows: 1fr;
+    grid-gap: $spacing-05;
+
+    @include breakpoint(md) {
+      display: inline-grid;
+      grid-template-columns: repeat(
+        var(--#{$c4d-prefix}--button-group--item-count),
+        1fr
+      );
+    }
+
+    @media print {
+      display: block;
+    }
+  }
+
   :host(#{$c4d-prefix}-button-group-item) {
     ::slotted([slot='icon']) {
-      position: absolute;
-      right: $spacing-05;
-      top: 50%;
-      transform: translateY(-50%);
-      flex-shrink: 0;
-
       @media print {
         fill: $gray-100;
       }
     }
   }
-
-  .#{$prefix}--button-group-item--pseudo {
-    position: absolute;
-    clip: rect(0, 0, 0, 0);
-
-    .#{$prefix}--btn {
-      width: auto;
-    }
-  }
 }
diff --git a/packages/styles/scss/components/button/_button.scss b/packages/styles/scss/components/button/_button.scss
new file mode 100644
index 00000000000..ae58e08f831
--- /dev/null
+++ b/packages/styles/scss/components/button/_button.scss
@@ -0,0 +1,40 @@
+/**
+* Copyright IBM Corp. 2016, 2023
+*
+* This source code is licensed under the Apache-2.0 license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '../../globals/vars' as *;
+@use '../../../../carbon-web-components/src/components/button/button';
+
+@mixin button {
+  :host(#{$c4d-prefix}-button) {
+    @extend :host(#{$prefix}-button);
+
+    svg {
+      @extend .#{$prefix}--btn__icon;
+    }
+
+    .#{$prefix}--btn--hidden {
+      display: none;
+      visibility: hidden;
+
+      @media print {
+        display: inline-block;
+        visibility: visible;
+        font-weight: 200;
+        color: $text-primary;
+
+        span {
+          font-weight: 600;
+          margin-left: calc(-1 * #{$spacing-02});
+          margin-right: $spacing-02;
+        }
+      }
+    }
+  }
+}
diff --git a/packages/styles/scss/components/button/_index.scss b/packages/styles/scss/components/button/_index.scss
new file mode 100644
index 00000000000..5cd90905d56
--- /dev/null
+++ b/packages/styles/scss/components/button/_index.scss
@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2023
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward 'button';
+@use 'button';
+
+@include button.button;
diff --git a/packages/styles/scss/components/card/_card.scss b/packages/styles/scss/components/card/_card.scss
index 3d5ada6a603..b3ebab2e452 100644
--- a/packages/styles/scss/components/card/_card.scss
+++ b/packages/styles/scss/components/card/_card.scss
@@ -204,6 +204,114 @@
     }
   }
 
+  // Card with pictogram placement style
+  :host(#{$c4d-prefix}-card-group-item),
+  :host(#{$c4d-prefix}-card-in-card),
+  :host(#{$c4d-prefix}-card-cta),
+  :host(#{$c4d-prefix}-card) {
+    outline: none;
+
+    .#{$prefix}--card__pictogram {
+      display: flex;
+
+      ::slotted(#{$c4d-prefix}-card-heading) {
+        padding-top: $spacing-07;
+        margin-bottom: 0;
+
+        @include breakpoint(md) {
+          padding-left: 0;
+          flex: 1;
+          display: flex;
+        }
+      }
+    }
+
+    &[pictogram-placement='top'] .#{$prefix}--card,
+    &[pictogram-placement='bottom'] .#{$prefix}--card {
+      ::slotted(#{$c4d-prefix}-card-heading) {
+        padding-top: 0;
+      }
+
+      ::slotted(svg[slot='pictogram']) {
+        margin-left: 0;
+      }
+
+      .#{$prefix}--card__content {
+        position: relative;
+      }
+
+      .#{$prefix}--card__copy {
+        margin-top: $spacing-07;
+        margin-bottom: 0;
+
+        &[hidden] {
+          margin: 0;
+        }
+      }
+
+      svg {
+        position: absolute;
+        right: $spacing-05;
+        bottom: $spacing-05;
+        color: $link-primary;
+      }
+    }
+
+    &[pictogram-placement='top'] .#{$prefix}--card {
+      ::slotted(#{$c4d-prefix}-card-heading) {
+        align-items: flex-end;
+        margin-bottom: 0;
+        margin-top: auto;
+      }
+
+      .#{$prefix}--card__copy {
+        margin-top: $spacing-07;
+      }
+
+      ::slotted(svg[slot='pictogram']) {
+        margin-bottom: $spacing-07;
+      }
+    }
+
+    &[pictogram-placement='bottom'] .#{$prefix}--card {
+      ::slotted(#{$c4d-prefix}-card-heading) {
+        align-items: flex-start;
+      }
+
+      .#{$prefix}--card__copy {
+        margin-bottom: $spacing-07;
+      }
+
+      ::slotted(svg[slot='pictogram']) {
+        margin-top: auto;
+        align-items: flex-end;
+      }
+    }
+
+    ::slotted(svg[slot='pictogram']) {
+      fill: currentColor;
+      @include breakpoint(md) {
+        margin-left: 0;
+      }
+      @include breakpoint(sm) {
+        margin-left: $spacing-05;
+      }
+    }
+
+    &[color-scheme='inverse'] {
+      .#{$prefix}--card svg,
+      ::slotted(svg[slot='pictogram']) {
+        color: $link-inverse;
+      }
+    }
+
+    .#{$prefix}--card__copy {
+      display: flex;
+      flex-direction: column;
+      gap: $spacing-05;
+    }
+  }
+
   :host(#{$c4d-prefix}-card[aspect-ratio='1:1']) .#{$prefix}--card__wrapper {
     @include ratio-base(1, 1, false);
   }
@@ -223,37 +331,6 @@
     background-color: $layer-02;
   }
 
-  .#{$prefix}--card.#{$prefix}--card--static {
-    outline: none;
-
-    &:hover {
-      .#{$prefix}--card__wrapper {
-        background-color: $layer-02;
-      }
-    }
-
-    .#{$prefix}--card__footer {
-      align-self: flex-start;
-      &:hover {
-        text-decoration: underline;
-
-        svg,
-        .#{$prefix}--card__cta__copy {
-          color: $text-primary;
-        }
-      }
-
-      &:active,
-      &:focus {
-        align-self: flex-start;
-        outline: 1px solid $focus;
-      }
-      &::after {
-        position: relative;
-      }
-    }
-  }
-
   .#{$prefix}--card--border {
     border: 1px solid $layer-accent-01;
   }
@@ -276,6 +353,10 @@
   :host(#{$c4d-prefix}-card),
   :host(#{$c4d-prefix}-card-group-item) {
     &:not([href]) {
+      .cds--card .cds--card__copy {
+        margin-bottom: $spacing-01;
+      }
+
       &,
       &:hover {
         .#{$prefix}--card__wrapper {
@@ -283,18 +364,19 @@
         }
       }
 
-      &:focus-within,
-      .#{$prefix}--card:focus-within {
-        outline: none;
+      &:focus-within ::slotted(#{$c4d-prefix}-image) {
+        z-index: 0;
       }
 
       ::slotted(#{$c4d-prefix}-card-footer) {
+        margin-top: $spacing-07;
         display: inline-flex;
         &::after {
           position: relative;
         }
       }
     }
+
     &[color-scheme='light'] {
       &,
       &:hover {
@@ -368,19 +450,6 @@
     color: $text-secondary;
   }
 
-  .#{$prefix}--card .#{$prefix}--card__cta,
-  .#{$prefix}--card .#{$prefix}--card__cta a,
-  .#{$prefix}--card .#{$prefix}--card__cta a:visited,
-  :host(#{$c4d-prefix}-card-footer)
-    .#{$c4d-prefix}-ce--card__footer
-    ::slotted(svg[slot='icon']),
-  :host(#{$c4d-prefix}-card-cta-footer)
-    .#{$c4d-prefix}-ce--card__footer
-    ::slotted(svg[slot='icon']) {
-    margin-left: 0;
-    color: $icon-interactive;
-  }
-
   :host(#{$c4d-prefix}-card-footer[disabled])
     .#{$c4d-prefix}-ce--card__footer
     ::slotted(svg[slot='icon']) {
@@ -447,7 +516,6 @@
     .#{$prefix}--card__cta__copy {
       max-width: calc(100% - 20px - #{$spacing-03});
       margin-right: $spacing-03;
-      color: $text-primary;
       @include type-style('body-02');
     }
 
@@ -476,9 +544,55 @@
     }
   }
 
+  :host(#{$c4d-prefix}-card-footer),
+  :host(#{$c4d-prefix}-card-cta-footer) {
+    .#{$c4d-prefix}-ce--card__footer--static {
+      color: $link-primary;
+    }
+
+    .#{$prefix}--link-with-icon.#{$prefix}--link-with-icon--inline-icon {
+      display: flex;
+      width: 100%;
+      justify-content: flex-end;
+      align-items: center;
+    }
+
+    &[color-scheme='inverse'] .#{$c4d-prefix}-ce--card__footer--static {
+      color: $link-inverse;
+    }
+
+    &[color-scheme='inverse']
+      .#{$prefix}--link-with-icon.#{$prefix}--link-with-icon--inline-icon {
+      svg,
+      ::slotted(svg[slot='icon']) {
+        color: $link-inverse;
+      }
+    }
+
+    &:hover {
+      ::slotted(svg[slot='icon']) {
+        color: $link-primary-hover;
+      }
+    }
+  }
+
   // static card footer
   :host(#{$c4d-prefix}-card-footer):not([parent-href]) {
     .#{$prefix}--card__footer {
+      width: auto;
+      justify-content: flex-start;
+
+      &:active,
+      &:hover {
+        text-decoration: none;
+      }
+
+      &:active {
+        ::slotted([slot='icon']) {
+          color: $text-primary;
+        }
+      }
+
       &::after {
         content: none;
       }
@@ -486,30 +600,12 @@
         outline: $spacing-01 solid $focus;
       }
     }
-  }
-
-  .#{$prefix}--card__footer__icon-left {
-    svg.#{$prefix}--card__cta,
-    ::slotted(svg[slot='icon']) {
-      margin-right: $spacing-03;
-    }
 
     .#{$prefix}--card__cta__copy {
-      margin-right: 0;
+      margin-right: $spacing-03;
     }
   }
 
-  .#{$prefix}--card .#{$prefix}--card__footer,
-  .#{$c4d-prefix}-ce--card__footer {
-    display: flex;
-  }
-
-  .#{$prefix}--card .#{$prefix}--card__footer svg,
-  .#{$c4d-prefix}-ce--card__footer ::slotted(svg[slot='icon']) {
-    fill: currentColor;
-    align-self: center;
-  }
-
   .#{$prefix}--card--inverse,
   .#{$prefix}--card.#{$prefix}--card--inverse,
   :host(#{$c4d-prefix}-card)[color-scheme='inverse'],
@@ -655,142 +751,6 @@
     }
   }
 
-  // Card with pictogram placement style
-  :host(#{$c4d-prefix}-card-group-item),
-  :host(#{$c4d-prefix}-card-in-card),
-  :host(#{$c4d-prefix}-card-cta),
-  :host(#{$c4d-prefix}-card) {
-    outline: none;
-
-    .#{$prefix}--card__pictogram {
-      display: flex;
-
-      ::slotted(#{$c4d-prefix}-card-heading) {
-        padding-top: $spacing-07;
-        margin-bottom: 0;
-
-        @include breakpoint(md) {
-          padding-left: 0;
-          flex: 1;
-          display: flex;
-        }
-      }
-    }
-
-    &[pictogram-placement='top'] .#{$prefix}--card,
-    &[pictogram-placement='bottom'] .#{$prefix}--card {
-      ::slotted(#{$c4d-prefix}-card-heading) {
-        padding-top: 0;
-      }
-
-      ::slotted(svg[slot='pictogram']) {
-        margin-left: 0;
-      }
-
-      .#{$prefix}--card__content {
-        position: relative;
-      }
-
-      .#{$prefix}--card__copy {
-        margin-top: $spacing-07;
-        margin-bottom: 0;
-
-        &[hidden] {
-          margin: 0;
-        }
-      }
-
-      svg {
-        position: absolute;
-        right: $spacing-05;
-        bottom: $spacing-05;
-        color: $link-primary;
-      }
-    }
-
-    &[pictogram-placement='top'] .#{$prefix}--card {
-      ::slotted(#{$c4d-prefix}-card-heading) {
-        align-items: flex-end;
-        margin-bottom: 0;
-        margin-top: auto;
-      }
-
-      .#{$prefix}--card__copy {
-        margin-top: $spacing-07;
-      }
-
-      ::slotted(svg[slot='pictogram']) {
-        margin-bottom: $spacing-07;
-      }
-    }
-
-    &[pictogram-placement='bottom'] .#{$prefix}--card {
-      ::slotted(#{$c4d-prefix}-card-heading) {
-        align-items: flex-start;
-      }
-
-      .#{$prefix}--card__copy {
-        margin-bottom: $spacing-07;
-      }
-
-      ::slotted(svg[slot='pictogram']) {
-        margin-top: auto;
-        align-items: flex-end;
-      }
-    }
-
-    ::slotted(svg[slot='pictogram']) {
-      fill: currentColor;
-      @include breakpoint(md) {
-        margin-left: 0;
-      }
-      @include breakpoint(sm) {
-        margin-left: $spacing-05;
-      }
-    }
-
-    &[color-scheme='inverse'] ::slotted(svg[slot='pictogram']) {
-      color: $link-inverse;
-    }
-
-    .#{$prefix}--card__copy {
-      display: flex;
-      flex-direction: column;
-      gap: $spacing-05;
-    }
-  }
-
-  :host(#{$c4d-prefix}-card-footer),
-  :host(#{$c4d-prefix}-card-cta-footer) {
-    .#{$c4d-prefix}-ce--card__footer--static {
-      color: $link-primary;
-    }
-
-    .#{$prefix}--link-with-icon.#{$prefix}--link-with-icon--inline-icon {
-      display: flex;
-      width: 100%;
-      justify-content: flex-end;
-    }
-
-    &[color-scheme='inverse'] .#{$c4d-prefix}-ce--card__footer--static {
-      color: $link-inverse;
-    }
-
-    &[color-scheme='inverse']
-      .#{$prefix}--link-with-icon.#{$prefix}--link-with-icon--inline-icon {
-      svg,
-      ::slotted(svg[slot='icon']) {
-        color: $link-inverse;
-      }
-    }
-
-    &:hover {
-      ::slotted(svg[slot='icon']) {
-        color: $link-primary-hover;
-      }
-    }
-  }
-
   :host(#{$c4d-prefix}-card-cta-footer[cta-type='video']),
   :host(#{$c4d-prefix}-card-footer[cta-type='video']) {
     .#{$prefix}--link-with-icon.#{$prefix}--link-with-icon--inline-icon {
diff --git a/packages/styles/scss/components/pricing-table/_pricing-table.scss b/packages/styles/scss/components/pricing-table/_pricing-table.scss
index b48e24c187a..ea2a2734154 100644
--- a/packages/styles/scss/components/pricing-table/_pricing-table.scss
+++ b/packages/styles/scss/components/pricing-table/_pricing-table.scss
@@ -310,7 +310,7 @@
 
   .#{$prefix}--pricing-table-header-cell-cta,
   :host(#{$c4d-prefix}-pricing-table-header-cell-cta) {
-    @extend .#{$prefix}--button-group-item;
+    @extend :host(#{$c4d-prefix}-button-group-item);
 
     display: block;
     margin-block-start: $spacing-06;
diff --git a/packages/web-components/.storybook/container.scss b/packages/web-components/.storybook/container.scss
index 5a99be42853..843db80308b 100644
--- a/packages/web-components/.storybook/container.scss
+++ b/packages/web-components/.storybook/container.scss
@@ -14,9 +14,11 @@
 @use '@carbon/grid';
 
 @use '@carbon/ibmdotcom-styles/scss/internal/callout/tokens' as callout-tokens;
+@use '@carbon/styles/scss/components/button/tokens' as button-tokens;
 @use '@carbon/styles/scss/components/tag/tokens' as tag-tokens;
 
 @include add-component-tokens(callout-tokens.$callout-tokens);
+@include add-component-tokens(button-tokens.$button-tokens);
 @include add-component-tokens(tag-tokens.$tag-tokens);
 
 // Emit the flex-grid styles
diff --git a/packages/web-components/examples/codesandbox/components-react/button-group/src/index.js b/packages/web-components/examples/codesandbox/components-react/button-group/src/index.js
index 44cee294592..8155601a44c 100644
--- a/packages/web-components/examples/codesandbox/components-react/button-group/src/index.js
+++ b/packages/web-components/examples/codesandbox/components-react/button-group/src/index.js
@@ -11,17 +11,14 @@ import React from 'react';
 import { render } from 'react-dom';
 import C4DButtonGroup from '@carbon/ibmdotcom-web-components/es/components-react/button-group/button-group';
 import C4DButtonGroupItem from '@carbon/ibmdotcom-web-components/es/components-react/button-group/button-group-item';
-import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js';
 import './index.css';
 
 const App = () => (
   <C4DButtonGroup>
-    <C4DButtonGroupItem href="https://www.example.com">
-      <ArrowRight20 slot="icon" />
+    <C4DButtonGroupItem href="https://www.example.com" cta-type="local">
       Button 1
     </C4DButtonGroupItem>
-    <C4DButtonGroupItem href="https://www.example.com">
-      <ArrowRight20 slot="icon" />
+    <C4DButtonGroupItem href="https://www.example.com" cta-type="local">
       Button 2
     </C4DButtonGroupItem>
   </C4DButtonGroup>
diff --git a/packages/web-components/examples/codesandbox/components-react/button/.gitignore b/packages/web-components/examples/codesandbox/components-react/button/.gitignore
new file mode 100644
index 00000000000..7d5b7a94f4d
--- /dev/null
+++ b/packages/web-components/examples/codesandbox/components-react/button/.gitignore
@@ -0,0 +1,2 @@
+/build
+/node_modules
diff --git a/packages/web-components/examples/codesandbox/components-react/button/index.html b/packages/web-components/examples/codesandbox/components-react/button/index.html
new file mode 100644
index 00000000000..b6df1c62a0c
--- /dev/null
+++ b/packages/web-components/examples/codesandbox/components-react/button/index.html
@@ -0,0 +1,22 @@
+<!--
+@license
+Copyright IBM Corp. 2020
+This source code is licensed under the Apache-2.0 license found in the
+LICENSE file in the root directory of this source tree.
+-->
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+    <title>carbon-web-components example with React</title>
+  </head>
+  <body>
+    <noscript>
+      You need to enable JavaScript to run this app.
+    </noscript>
+    <div id="root"></div>
+    <script type="module" src="index.js"></script>
+  </body>
+</html>
diff --git a/packages/web-components/examples/codesandbox/components-react/button/package.json b/packages/web-components/examples/codesandbox/components-react/button/package.json
new file mode 100644
index 00000000000..243a630d120
--- /dev/null
+++ b/packages/web-components/examples/codesandbox/components-react/button/package.json
@@ -0,0 +1,35 @@
+{
+  "name": "ibmdotcom-web-components-react-button-example",
+  "version": "0.1.0",
+  "private": true,
+  "description": "Sample project for getting started with the Web Components from Carbon for IBM.com with React.",
+  "license": "Apache-2",
+  "scripts": {
+    "start": "webpack serve"
+  },
+  "dependencies": {
+    "@carbon/ibmdotcom-web-components": "latest",
+    "@carbon/icons-react": "~10.22.0",
+    "carbon-components": "~10.23.0",
+    "lit-element": "^2.5.1",
+    "lit-html": "^1.4.1",
+    "lodash-es": "^4.17.0",
+    "prop-types": "^15.7.0",
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0",
+    "react-redux": "^7.2.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.0.0",
+    "@babel/preset-react": "^7.10.0",
+    "@types/lodash-es": "^4.17.0",
+    "@types/react": "^16.9.0",
+    "babel-loader": "^8.2.0",
+    "css-loader": "^4.3.0",
+    "html-webpack-plugin": "^4.5.0",
+    "style-loader": "^2.0.0",
+    "webpack": "^4.0.0",
+    "webpack-cli": "^4.0.0",
+    "webpack-dev-server": "^3.11.0"
+  }
+}
diff --git a/packages/web-components/examples/codesandbox/components-react/button/sandbox.config.json b/packages/web-components/examples/codesandbox/components-react/button/sandbox.config.json
new file mode 100644
index 00000000000..a4df8557d7b
--- /dev/null
+++ b/packages/web-components/examples/codesandbox/components-react/button/sandbox.config.json
@@ -0,0 +1,3 @@
+{
+  "template": "node"
+}
diff --git a/packages/web-components/examples/codesandbox/components-react/button/src/index.css b/packages/web-components/examples/codesandbox/components-react/button/src/index.css
new file mode 100644
index 00000000000..d858ebb2da4
--- /dev/null
+++ b/packages/web-components/examples/codesandbox/components-react/button/src/index.css
@@ -0,0 +1,43 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2020
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+html,
+body {
+  margin: 0;
+}
+
+body {
+  padding: 2rem;
+}
+
+/* Minimum setting to use IBM Plex font */
+@font-face {
+  font-weight: 400;
+  font-family: 'IBM Plex Sans';
+  font-style: normal;
+  src: local('IBM Plex Sans'), local('IBMPlexSans'),
+    url(https://1www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans/fonts/complete/woff/IBMPlexSans-Regular.woff) format('woff');
+  font-display: auto;
+}
+
+@font-face {
+  font-weight: 600;
+  font-family: 'IBM Plex Sans';
+  font-style: normal;
+  src: local('IBM Plex Sans SemiBold'), local('IBMPlexSans-SemiBold'),
+    url(https://1www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans/fonts/complete/woff/IBMPlexSans-SemiBold.woff) format('woff');
+  font-display: auto;
+}
+
+/* From: https://github.com/carbon-design-system/carbon/blob/v10.22.0/packages/type/scss/_reset.scss#L31-L32 */
+body {
+  font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+}
diff --git a/packages/web-components/examples/codesandbox/components-react/button/src/index.js b/packages/web-components/examples/codesandbox/components-react/button/src/index.js
new file mode 100644
index 00000000000..a2b00b0d8d1
--- /dev/null
+++ b/packages/web-components/examples/codesandbox/components-react/button/src/index.js
@@ -0,0 +1,19 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2020, 2022
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import { render } from 'react-dom';
+import DDSButton from '@carbon/ibmdotcom-web-components/es/components-react/button/button';
+import './index.css';
+
+const App = () => (
+  <DDSButton href="https://www.example.com" cta-type="local">Button text</DDSButton>
+);
+
+render(<App />, document.getElementById('root'));
diff --git a/packages/web-components/examples/codesandbox/components-react/button/webpack.config.js b/packages/web-components/examples/codesandbox/components-react/button/webpack.config.js
new file mode 100644
index 00000000000..634d4927863
--- /dev/null
+++ b/packages/web-components/examples/codesandbox/components-react/button/webpack.config.js
@@ -0,0 +1,47 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2020, 2022
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        use: [
+          {
+            loader: 'babel-loader',
+            options: {
+              presets: ['@babel/preset-react'],
+            },
+          },
+        ],
+      },
+      {
+        test: /\.css$/,
+        sideEffects: true,
+        use: ['style-loader', 'css-loader'],
+      },
+    ],
+  },
+  plugins: [
+    // Lets WebPack Dev Server serve `.html` file.
+    // If you have other means to server `.html` content, this is not needed.
+    new HtmlWebpackPlugin({
+      template: 'index.html',
+      inject: false,
+    }),
+  ],
+  output: {
+    library: 'index',
+    filename: 'index.js',
+  },
+};
diff --git a/packages/web-components/examples/codesandbox/components/button-group/cdn.html b/packages/web-components/examples/codesandbox/components/button-group/cdn.html
index bb0427a71f9..fa9aab9a566 100644
--- a/packages/web-components/examples/codesandbox/components/button-group/cdn.html
+++ b/packages/web-components/examples/codesandbox/components/button-group/cdn.html
@@ -27,10 +27,10 @@
 <div class="cds--grid">
   <div class="cds--row">
     <div class="cds--col-sm-4 cds--col-lg-12">
-      <cds-button-group>
-        <cds-button-group-item>Lorem ipsum</cds-button-group-item>
-        <cds-button-group-item>Dolor sit amet</cds-button-group-item>
-      </cds-button-group>
+      <c4d-button-group>
+        <c4d-button-group-item href="https://www.example.com" cta-type="local">Lorem ipsum</c4d-button-group-item>
+        <c4d-button-group-item href="https://www.example.com" cta-type="local">Dolor sit amet</c4d-button-group-item>
+      </c4d-button-group>
     </div>
   </div>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/button-group/index.html b/packages/web-components/examples/codesandbox/components/button-group/index.html
index b08f6ab2f2d..f87a9c68228 100644
--- a/packages/web-components/examples/codesandbox/components/button-group/index.html
+++ b/packages/web-components/examples/codesandbox/components/button-group/index.html
@@ -24,15 +24,15 @@
     <script src="src/index.js"></script>
   </head>
   <body>
-  <div class="cds--grid">
-    <div class="cds--row">
-      <div class="cds--col-sm-4 cds--col-lg-12">
-        <cds-button-group>
-          <cds-button-group-item>Lorem ipsum</cds-button-group-item>
-          <cds-button-group-item>Dolor sit amet</cds-button-group-item>
-        </cds-button-group>
+    <div class="cds--grid">
+      <div class="cds--row">
+        <div class="cds--col-sm-4 cds--col-lg-12">
+          <c4d-button-group>
+            <c4d-button-group-item href="https://www.example.com" cta-type="local">Lorem ipsum</c4d-button-group-item>
+            <c4d-button-group-item href="https://www.example.com" cta-type="local">Dolor sit amet</c4d-button-group-item>
+          </c4d-button-group>
+        </div>
       </div>
     </div>
-  </div>
   </body>
 </html>
diff --git a/packages/web-components/examples/codesandbox/components/button/.babelrc b/packages/web-components/examples/codesandbox/components/button/.babelrc
new file mode 100644
index 00000000000..74450eed94b
--- /dev/null
+++ b/packages/web-components/examples/codesandbox/components/button/.babelrc
@@ -0,0 +1,22 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "modules": false,
+        "targets": [
+          "last 1 version",
+          "Firefox ESR",
+          "not opera > 0",
+          "not op_mini > 0",
+          "not op_mob > 0",
+          "not android > 0",
+          "not edge > 0",
+          "not ie > 0",
+          "not ie_mob > 0"
+        ]
+      }
+    ]
+  ],
+  "plugins": [["@babel/plugin-transform-runtime", { "version": "7.3.0" }]]
+}
diff --git a/packages/web-components/examples/codesandbox/components/button/.gitignore b/packages/web-components/examples/codesandbox/components/button/.gitignore
new file mode 100644
index 00000000000..d94d6e13e94
--- /dev/null
+++ b/packages/web-components/examples/codesandbox/components/button/.gitignore
@@ -0,0 +1,22 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.cache
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/packages/web-components/examples/codesandbox/components/button/cdn.html b/packages/web-components/examples/codesandbox/components/button/cdn.html
new file mode 100644
index 00000000000..936a9a27225
--- /dev/null
+++ b/packages/web-components/examples/codesandbox/components/button/cdn.html
@@ -0,0 +1,36 @@
+<!--
+@license
+
+Copyright IBM Corp. 2020
+
+This source code is licensed under the Apache-2.0 license found in the
+LICENSE file in the root directory of this source tree.
+-->
+
+<html>
+<head>
+  <title>@carbon/ibmdotcom-web-components example</title>
+  <meta charset="UTF-8"/>
+  <link rel="stylesheet"
+        href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
+  <link rel="stylesheet"
+        href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css"/>
+  <style>
+    /* Suppress custom element until styles are loaded */
+    dds-button:not(:defined) {
+      display: none;
+    }
+  </style>
+  <script type="module"
+          src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/button.min.js"></script>
+</head>
+<body>
+<div class="bx--grid">
+  <div class="bx--row">
+    <div class="bx--col-sm-4 bx--col-lg-12">
+      <dds-button href="https://www.example.com" cta-type="local">Button text</dds-button>
+    </div>
+  </div>
+</div>
+</body>
+</html>
diff --git a/packages/web-components/examples/codesandbox/components/button/index.html b/packages/web-components/examples/codesandbox/components/button/index.html
new file mode 100644
index 00000000000..713197e26c3
--- /dev/null
+++ b/packages/web-components/examples/codesandbox/components/button/index.html
@@ -0,0 +1,35 @@
+<!--
+@license
+
+Copyright IBM Corp. 2020
+
+This source code is licensed under the Apache-2.0 license found in the
+LICENSE file in the root directory of this source tree.
+-->
+
+<html>
+  <head>
+    <title>@carbon/ibmdotcom-web-components example</title>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet"
+          href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
+    <link rel="stylesheet"
+          href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css"/>
+    <style>
+      /* Suppress custom element until styles are loaded */
+      dds-button:not(:defined) {
+        display: none;
+      }
+    </style>
+    <script src="src/index.js"></script>
+  </head>
+  <body>
+  <div class="bx--grid">
+    <div class="bx--row">
+      <div class="bx--col-sm-4 bx--col-lg-12">
+        <dds-button href="https://www.example.com" cta-type="local">Button text</dds-button>
+      </div>
+    </div>
+  </div>
+  </body>
+</html>
diff --git a/packages/web-components/examples/codesandbox/components/button/package.json b/packages/web-components/examples/codesandbox/components/button/package.json
new file mode 100644
index 00000000000..45808038336
--- /dev/null
+++ b/packages/web-components/examples/codesandbox/components/button/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "ibmdotcom-web-components-button-example",
+  "version": "0.1.0",
+  "private": true,
+  "description": "Sample project for getting started with the Web Components from Carbon for IBM.com.",
+  "license": "Apache-2",
+  "main": "index.html",
+  "scripts": {
+    "clean": "rimraf node_modules dist .cache",
+    "start": "parcel index.html --port=9000 --no-hmr",
+    "build": "parcel build *.html --no-minify --public-url ./"
+  },
+  "dependencies": {
+    "@carbon/ibmdotcom-web-components": "latest"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.0.0-0",
+    "parcel-bundler": "1.12.3",
+    "rimraf": "^3.0.2"
+  }
+}
diff --git a/packages/web-components/examples/codesandbox/components/button/sandbox.config.json b/packages/web-components/examples/codesandbox/components/button/sandbox.config.json
new file mode 100644
index 00000000000..a4df8557d7b
--- /dev/null
+++ b/packages/web-components/examples/codesandbox/components/button/sandbox.config.json
@@ -0,0 +1,3 @@
+{
+  "template": "node"
+}
diff --git a/packages/web-components/examples/codesandbox/components/button/src/index.js b/packages/web-components/examples/codesandbox/components/button/src/index.js
new file mode 100644
index 00000000000..620988b6814
--- /dev/null
+++ b/packages/web-components/examples/codesandbox/components/button/src/index.js
@@ -0,0 +1,10 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2020, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import '@carbon/ibmdotcom-web-components/es/components/button/index.js';
diff --git a/packages/web-components/src/components/button-group/__stories__/README.stories.mdx b/packages/web-components/src/components/button-group/__stories__/README.stories.mdx
index 352cbadbbd6..bbf7c3957ae 100644
--- a/packages/web-components/src/components/button-group/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/button-group/__stories__/README.stories.mdx
@@ -35,65 +35,39 @@ import '@carbon/web-components/es/icons/arrow--right/20.js';
 ### HTML
 
 ```html
-<cds-button-group>
-  <cds-button-group-item href="https://example.com">
+<c4d-button-group>
+  <c4d-button-group-item href="https://example.com" cta-type="local">
     Lorem ipsum
-    <svg
-      slot="icon"
-      focusable="false"
-      preserveAspectRatio="xMidYMid meet"
-      xmlns="http://www.w3.org/2000/svg"
-      fill="currentColor"
-      aria-hidden="true"
-      width="20"
-      height="20"
-      viewBox="0 0 20 20">
-      <path
-        d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
-    </svg>
-  </cds-button-group-item>
-  <cds-button-group-item href="https://example.com">
+  </c4d-button-group-item>
+  <c4d-button-group-item href="https://example.com" cta-type="local">
     Dolor sit amet
-    <svg
-      slot="icon"
-      focusable="false"
-      preserveAspectRatio="xMidYMid meet"
-      xmlns="http://www.w3.org/2000/svg"
-      fill="currentColor"
-      aria-hidden="true"
-      width="20"
-      height="20"
-      viewBox="0 0 20 20">
-      <path
-        d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
-    </svg>
-  </cds-button-group-item>
-</cds-button-group>
+  </c4d-button-group-item>
+</c4d-button-group>
 ```
 
 ### click handler example for web components
 
 ```html
-<cds-button-group>
-  <cds-button-group-item @click="${this._handleClick}"></cds-button-group-item>
-</cds-button-group>
+<c4d-button-group>
+  <c4d-button-group-item @click="${this._handleClick}"></c4d-button-group-item>
+</c4d-button-group>
 ```
 
 ### click handler example for HTML
 
 ```html
-<cds-button-group>
-  <cds-button-group-item onclick="handleClick()"></cds-button-group-item>
-</cds-button-group>
+<c4d-button-group>
+  <c4d-button-group-item onclick="handleClick()"></c4d-button-group-item>
+</c4d-button-group>
 ```
 
 ## Props
 
-<Props of="cds-button-group" />
+<Props of="c4d-button-group" />
 
-### `<cds-button-group-item>`
+### `<c4d-button-group-item>`
 
-<Props of="cds-button-group-item" />
+<Props of="c4d-button-group-item" />
 
 ## Stable selectors
 
@@ -103,7 +77,7 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector   | Compatibility selector                 | Description |
 | ------------------------- | -------------------------------------- | ----------- |
-| `<cds-button-group>`      | `data-autoid="cds--button-group"`      | Component   |
-| `<cds-button-group-item>` | `data-autoid="cds--button-group-item"` | Component   |
+| `<c4d-button-group>`      | `data-autoid="c4d--button-group"`      | Component   |
+| `<c4d-button-group-item>` | `data-autoid="c4d--button-group-item"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/button-group/__stories__/README.stories.react.mdx b/packages/web-components/src/components/button-group/__stories__/README.stories.react.mdx
index 6e5a55fdd89..9b362a016e5 100644
--- a/packages/web-components/src/components/button-group/__stories__/README.stories.react.mdx
+++ b/packages/web-components/src/components/button-group/__stories__/README.stories.react.mdx
@@ -24,17 +24,14 @@ Here's a quick example to get you started.
 ```javascript
 import C4DButtonGroup from '@carbon/ibmdotcom-web-components/es/components-react/button-group/button-group';
 import C4DButtonGroupItem from '@carbon/ibmdotcom-web-components/es/components-react/button-group/button-group-item';
-import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js';
 
 function App() {
   return (
     <C4DButtonGroup>
-      <C4DButtonGroupItem href="https://www.example.com">
-        <ArrowRight20 slot="icon" />
+      <C4DButtonGroupItem href="https://www.example.com" cta-type="local">
         Button 1
       </C4DButtonGroupItem>
-      <C4DButtonGroupItem href="https://www.example.com">
-        <ArrowRight20 slot="icon" />
+      <C4DButtonGroupItem href="https://www.example.com"  cta-type="local">
         Button 2
       </C4DButtonGroupItem>
     </C4DButtonGroup>
@@ -54,7 +51,7 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector   | Compatibility selector                 | Description |
 | ------------------------- | -------------------------------------- | ----------- |
-| `<cds-button-group>`      | `data-autoid="cds--button-group"`      | Component   |
-| `<cds-button-group-item>` | `data-autoid="cds--button-group-item"` | Component   |
+| `<c4d-button-group>`      | `data-autoid="c4d--button-group"`      | Component   |
+| `<c4d-button-group-item>` | `data-autoid="c4d--button-group-item"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/button-group/__stories__/button-group.stories.react.tsx b/packages/web-components/src/components/button-group/__stories__/button-group.stories.react.tsx
index 5008cf08614..5fb09f52e0b 100644
--- a/packages/web-components/src/components/button-group/__stories__/button-group.stories.react.tsx
+++ b/packages/web-components/src/components/button-group/__stories__/button-group.stories.react.tsx
@@ -9,41 +9,35 @@
 
 import { number, select, text } from '@storybook/addon-knobs';
 import React from 'react';
-import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js';
-import ArrowDown20 from '@carbon/icons-react/es/arrow--down/20.js';
-import Pdf20 from '@carbon/icons-react/es/PDF/20.js';
+
 // Below path will be there when an application installs `@carbon/ibmdotcom-web-components` package.
 // In our dev env, we auto-generate the file and re-map below path to to point to the generated file.
 // @ts-ignore
 import C4DButtonGroup from '@carbon/ibmdotcom-web-components/es/components-react/button-group/button-group';
 import C4DButtonGroupItem from '@carbon/ibmdotcom-web-components/es/components-react/button-group/button-group-item';
+import C4DVideoCTAContainer from '@carbon/ibmdotcom-web-components/es/components-react/cta/video-cta-container';
 import readme from './README.stories.react.mdx';
-import textNullable from '../../../../.storybook/knob-text-nullable';
+import { CTA_TYPE } from '../../cta/defs';
 
-const iconMap = {
-  ArrowRight20: <ArrowRight20 slot="icon" />,
-  ArrowDown20: <ArrowDown20 slot="icon" />,
-  Pdf20: <Pdf20 slot="icon" />,
-};
-
-const iconOptions = {
-  Default: null,
-  'Arrow Right': 'ArrowRight20',
-  'Arrow Down': 'ArrowDown20',
-  PDF: 'Pdf20',
-};
+import {
+  hrefsForType,
+  typeOptions,
+  types,
+} from '../../cta/__stories__/ctaTypeConfig';
 
 export const Default = (args) => {
   const { buttons } = args?.ButtonGroup ?? {};
 
   return (
+    <C4DVideoCTAContainer>
     <C4DButtonGroup>
-      {buttons.map((elem) => (
-        <C4DButtonGroupItem href={elem.href}>
-          {elem.renderIcon} {elem.copy}
+      {buttons.map(elem => (
+        <C4DButtonGroupItem href={hrefsForType[elem.ctaType]} cta-type={elem.ctaType}>
+          {elem.copy}
         </C4DButtonGroupItem>
       ))}
     </C4DButtonGroup>
+    </C4DVideoCTAContainer>
   );
 };
 
@@ -54,31 +48,15 @@ Default.story = {
         buttons: Array.from({
           length: number('Number of buttons', 2, {}),
         }).map((_, i) => ({
-          href: textNullable(`Link ${i + 1}`, `https://example.com`),
           copy: text(`Button ${i + 1}`, `Button ${i + 1}`),
-          renderIcon:
-            iconMap[
-              select(`Icon ${i + 1}`, iconOptions, iconOptions.Default) ?? 0
-            ],
+          ctaType: select(
+            `CTA type (cta-type) ${i + 1}`,
+            typeOptions,
+            types[CTA_TYPE.LOCAL]
+          ),
         })),
       }),
     },
-    propsSet: {
-      default: {
-        ButtonGroup: {
-          buttons: [
-            {
-              href: 'https://example.com',
-              copy: 'Lorem Ipsum',
-            },
-            {
-              href: 'https://example.com',
-              copy: 'Lorem Ipsum',
-            },
-          ],
-        },
-      },
-    },
   },
 };
 
diff --git a/packages/web-components/src/components/button-group/__stories__/button-group.stories.ts b/packages/web-components/src/components/button-group/__stories__/button-group.stories.ts
index d23dc2622a1..bd11324a587 100644
--- a/packages/web-components/src/components/button-group/__stories__/button-group.stories.ts
+++ b/packages/web-components/src/components/button-group/__stories__/button-group.stories.ts
@@ -9,38 +9,33 @@
 
 import { number, select, text } from '@storybook/addon-knobs';
 import { html } from 'lit';
-import ArrowRight20 from '../../../internal/vendor/@carbon/web-components/icons/arrow--right/20.js';
-import ArrowDown20 from '../../../internal/vendor/@carbon/web-components/icons/arrow--down/20.js';
-import Pdf20 from '../../../internal/vendor/@carbon/web-components/icons/PDF/20.js';
 import readme from './README.stories.mdx';
 import '../index';
-import textNullable from '../../../../.storybook/knob-text-nullable';
+import { CTA_TYPE } from '../../cta/defs';
 
-const iconMap = {
-  ArrowRight20: ArrowRight20({ slot: 'icon' }),
-  ArrowDown20: ArrowDown20({ slot: 'icon' }),
-  Pdf20: Pdf20({ slot: 'icon' }),
-};
-
-const iconOptions = {
-  Default: null,
-  'Arrow Right': 'ArrowRight20',
-  'Arrow Down': 'ArrowDown20',
-  PDF: 'Pdf20',
-};
+import {
+  hrefsForType,
+  typeOptions,
+  types,
+} from '../../cta/__stories__/ctaTypeConfig';
 
 export const Default = (args) => {
   const { buttons } = args?.ButtonGroup ?? {};
   return html`
-    <c4d-button-group>
-      ${buttons.map(
-        (elem) => html`
-          <c4d-button-group-item href="${elem.href}"
-            >${elem.copy}${elem.renderIcon}</c4d-button-group-item
-          >
-        `
-      )}
-    </c4d-button-group>
+    <c4d-video-cta-container>
+      <c4d-button-group>
+        ${buttons.map(
+          (elem) => html`
+            <c4d-button-group-item
+              href="${hrefsForType[elem.ctaType]}"
+              cta-type="${elem.ctaType}"
+              download="IBM_Annual_Report_2019.pdf"
+              >${elem.copy}</c4d-button-group-item
+            >
+          `
+        )}
+      </c4d-button-group>
+    </c4d-video-cta-container>
   `;
 };
 
@@ -65,12 +60,12 @@ export default {
         buttons: Array.from({
           length: number('Number of buttons', 2, {}),
         }).map((_, i) => ({
-          href: textNullable(`Link ${i + 1}`, `https://example.com`),
           copy: text(`Button ${i + 1}`, `Button ${i + 1}`),
-          renderIcon:
-            iconMap[
-              select(`Icon ${i + 1}`, iconOptions, iconOptions.Default) ?? 0
-            ],
+          ctaType: select(
+            `CTA type (cta-type) ${i + 1}`,
+            typeOptions,
+            types[CTA_TYPE.LOCAL]
+          ),
         })),
       }),
     },
@@ -79,11 +74,11 @@ export default {
         ButtonGroup: {
           buttons: [
             {
-              href: 'https://example.com',
+              ctaType: CTA_TYPE.LOCAL,
               copy: 'Lorem Ipsum',
             },
             {
-              href: 'https://example.com',
+              ctaType: CTA_TYPE.LOCAL,
               copy: 'Lorem Ipsum',
             },
           ],
diff --git a/packages/web-components/src/components/button-group/button-group-item.ts b/packages/web-components/src/components/button-group/button-group-item.ts
index 447e3b376ee..bd097cb3e0b 100644
--- a/packages/web-components/src/components/button-group/button-group-item.ts
+++ b/packages/web-components/src/components/button-group/button-group-item.ts
@@ -9,7 +9,7 @@
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 import settings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
 import styles from './button-group.scss';
-import C4DButtonExpressive from '../button/button';
+import C4DButton from '../button/button';
 
 const { stablePrefix: c4dPrefix } = settings;
 
@@ -19,7 +19,7 @@ const { stablePrefix: c4dPrefix } = settings;
  * @element c4d-button-group-item
  */
 @customElement(`${c4dPrefix}-button-group-item`)
-class C4DButtonGroupItem extends C4DButtonExpressive {
+class C4DButtonGroupItem extends C4DButton {
   static get stableSelector() {
     return `${c4dPrefix}--button-group-item`;
   }
diff --git a/packages/web-components/src/components/button-group/button-group.scss b/packages/web-components/src/components/button-group/button-group.scss
index 2e30f4f8908..4bf1b5ed615 100644
--- a/packages/web-components/src/components/button-group/button-group.scss
+++ b/packages/web-components/src/components/button-group/button-group.scss
@@ -5,13 +5,4 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@use '@carbon/ibmdotcom-styles/scss/globals/vars' as *;
 @use '@carbon/ibmdotcom-styles/scss/components/button-group';
-@use '../button/button.scss';
-
-:host(#{$c4d-prefix}-button-group-item),
-:host(#{$c4d-prefix}-button-cta) {
-  @extend :host(#{$c4d-prefix}-button);
-
-  outline: none;
-}
diff --git a/packages/web-components/src/components/button/__stories__/README.stories.react.mdx b/packages/web-components/src/components/button/__stories__/README.stories.react.mdx
new file mode 100644
index 00000000000..44d5e086eab
--- /dev/null
+++ b/packages/web-components/src/components/button/__stories__/README.stories.react.mdx
@@ -0,0 +1,67 @@
+import { Preview, Props, Description, Story } from '@storybook/addon-docs/blocks';
+import contributing from '../../../../../../docs/contributing-license.md';
+import { PropTypesRef } from '@carbon/ibmdotcom-web-components/es/components-react/button/button';
+
+# Button
+
+> 💡 Check our
+> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/button)
+> example implementation.
+
+[![Edit @carbon/ibmdotcom-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/button)
+
+## Getting started
+
+Here's a quick example to get you started.
+
+### JS
+
+```javascript
+import DDSButton from '@carbon/ibmdotcom-web-components/es/components-react/button/index.js';
+
+function App() {
+  return (
+    <DDSButton href="https://example.com">Example</DDSButton>
+  );
+}
+```
+
+### CTA features
+
+The `cta-type` attribute allows every type of CTA and icon available in the Carbon for IBM.com library. 
+The default CTA style is `local`, which provides a basic link and arrow icon.
+
+In order to use the desired type, modify the `cta-type` attribute to one of the following:
+
+* local
+* jump
+* external
+* new tab
+* download
+* video
+* pdf
+* blog
+* email
+* schedule
+* chat
+* call
+
+Notes: 
+* When using `video`, you need to pass the video ID as the `href` attribute.
+* The Button component will need to be wrapped within a `DDSVideoCTAContainer` components for videos to play.
+* Custom icons can replace the built-in ones within `DDSCardFooter`, they only need to be assigned to the `icon` slot.
+
+
+## Props
+
+<Props of={PropTypesRef} />
+
+## Stable selectors
+
+See [our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components) to see how Web Components selector and `data-autoid` should be used.
+
+| Web Components selector   | Compatibility selector                 | Description |
+| ------------------------- | -------------------------------------- | ----------- |
+| `<dds-button>`      | `data-autoid="dds--button"`      | Component   |
+
+<Description markdown={contributing} />
diff --git a/packages/web-components/src/components/button/__stories__/button.stories.react.tsx b/packages/web-components/src/components/button/__stories__/button.stories.react.tsx
new file mode 100644
index 00000000000..101e658ba42
--- /dev/null
+++ b/packages/web-components/src/components/button/__stories__/button.stories.react.tsx
@@ -0,0 +1,114 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2020, 2022
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { boolean, select } from '@storybook/addon-knobs';
+import textNullable from '../../../../.storybook/knob-text-nullable';
+import React from 'react';
+
+// Below path will be there when an application installs `@carbon/ibmdotcom-web-components` package.
+// In our dev env, we auto-generate the file and re-map below path to to point to the generated file.
+// @ts-ignore
+import DDSButtonGroup from '@carbon/ibmdotcom-web-components/es/components-react/button-group/button-group';
+import DDSButton from '@carbon/ibmdotcom-web-components/es/components-react/button/button';
+import DDSVideoCTAContainer from '@carbon/ibmdotcom-web-components/es/components-react/cta/video-cta-container';
+import readme from './README.stories.react.mdx';
+import { CTA_TYPE } from '../../cta/defs';
+
+import {
+  hrefsForType,
+  knobNamesForType,
+  typeOptions,
+  types,
+} from '../../cta/__stories__/ctaTypeConfig';
+
+export const Default = args => {
+  const { copy, customVideoTitle, ctaType, disabled, download, href } =
+    args?.Button ?? {};
+
+  let videoCopy;
+
+  if (ctaType === CTA_TYPE.VIDEO) {
+    const button = document.querySelector('dds-button') as any;
+    const duration = button?.videoTitle?.match(/\((.*)\)/)?.pop();
+
+    if (!customVideoTitle) {
+      videoCopy = button?.videoTitle;
+    } else {
+      videoCopy = duration
+        ? `${customVideoTitle} (${duration})`
+        : customVideoTitle;
+    }
+  }
+
+  return (
+    <DDSVideoCTAContainer>
+      <DDSButton disabled={disabled || undefined} href={href} download={download} cta-type={ctaType}>
+        {videoCopy ?? copy}
+      </DDSButton>
+    </DDSVideoCTAContainer>
+  );
+};
+
+Default.story = {
+  parameters: {
+    knobs: {
+      Button: () => {
+        const ctaType = select(
+          'CTA type (cta-type)',
+          typeOptions,
+          types[CTA_TYPE.LOCAL]
+        );
+        const copy =
+          ctaType === CTA_TYPE.VIDEO
+            ? undefined
+            : textNullable('Link text (unnamed slot)', 'Button text');
+        const download = ![CTA_TYPE.DOWNLOAD, CTA_TYPE.PDF].includes(ctaType)
+          ? undefined
+          : textNullable(
+              'Download target (download)',
+              'IBM_Annual_Report_2019.pdf'
+            );
+        const customVideoTitle =
+          ctaType === CTA_TYPE.VIDEO
+            ? textNullable('Custom video title', 'Custom video title')
+            : null;
+        return {
+          ctaType,
+          copy,
+          customVideoTitle,
+          disabled: boolean('Disabled (disabled)', false),
+          download,
+          href: textNullable(
+            knobNamesForType[ctaType ?? CTA_TYPE.REGULAR],
+            hrefsForType[ctaType ?? CTA_TYPE.REGULAR]
+          ),
+        };
+      },
+    },
+  },
+};
+
+export default {
+  title: 'Components/Button',
+  decorators: [
+    story => {
+      return (
+        <div className="cds--grid">
+          <div className="cds--row">
+            <div className="cds--col-sm-16 cds--col-md-6 cds--col-lg-16">{story()}</div>
+          </div>
+        </div>
+      );
+    },
+  ],
+  parameters: {
+    ...readme.parameters,
+    hasStoryPadding: true,
+  },
+};
diff --git a/packages/web-components/src/components/button/__stories__/button.stories.ts b/packages/web-components/src/components/button/__stories__/button.stories.ts
index 26f862ee253..44b97cc2e3f 100644
--- a/packages/web-components/src/components/button/__stories__/button.stories.ts
+++ b/packages/web-components/src/components/button/__stories__/button.stories.ts
@@ -10,7 +10,7 @@
 import { html } from 'lit';
 import { boolean, select } from '@storybook/addon-knobs';
 import textNullable from '../../../../.storybook/knob-text-nullable';
-// import readme from './README.stories.mdx';
+import readme from './README.stories.mdx';
 import { CTA_TYPE } from '../../cta/defs';
 
 import {
@@ -56,7 +56,7 @@ export default {
   title: 'Components/Button',
   decorators: [(story) => html` <div class="cds--grid">${story()}</div> `],
   parameters: {
-    // ...readme.parameters,
+    ...readme.parameters,
     hasStoryPadding: true,
     knobs: {
       Button: () => {
@@ -68,7 +68,7 @@ export default {
         const copy =
           ctaType === CTA_TYPE.VIDEO
             ? undefined
-            : textNullable('Link text (unnamed slot)', 'Link text');
+            : textNullable('Link text (unnamed slot)', 'Button text');
         const download = ![CTA_TYPE.DOWNLOAD, CTA_TYPE.PDF].includes(ctaType)
           ? undefined
           : textNullable(
@@ -95,7 +95,7 @@ export default {
     propsSet: {
       default: {
         Button: {
-          copy: 'Link text',
+          copy: 'Button text',
           disabled: false,
           href: 'https://github.com/carbon-design-system/carbon-web-components',
         },
diff --git a/packages/web-components/src/components/button/button.scss b/packages/web-components/src/components/button/button.scss
index d6836228f0e..213a82edf53 100644
--- a/packages/web-components/src/components/button/button.scss
+++ b/packages/web-components/src/components/button/button.scss
@@ -5,34 +5,4 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@use '@carbon/styles/scss/config' as *;
-@use '@carbon/styles/scss/spacing' as *;
-@use '@carbon/styles/scss/theme' as *;
-@use '@carbon/ibmdotcom-styles/scss/globals/vars' as *;
-@use '../../../../carbon-web-components/src/components/button/button';
-//
-:host(#{$c4d-prefix}-button) {
-  @extend :host(#{$prefix}-button);
-
-  svg {
-    @extend .#{$prefix}--btn__icon;
-  }
-
-  .#{$prefix}--btn--hidden {
-    display: none;
-    visibility: hidden;
-
-    @media print {
-      display: inline-block;
-      visibility: visible;
-      font-weight: 200;
-      color: $text-primary;
-
-      span {
-        font-weight: 600;
-        margin-left: calc(-1 * #{$spacing-02});
-        margin-right: $spacing-02;
-      }
-    }
-  }
-}
+@use '@carbon/ibmdotcom-styles/scss/components/button/index' as *;
diff --git a/packages/web-components/src/components/button/button.ts b/packages/web-components/src/components/button/button.ts
index 21e8286d671..1b185abd353 100644
--- a/packages/web-components/src/components/button/button.ts
+++ b/packages/web-components/src/components/button/button.ts
@@ -9,7 +9,6 @@
 
 import { LitElement, html } from 'lit';
 import { property, query } from 'lit/decorators.js';
-import { BUTTON_KIND, BUTTON_SIZE } from './defs';
 import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import styles from './button.scss';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
@@ -17,16 +16,14 @@ import { carbonElement as customElement } from '../../internal/vendor/@carbon/we
 import CTAMixin from '../../component-mixins/cta/cta';
 import CDSButton from '../../internal/vendor/@carbon/web-components/components/button/button.js';
 
-export { BUTTON_KIND, BUTTON_SIZE };
-
 import { ariaLabels, icons } from '../../component-mixins/cta/cta';
 const { prefix, stablePrefix: c4dPrefix } = settings;
 
 /**
- * Expressive button.
+ * Button.
  *
- * @element c4d-button-expressive
- * @csspart button The button.
+ * @element c4d-button
+ * @csspart button.
  */
 @customElement(`${c4dPrefix}-button`)
 // @ts-ignore
@@ -40,6 +37,12 @@ class C4DButton extends CTAMixin(StableSelectorMixin(CDSButton)) {
   @property()
   span;
 
+  /**
+   * `true` if expressive theme enabled.
+   */
+  @property({ type: Boolean, reflect: true })
+  isExpressive = true;
+
   _handleDisabledClick(event: Event) {
     super._handleClick(event as any);
   }
diff --git a/packages/web-components/src/components/card/__stories__/card.stories.ts b/packages/web-components/src/components/card/__stories__/card.stories.ts
index b08583a5ddc..eabccc6902e 100644
--- a/packages/web-components/src/components/card/__stories__/card.stories.ts
+++ b/packages/web-components/src/components/card/__stories__/card.stories.ts
@@ -71,6 +71,11 @@ export const Default = (args) => {
     videoFooterCopy = duration;
   }
 
+  const copyComponent = document.querySelector('c4d-card')?.querySelector('p');
+  if (copyComponent) {
+    copyComponent!.innerHTML = copy;
+  }
+
   return html`
     <c4d-video-cta-container>
       <c4d-card
@@ -89,9 +94,11 @@ export const Default = (args) => {
           : ``}
         <c4d-card-eyebrow>${eyebrow}</c4d-card-eyebrow>
         <c4d-card-heading>${videoCopy ?? heading}</c4d-card-heading>
-        ${copy ? html` <p>${copy}</p> ` : ``}
+        ${copy ? html`<p></p>` : ``}
         ${tagGroup ? html` ${tagGroupContent} ` : ``}
-        <c4d-card-footer> ${videoFooterCopy ?? ''} </c4d-card-footer>
+        ${ctaType === CTA_TYPE.VIDEO
+          ? html` <c4d-card-footer> ${videoFooterCopy} </c4d-card-footer> `
+          : html`<c4d-card-footer></c4d-card-footer>`}
       </c4d-card>
     </c4d-video-cta-container>
   `;
@@ -174,13 +181,18 @@ Default.story = {
 export const Pictogram = (args) => {
   const { href, heading, copy, tagGroup, pictogramPlacement, cardStyles } =
     args?.PictogramCard ?? {};
+
+  const copyComponent = document.querySelector('c4d-card')?.querySelector('p');
+  if (copyComponent) {
+    copyComponent!.innerHTML = copy;
+  }
   return html`
     <c4d-card
       pictogram-placement="${pictogramPlacement}"
       href=${ifDefined(href || undefined)}
       color-scheme=${cardStyles === 'Inverse card' ? 'inverse' : ''}>
       <c4d-card-heading>${heading}</c4d-card-heading>
-      ${copy ? html` <p>${copy}</p> ` : ``}
+      ${copy ? html` <p></p> ` : ``}
       ${tagGroup ? html` ${tagGroupContent} ` : ``}
       <svg
         slot="pictogram"
@@ -267,6 +279,12 @@ export const Static = (args) => {
     cta,
     ctaCopy,
   } = args?.Card ?? {};
+
+  const copyComponent = document.querySelector('c4d-card')?.querySelector('p');
+  if (copyComponent) {
+    copyComponent!.innerHTML = copy;
+  }
+
   return html`
     <c4d-card>
       ${image
@@ -279,7 +297,7 @@ export const Static = (args) => {
         : ``}
       ${eyebrow ? html` <c4d-card-eyebrow>${eyebrow}</c4d-card-eyebrow> ` : ``}
       <c4d-card-heading>${heading}</c4d-card-heading>
-      ${copy ? html` <p>${copy}</p> ` : ``}
+      ${copy ? html` <p></p> ` : ``}
       ${tagGroup ? html` ${tagGroupContent} ` : ``}
       ${cta
         ? html`
@@ -345,6 +363,12 @@ Static.story = {
 export const Logo = (args) => {
   const { alt, defaultSrc, eyebrow, heading, href, copy, tagGroup } =
     args?.Card ?? {};
+
+  const copyComponent = document.querySelector('c4d-card')?.querySelector('p');
+  if (copyComponent) {
+    copyComponent!.innerHTML = copy;
+  }
+
   return html`
     <c4d-card logo href=${ifDefined(href || undefined)}>
       <c4d-image-logo
@@ -353,7 +377,7 @@ export const Logo = (args) => {
         default-src="${ifDefined(defaultSrc)}"></c4d-image-logo>
       ${eyebrow ? html` <c4d-card-eyebrow>${eyebrow}</c4d-card-eyebrow> ` : ``}
       ${heading ? html` <c4d-card-heading>${heading}</c4d-card-heading> ` : ``}
-      ${copy ? html` <p>${copy}</p> ` : ``}
+      ${copy ? html` <p></p> ` : ``}
       ${tagGroup ? html` ${tagGroupContent} ` : ``}
 
       <c4d-card-footer></c4d-card-footer>
diff --git a/packages/web-components/src/components/pricing-table/pricing-table-header-cell-cta.ts b/packages/web-components/src/components/pricing-table/pricing-table-header-cell-cta.ts
index dc2ff7a38cd..2e76df60d5b 100644
--- a/packages/web-components/src/components/pricing-table/pricing-table-header-cell-cta.ts
+++ b/packages/web-components/src/components/pricing-table/pricing-table-header-cell-cta.ts
@@ -9,8 +9,8 @@
 
 import { property } from 'lit/decorators.js';
 import settings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
-import C4DButtonCTA from '../cta/button-cta';
-import { BUTTON_KIND } from '../button/button';
+import C4DButton from '../cta/button-cta';
+import { BUTTON_KIND } from '../../internal/vendor/@carbon/web-components/components/button/button';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
 import styles from './pricing-table.scss';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
@@ -18,7 +18,7 @@ import { carbonElement as customElement } from '../../internal/vendor/@carbon/we
 const { stablePrefix: c4dPrefix } = settings;
 
 @customElement(`${c4dPrefix}-pricing-table-header-cell-cta`)
-class C4DPricingTableHeaderCellCta extends StableSelectorMixin(C4DButtonCTA) {
+class C4DPricingTableHeaderCellCta extends StableSelectorMixin(C4DButton) {
   @property({ reflect: true })
   slot = 'cta';
 
diff --git a/packages/web-components/tests/snapshots/c4d-button-group.md b/packages/web-components/tests/snapshots/c4d-button-group.md
index 42114305863..c610e317e9a 100644
--- a/packages/web-components/tests/snapshots/c4d-button-group.md
+++ b/packages/web-components/tests/snapshots/c4d-button-group.md
@@ -12,7 +12,7 @@
 
 ```
 <a
-  class="cds--btn cds--btn--lg cds--btn--primary cds--layout--size-lg"
+  class="cds--btn cds--btn--expressive cds--btn--lg cds--btn--primary cds--layout--size-lg"
   href="https://example.com"
   id="button"
   part="button"
diff --git a/packages/web-components/tests/snapshots/c4d-content-block-card-static.md b/packages/web-components/tests/snapshots/c4d-content-block-card-static.md
index 12eac41e68d..585950b30c2 100644
--- a/packages/web-components/tests/snapshots/c4d-content-block-card-static.md
+++ b/packages/web-components/tests/snapshots/c4d-content-block-card-static.md
@@ -37,6 +37,7 @@
     <c4d-button-group-item
       cta-type=""
       data-autoid="c4d--button-group-item"
+      isexpressive=""
       kind="primary"
       role="listitem"
       size="lg"
@@ -49,6 +50,7 @@
     <c4d-button-group-item
       cta-type=""
       data-autoid="c4d--button-group-item"
+      isexpressive=""
       kind="tertiary"
       role="listitem"
       size="lg"
@@ -134,6 +136,7 @@
     <c4d-button-group-item
       cta-type=""
       data-autoid="c4d--button-group-item"
+      isexpressive=""
       kind="primary"
       role="listitem"
       size="lg"
@@ -146,6 +149,7 @@
     <c4d-button-group-item
       cta-type=""
       data-autoid="c4d--button-group-item"
+      isexpressive=""
       kind="tertiary"
       role="listitem"
       size="lg"
diff --git a/packages/web-components/tests/snapshots/dds-content-block-card-static.md b/packages/web-components/tests/snapshots/dds-content-block-card-static.md
new file mode 100644
index 00000000000..74d12303ec6
--- /dev/null
+++ b/packages/web-components/tests/snapshots/dds-content-block-card-static.md
@@ -0,0 +1,166 @@
+# `dds-content-block-card-static`
+
+## `Misc attributes`
+
+####   `should render with minimum attributes`
+
+```
+<dds-content-block-card-static>
+  <dds-card-group-item
+    color-scheme=""
+    data-autoid="dds--card-group-item"
+    pictogram-placement=""
+    size="md"
+  >
+  </dds-card-group-item>
+  <dds-card-group
+    data-autoid="dds--card-group"
+    grid-mode="collapsed"
+  >
+  </dds-card-group>
+  <dds-content-item data-autoid="dds--content-item">
+    <dds-content-item-heading
+      aria-level="4"
+      data-autoid="dds--content-item__heading"
+      role="heading"
+      slot="heading"
+    >
+    </dds-content-item-heading>
+    <dds-content-item-copy data-autoid="dds--content-item__copy">
+    </dds-content-item-copy>
+  </dds-content-item>
+  <dds-button-group
+    data-autoid="dds--button-group"
+    role="list"
+    style="--dds--button-group--item-count: 2;"
+  >
+    <dds-button-group-item
+      cta-type=""
+      data-autoid="dds--button-group-item"
+      isexpressive=""
+      kind="primary"
+      role="listitem"
+      size="lg"
+      tooltip-alignment=""
+      tooltip-position="top"
+      type="button"
+    >
+      Button 1
+    </dds-button-group-item>
+    <dds-button-group-item
+      cta-type=""
+      data-autoid="dds--button-group-item"
+      isexpressive=""
+      kind="tertiary"
+      role="listitem"
+      size="lg"
+      tooltip-alignment=""
+      tooltip-position="top"
+      type="button"
+    >
+      Buuton 2
+    </dds-button-group-item>
+  </dds-button-group>
+</dds-content-block-card-static>
+
+```
+
+####   `should render with various attributes`
+
+```
+<dds-content-block-card-static>
+  <dds-card-group-item
+    color-scheme=""
+    data-autoid="dds--card-group-item"
+    pictogram-placement=""
+    size="md"
+  >
+    heading-foo
+  </dds-card-group-item>
+  <dds-card-group
+    data-autoid="dds--card-group"
+    grid-mode="collapsed"
+    style="--dds--card-group--cards-in-row: 3;"
+  >
+    <dds-card-group-item
+      color-scheme=""
+      data-autoid="dds--card-group-item"
+      href="https://example.com"
+      pictogram-placement=""
+      size="md"
+    >
+      <dds-card-heading
+        aria-level="3"
+        data-autoid="dds--card-heading"
+        role="heading"
+        slot="heading"
+      >
+        Nunc convallis lobortis
+      </dds-card-heading>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean
+                et ultricies est. Mauris iaculis eget dolor nec hendrerit.
+                Phasellus at elit sollicitudin, sodales nulla quis, consequat
+                libero.
+      </p>
+      <dds-card-cta-footer
+        color-scheme=""
+        cta-type=""
+        data-autoid="dds--card-cta-footer"
+        icon-placement="right"
+        slot="footer"
+      >
+      </dds-card-cta-footer>
+    </dds-card-group-item>
+  </dds-card-group>
+  <dds-content-item data-autoid="dds--content-item">
+    <dds-content-item-heading
+      aria-level="4"
+      data-autoid="dds--content-item__heading"
+      role="heading"
+      slot="heading"
+    >
+      Lorem ipsum
+    </dds-content-item-heading>
+    <dds-content-item-copy data-autoid="dds--content-item__copy">
+      <dds-content-item-paragraph data-autoid="dds--content-item-paragraph">
+        ipsum dolor sit amet
+      </dds-content-item-paragraph>
+    </dds-content-item-copy>
+  </dds-content-item>
+  <dds-button-group
+    data-autoid="dds--button-group"
+    role="list"
+    style="--dds--button-group--item-count: 2;"
+  >
+    <dds-button-group-item
+      cta-type=""
+      data-autoid="dds--button-group-item"
+      isexpressive=""
+      kind="primary"
+      role="listitem"
+      size="lg"
+      tooltip-alignment=""
+      tooltip-position="top"
+      type="button"
+    >
+      Button 1
+    </dds-button-group-item>
+    <dds-button-group-item
+      cta-type=""
+      data-autoid="dds--button-group-item"
+      isexpressive=""
+      kind="tertiary"
+      role="listitem"
+      size="lg"
+      tooltip-alignment=""
+      tooltip-position="top"
+      type="button"
+    >
+      Buuton 2
+    </dds-button-group-item>
+  </dds-button-group>
+</dds-content-block-card-static>
+
+```
+