From c228064a06d993c6026d7ff296a8896ffd62f484 Mon Sep 17 00:00:00 2001
From: Sangeetha Babu <58620134+sangeethababu9223@users.noreply.github.com>
Date: Tue, 12 Dec 2023 10:47:33 +0530
Subject: [PATCH 01/26] feat(ibmdotcom styles): remove react classes card
 compoenent

---
 .../styles/scss/components/card/_card.scss    | 1307 ++++++++---------
 1 file changed, 633 insertions(+), 674 deletions(-)

diff --git a/packages/styles/scss/components/card/_card.scss b/packages/styles/scss/components/card/_card.scss
index 2ba0ee5aaa7..3b6e5c36ec0 100644
--- a/packages/styles/scss/components/card/_card.scss
+++ b/packages/styles/scss/components/card/_card.scss
@@ -5,677 +5,636 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-@use '@carbon/styles/scss/breakpoint' as *;
-@use '@carbon/styles/scss/colors' as *;
-@use '@carbon/styles/scss/config' as *;
-@use '@carbon/styles/scss/motion' as *;
-@use '@carbon/styles/scss/spacing' as *;
-@use '@carbon/styles/scss/type' as *;
-@use '@carbon/styles/scss/components/tag/index' as *;
-@use '@carbon/styles/scss/components/tile/index' as *;
-@use '@carbon/styles/scss/theme' as *;
-@use '../../globals/vars' as *;
-@use '../../globals/utils/content-width' as *;
-@use '../../globals/utils/ratio-base' as *;
-@use '../lightbox-media-viewer/lightbox-media-viewer';
-@use '../link-with-icon/link-with-icon';
-
-@mixin card {
-  .#{$prefix}--card,
-  :host(#{$c4d-prefix}-card),
-  :host(#{$c4d-prefix}-region-item) .#{$prefix}--link,
-  :host(#{$c4d-prefix}-card-cta),
-  :host(#{$c4d-prefix}-card-in-card),
-  :host(#{$c4d-prefix}-card-group-item),
-  :host(#{$c4d-prefix}-card-group-item) .#{$prefix}--card,
-  :host(#{$c4d-prefix}-content-group-cards-item),
-  :host(#{$c4d-prefix}-content-group-cards-item) .#{$prefix}--card {
-    @include tile($enable-experimental-tile-contrast: true);
-
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    height: 100%;
-    background-color: $layer-01;
-    text-decoration: none;
-    padding: 0;
-    transition: $duration-moderate-01 motion(standard, productive);
-
-    &:focus-within {
-      .#{$prefix}--tile--clickable {
-        outline: $spacing-01 solid $focus;
-        outline-offset: -#{$spacing-01};
-        position: relative;
-        z-index: 2;
-      }
-
-      ::slotted(#{$c4d-prefix}-image),
-      ::slotted(#{$c4d-prefix}-card-cta-image),
-      .#{$prefix}--card__img,
-      .#{$prefix}--image {
-        z-index: -1;
-      }
-    }
-
-    &:focus,
-    &:visited,
-    &:active {
-      position: relative;
-      z-index: 2;
-      text-decoration: none;
-
-      ::slotted(#{$c4d-prefix}-image),
-      .#{$prefix}--image {
-        z-index: -1;
-      }
-    }
-
-    ::slotted(#{$c4d-prefix}-image),
-    ::slotted(#{$c4d-prefix}-card-cta-image) {
-      position: relative;
-
-      &::before {
-        content: '';
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        background-color: $border-inverse;
-        opacity: 0;
-        transition: $duration-moderate-01 motion(standard, productive);
-      }
-    }
-
-    &:not([disabled]) .#{$prefix}--card.#{$prefix}--tile {
-      padding: 0;
-      transition: $duration-moderate-01 motion(standard, productive);
-
-      &:hover {
-        #{$c4d-prefix}-image,
-        ::slotted(#{$c4d-prefix}-image),
-        ::slotted(#{$c4d-prefix}-card-cta-image) {
-          &::after {
-            content: '';
-            position: absolute;
-            top: 0;
-            width: 100%;
-            height: 100%;
-            background: $overlay;
-            opacity: 16%;
-          }
-        }
-      }
-    }
-
-    .#{$prefix}--card__wrapper {
-      display: flex;
-      flex: 1;
-      min-height: carbon--mini-units(20);
-      justify-content: space-between;
-      transition: $duration-moderate-01 motion(standard, productive);
-
-      @include ratio-base(2, 1, false);
-    }
-
-    .#{$prefix}--card__content {
-      display: flex;
-      flex-direction: column;
-      padding: $spacing-05;
-      width: 100%;
-    }
-
-    .#{$prefix}--card__heading {
-      @include type-style('fluid-heading-03', true);
-
-      margin-bottom: $spacing-10;
-    }
-
-    .#{$prefix}--card__heading,
-    .#{$prefix}--card__copy {
-      @include content-width;
-
-      color: $text-primary;
-    }
-
-    .#{$prefix}--card__copy:not([hidden]) {
-      @include type-style('body-02');
-
-      margin-bottom: $spacing-07;
-    }
-
-    .#{$prefix}--card__img {
-      transition: $duration-moderate-01 motion(standard, productive);
-    }
-  }
-
-  // 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] .#{$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] {
-      &[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;
-    }
-
-    ::slotted(div) {
-      /* stylelint-disable declaration-no-important */
-      // need the !important to prevent CSS reset styles from overwritting margin for tags
-      margin-left: -$spacing-02 !important;
-    }
-  }
-
-  :host(#{$c4d-prefix}-card[aspect-ratio='1:1']) .#{$prefix}--card__wrapper {
-    @include ratio-base(1, 1, false);
-  }
-
-  :host(#{$c4d-prefix}-card[aspect-ratio='3:2']) .#{$prefix}--card__wrapper {
-    @include ratio-base(3, 2, false);
-  }
-
-  :host(#{$c4d-prefix}-card[aspect-ratio='4:3']) .#{$prefix}--card__wrapper {
-    @include ratio-base(4, 3, false);
-  }
-
-  :host(#{$c4d-prefix}-card[aspect-ratio='16:9']) .#{$prefix}--card__wrapper {
-    @include ratio-base(16, 9, false);
-  }
-  .#{$prefix}--card.#{$prefix}--card--light {
-    background-color: $layer-02;
-  }
-
-  .#{$prefix}--card--border {
-    border: 1px solid $layer-accent-01;
-  }
-
-  // FIXME: CardLink is being used as Card in React, need to separate this
-  .#{$prefix}--card__CTA.#{$prefix}--card__CardCTA .#{$prefix}--card__heading {
-    @include type-style('fluid-heading-03', true);
-  }
-
-  // static card
-
-  :host(#{$c4d-prefix}-card),
-  :host(#{$c4d-prefix}-card-group-item) {
-    &:not([href]) {
-      .#{$prefix}--card .#{$prefix}--card__copy {
-        margin-bottom: $spacing-01;
-      }
-
-      .#{$prefix}--card.#{$prefix}--tile ::slotted(#{$c4d-prefix}-image) {
-        &::after {
-          display: none;
-        }
-      }
-
-      &:focus-within ::slotted(#{$c4d-prefix}-image) {
-        z-index: 0;
-      }
-
-      ::slotted(#{$c4d-prefix}-card-heading) {
-        padding-bottom: $spacing-10;
-        margin-bottom: auto;
-      }
-
-      ::slotted(#{$c4d-prefix}-card-footer) {
-        margin-top: $spacing-07;
-        display: inline-flex;
-        &::after {
-          position: relative;
-        }
-      }
-    }
-
-    &[color-scheme='light'] {
-      &,
-      &:hover {
-        .#{$prefix}--card__wrapper {
-          background-color: $layer-02;
-          transition: $duration-moderate-01 motion(standard, productive);
-        }
-      }
-
-      &[href] {
-        :hover {
-          .#{$prefix}--card__wrapper {
-            background-color: $background-hover;
-          }
-        }
-        &:active,
-        a:active {
-          outline: none;
-        }
-      }
-    }
-
-    // Logo card
-    &[logo] {
-      .#{$prefix}--card {
-        background-color: $layer-02;
-      }
-
-      .#{$prefix}--card__copy {
-        margin-bottom: $spacing-05;
-      }
-
-      &:hover {
-        border-color: $toggle-off;
-
-        .#{$prefix}--card__wrapper {
-          background-color: $layer-02;
-        }
-      }
-
-      &:active {
-        border-color: $border-inverse;
-      }
-
-      ::slotted(#{$c4d-prefix}-card-footer) {
-        height: 0;
-      }
-    }
-
-    &[href][logo] {
-      &:hover {
-        .#{$prefix}--card__wrapper {
-          background-color: $layer-02;
-        }
-      }
-    }
-  }
-
-  :host(#{$c4d-prefix}-card[link]) {
-    ::slotted(#{$c4d-prefix}-card-heading) {
-      @include type-style('heading-02');
-
-      margin-bottom: 0;
-    }
-
-    .#{$prefix}--card .#{$prefix}--card__copy {
-      margin-top: 0;
-    }
-  }
-
-  :host(#{$c4d-prefix}-card-cta),
-  :host(#{$c4d-prefix}-card-link-cta),
-  :host(#{$c4d-prefix}-card-link) {
-    outline: none;
-  }
-
-  :host(#{$c4d-prefix}-card-eyebrow),
-  .#{$prefix}--card__eyebrow {
-    @include content-width;
-    @include type-style('label-02');
-
-    margin-bottom: $spacing-03;
-    color: $text-secondary;
-  }
-
-  :host(#{$c4d-prefix}-card-footer),
-  :host(#{$c4d-prefix}-card-cta-footer),
-  :host(#{$c4d-prefix}-card-in-card-footer),
-  :host(#{$c4d-prefix}-feature-card-footer),
-  :host(#{$c4d-prefix}-feature-cta-footer) {
-    margin-top: auto;
-    display: flex;
-    align-items: flex-end;
-
-    &:focus-visible {
-      outline: none;
-    }
-  }
-
-  :host(#{$c4d-prefix}-card-footer) {
-    .#{$prefix}--link-with-icon.#{$prefix}--link-with-icon--inline-icon {
-      display: flex;
-
-      svg,
-      ::slotted(svg[slot='icon']) {
-        display: block;
-      }
-    }
-  }
-
-  .#{$prefix}--card .#{$prefix}--card__footer,
-  :host(#{$c4d-prefix}-card-footer) a,
-  :host(#{$c4d-prefix}-card-cta-footer) a,
-  :host(#{$c4d-prefix}-card-in-card-footer) a,
-  :host(#{$c4d-prefix}-feature-card-footer) a,
-  :host(#{$c4d-prefix}-feature-cta-footer) a {
-    /* Moves the footer down to the bottom in the card */
-    margin-top: auto;
-    text-decoration: none;
-
-    &:focus {
-      outline: none;
-    }
-
-    &:hover {
-      text-decoration: none;
-    }
-
-    span {
-      flex: none;
-    }
-
-    &::after {
-      content: '';
-      position: absolute;
-      z-index: 1;
-      top: 0;
-      left: 0;
-      bottom: 0;
-      right: 0;
-    }
-
-    .#{$prefix}--card__cta__copy {
-      max-width: calc(100% - 20px - #{$spacing-03});
-      margin-right: $spacing-03;
-      @include type-style('body-02');
-    }
-
-    .#{$prefix}--card__footer__copy {
-      max-width: calc(100% - 20px);
-      margin-bottom: -$spacing-01;
-    }
-
-    svg,
-    ::slotted(svg[slot='icon']) {
-      display: block;
-      min-width: 20px;
-      margin-left: 0;
-    }
-  }
-
-  :host(#{$c4d-prefix}-card-footer),
-  :host(#{$c4d-prefix}-card-cta-footer) {
-    .#{$prefix}--link-with-icon.#{$prefix}--link-with-icon--inline-icon {
-      display: flex;
-      width: 100%;
-      justify-content: flex-end;
-      align-items: center;
-
-      &:active {
-        color: $link-primary-hover;
-      }
-    }
-
-    &[color-scheme='inverse']
-      .#{$prefix}--link-with-icon.#{$prefix}--link-with-icon--inline-icon:not(
-        .#{$prefix}--link--disabled
-      ) {
-      color: $link-inverse;
-    }
-  }
-
-  // static card footer
-  :host(#{$c4d-prefix}-card-footer):not([parent-href]) {
-    .#{$prefix}--card__footer {
-      width: auto;
-      justify-content: flex-start;
-
-      &:hover {
-        color: $link-primary-hover;
-      }
-
-      &:active,
-      &:hover {
-        text-decoration: none;
-      }
-
-      &::after {
-        content: none;
-      }
-      &:focus {
-        outline: $spacing-01 solid $focus;
-      }
-    }
-
-    .#{$prefix}--card__cta__copy {
-      margin-right: $spacing-03;
-    }
-  }
-
-  :host(#{$c4d-prefix}-card)[color-scheme='inverse']:not([disabled]),
-  :host(#{$c4d-prefix}-card-group-item)[color-scheme='inverse']:not([disabled])
-    .#{$prefix}--card {
-    .#{$prefix}--tile {
-      background-color: $background-inverse;
-      border-color: $background-inverse;
-
-      &:hover {
-        #{$c4d-prefix}-image,
-        ::slotted(#{$c4d-prefix}-image),
-        ::slotted(#{$c4d-prefix}-card-cta-image) {
-          filter: brightness(108%);
-
-          &::after {
-            display: none;
-          }
-        }
-      }
-    }
-
-    .#{$prefix}--card__wrapper:hover {
-      background-color: $background-inverse-hover;
-    }
-
-    .#{$prefix}--card__heading,
-    .#{$prefix}--card__copy {
-      color: $icon-inverse;
-    }
-
-    .#{$prefix}--card__eyebrow {
-      color: $text-placeholder;
-    }
-
-    &:focus-within {
-      &::after {
-        content: '';
-        position: absolute;
-        z-index: 2;
-        top: 0;
-        left: 0;
-        bottom: 0;
-        right: 0;
-        border: $spacing-01 solid $focus;
-        outline: 1px solid $focus-inset;
-        outline-offset: -3px;
-        pointer-events: none;
-      }
-    }
-  }
-
-  :host(#{$c4d-prefix}-card-heading),
-  :host(#{$c4d-prefix}-card-link-heading) {
-    @include content-width;
-
-    color: $text-primary;
-    margin-bottom: $spacing-10;
-  }
-
-  :host(#{$c4d-prefix}-card-heading) {
-    @include type-style('heading-03', true);
-  }
-
-  :host(#{$c4d-prefix}-card-link-heading) {
-    @include type-style('heading-02', true);
-
-    margin-bottom: 0;
-  }
-
-  :host(#{$c4d-prefix}-card)[color-scheme='inverse'],
-  :host(#{$c4d-prefix}-card-group-item)[color-scheme='inverse'],
-  :host(#{$c4d-prefix}-feature-section-card-link)[color-scheme='inverse'],
-  .#{$prefix}--card-group__card {
-    ::slotted(#{$c4d-prefix}-card-eyebrow),
-    ::slotted(#{$c4d-prefix}-card-heading),
-    ::slotted(#{$c4d-prefix}-card-link-heading) {
-      color: $text-inverse;
-    }
-
-    &:hover {
-      ::slotted(#{$c4d-prefix}-image),
-      ::slotted(#{$c4d-prefix}-card-cta-image) {
-        filter: brightness(108%);
-      }
-    }
-  }
-
-  @media print {
-    :host(#{$c4d-prefix}-card),
-    :host(#{$c4d-prefix}-card-group-item),
-    :host(#{$c4d-prefix}-card-cta),
-    :host(#{$c4d-prefix}-card-in-card),
-    :host(#{$c4d-prefix}-content-group-cards-item) {
-      border: 1px solid $layer-accent-01;
-
-      .#{$prefix}--card {
-        background-color: $layer-02;
-        border: none;
-      }
-
-      ::slotted(#{$c4d-prefix}-image),
-      ::slotted(#{$c4d-prefix}-card-cta-image),
-      .#{$prefix}--image {
-        display: none;
-      }
-    }
-
-    .#{$prefix}--card {
-      background-color: $layer-02;
-      border: 1px solid $layer-accent-01;
-
-      .#{$prefix}--card__img,
-      .#{$prefix}--card__image_img,
-      .#{$prefix}--image,
-      .#{$prefix}--card__video-thumbnail {
-        display: none;
-      }
-    }
-  }
-
-  :host(#{$c4d-prefix}-card[disabled]),
-  :host(#{$c4d-prefix}-region-item[disabled]) {
-    .#{$prefix}--card {
-      cursor: not-allowed;
-    }
-
-    .#{$prefix}--card__copy,
-    ::slotted(#{$c4d-prefix}-card-eyebrow),
-    ::slotted(#{$c4d-prefix}-card-heading) {
-      color: $text-disabled;
-    }
-  }
-
-  :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 {
-      justify-content: space-between;
-    }
-  }
-
-  :host(#{$c4d-prefix}-card-footer[href])::after {
-    position: relative;
-  }
-}
+ @use '@carbon/styles/scss/breakpoint' as *;
+ @use '@carbon/styles/scss/colors' as *;
+ @use '@carbon/styles/scss/config' as *;
+ @use '@carbon/styles/scss/motion' as *;
+ @use '@carbon/styles/scss/spacing' as *;
+ @use '@carbon/styles/scss/type' as *;
+ @use '@carbon/styles/scss/components/tag/index' as *;
+ @use '@carbon/styles/scss/components/tile/index' as *;
+ @use '@carbon/styles/scss/theme' as *;
+ @use '../../globals/vars' as *;
+ @use '../../globals/utils/content-width' as *;
+ @use '../../globals/utils/ratio-base' as *;
+ @use '../lightbox-media-viewer/lightbox-media-viewer';
+ @use '../link-with-icon/link-with-icon';
+ 
+ @mixin card {
+   .#{$prefix}--card,
+   :host(#{$c4d-prefix}-card),
+   :host(#{$c4d-prefix}-region-item) .#{$prefix}--link,
+   :host(#{$c4d-prefix}-card-cta),
+   :host(#{$c4d-prefix}-card-in-card),
+   :host(#{$c4d-prefix}-card-group-item),
+   :host(#{$c4d-prefix}-card-group-item) .#{$prefix}--card,
+   :host(#{$c4d-prefix}-content-group-cards-item),
+   :host(#{$c4d-prefix}-content-group-cards-item) .#{$prefix}--card {
+     @include tile($enable-experimental-tile-contrast: true);
+ 
+     position: relative;
+     display: flex;
+     flex-direction: column;
+     width: 100%;
+     height: 100%;
+     background-color: $layer-01;
+     text-decoration: none;
+     padding: 0;
+     transition: $duration-moderate-01 motion(standard, productive);
+ 
+     &:focus-within {
+       .#{$prefix}--tile--clickable {
+         outline: $spacing-01 solid $focus;
+         outline-offset: -#{$spacing-01};
+         position: relative;
+         z-index: 2;
+       }
+ 
+       ::slotted(#{$c4d-prefix}-image),
+       ::slotted(#{$c4d-prefix}-card-cta-image) {
+         z-index: -1;
+       }
+     }
+ 
+     &:focus,
+     &:visited,
+     &:active {
+       position: relative;
+       z-index: 2;
+       text-decoration: none;
+ 
+       ::slotted(#{$c4d-prefix}-image) {
+         z-index: -1;
+       }
+     }
+ 
+     ::slotted(#{$c4d-prefix}-image),
+     ::slotted(#{$c4d-prefix}-card-cta-image) {
+       position: relative;
+ 
+       &::before {
+         content: '';
+         position: absolute;
+         top: 0;
+         right: 0;
+         bottom: 0;
+         left: 0;
+         background-color: $border-inverse;
+         opacity: 0;
+         transition: $duration-moderate-01 motion(standard, productive);
+       }
+     }
+ 
+     &:not([disabled]) .#{$prefix}--card.#{$prefix}--tile {
+       padding: 0;
+       transition: $duration-moderate-01 motion(standard, productive);
+ 
+       &:hover {
+         #{$c4d-prefix}-image,
+         ::slotted(#{$c4d-prefix}-image),
+         ::slotted(#{$c4d-prefix}-card-cta-image) {
+           &::after {
+             content: '';
+             position: absolute;
+             top: 0;
+             width: 100%;
+             height: 100%;
+             background: $overlay;
+             opacity: 16%;
+           }
+         }
+       }
+     }
+ 
+     .#{$prefix}--card__wrapper {
+       display: flex;
+       flex: 1;
+       min-height: carbon--mini-units(20);
+       justify-content: space-between;
+       transition: $duration-moderate-01 motion(standard, productive);
+ 
+       @include ratio-base(2, 1, false);
+     }
+ 
+     .#{$prefix}--card__content {
+       display: flex;
+       flex-direction: column;
+       padding: $spacing-05;
+       width: 100%;
+     }
+ 
+     .#{$prefix}--card__copy {
+       @include content-width;
+ 
+       color: $text-primary;
+     }
+ 
+     .#{$prefix}--card__copy:not([hidden]) {
+       @include type-style('body-02');
+ 
+       margin-bottom: $spacing-07;
+     }
+   }
+ 
+   // 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] .#{$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] {
+       &[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;
+     }
+ 
+     ::slotted(div) {
+       /* stylelint-disable declaration-no-important */
+       // need the !important to prevent CSS reset styles from overwritting margin for tags
+       margin-left: -$spacing-02 !important;
+     }
+   }
+ 
+   :host(#{$c4d-prefix}-card[aspect-ratio='1:1']) .#{$prefix}--card__wrapper {
+     @include ratio-base(1, 1, false);
+   }
+ 
+   :host(#{$c4d-prefix}-card[aspect-ratio='3:2']) .#{$prefix}--card__wrapper {
+     @include ratio-base(3, 2, false);
+   }
+ 
+   :host(#{$c4d-prefix}-card[aspect-ratio='4:3']) .#{$prefix}--card__wrapper {
+     @include ratio-base(4, 3, false);
+   }
+ 
+   :host(#{$c4d-prefix}-card[aspect-ratio='16:9']) .#{$prefix}--card__wrapper {
+     @include ratio-base(16, 9, false);
+   }
+   // static card
+ 
+   :host(#{$c4d-prefix}-card),
+   :host(#{$c4d-prefix}-card-group-item) {
+     &:not([href]) {
+       .#{$prefix}--card .#{$prefix}--card__copy {
+         margin-bottom: $spacing-01;
+       }
+ 
+       .#{$prefix}--card.#{$prefix}--tile ::slotted(#{$c4d-prefix}-image) {
+         &::after {
+           display: none;
+         }
+       }
+ 
+       &:focus-within ::slotted(#{$c4d-prefix}-image) {
+         z-index: 0;
+       }
+ 
+       ::slotted(#{$c4d-prefix}-card-heading) {
+         padding-bottom: $spacing-10;
+         margin-bottom: auto;
+       }
+ 
+       ::slotted(#{$c4d-prefix}-card-footer) {
+         margin-top: $spacing-07;
+         display: inline-flex;
+         &::after {
+           position: relative;
+         }
+       }
+     }
+ 
+     &[color-scheme='light'] {
+       &,
+       &:hover {
+         .#{$prefix}--card__wrapper {
+           background-color: $layer-02;
+           transition: $duration-moderate-01 motion(standard, productive);
+         }
+       }
+ 
+       &[href] {
+         :hover {
+           .#{$prefix}--card__wrapper {
+             background-color: $background-hover;
+           }
+         }
+         &:active,
+         a:active {
+           outline: none;
+         }
+       }
+     }
+ 
+     // Logo card
+     &[logo] {
+       .#{$prefix}--card {
+         background-color: $layer-02;
+       }
+ 
+       .#{$prefix}--card__copy {
+         margin-bottom: $spacing-05;
+       }
+ 
+       &:hover {
+         border-color: $toggle-off;
+ 
+         .#{$prefix}--card__wrapper {
+           background-color: $layer-02;
+         }
+       }
+ 
+       &:active {
+         border-color: $border-inverse;
+       }
+ 
+       ::slotted(#{$c4d-prefix}-card-footer) {
+         height: 0;
+       }
+     }
+ 
+     &[href][logo] {
+       &:hover {
+         .#{$prefix}--card__wrapper {
+           background-color: $layer-02;
+         }
+       }
+     }
+   }
+ 
+   :host(#{$c4d-prefix}-card[link]) {
+     ::slotted(#{$c4d-prefix}-card-heading) {
+       @include type-style('heading-02');
+ 
+       margin-bottom: 0;
+     }
+ 
+     .#{$prefix}--card .#{$prefix}--card__copy {
+       margin-top: 0;
+     }
+   }
+ 
+   :host(#{$c4d-prefix}-card-cta),
+   :host(#{$c4d-prefix}-card-link-cta),
+   :host(#{$c4d-prefix}-card-link) {
+     outline: none;
+   }
+ 
+   :host(#{$c4d-prefix}-card-eyebrow) {
+     @include content-width;
+     @include type-style('label-02');
+ 
+     margin-bottom: $spacing-03;
+     color: $text-secondary;
+   }
+ 
+   :host(#{$c4d-prefix}-card-footer),
+   :host(#{$c4d-prefix}-card-cta-footer),
+   :host(#{$c4d-prefix}-card-in-card-footer),
+   :host(#{$c4d-prefix}-feature-card-footer),
+   :host(#{$c4d-prefix}-feature-cta-footer) {
+     margin-top: auto;
+     display: flex;
+     align-items: flex-end;
+ 
+     &:focus-visible {
+       outline: none;
+     }
+   }
+ 
+   :host(#{$c4d-prefix}-card-footer) {
+     .#{$prefix}--link-with-icon.#{$prefix}--link-with-icon--inline-icon {
+       display: flex;
+ 
+       svg,
+       ::slotted(svg[slot='icon']) {
+         display: block;
+       }
+     }
+   }
+ 
+   .#{$prefix}--card .#{$prefix}--card__footer,
+   :host(#{$c4d-prefix}-card-footer) a,
+   :host(#{$c4d-prefix}-card-cta-footer) a,
+   :host(#{$c4d-prefix}-card-in-card-footer) a,
+   :host(#{$c4d-prefix}-feature-card-footer) a,
+   :host(#{$c4d-prefix}-feature-cta-footer) a {
+     /* Moves the footer down to the bottom in the card */
+     margin-top: auto;
+     text-decoration: none;
+ 
+     &:focus {
+       outline: none;
+     }
+ 
+     &:hover {
+       text-decoration: none;
+     }
+ 
+     span {
+       flex: none;
+     }
+ 
+     &::after {
+       content: '';
+       position: absolute;
+       z-index: 1;
+       top: 0;
+       left: 0;
+       bottom: 0;
+       right: 0;
+     }
+ 
+     .#{$prefix}--card__cta__copy {
+       max-width: calc(100% - 20px - #{$spacing-03});
+       margin-right: $spacing-03;
+       @include type-style('body-02');
+     }
+ 
+ 
+     svg,
+     ::slotted(svg[slot='icon']) {
+       display: block;
+       min-width: 20px;
+       margin-left: 0;
+     }
+   }
+ 
+   :host(#{$c4d-prefix}-card-footer),
+   :host(#{$c4d-prefix}-card-cta-footer) {
+     .#{$prefix}--link-with-icon.#{$prefix}--link-with-icon--inline-icon {
+       display: flex;
+       width: 100%;
+       justify-content: flex-end;
+       align-items: center;
+ 
+       &:active {
+         color: $link-primary-hover;
+       }
+     }
+ 
+     &[color-scheme='inverse']
+       .#{$prefix}--link-with-icon.#{$prefix}--link-with-icon--inline-icon:not(
+         .#{$prefix}--link--disabled
+       ) {
+       color: $link-inverse;
+     }
+   }
+ 
+   // static card footer
+   :host(#{$c4d-prefix}-card-footer):not([parent-href]) {
+     .#{$prefix}--card__footer {
+       width: auto;
+       justify-content: flex-start;
+ 
+       &:hover {
+         color: $link-primary-hover;
+       }
+ 
+       &:active,
+       &:hover {
+         text-decoration: none;
+       }
+ 
+       &::after {
+         content: none;
+       }
+       &:focus {
+         outline: $spacing-01 solid $focus;
+       }
+     }
+ 
+     .#{$prefix}--card__cta__copy {
+       margin-right: $spacing-03;
+     }
+   }
+ 
+   :host(#{$c4d-prefix}-card)[color-scheme='inverse']:not([disabled]),
+   :host(#{$c4d-prefix}-card-group-item)[color-scheme='inverse']:not([disabled])
+     .#{$prefix}--card {
+     .#{$prefix}--tile {
+       background-color: $background-inverse;
+       border-color: $background-inverse;
+ 
+       &:hover {
+         #{$c4d-prefix}-image,
+         ::slotted(#{$c4d-prefix}-image),
+         ::slotted(#{$c4d-prefix}-card-cta-image) {
+           filter: brightness(108%);
+ 
+           &::after {
+             display: none;
+           }
+         }
+       }
+     }
+ 
+     .#{$prefix}--card__wrapper:hover {
+       background-color: $background-inverse-hover;
+     }
+ 
+     .#{$prefix}--card__copy {
+       color: $icon-inverse;
+     }
+ 
+ 
+     &:focus-within {
+       &::after {
+         content: '';
+         position: absolute;
+         z-index: 2;
+         top: 0;
+         left: 0;
+         bottom: 0;
+         right: 0;
+         border: $spacing-01 solid $focus;
+         outline: 1px solid $focus-inset;
+         outline-offset: -3px;
+         pointer-events: none;
+       }
+     }
+   }
+ 
+   :host(#{$c4d-prefix}-card-heading),
+   :host(#{$c4d-prefix}-card-link-heading) {
+     @include content-width;
+ 
+     color: $text-primary;
+     margin-bottom: $spacing-10;
+   }
+ 
+   :host(#{$c4d-prefix}-card-heading) {
+     @include type-style('heading-03', true);
+   }
+ 
+   :host(#{$c4d-prefix}-card-link-heading) {
+     @include type-style('heading-02', true);
+ 
+     margin-bottom: 0;
+   }
+ 
+   :host(#{$c4d-prefix}-card)[color-scheme='inverse'],
+   :host(#{$c4d-prefix}-card-group-item)[color-scheme='inverse'],
+   :host(#{$c4d-prefix}-feature-section-card-link)[color-scheme='inverse'],
+   .#{$prefix}--card-group__card {
+     ::slotted(#{$c4d-prefix}-card-eyebrow),
+     ::slotted(#{$c4d-prefix}-card-heading),
+     ::slotted(#{$c4d-prefix}-card-link-heading) {
+       color: $text-inverse;
+     }
+ 
+     &:hover {
+       ::slotted(#{$c4d-prefix}-image),
+       ::slotted(#{$c4d-prefix}-card-cta-image) {
+         filter: brightness(108%);
+       }
+     }
+   }
+ 
+   @media print {
+     :host(#{$c4d-prefix}-card),
+     :host(#{$c4d-prefix}-card-group-item),
+     :host(#{$c4d-prefix}-card-cta),
+     :host(#{$c4d-prefix}-card-in-card),
+     :host(#{$c4d-prefix}-content-group-cards-item) {
+       border: 1px solid $layer-accent-01;
+ 
+       .#{$prefix}--card {
+         background-color: $layer-02;
+         border: none;
+       }
+ 
+       ::slotted(#{$c4d-prefix}-image),
+       ::slotted(#{$c4d-prefix}-card-cta-image),
+       .#{$prefix}--image {
+         display: none;
+       }
+     }
+ 
+     .#{$prefix}--card {
+       background-color: $layer-02;
+       border: 1px solid $layer-accent-01;
+ 
+     }
+   }
+ 
+   :host(#{$c4d-prefix}-card[disabled]),
+   :host(#{$c4d-prefix}-region-item[disabled]) {
+     .#{$prefix}--card {
+       cursor: not-allowed;
+     }
+ 
+     .#{$prefix}--card__copy,
+     ::slotted(#{$c4d-prefix}-card-eyebrow),
+     ::slotted(#{$c4d-prefix}-card-heading) {
+       color: $text-disabled;
+     }
+   }
+ 
+   :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 {
+       justify-content: space-between;
+     }
+   }
+ 
+   :host(#{$c4d-prefix}-card-footer[href])::after {
+     position: relative;
+   }
+ }
+ 
\ No newline at end of file

From 211bcf770b33c4ae3c94971a51961c8ce250d6cb Mon Sep 17 00:00:00 2001
From: Sangeetha Babu <58620134+sangeethababu9223@users.noreply.github.com>
Date: Tue, 12 Dec 2023 10:57:46 +0530
Subject: [PATCH 02/26] feat(ibmdotcom styles): remove react classes content
 block horizontal

---
 .../_content-block-horizontal.scss                   | 12 ------------
 1 file changed, 12 deletions(-)

diff --git a/packages/styles/scss/components/content-block-horizontal/_content-block-horizontal.scss b/packages/styles/scss/components/content-block-horizontal/_content-block-horizontal.scss
index 941f7f423e1..0a42ad6b24c 100644
--- a/packages/styles/scss/components/content-block-horizontal/_content-block-horizontal.scss
+++ b/packages/styles/scss/components/content-block-horizontal/_content-block-horizontal.scss
@@ -27,18 +27,6 @@
     }
   }
 
-  .#{$prefix}--content-block-horizontal {
-    .#{$prefix}--content-block {
-      padding-top: $spacing-07;
-      padding-bottom: $spacing-05;
-
-      @include breakpoint(lg) {
-        padding-top: $spacing-10;
-        padding-bottom: $spacing-09;
-      }
-    }
-  }
-
   :host(#{$c4d-prefix}-content-block-horizontal) ::slotted([slot='heading']),
   .#{$prefix}--content-block-horizontal .#{$prefix}--content-block__heading {
     margin-bottom: $spacing-07;

From 049887ee0b4224f93b7259780c25e8cfd82e13bc Mon Sep 17 00:00:00 2001
From: Sangeetha Babu <58620134+sangeethababu9223@users.noreply.github.com>
Date: Tue, 12 Dec 2023 11:11:43 +0530
Subject: [PATCH 03/26] feat(ibmdotco styles): remove react classes from
 content block media

---
 .../_content-block-media.scss                 | 19 -------------------
 1 file changed, 19 deletions(-)

diff --git a/packages/styles/scss/components/content-block-media/_content-block-media.scss b/packages/styles/scss/components/content-block-media/_content-block-media.scss
index c6399675b0d..020199625d5 100644
--- a/packages/styles/scss/components/content-block-media/_content-block-media.scss
+++ b/packages/styles/scss/components/content-block-media/_content-block-media.scss
@@ -20,30 +20,11 @@
 @mixin themed-items {
   color: $text-primary;
   background: $background;
-
-  &.#{$prefix}--content-block-media--with-border
-    .#{$prefix}--content-block-media__divider {
-    border-bottom-color: $toggle-off;
-  }
 }
 
 @mixin content-block-media {
   .#{$prefix}--content-block-media,
   :host(#{$c4d-prefix}-content-block-media) {
     @include themed-items;
-
-    .#{$prefix}--content-group:last-child {
-      margin-bottom: 0;
-    }
-
-    .#{$prefix}--feature-card {
-      max-width: to-rem(640px);
-    }
-  }
-
-  .#{$prefix}--content-block-media--g100 {
-    @include theme($g100, true);
-
-    @include themed-items;
   }
 }

From c21f653cc256fa3178878021be937102c49e9cef Mon Sep 17 00:00:00 2001
From: Sangeetha Babu <58620134+sangeethababu9223@users.noreply.github.com>
Date: Tue, 12 Dec 2023 11:12:51 +0530
Subject: [PATCH 04/26] feat(ibmdtcom styles): remove react classes content
 block mixed

---
 .../content-block-mixed/_content-block-mixed.scss | 15 ---------------
 1 file changed, 15 deletions(-)

diff --git a/packages/styles/scss/components/content-block-mixed/_content-block-mixed.scss b/packages/styles/scss/components/content-block-mixed/_content-block-mixed.scss
index c0debca2673..cfa2e1cc36e 100644
--- a/packages/styles/scss/components/content-block-mixed/_content-block-mixed.scss
+++ b/packages/styles/scss/components/content-block-mixed/_content-block-mixed.scss
@@ -26,20 +26,5 @@
         max-width: calc(100% + $spacing-05);
       }
     }
-
-    .#{$prefix}--layout-1-3 {
-      @include breakpoint-down(md) {
-        .#{$prefix}--link-list__list.#{$prefix}--link-list__list--card {
-          margin-right: -$spacing-05;
-        }
-      }
-      @include breakpoint(lg) {
-        @include make-col-offset(1, 12);
-      }
-    }
-
-    .#{$prefix}--content-block__cta-col {
-      max-width: carbon--mini-units(40);
-    }
   }
 }

From 0c9239652edc1b76a8807e93292d6e5ff13d66f6 Mon Sep 17 00:00:00 2001
From: Sangeetha Babu <58620134+sangeethababu9223@users.noreply.github.com>
Date: Tue, 12 Dec 2023 11:30:20 +0530
Subject: [PATCH 05/26] feat(ibmdotcom styles): remove react classes from
 content block segmented

---
 .../_content-block-segmented.scss             | 57 -------------------
 1 file changed, 57 deletions(-)

diff --git a/packages/styles/scss/components/content-block-segmented/_content-block-segmented.scss b/packages/styles/scss/components/content-block-segmented/_content-block-segmented.scss
index 925fae268ce..7d5b6f24b8c 100755
--- a/packages/styles/scss/components/content-block-segmented/_content-block-segmented.scss
+++ b/packages/styles/scss/components/content-block-segmented/_content-block-segmented.scss
@@ -22,65 +22,8 @@
         @include breakpoint(lg) {
           padding-bottom: $spacing-13;
         }
-
-        .#{$prefix}--content-block__cta-row {
-          margin-bottom: 0;
-        }
-
-        .#{$prefix}--layout-2-3 {
-          padding-left: 0;
-        }
-      }
-    }
-
-    .#{$prefix}--content-group__cta-row {
-      @include breakpoint-down(md) {
-        margin-left: 0;
-      }
-    }
-
-    .#{$prefix}--content-block__cta-row {
-      margin-bottom: $spacing-07;
-      @include breakpoint(lg) {
-        margin-bottom: $spacing-13;
-      }
-    }
-  }
-
-  // React specific classes to manage bottom spacing
-  .#{$prefix}--content-block-segmented {
-    &-border {
-      .#{$prefix}--content-block {
-        padding-bottom: 0;
       }
     }
-
-    .#{$prefix}--content-block__cta-row {
-      margin-bottom: 0;
-
-      &-border {
-        margin-bottom: $spacing-07;
-        @include breakpoint(lg) {
-          margin-bottom: $spacing-13;
-        }
-      }
-    }
-  }
-
-  :host(#{$c4d-prefix}-content-block-segmented)
-    .#{$prefix}--content-block__children
-    .#{$prefix}--content-block-segmented__media
-    ::slotted(:not([slot])) {
-    display: block;
-    margin-top: $spacing-10;
-    margin-bottom: $spacing-10;
-  }
-
-  :host(#{$c4d-prefix}-content-block-segmented)
-    .#{$prefix}--content-block__children
-    .#{$prefix}--content-block-segmented__media
-    ::slotted(:not([slot]):last-of-type) {
-    margin-bottom: 0;
   }
 
   .#{$prefix}--content-block-segmented .#{$prefix}--content-group {

From 8adf87b03ca649f82303a7314cece55b9dc322ac Mon Sep 17 00:00:00 2001
From: Sangeetha Babu <58620134+sangeethababu9223@users.noreply.github.com>
Date: Tue, 12 Dec 2023 11:54:08 +0530
Subject: [PATCH 06/26] feat(ibmdotcom styles): remove react classes from
 content block sample

---
 .../content-block-simple/_content-block-simple.scss   | 11 -----------
 1 file changed, 11 deletions(-)

diff --git a/packages/styles/scss/components/content-block-simple/_content-block-simple.scss b/packages/styles/scss/components/content-block-simple/_content-block-simple.scss
index 965241dfd52..b13329fa100 100644
--- a/packages/styles/scss/components/content-block-simple/_content-block-simple.scss
+++ b/packages/styles/scss/components/content-block-simple/_content-block-simple.scss
@@ -12,15 +12,4 @@
 @use '../image';
 
 @mixin content-block-simple {
-  .#{$prefix}--content-block-simple__media-video {
-    max-width: to-rem(640px);
-  }
-
-  .#{$prefix}--content-block-simple__content {
-    .#{$prefix}--content-item {
-      &:first-of-type {
-        margin-top: 0;
-      }
-    }
-  }
 }

From 91ee9e175bd66e5ff9f45581d3ae54900f3dd1d1 Mon Sep 17 00:00:00 2001
From: Sangeetha Babu <58620134+sangeethababu9223@users.noreply.github.com>
Date: Tue, 12 Dec 2023 12:17:53 +0530
Subject: [PATCH 07/26] feat(ibmdotcom styles): remove react classes from
 content group cards

---
 .../content-group-cards/_content-group-cards.scss        | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/packages/styles/scss/components/content-group-cards/_content-group-cards.scss b/packages/styles/scss/components/content-group-cards/_content-group-cards.scss
index 91934e16aad..32bc552e72e 100644
--- a/packages/styles/scss/components/content-group-cards/_content-group-cards.scss
+++ b/packages/styles/scss/components/content-group-cards/_content-group-cards.scss
@@ -22,10 +22,8 @@
 }
 
 @mixin content-group-cards {
-  :host(#{$c4d-prefix}-content-group-cards),
-  .#{$prefix}--content-group-cards {
-    ::slotted([slot='copy']),
-    .#{$prefix}--content-group__copy {
+  :host(#{$c4d-prefix}-content-group-cards) {
+    ::slotted([slot='copy']) {
       margin-bottom: $spacing-09;
 
       @include breakpoint(md) {
@@ -48,8 +46,7 @@
     }
   }
 
-  :host(#{$c4d-prefix}-content-group-cards-item),
-  .#{$prefix}--content-group-cards-item__col {
+  :host(#{$c4d-prefix}-content-group-cards-item) {
     margin-top: list.slash($grid-gutter, 2);
     margin-bottom: list.slash($grid-gutter, 2);
     padding-left: list.slash($grid-gutter, 2);

From 9f25367aa85b6679b8b207b7ddec5d1abb9c1706 Mon Sep 17 00:00:00 2001
From: Sangeetha Babu <58620134+sangeethababu9223@users.noreply.github.com>
Date: Tue, 12 Dec 2023 12:28:23 +0530
Subject: [PATCH 08/26] feat(ibmdotcom styles): remove react classes from
 content group pictograms

---
 .../_content-group-pictograms.scss                    | 11 -----------
 1 file changed, 11 deletions(-)

diff --git a/packages/styles/scss/components/content-group-pictograms/_content-group-pictograms.scss b/packages/styles/scss/components/content-group-pictograms/_content-group-pictograms.scss
index b59b79b2bf9..675e7ff09c3 100644
--- a/packages/styles/scss/components/content-group-pictograms/_content-group-pictograms.scss
+++ b/packages/styles/scss/components/content-group-pictograms/_content-group-pictograms.scss
@@ -27,16 +27,5 @@
   div.#{$prefix}--content-group-pictograms {
     padding-left: 0;
     padding-right: 0;
-
-    .#{$prefix}--content-group__title {
-      padding-left: $spacing-05;
-      padding-right: $spacing-05;
-    }
-  }
-
-  .#{$prefix}--content-group-pictograms__item:last-child {
-    .#{$prefix}--content-item {
-      margin-bottom: 0;
-    }
   }
 }

From d689252c823b699a19a853fc3628a2017817ce3d Mon Sep 17 00:00:00 2001
From: Sangeetha Babu <58620134+sangeethababu9223@users.noreply.github.com>
Date: Tue, 12 Dec 2023 12:33:35 +0530
Subject: [PATCH 09/26] feat(ibmdotcom styles): remove react classes from
 content group simple

---
 .../content-group-simple/_content-group-simple.scss       | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/packages/styles/scss/components/content-group-simple/_content-group-simple.scss b/packages/styles/scss/components/content-group-simple/_content-group-simple.scss
index 92e474f90c0..3ef6ecec47b 100644
--- a/packages/styles/scss/components/content-group-simple/_content-group-simple.scss
+++ b/packages/styles/scss/components/content-group-simple/_content-group-simple.scss
@@ -13,13 +13,7 @@
 
 @mixin content-group-simple {
   :host(#{$c4d-prefix}-content-group-simple)
-    ::slotted(#{$c4d-prefix}-content-group-copy),
-  .#{$prefix}--content-group-simple .#{$prefix}--content-group__copy {
+    ::slotted(#{$c4d-prefix}-content-group-copy) {
     margin-bottom: $spacing-07;
   }
-
-  .bx--content-group__cta {
-    max-width: calc(320px + $spacing-05);
-    padding-right: 0;
-  }
 }

From c18a8f0e1509e188245c1a47401c318a5d3acb41 Mon Sep 17 00:00:00 2001
From: Sangeetha Babu <58620134+sangeethababu9223@users.noreply.github.com>
Date: Tue, 12 Dec 2023 13:01:55 +0530
Subject: [PATCH 10/26] feat(ibmdotcom styles): remove react classes from
 content item row

---
 .../content-item-row/_content-item-row.scss   | 23 -------------------
 1 file changed, 23 deletions(-)

diff --git a/packages/styles/scss/components/content-item-row/_content-item-row.scss b/packages/styles/scss/components/content-item-row/_content-item-row.scss
index 603bfb41d8f..99ee1ce2d2c 100644
--- a/packages/styles/scss/components/content-item-row/_content-item-row.scss
+++ b/packages/styles/scss/components/content-item-row/_content-item-row.scss
@@ -143,15 +143,6 @@
     }
   }
 
-  .#{$prefix}--content-item-row__content-wrapper_with-media {
-    width: 100%;
-    @include breakpoint(lg) {
-      @include make-col(8, 12);
-
-      padding-left: $spacing-04;
-    }
-  }
-
   :host(#{$c4d-prefix}-content-item-row) ::slotted([slot='media']) {
     display: block;
     padding-top: $spacing-07;
@@ -245,20 +236,6 @@
     }
   }
 
-  :host(#{$c4d-prefix}-content-item-row) .#{$prefix}--content-item__cta {
-    .#{$prefix}--link-list {
-      padding: 0;
-
-      &:first-of-type {
-        padding: 0;
-      }
-    }
-
-    .#{$prefix}--link-list li:last-of-type {
-      margin-bottom: 0;
-    }
-  }
-
   :host(#{$c4d-prefix}-content-item-row) ::slotted([slot='thumbnail']) {
     @include breakpoint(md) {
       @include make-col(3, 3);

From 540b92e3d23bdd723527557083845720cf8c2718 Mon Sep 17 00:00:00 2001
From: Sangeetha Babu <58620134+sangeethababu9223@users.noreply.github.com>
Date: Tue, 12 Dec 2023 13:55:09 +0530
Subject: [PATCH 11/26] feat(ibmdotcom styles): remove react classes from cta
 block

---
 .../scss/components/cta-block/_cta-block.scss | 157 +-----------------
 1 file changed, 1 insertion(+), 156 deletions(-)

diff --git a/packages/styles/scss/components/cta-block/_cta-block.scss b/packages/styles/scss/components/cta-block/_cta-block.scss
index d11a20b3b01..4808de73bc5 100644
--- a/packages/styles/scss/components/cta-block/_cta-block.scss
+++ b/packages/styles/scss/components/cta-block/_cta-block.scss
@@ -21,178 +21,23 @@
   color: $text-primary;
   background: $background;
 
-  .#{$prefix}--content-item__heading {
-    color: $text-primary;
-  }
-
-  .#{$prefix}--content-item__copy {
-    p {
-      color: $text-primary;
-    }
-  }
-
   .#{$prefix}--content-item__cta {
     color: $link-primary;
   }
 }
 
 @mixin cta-block {
-  :host(#{$c4d-prefix}-cta-block),
-  .#{$prefix}--cta-block {
+  :host(#{$c4d-prefix}-cta-block) {
     padding-top: $spacing-07;
     padding-bottom: $spacing-10;
     @include breakpoint(lg) {
       padding-top: $spacing-10;
     }
 
-    .#{$prefix}--cta-block__cta {
-      padding-bottom: $spacing-10;
-      @include breakpoint(md) {
-        padding-bottom: $spacing-12;
-      }
-      @include breakpoint(lg) {
-        padding-bottom: $spacing-13;
-      }
-
-      .#{$prefix}--buttongroup {
-        @include breakpoint(md) {
-          flex-direction: row;
-        }
-      }
-
-      .#{$prefix}--buttongroup-item {
-        @include breakpoint(md) {
-          padding-right: $spacing-07;
-        }
-      }
-    }
-
-    .#{$prefix}--content-block {
-      padding-top: $spacing-07;
-      padding-bottom: 0;
-
-      @include breakpoint(lg) {
-        padding-top: $spacing-10;
-      }
-    }
-
-    .#{$prefix}--content-block__heading,
-    .#{$prefix}--content-block__copy {
-      width: 90%;
-      max-width: to-rem(640px);
-
-      @include breakpoint(sm) {
-        width: 100%;
-      }
-    }
-
-    .#{$prefix}--content-block__heading {
-      @include type-style('fluid-heading-05', true);
-    }
-
-    .#{$prefix}--content-block__copy {
-      p {
-        margin-bottom: 0;
-        @include type-style('fluid-heading-03', true);
-      }
-    }
-
-    .#{$prefix}--content-block__cta-col {
-      margin-top: 0;
-    }
-
     .#{$prefix}--helper-wrapper {
       .#{$prefix}--content-item-wrapper {
         @include make-row;
-
-        .#{$prefix}--content-item {
-          width: 100%;
-          margin-bottom: 0;
-          padding-bottom: $spacing-05;
-          position: relative;
-
-          @include make-col-ready;
-
-          @include breakpoint(md) {
-            @include make-col(4, 8);
-          }
-
-          &:last-of-type {
-            margin-top: $spacing-05;
-
-            @include breakpoint(md) {
-              margin-top: $spacing-07;
-            }
-          }
-        }
-
-        .#{$prefix}--content-item__heading {
-          width: 100%;
-
-          @include type-style('heading-02', true);
-
-          @include breakpoint(md) {
-            width: 90%;
-          }
-        }
-
-        .#{$prefix}--content-item__copy {
-          width: 100%;
-
-          @include breakpoint(md) {
-            width: 90%;
-          }
-
-          p {
-            width: 100%;
-            margin-bottom: $spacing-05;
-
-            @include type-style('body-02', true);
-          }
-        }
       }
     }
-
-    &.#{$prefix}--cta-block__has-items {
-      padding-bottom: $spacing-09;
-
-      @include breakpoint(lg) {
-        padding-bottom: carbon--mini-units(10);
-      }
-
-      .#{$prefix}--cta-block__cta {
-        padding-bottom: $spacing-07;
-
-        @include breakpoint(md) {
-          padding-bottom: $spacing-10;
-        }
-
-        @include breakpoint(lg) {
-          padding-bottom: $spacing-12;
-        }
-      }
-
-      .#{$prefix}--content-block {
-        padding-bottom: 0;
-      }
-    }
-  }
-
-  .#{$prefix}--cta-block--g10 {
-    @include theme($g10, feature-flag-enabled('enable-css-custom-properties'));
-
-    @include themed-items;
-  }
-
-  .#{$prefix}--cta-block--g90 {
-    @include theme($g90, feature-flag-enabled('enable-css-custom-properties'));
-
-    @include themed-items;
-  }
-
-  .#{$prefix}--cta-block--g100 {
-    @include theme($g100, feature-flag-enabled('enable-css-custom-properties'));
-
-    @include themed-items;
   }
 }

From 21a5a53453689f10ff433cddd278c485a3fb857c Mon Sep 17 00:00:00 2001
From: Sangeetha Babu <58620134+sangeethababu9223@users.noreply.github.com>
Date: Tue, 12 Dec 2023 14:13:01 +0530
Subject: [PATCH 12/26] feat(ibmdotcom styles): remove react classes from cta
 section

---
 .../components/cta-section/_cta-section.scss  | 158 +-----------------
 1 file changed, 1 insertion(+), 157 deletions(-)

diff --git a/packages/styles/scss/components/cta-section/_cta-section.scss b/packages/styles/scss/components/cta-section/_cta-section.scss
index 0e80110b95e..3fe80385a4b 100644
--- a/packages/styles/scss/components/cta-section/_cta-section.scss
+++ b/packages/styles/scss/components/cta-section/_cta-section.scss
@@ -20,158 +20,16 @@
 @mixin themed-items {
   color: $text-primary;
   background: $background;
-
-  .#{$prefix}--content-item__heading {
-    color: $text-primary;
-  }
-
-  .#{$prefix}--content-item__copy {
-    p {
-      color: $text-primary;
-    }
-  }
-
-  .#{$prefix}--content-item__cta {
-    color: $link-primary;
-  }
 }
 
 @mixin cta-section {
-  :host(#{$c4d-prefix}-cta-section),
-  .#{$prefix}--cta-section {
-    .#{$prefix}--cta-section__cta {
-      padding-bottom: $spacing-10;
-
-      @include breakpoint(md) {
-        padding-bottom: $spacing-12;
-      }
-
-      @include breakpoint(lg) {
-        padding-bottom: $spacing-13;
-      }
-
-      .#{$prefix}--buttongroup {
-        @include breakpoint(md) {
-          flex-direction: row;
-        }
-      }
-
-      .#{$prefix}--buttongroup-item {
-        @include breakpoint(md) {
-          padding-right: $spacing-05;
-        }
-      }
-    }
-
-    .#{$prefix}--content-block {
-      padding-top: $spacing-07;
-      padding-bottom: 0;
-
-      @include breakpoint(lg) {
-        padding-top: $spacing-10;
-      }
-    }
-
-    .#{$prefix}--content-block__heading,
-    .#{$prefix}--content-block__copy {
-      width: 90%;
-      max-width: 640px;
-
-      @include breakpoint(sm) {
-        width: 100%;
-      }
-    }
-
-    .#{$prefix}--content-block__heading {
-      @include type-style('fluid-heading-05', true);
-    }
-
-    .#{$prefix}--content-block__copy {
-      p {
-        margin-bottom: 0;
-        @include type-style('fluid-heading-03', true);
-      }
-    }
-
-    .#{$prefix}--content-block__cta-col {
-      margin-top: 0;
-    }
+  :host(#{$c4d-prefix}-cta-section) {
 
     .#{$prefix}--helper-wrapper {
       .#{$prefix}--content-item-wrapper {
         border-top: 1px solid $layer-accent-01;
-
         @include make-row;
 
-        .#{$prefix}--content-item {
-          width: 100%;
-          margin-bottom: 0;
-          padding-bottom: $spacing-05;
-          position: relative;
-
-          @include make-col-ready;
-
-          @include breakpoint(md) {
-            @include make-col(4, 8);
-          }
-
-          &:last-of-type {
-            margin-top: $spacing-05;
-
-            @include breakpoint(md) {
-              margin-top: $spacing-07;
-            }
-          }
-        }
-
-        .#{$prefix}--content-item__heading {
-          width: 100%;
-
-          @include type-style('heading-02', true);
-
-          @include breakpoint(md) {
-            width: 90%;
-          }
-        }
-
-        .#{$prefix}--content-item__copy {
-          width: 100%;
-
-          @include breakpoint(md) {
-            width: 90%;
-          }
-
-          p {
-            width: 100%;
-            margin-bottom: $spacing-05;
-
-            @include type-style('body-02', true);
-          }
-        }
-      }
-    }
-
-    &.#{$prefix}--cta-section__has-items {
-      padding-bottom: $spacing-09;
-
-      @include breakpoint(lg) {
-        padding-bottom: carbon--mini-units(10);
-      }
-
-      .#{$prefix}--cta-section__cta {
-        padding-bottom: $spacing-07;
-
-        @include breakpoint(md) {
-          padding-bottom: $spacing-10;
-        }
-
-        @include breakpoint(lg) {
-          padding-bottom: $spacing-12;
-        }
-      }
-
-      .#{$prefix}--content-block {
-        padding-bottom: 0;
       }
     }
 
@@ -180,18 +38,4 @@
     }
   }
 
-  .#{$prefix}--cta-section--g10 {
-    @include theme($g10, true);
-    @include themed-items;
-  }
-
-  .#{$prefix}--cta-section--g90 {
-    @include theme($g90, true);
-    @include themed-items;
-  }
-
-  .#{$prefix}--cta-section--g100 {
-    @include theme($g100, true);
-    @include themed-items;
-  }
 }

From e8863cdd3119739f31d06de027c60347026f720e Mon Sep 17 00:00:00 2001
From: Sangeetha Babu <58620134+sangeethababu9223@users.noreply.github.com>
Date: Tue, 12 Dec 2023 15:25:33 +0530
Subject: [PATCH 13/26] feat(ibmdotcom styles): remove react classes from
 expressive modal

---
 .../expressive-modal/_expressive-modal.scss           | 11 ++---------
 1 file changed, 2 insertions(+), 9 deletions(-)

diff --git a/packages/styles/scss/components/expressive-modal/_expressive-modal.scss b/packages/styles/scss/components/expressive-modal/_expressive-modal.scss
index b265ef740a1..3f4b4ba7660 100644
--- a/packages/styles/scss/components/expressive-modal/_expressive-modal.scss
+++ b/packages/styles/scss/components/expressive-modal/_expressive-modal.scss
@@ -75,11 +75,6 @@
     }
   }
 
-  :host(#{$c4d-prefix}-expressive-modal-footer) .#{$prefix}--modal-footer {
-    justify-content: flex-start;
-    height: $spacing-09;
-  }
-
   :host(#{$c4d-prefix}-expressive-modal-close-button) {
     .#{$prefix}--modal-close {
       position: fixed;
@@ -101,8 +96,7 @@
     @include type-style('body-02');
   }
 
-  :host(#{$c4d-prefix}-expressive-modal)[expressive-size='full-width'],
-  .#{$prefix}--modal--expressive--fullwidth {
+  :host(#{$c4d-prefix}-expressive-modal)[expressive-size='full-width'] {
     @include breakpoint(md) {
       .#{$prefix}--modal-container {
         width: calc(100% - #{$spacing-07});
@@ -130,8 +124,7 @@
   :host(#{$c4d-prefix}-expressive-modal[size='full-width'])
     ::slotted(#{$c4d-prefix}-expressive-modal-body),
   :host(#{$c4d-prefix}-expressive-modal[size='full-width'])
-    ::slotted(#{$c4d-prefix}-lightbox-media-viewer-body),
-  .#{$prefix}--modal--expressive--fullwidth .#{$prefix}--modal-content {
+    ::slotted(#{$c4d-prefix}-lightbox-media-viewer-body) {
     padding-right: 0;
     height: auto;
     min-height: to-rem(500px);

From bd0cde57226c4f10a3e3edb769f9ac90d2cc864f Mon Sep 17 00:00:00 2001
From: Sangeetha Babu <58620134+sangeethababu9223@users.noreply.github.com>
Date: Tue, 12 Dec 2023 16:48:01 +0530
Subject: [PATCH 14/26] feat(ibmdotcom styles): remove react classes from
 feature card

---
 .../feature-card/_feature-card.scss           | 86 ++-----------------
 1 file changed, 9 insertions(+), 77 deletions(-)

diff --git a/packages/styles/scss/components/feature-card/_feature-card.scss b/packages/styles/scss/components/feature-card/_feature-card.scss
index 4bf249b8fd9..40dd00d970f 100644
--- a/packages/styles/scss/components/feature-card/_feature-card.scss
+++ b/packages/styles/scss/components/feature-card/_feature-card.scss
@@ -45,7 +45,6 @@ $feature-flags: (
     flex-direction: row;
   }
 
-  .#{$prefix}--card__heading,
   ::slotted(#{$c4d-prefix}-card-heading) {
     margin-bottom: $spacing-07;
   }
@@ -74,9 +73,7 @@ $feature-flags: (
 @mixin feature-card {
   // all feature cards
   :host(#{$c4d-prefix}-feature-card),
-  :host(#{$c4d-prefix}-feature-cta),
-  .#{$prefix}--feature-card-large,
-  .#{$prefix}--feature-card {
+  :host(#{$c4d-prefix}-feature-cta) {
     position: relative;
     // avoid shorthand for border to render correctly
     border-color: $border-subtle-selected;
@@ -86,8 +83,7 @@ $feature-flags: (
 
     &:hover {
       ::slotted([slot='image']),
-      #{$c4d-prefix}-image,
-      .#{$prefix}--image {
+      #{$c4d-prefix}-image {
         &::before {
           opacity: 0.08;
         }
@@ -108,8 +104,7 @@ $feature-flags: (
     }
 
     ::slotted([slot='image']),
-    #{$c4d-prefix}-image,
-    .#{$prefix}--image {
+    #{$c4d-prefix}-image {
       width: 100%;
       height: aspect-ratio(2, 1);
 
@@ -163,14 +158,6 @@ $feature-flags: (
         justify-content: space-between;
       }
 
-      #{$prefix}--card__heading {
-        margin: 0;
-        width: 100%;
-        padding: carbon--mini-units(2);
-        padding-right: 10%;
-        padding-bottom: $spacing-07;
-      }
-
       .#{$prefix}--card__footer {
         padding-top: 0;
         margin-top: carbon--mini-units(-4);
@@ -192,10 +179,6 @@ $feature-flags: (
       margin: 0;
     }
 
-    .#{$prefix}--card__heading {
-      margin-bottom: $spacing-07;
-    }
-
     .#{$prefix}--card__wrapper {
       width: 100%;
       height: aspect-ratio(2, 1);
@@ -214,8 +197,7 @@ $feature-flags: (
     // image
 
     ::slotted([slot='image']),
-    #{$c4d-prefix}-image,
-    .#{$prefix}--image {
+    #{$c4d-prefix}-image {
       z-index: 0;
 
       @include breakpoint(md) {
@@ -309,8 +291,7 @@ $feature-flags: (
       }
 
       ::slotted([slot='image']),
-      #{$c4d-prefix}-image,
-      .#{$prefix}--image {
+      #{$c4d-prefix}-image {
         z-index: 0;
 
         @include breakpoint(md) {
@@ -323,10 +304,7 @@ $feature-flags: (
           height: 100%;
         }
       }
-
-      .#{$prefix}--image {
-        overflow-y: hidden;
-      }
+     
     }
 
     .#{$prefix}--card__wrapper {
@@ -341,8 +319,6 @@ $feature-flags: (
         }
       }
 
-      .#{$prefix}--card__eyebrow,
-      .#{$prefix}--card__heading,
       .#{$prefix}--card__copy,
       ::slotted(#{$c4d-prefix}-card-eyebrow),
       ::slotted(#{$c4d-prefix}-card-heading) {
@@ -366,12 +342,6 @@ $feature-flags: (
         }
       }
 
-      .#{$prefix}--card__eyebrow,
-      ::slotted(#{$c4d-prefix}-card-eyebrow) {
-        margin: 0 0 $spacing-03 0;
-      }
-
-      .#{$prefix}--card__heading,
       ::slotted(#{$c4d-prefix}-card-heading) {
         margin-bottom: $spacing-07;
 
@@ -422,40 +392,11 @@ $feature-flags: (
       }
     }
 
-    // special breakpoint for no copy present
-    &.#{$prefix}--feature-card-large_no-copy-text {
-      @include breakpoint($fcb-large-custom-bp-nocopy) {
-        padding-top: aspect-ratio(2, 1);
-      }
-
-      .#{$prefix}--card {
-        @include breakpoint($fcb-large-custom-bp-nocopy) {
-          position: absolute;
-          top: 0;
-          left: 0;
-          right: 0;
-          bottom: 0;
-          flex-direction: row;
-
-          &__wrapper,
-          .#{$prefix}--image {
-            width: 50%;
-            height: 100%;
-          }
-        }
-      }
-    }
   }
 
   :host(#{$c4d-prefix}-feature-card-footer)
     .#{$c4d-prefix}-ce--card__footer
-    ::slotted(svg[slot='icon']),
-  .#{$prefix}--feature-card-large
-    .#{$prefix}--feature-card-large__card.#{$prefix}--tile
-    .#{$prefix}--card__cta,
-  .#{$prefix}--feature-card-large
-    .#{$prefix}--feature-card-large__card.#{$prefix}--tile
-    .#{$prefix}--card__cta:visited {
+    ::slotted(svg[slot='icon']) {
     margin-top: auto;
     float: none;
 
@@ -482,7 +423,6 @@ $feature-flags: (
   :host(#{$c4d-prefix}-feature-cta)[color-scheme='inverse'] {
     border-color: $border-inverse;
 
-    .#{$prefix}--card__heading,
     ::slotted(#{$c4d-prefix}-card-heading) {
       color: $icon-inverse;
     }
@@ -496,8 +436,7 @@ $feature-flags: (
     }
 
     ::slotted([slot='image']),
-    #{$c4d-prefix}-image,
-    .#{$prefix}--image {
+    #{$c4d-prefix}-image {
       &::before {
         background-color: $icon-inverse;
       }
@@ -511,10 +450,7 @@ $feature-flags: (
   :host(
       #{$c4d-prefix}-feature-cta:not([size='large'])
     )[color-scheme='inverse'] {
-    .#{$prefix}--card__heading {
-      color: $icon-inverse;
-    }
-
+    
     .#{$prefix}--card__wrapper {
       background-color: $background-inverse;
     }
@@ -535,19 +471,15 @@ $feature-flags: (
     .#{$prefix}--card__wrapper {
       background-color: $background-inverse;
 
-      .#{$prefix}--card__eyebrow,
-      .#{$prefix}--card__heading,
       .#{$prefix}--card__copy,
       ::slotted(#{$c4d-prefix}-card-eyebrow),
       ::slotted(#{$c4d-prefix}-card-heading) {
         color: $icon-inverse;
       }
-      .#{$prefix}--card__eyebrow,
       ::slotted(#{$c4d-prefix}-card-eyebrow) {
         color: $icon-inverse;
       }
 
-      .#{$prefix}--card__heading,
       ::slotted(#{$c4d-prefix}-card-heading) {
         color: $icon-inverse;
       }

From 1d6a788bd50852dfced62ffda90a5ea87faa7af3 Mon Sep 17 00:00:00 2001
From: Sangeetha Babu <58620134+sangeethababu9223@users.noreply.github.com>
Date: Wed, 13 Dec 2023 12:31:40 +0530
Subject: [PATCH 15/26] feat(ibmdotcom styles): remove react classes from in
 page banner

---
 .../scss/components/in-page-banner/_in-page-banner.scss     | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/styles/scss/components/in-page-banner/_in-page-banner.scss b/packages/styles/scss/components/in-page-banner/_in-page-banner.scss
index 7856c7c73f1..a76ff374485 100644
--- a/packages/styles/scss/components/in-page-banner/_in-page-banner.scss
+++ b/packages/styles/scss/components/in-page-banner/_in-page-banner.scss
@@ -25,8 +25,7 @@
     }
 
     ::slotted(#{$c4d-prefix}-content-group-heading),
-    .#{$prefix}--content-layout ::slotted([slot='heading']),
-    .#{$prefix}--content-group__title {
+    .#{$prefix}--content-layout ::slotted([slot='heading']) {
       margin-bottom: 0;
 
       @include breakpoint(md) {
@@ -39,8 +38,7 @@
     }
 
     ::slotted(#{$c4d-prefix}-link-list),
-    .#{$prefix}--content-layout ::slotted([slot='complementary']),
-    .#{$prefix}--link-list__list {
+    .#{$prefix}--content-layout ::slotted([slot='complementary']) {
       position: relative;
       grid-area: auto;
       margin-top: $spacing-07;

From eac726d414e096aec81f7648726fe0dbf3b2bbbe Mon Sep 17 00:00:00 2001
From: Sangeetha Babu <58620134+sangeethababu9223@users.noreply.github.com>
Date: Wed, 13 Dec 2023 12:34:37 +0530
Subject: [PATCH 16/26] feat(ibmdotcom styles): remove react classes from
 leadspace block

---
 .../scss/components/leadspace-block/_leadspace-block.scss   | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/styles/scss/components/leadspace-block/_leadspace-block.scss b/packages/styles/scss/components/leadspace-block/_leadspace-block.scss
index 7d2608d8c43..07a2993c397 100644
--- a/packages/styles/scss/components/leadspace-block/_leadspace-block.scss
+++ b/packages/styles/scss/components/leadspace-block/_leadspace-block.scss
@@ -81,8 +81,7 @@
   }
 
   :host(#{$c4d-prefix}-leadspace-block-content)
-    ::slotted(#{$c4d-prefix}-link-list),
-  .#{$prefix}--leadspace-block .#{$prefix}--link-list {
+    ::slotted(#{$c4d-prefix}-link-list) {
     display: block;
     padding-bottom: $spacing-09;
     margin-right: 0;
@@ -93,8 +92,7 @@
     }
   }
 
-  :host(#{$c4d-prefix}-leadspace-block-media),
-  .#{$prefix}--leadspace-block .#{$prefix}--leadspace-block__media {
+  :host(#{$c4d-prefix}-leadspace-block-media) {
     display: block;
     max-width: carbon--mini-units(80);
     padding-bottom: $spacing-07;

From 5a9c0ea44130752707f6e39974dbac0f6c48e37f Mon Sep 17 00:00:00 2001
From: Sangeetha Babu <58620134+sangeethababu9223@users.noreply.github.com>
Date: Wed, 13 Dec 2023 12:47:37 +0530
Subject: [PATCH 17/26] feat(ibmdotcom styles): remove react classes from light
 media viewer

---
 .../_lightbox-media-viewer.scss                    | 14 --------------
 1 file changed, 14 deletions(-)

diff --git a/packages/styles/scss/components/lightbox-media-viewer/_lightbox-media-viewer.scss b/packages/styles/scss/components/lightbox-media-viewer/_lightbox-media-viewer.scss
index f357b6f8fda..fdd83540cc4 100644
--- a/packages/styles/scss/components/lightbox-media-viewer/_lightbox-media-viewer.scss
+++ b/packages/styles/scss/components/lightbox-media-viewer/_lightbox-media-viewer.scss
@@ -66,20 +66,6 @@
         padding-top: Min(calc(100vh - #{$spacing-13}), 56.25%);
       }
     }
-
-    @include breakpoint(md) {
-      .#{$prefix}--model-container {
-        padding-top: $spacing-10;
-        padding-bottom: 0;
-      }
-    }
-
-    @include breakpoint(lg) {
-      .#{$prefix}--model-container {
-        padding-top: $spacing-09;
-        padding-bottom: $spacing-05;
-      }
-    }
   }
 
   :host(#{$c4d-prefix}-lightbox-media-viewer-body),

From ee72562b28fa90114dc53851a47f5be2336b9fb4 Mon Sep 17 00:00:00 2001
From: Sangeetha Babu <58620134+sangeethababu9223@users.noreply.github.com>
Date: Wed, 13 Dec 2023 14:35:50 +0530
Subject: [PATCH 18/26] feat(ibmdotcom styles): remove react classes from link
 list

---
 .../link-with-icon/_link-with-icon.scss       | 19 +------------------
 1 file changed, 1 insertion(+), 18 deletions(-)

diff --git a/packages/styles/scss/components/link-with-icon/_link-with-icon.scss b/packages/styles/scss/components/link-with-icon/_link-with-icon.scss
index 4e5e43b59f3..62758cc8ef8 100644
--- a/packages/styles/scss/components/link-with-icon/_link-with-icon.scss
+++ b/packages/styles/scss/components/link-with-icon/_link-with-icon.scss
@@ -49,24 +49,8 @@
       color: $text-disabled;
     }
 
-    &.#{$prefix}--link-with-icon__icon-left,
-    .#{$prefix}--link-with-icon.#{$prefix}--link-with-icon--inline-icon.#{$prefix}--link-with-icon__icon-left {
-      display: flex;
-      justify-content: flex-end;
-      flex-direction: row-reverse;
-
-      svg,
-      ::slotted(svg[slot='icon']) {
-        align-self: start;
-        position: relative;
-        margin-left: 0;
-        margin-right: $spacing-03;
-        top: 1px;
-      }
-    }
   }
 
-  .#{$prefix}--link-with-icon__container,
   :host(#{$c4d-prefix}-callout-link-with-icon),
   :host(#{$c4d-prefix}-card-cta-footer),
   :host(#{$c4d-prefix}-card-footer),
@@ -133,8 +117,7 @@
     }
   }
 
-  :host(#{$c4d-prefix}-link-with-icon),
-  .#{$prefix}--link-with-icon__container {
+  :host(#{$c4d-prefix}-link-with-icon) {
     display: table;
   }
 }

From 73344c1ddcd036e60c64fc7f56ed135bc0b3966c Mon Sep 17 00:00:00 2001
From: Sangeetha Babu <58620134+sangeethababu9223@users.noreply.github.com>
Date: Wed, 13 Dec 2023 14:59:01 +0530
Subject: [PATCH 19/26] feat(ibmdotcom styles): remove react classes from logo
 grid

---
 .../scss/components/logo-grid/_logo-grid.scss | 63 -------------------
 1 file changed, 63 deletions(-)

diff --git a/packages/styles/scss/components/logo-grid/_logo-grid.scss b/packages/styles/scss/components/logo-grid/_logo-grid.scss
index 025a2887116..d056abfd190 100644
--- a/packages/styles/scss/components/logo-grid/_logo-grid.scss
+++ b/packages/styles/scss/components/logo-grid/_logo-grid.scss
@@ -20,7 +20,6 @@
 @use '../../internal/content-block';
 
 @mixin logo-grid {
-  .#{$prefix}--logo-grid,
   :host(#{$c4d-prefix}-logo-grid) {
     .#{$prefix}--content-block {
       padding-top: 0;
@@ -38,10 +37,6 @@
       }
     }
 
-    .#{$prefix}--card__wrapper {
-      width: 100%;
-    }
-
     .#{$prefix}--content-block__cta {
       margin-top: $spacing-09;
 
@@ -55,31 +50,6 @@
       }
     }
 
-    .#{$prefix}--card__CTA {
-      max-width: 100%;
-      margin-left: 0;
-    }
-
-    .#{$prefix}--image {
-      display: block;
-      background: $icon-inverse;
-      overflow-y: hidden;
-      padding-top: aspect-ratio(288px, 216px);
-      position: relative;
-
-      &:active img {
-        border: 1px $layer-accent-01 solid;
-      }
-
-      img {
-        position: absolute;
-        top: 0;
-        display: block;
-        width: 100%;
-        height: auto;
-        object-fit: cover;
-      }
-    }
   }
 
   :host(#{$c4d-prefix}-logo-grid) {
@@ -88,38 +58,14 @@
     }
   }
 
-  .#{$prefix}--logo-grid__no-border {
-    .#{$prefix}--logo-grid__container {
-      border-bottom: none;
-    }
-  }
-
-  .#{$prefix}--logo-grid__link {
-    display: block;
-
-    &:active .#{$prefix}--logo-grid__logo {
-      box-shadow: inset 0 0 0 1px $layer-accent-01;
-    }
-  }
-
   .#{$prefix}--logo-grid__row {
     display: grid;
     margin-left: calc(-1 * math.div($grid-gutter, 2));
     margin-right: calc(-1 * math.div($grid-gutter, 2));
     grid-template-columns: repeat(2, 1fr);
 
-    @include breakpoint(md) {
-      &.#{$prefix}--logo-grid__4-columns {
-        grid-template-columns: repeat(4, 1fr);
-      }
-    }
-
     @include breakpoint(lg) {
       grid-template-columns: repeat(3, 1fr);
-
-      &.#{$prefix}--logo-grid__4-columns {
-        grid-template-columns: repeat(4, 1fr);
-      }
     }
   }
 
@@ -152,19 +98,10 @@
     }
   }
 
-  .#{$prefix}--logo-grid__heading {
-    @include type-style('fluid-heading-05', true);
-
-    width: 90%;
-    margin-top: $spacing-07;
-    margin-bottom: $spacing-07;
-  }
-
   .#{$prefix}--content-layout__body {
     display: block;
   }
 
-  .#{$prefix}--logo-grid__wrapper,
   .#{$prefix}--content-layout--logo-grid {
     width: 100%;
     margin-bottom: $spacing-13;

From c831a3f160e908e14f0b09c39efaa7071c53449d Mon Sep 17 00:00:00 2001
From: Sangeetha Babu <58620134+sangeethababu9223@users.noreply.github.com>
Date: Wed, 13 Dec 2023 15:33:28 +0530
Subject: [PATCH 20/26] feat(ibmdotcom styles): remove react classes from quote

---
 .../styles/scss/components/quote/_quote.scss  | 50 -------------------
 1 file changed, 50 deletions(-)

diff --git a/packages/styles/scss/components/quote/_quote.scss b/packages/styles/scss/components/quote/_quote.scss
index c09bd75382e..82b2abee87c 100644
--- a/packages/styles/scss/components/quote/_quote.scss
+++ b/packages/styles/scss/components/quote/_quote.scss
@@ -22,11 +22,6 @@
     padding-bottom: $spacing-10;
     display: block;
     @include hang;
-
-    .#{$prefix}--link-with-icon__container {
-      padding-left: $spacing-05;
-      max-width: 80%;
-    }
   }
 
   .#{$prefix}--quote__container {
@@ -70,24 +65,6 @@
     left: 0.6rem;
   }
 
-  .#{$prefix}--quote__mark-corner-bracket {
-    @include breakpoint(sm) {
-      left: 0.6rem;
-    }
-
-    @include breakpoint(md) {
-      left: calc(-1 * #{$spacing-03});
-    }
-
-    @include breakpoint(lg) {
-      left: calc(-1 * #{$spacing-05});
-    }
-
-    @include breakpoint(max) {
-      left: calc(-1 * #{$spacing-07});
-    }
-  }
-
   .#{$prefix}--quote__source {
     @include make-col-ready;
 
@@ -137,37 +114,10 @@
     }
   }
 
-  .#{$prefix}--callout__container,
   :host(#{$c4d-prefix}-callout) {
     @include make-row;
   }
 
-  .#{$prefix}--callout__column {
-    @include make-col-ready;
-  }
-
-  .#{$prefix}--callout__content {
-    @include breakpoint(sm) {
-      padding-top: $spacing-07;
-    }
-
-    @include breakpoint(md) {
-      @include make-col-offset(1, 8);
-      @include make-col(6, 8);
-
-      padding-left: $spacing-02;
-      padding-right: $spacing-02;
-      padding-top: $spacing-10;
-    }
-
-    @include breakpoint(lg) {
-      padding-left: $spacing-01;
-      padding-right: $spacing-01;
-      @include make-col-offset(1, 12);
-      @include make-col(10, 12);
-    }
-  }
-
   :host(#{$c4d-prefix}-quote) #{$c4d-prefix}-hr {
     margin: $spacing-05;
     @include breakpoint(md) {

From 598f9b41373ec8bd58a74ad207c9238551267390 Mon Sep 17 00:00:00 2001
From: Sangeetha Babu <58620134+sangeethababu9223@users.noreply.github.com>
Date: Wed, 13 Dec 2023 15:44:14 +0530
Subject: [PATCH 21/26] feat(ibmdotcom styles): remove react classes from table
 of contents

---
 .../tableofcontents/_table-of-contents.scss          | 12 ------------
 1 file changed, 12 deletions(-)

diff --git a/packages/styles/scss/components/tableofcontents/_table-of-contents.scss b/packages/styles/scss/components/tableofcontents/_table-of-contents.scss
index 219bef2dbd9..7a0930cbb78 100644
--- a/packages/styles/scss/components/tableofcontents/_table-of-contents.scss
+++ b/packages/styles/scss/components/tableofcontents/_table-of-contents.scss
@@ -362,18 +362,6 @@ $hover-transition-timing: 95ms;
     }
   }
 
-  .#{$prefix}--tableofcontents--g100 {
-    @include theme($g100, feature-flag-enabled('enable-css-custom-properties'));
-
-    @include themed-items;
-  }
-
-  .#{$prefix}--tableofcontents--g10 {
-    @include theme($g10, feature-flag-enabled('enable-css-custom-properties'));
-
-    @include themed-items;
-  }
-
   .#{$prefix}--toc__print-styles {
     display: none;
   }

From 6eda49b7c3db398bb14d347af5aca14ff835a49b Mon Sep 17 00:00:00 2001
From: Sangeetha Babu <58620134+sangeethababu9223@users.noreply.github.com>
Date: Thu, 14 Dec 2023 11:17:01 +0530
Subject: [PATCH 22/26] feat(ibmdotcom styles): remove react classes from
 dotcom shell

---
 .../styles/scss/components/dotcom-shell/_dotcom-shell.scss     | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/styles/scss/components/dotcom-shell/_dotcom-shell.scss b/packages/styles/scss/components/dotcom-shell/_dotcom-shell.scss
index bf563a8ee71..01ea4d6312a 100644
--- a/packages/styles/scss/components/dotcom-shell/_dotcom-shell.scss
+++ b/packages/styles/scss/components/dotcom-shell/_dotcom-shell.scss
@@ -12,8 +12,7 @@
 @use '../masthead';
 
 @mixin dotcom-shell {
-  :host(#{$c4d-prefix}-dotcom-shell),
-  .#{$prefix}--dotcom-shell {
+  :host(#{$c4d-prefix}-dotcom-shell) {
     display: flex;
     flex-direction: column;
     padding-top: $spacing-09;

From a4fab125431f38bb3ca7eefd2497e88a7d4f85b0 Mon Sep 17 00:00:00 2001
From: Sangeetha Babu <58620134+sangeethababu9223@users.noreply.github.com>
Date: Fri, 15 Dec 2023 11:29:12 +0530
Subject: [PATCH 23/26] feat(ibmdotcom styles): remove react classes from
 footer

---
 .../scss/components/footer/_footer-logo.scss  |   3 +-
 .../components/footer/_footer-nav-group.scss  |  16 +--
 .../scss/components/footer/_footer-nav.scss   |   7 --
 .../scss/components/footer/_footer.scss       |  44 +-------
 .../scss/components/footer/_legal-nav.scss    | 100 +-----------------
 .../components/footer/_locale-button.scss     |  19 +---
 6 files changed, 6 insertions(+), 183 deletions(-)

diff --git a/packages/styles/scss/components/footer/_footer-logo.scss b/packages/styles/scss/components/footer/_footer-logo.scss
index 2c0f7836bf9..79774f2f1b5 100644
--- a/packages/styles/scss/components/footer/_footer-logo.scss
+++ b/packages/styles/scss/components/footer/_footer-logo.scss
@@ -21,8 +21,7 @@
 /// @group footer
 
 @mixin footer-logo {
-  :host(#{$c4d-prefix}-footer-logo),
-  .#{$prefix}--footer-logo {
+  :host(#{$c4d-prefix}-footer-logo) {
     @include theme($g100, feature-flag-enabled('enable-css-custom-properties'));
 
     &:focus-visible {
diff --git a/packages/styles/scss/components/footer/_footer-nav-group.scss b/packages/styles/scss/components/footer/_footer-nav-group.scss
index 74907e0f7ef..294612fa612 100644
--- a/packages/styles/scss/components/footer/_footer-nav-group.scss
+++ b/packages/styles/scss/components/footer/_footer-nav-group.scss
@@ -19,9 +19,7 @@
 /// @group footer
 
 @mixin footer-nav-group {
-  :host(#{$c4d-prefix}-footer-nav-group),
-  .#{$prefix}--footer-nav-group,
-  .#{$prefix}--footer-nav-group.#{$prefix}--accordion__item {
+  :host(#{$c4d-prefix}-footer-nav-group) {
     @include theme($g100, feature-flag-enabled('enable-css-custom-properties'));
 
     padding-left: 0;
@@ -47,10 +45,6 @@
       }
     }
 
-    .#{$prefix}--accordion__arrow {
-      margin: 2px $spacing-05 0 0;
-    }
-
     @include breakpoint(md) {
       @include make-col-ready;
 
@@ -58,14 +52,6 @@
       display: inline-block;
       margin-bottom: $spacing-09;
 
-      &.#{$prefix}--accordion__item {
-        border-top: 0 transparent;
-      }
-
-      .#{$prefix}--accordion__heading {
-        display: none;
-      }
-
       .#{$prefix}--accordion__content {
         display: block;
         height: auto;
diff --git a/packages/styles/scss/components/footer/_footer-nav.scss b/packages/styles/scss/components/footer/_footer-nav.scss
index 2fb5742ea7f..3ce3b1d0954 100644
--- a/packages/styles/scss/components/footer/_footer-nav.scss
+++ b/packages/styles/scss/components/footer/_footer-nav.scss
@@ -38,13 +38,6 @@
       @include make-col(12, 16);
     }
 
-    .#{$prefix}--accordion__heading {
-      display: flex;
-      align-items: center;
-      min-height: $spacing-09;
-      padding: 0;
-    }
-
     ::slotted([slot='locale-button']),
     ::slotted([slot='language-selector']) {
       display: inline-block;
diff --git a/packages/styles/scss/components/footer/_footer.scss b/packages/styles/scss/components/footer/_footer.scss
index ca0741cd0e2..6eba66cc24f 100644
--- a/packages/styles/scss/components/footer/_footer.scss
+++ b/packages/styles/scss/components/footer/_footer.scss
@@ -38,15 +38,6 @@
     background-color: $background;
     padding-top: $spacing-09;
 
-    .#{$prefix}--modal-content {
-      .#{$prefix}--link {
-        &,
-        &:visited {
-          color: $icon-inverse;
-        }
-      }
-    }
-
     @include breakpoint-down(md) {
       ::slotted([slot='brand']) {
         margin-bottom: $spacing-09;
@@ -94,17 +85,6 @@
       }
     }
 
-    .#{$prefix}--language-selector__container {
-      padding: 0;
-    }
-
-    .#{$prefix}--locale-btn__container {
-      flex-basis: auto;
-      button {
-        border: none;
-      }
-    }
-
     .#{$prefix}--legal-nav {
       border-top: 0;
     }
@@ -143,18 +123,6 @@
 
   :host(#{$c4d-prefix}-legal-nav) {
     @include theme($g100, feature-flag-enabled('enable-css-custom-properties'));
-
-    .#{$prefix}--legal-nav__list {
-      .#{$prefix}--legal-nav__list-item {
-        .#{$prefix}--link {
-          color: $text-secondary;
-
-          &:hover {
-            color: $text-primary;
-          }
-        }
-      }
-    }
   }
 
   .#{$prefix}--footer__main {
@@ -167,8 +135,7 @@
 
     flex-direction: column;
 
-    :host(#{$c4d-prefix}-footer[size='short']) &,
-    .#{$prefix}--footer--short & {
+    :host(#{$c4d-prefix}-footer[size='short']) & {
       flex-direction: row;
     }
 
@@ -236,15 +203,6 @@
     padding-top: 0;
   }
 
-  :host(#{$c4d-prefix}-footer-nav-group) {
-    .#{$prefix}--accordion__heading {
-      border-top: 1px solid $border-subtle-01;
-      padding: 0;
-      align-items: center;
-      min-height: $spacing-09;
-    }
-  }
-
   :host(#{$c4d-prefix}-footer-nav-group:last-of-type) {
     @include breakpoint-down(md) {
       border-bottom: 1px solid $border-subtle-01;
diff --git a/packages/styles/scss/components/footer/_legal-nav.scss b/packages/styles/scss/components/footer/_legal-nav.scss
index 5a660bc2486..01c2ce6a879 100644
--- a/packages/styles/scss/components/footer/_legal-nav.scss
+++ b/packages/styles/scss/components/footer/_legal-nav.scss
@@ -96,110 +96,12 @@
         @include breakpoint(lg) {
           border-top: none;
         }
-
-        .#{$prefix}--legal-nav__list-item {
-          margin-right: 0;
-          padding-top: 0;
-          height: $spacing-09;
-          display: flex;
-          align-items: center;
-
-          @include breakpoint(md) {
-            margin-right: $spacing-07;
-          }
-
-          a {
-            display: flex;
-            align-items: center;
-            width: 100%;
-          }
-        }
-      }
-
-      .#{$prefix}--locale-btn__container,
-      .#{$prefix}--language-selector__container {
-        margin: 0;
-
-        @include breakpoint(md) {
-          align-self: flex-end;
-          width: 50%;
-          border-left: 1px solid $layer-accent-01;
-        }
-
-        @include breakpoint(lg) {
-          margin: 0;
-        }
-
-        .#{$prefix}--btn--secondary,
-        .#{$prefix}--list-box,
-        .#{$prefix}--select-input {
-          background-color: $background;
-          max-width: 100%;
-
-          &:hover {
-            background-color: $background-hover;
-          }
-
-          &:active {
-            background-color: $layer-active-01;
-          }
-        }
-
-        .#{$prefix}--select {
-          max-width: 100%;
-        }
-
-        .#{$prefix}--text-input,
-        .#{$prefix}--list-box,
-        .#{$prefix}--select-input {
-          border-bottom: none;
-        }
       }
     }
   }
 
-  .#{$prefix}--legal-nav__holder {
-    padding-top: 0;
-    margin-left: 0;
-
-    @include breakpoint(md) {
-      padding-top: $spacing-03;
-      column-count: 2;
-    }
-
-    @include breakpoint(lg) {
-      column-count: 3;
-    }
-  }
-
-  .#{$prefix}--adjunct-links__holder {
-    margin-left: 0;
-    margin-top: $spacing-09;
-    padding: 0 $spacing-09 0 $spacing-05;
-    width: 100%;
-
-    @include breakpoint(md) {
-      width: 50%;
-    }
-
-    @include breakpoint(lg) {
-      margin-left: 25%;
-      width: 25%;
-    }
-
-    .#{$prefix}--legal-nav__list-item {
-      padding-top: 0;
-      margin-right: 0;
-    }
-
-    .#{$prefix}--legal-nav__list-item:not(:first-of-type) {
-      padding-top: $spacing-03;
-    }
-  }
-
   :host(#{$c4d-prefix}-legal-nav-item),
-  :host(#{$c4d-prefix}-legal-nav-cookie-preferences-placeholder) div,
-  .#{$prefix}--legal-nav__list-item {
+  :host(#{$c4d-prefix}-legal-nav-cookie-preferences-placeholder) div {
     margin-right: $spacing-07;
     padding: $spacing-03 0 0 0;
     @include type-style('body-01');
diff --git a/packages/styles/scss/components/footer/_locale-button.scss b/packages/styles/scss/components/footer/_locale-button.scss
index 79f7f18fbd6..5ca5ec8f236 100644
--- a/packages/styles/scss/components/footer/_locale-button.scss
+++ b/packages/styles/scss/components/footer/_locale-button.scss
@@ -21,8 +21,7 @@
 /// @group footer
 
 @mixin locale-button {
-  :host(#{$c4d-prefix}-locale-button),
-  .#{$prefix}--locale-btn__container {
+  :host(#{$c4d-prefix}-locale-button) {
     @include theme($g100, feature-flag-enabled('enable-css-custom-properties'));
     @include button;
     @include make-col-ready;
@@ -65,8 +64,7 @@
   }
 
   :host(#{$c4d-prefix}-footer[size='short'])
-    ::slotted(#{$c4d-prefix}-locale-button),
-  .#{$prefix}--footer--short .#{$prefix}--locale-btn__container {
+    ::slotted(#{$c4d-prefix}-locale-button) {
     margin-top: $spacing-09;
 
     @include breakpoint(md) {
@@ -82,17 +80,4 @@
       @include make-col-offset(10, 16);
     }
   }
-
-  .#{$prefix}--footer--micro {
-    .#{$prefix}--locale-btn__container {
-      padding: 0;
-      .#{$prefix}--btn--tertiary {
-        &:hover,
-        &:focus {
-          background-color: $background-hover;
-          color: $text-primary;
-        }
-      }
-    }
-  }
 }

From 1197e242b6fe3ba4b9ea85af38f8b9987d509087 Mon Sep 17 00:00:00 2001
From: Matthew Oliveira <m4olivei@gmail.com>
Date: Mon, 18 Dec 2023 10:41:42 -0500
Subject: [PATCH 24/26] feat(card): use link instead of button for pictogram
 card (#11225)

Closes #10960
[Jira ticket](https://jsw.ibm.com/browse/ADCMS-4074)

Alternate approach to fixing #10960. Previously we had attempted a resolution that wrapped the whole card in `<a></a>`. That solution introduced regressions with accessibiltiy. It's also come to my attention that the approach is a well [known poor approach](https://css-tricks.com/block-links-are-a-pain-and-maybe-just-a-bad-idea/).

This solution takes the same approach as the Default Card component, which is to wrap the footer icon in a `<a></a>` and then absolute position a pseudo element child to make the whole card clickable still. More on [the pseudo-element  method](https://css-tricks.com/block-links-the-search-for-a-perfect-solution/#aa-method-3-the-good-ol-before-pseudo-element).

**Changed**

- Wrap the footer icon in a link for the card pictogram in the same way as the default card
- Adjustment to Storybook for Card so that the body copy is used on page load

**Removed**

- Remove the `role="button"` wrapper for pictogram card
---
 .../styles/scss/components/card/_card.scss    |  2 +-
 .../card/__stories__/card.stories.ts          | 28 ++++---------------
 .../src/components/card/card.ts               | 18 ++++++------
 3 files changed, 16 insertions(+), 32 deletions(-)

diff --git a/packages/styles/scss/components/card/_card.scss b/packages/styles/scss/components/card/_card.scss
index 3b6e5c36ec0..c00098fb744 100644
--- a/packages/styles/scss/components/card/_card.scss
+++ b/packages/styles/scss/components/card/_card.scss
@@ -637,4 +637,4 @@
      position: relative;
    }
  }
- 
\ No newline at end of file
+ 
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 11413a12617..091de0ed5a4 100644
--- a/packages/web-components/src/components/card/__stories__/card.stories.ts
+++ b/packages/web-components/src/components/card/__stories__/card.stories.ts
@@ -28,6 +28,7 @@ import {
   typeOptions,
   types,
 } from '../../cta/__stories__/ctaTypeConfig';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 
 const tagGroupContent = html`
   <div>
@@ -185,17 +186,13 @@ 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></p> ` : ``}
+      ${copy ? unsafeHTML(`<p>${copy}</p>`) : ``}
       ${tagGroup ? html` ${tagGroupContent} ` : ``}
       <svg
         slot="pictogram"
@@ -283,11 +280,6 @@ export const Static = (args) => {
     ctaCopy,
   } = args?.Card ?? {};
 
-  const copyComponent = document.querySelector('c4d-card')?.querySelector('p');
-  if (copyComponent) {
-    copyComponent!.innerHTML = copy;
-  }
-
   return html`
     <c4d-card>
       ${image
@@ -300,7 +292,7 @@ export const Static = (args) => {
         : ``}
       ${eyebrow ? html` <c4d-card-eyebrow>${eyebrow}</c4d-card-eyebrow> ` : ``}
       <c4d-card-heading>${heading}</c4d-card-heading>
-      ${copy ? html` <p></p> ` : ``}
+      ${copy ? unsafeHTML(`<p>${copy}</p>`) : ``}
       ${tagGroup ? html` ${tagGroupContent} ` : ``}
       ${cta
         ? html`
@@ -382,11 +374,6 @@ export const Link = (args) => {
     card.querySelector('c4d-card-footer')!.innerHTML = duration ?? '';
   }
 
-  const copyComponent = document.querySelector('c4d-card')?.querySelector('p');
-  if (copyComponent) {
-    copyComponent!.innerHTML = copy;
-  }
-
   return html`
     <c4d-video-cta-container>
       <c4d-card
@@ -396,7 +383,7 @@ export const Link = (args) => {
         cta-type=${ctaType}
         href=${ifDefined(href || undefined)}>
         <c4d-card-heading>${videoCopy ?? heading}</c4d-card-heading>
-        ${copy ? html` <p></p> ` : ``}
+        ${copy ? unsafeHTML(`<p>${copy}</p>`) : ``}
         <c4d-card-footer></c4d-card-footer>
       </c4d-card>
     </c4d-video-cta-container>
@@ -446,11 +433,6 @@ 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
@@ -459,7 +441,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></p> ` : ``}
+      ${copy ? unsafeHTML(`<p>${copy}</p>`) : ``}
       ${tagGroup ? html` ${tagGroupContent} ` : ``}
 
       <c4d-card-footer></c4d-card-footer>
diff --git a/packages/web-components/src/components/card/card.ts b/packages/web-components/src/components/card/card.ts
index 3990eb26d7b..bea0fa2e87c 100644
--- a/packages/web-components/src/components/card/card.ts
+++ b/packages/web-components/src/components/card/card.ts
@@ -9,6 +9,7 @@
 
 import { TemplateResult, html, LitElement } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import ArrowRight20 from '../../internal/vendor/@carbon/web-components/icons/arrow--right/20';
 import CDSLink from '../../internal/vendor/@carbon/web-components/components/link/link.js';
 import markdownToHtml from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/markdownToHtml/markdownToHtml.js';
@@ -395,14 +396,15 @@ class C4DCard extends CTAMixin(StableSelectorMixin(CDSLink)) {
   render() {
     return this._hasPictogram
       ? html`
-          <div
-            tabindex="0"
-            aria-label="${this.querySelector(`${c4dPrefix}-card-heading`)
-              ?.textContent || ''}"
-            aria-live="polite"
-            aria-describedby="${prefix}--card__copy"
-            role="button">
-            ${this._renderInner()} ${ArrowRight20()}
+          <div>
+            ${this._renderInner()}
+            <a
+              class="${`${prefix}--card__link`}"
+              href="${ifDefined(this.href)}"
+              aria-label="${this.querySelector(`${c4dPrefix}-card-heading`)
+                ?.textContent || ''}"
+              >${ArrowRight20()}</a
+            >
           </div>
         `
       : html` <div>${this._renderInner()}</div> `;

From 0654cfd0180867218f3b40d1dfec6cffe5a6a4c4 Mon Sep 17 00:00:00 2001
From: John Kaeser <jakaeser44@gmail.com>
Date: Mon, 18 Dec 2023 13:42:16 -0500
Subject: [PATCH 25/26] feat(github-actions): restore workflow for publish
 masthead v2 alpha (#11249)

### Description

Re-adds workflow that allows Innovation Team to build masthead v2 alpha CDN bundles. Workflow originally authored by @jeffchew in https://github.com/carbon-design-system/carbon-for-ibm-dotcom/pull/11153.

### Changelog

**New**

- Restores masthead v2 alpha CDN bundle publishing workflow.

<!-- React and Web Component deploy previews are enabled by default. -->
<!-- To enable additional available deploy previews, apply the following -->
<!-- labels for the corresponding package: -->
<!-- *** "test: e2e": Codesandbox examples and e2e integration tests -->
<!-- *** "package: services": Services -->
<!-- *** "package: utilities": Utilities -->
<!-- *** "RTL": React / Web Components (RTL) -->
<!-- *** "feature flag": React / Web Components (experimental) -->
---
 .github/workflows/publish-v2alpha-cdn.yml | 45 +++++++++++++++++++++++
 1 file changed, 45 insertions(+)
 create mode 100644 .github/workflows/publish-v2alpha-cdn.yml

diff --git a/.github/workflows/publish-v2alpha-cdn.yml b/.github/workflows/publish-v2alpha-cdn.yml
new file mode 100644
index 00000000000..d35a91961f6
--- /dev/null
+++ b/.github/workflows/publish-v2alpha-cdn.yml
@@ -0,0 +1,45 @@
+name: publish-v2alpha-cdn (Publish to CDN)
+
+on:
+  workflow_dispatch:
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  publish:
+    if: github.repository == 'carbon-design-system/carbon-for-ibm-dotcom'
+    runs-on: ubuntu-20.04
+    env:
+      SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}
+    steps:
+      - uses: actions/checkout@v4
+      - name: Use Node.js 18.x
+        uses: actions/setup-node@v4
+        with:
+          node-version: '18.x'
+          cache: 'yarn'
+      - name: Install dependencies
+        run: yarn install --immutable --immutable-cache
+      - name: Build project
+        run: yarn lerna run --ignore '@carbon/react' build
+      - name: Create CDN artifacts
+        run: yarn build:sass:cdn && yarn build:components
+        working-directory: packages/web-components
+      - name: Publish to COS (Carbon for IBM.com Web Components)
+        uses: jakejarvis/s3-sync-action@master
+        with:
+          args: --acl public-read --follow-symlinks
+        env:
+          AWS_S3_BUCKET: ${{ secrets.COS_BUCKET_COMMON }}
+          AWS_ACCESS_KEY_ID: ${{ secrets.COS_ACCESS_KEY_ID }}
+          AWS_SECRET_ACCESS_KEY: ${{ secrets.COS_SECRET_ACCESS_KEY }}
+          AWS_REGION: ${{ secrets.COS_REGION }}
+          AWS_S3_ENDPOINT: https://${{ secrets.COS_ENDPOINT }}
+          SOURCE_DIR: 'packages/web-components/dist'
+          DEST_DIR: 'common/carbon-for-ibm-dotcom/version/2.0.0.alpha.${{ github.run_id }}'
+      - uses: act10ns/slack@v2
+        with:
+          status: ${{ job.status }}
+        if: failure()

From dc9952c70ddc8a2f086395cf34c529d5fa0e501e Mon Sep 17 00:00:00 2001
From: Sangeetha Babu <58620134+sangeethababu9223@users.noreply.github.com>
Date: Tue, 16 Jan 2024 18:41:41 +0530
Subject: [PATCH 26/26] fix(ibmdotcom styles): iccon position issue fix

---
 .../components/link-with-icon/_link-with-icon.scss  | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/packages/styles/scss/components/link-with-icon/_link-with-icon.scss b/packages/styles/scss/components/link-with-icon/_link-with-icon.scss
index edecfbf9137..f5435132bc1 100644
--- a/packages/styles/scss/components/link-with-icon/_link-with-icon.scss
+++ b/packages/styles/scss/components/link-with-icon/_link-with-icon.scss
@@ -48,7 +48,20 @@
     .#{$prefix}--link--disabled {
       color: $text-disabled;
     }
+    &.#{$prefix}--link-with-icon__icon-left,
+    .#{$prefix}--link-with-icon.#{$prefix}--link-with-icon--inline-icon.#{$prefix}--link-with-icon__icon-left {
+      display: flex;
+      flex-direction: row-reverse;
+      justify-content: flex-end;
 
+      svg,
+      ::slotted(svg[slot='icon']) {
+        position: relative;
+        align-self: start;
+        inset-block-start: 1px;
+        margin-inline: 0 $spacing-03;
+      }
+    }
   }
 
   :host(#{$c4d-prefix}-callout-link-with-icon),