diff --git a/build-tools/utils/custom-css-properties.js b/build-tools/utils/custom-css-properties.js
index b977afe7cc..73511df043 100644
--- a/build-tools/utils/custom-css-properties.js
+++ b/build-tools/utils/custom-css-properties.js
@@ -178,5 +178,11 @@ const customCssPropertiesList = [
   'tokenStyleDismissColorDisabled',
   'tokenStyleDismissColorHover',
   'tokenStyleDismissColorReadOnly',
+  // Item card specific style properties
+  'styleItemCardBackgroundDefault',
+  'styleItemCardBorderColorDefault',
+  'styleItemCardBorderRadius',
+  'styleItemCardBorderWidthDefault',
+  'styleItemCardBoxShadowDefault',
 ];
 module.exports = customCssPropertiesList;
diff --git a/build-tools/utils/pluralize.js b/build-tools/utils/pluralize.js
index b627e0b364..2359e8b107 100644
--- a/build-tools/utils/pluralize.js
+++ b/build-tools/utils/pluralize.js
@@ -45,6 +45,7 @@ const pluralizationMap = {
   Icon: 'Icons',
   IconProvider: 'IconProviders',
   Input: 'Inputs',
+  ItemCard: 'ItemCards',
   KeyValuePairs: 'KeyValuePairs',
   LineChart: 'LineCharts',
   Link: 'Links',
diff --git a/pages/card/header-permutations.page.tsx b/pages/card/header-permutations.page.tsx
deleted file mode 100644
index 4fa20d613e..0000000000
--- a/pages/card/header-permutations.page.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
-// SPDX-License-Identifier: Apache-2.0
-import React from 'react';
-
-import Card from '~components/internal/components/card';
-import { InternalCardProps } from '~components/internal/components/card/interfaces';
-
-import createPermutations from '../utils/permutations';
-import PermutationsView from '../utils/permutations-view';
-import { actions, CardPage, icon, longContent, longDescription, longHeader, shortHeader } from './common';
-
-const permutations = createPermutations<InternalCardProps & { width?: number }>([
-  // With header
-  {
-    header: [shortHeader, longHeader],
-    children: [longContent],
-    description: [undefined, longDescription],
-    actions: [undefined, actions],
-    icon: [undefined, icon],
-  },
-  // Without header and without description
-  {
-    header: [undefined],
-    children: [longContent],
-    description: [undefined],
-    actions: [undefined, actions],
-    icon: [undefined, icon],
-  },
-  // Without header but with description
-  {
-    header: [undefined],
-    children: [longContent],
-    description: [longDescription],
-    actions: [undefined, actions],
-    icon: [undefined],
-  },
-]);
-
-export default function CardHeaderPermutations() {
-  return (
-    <CardPage title="Card header permutations">
-      <PermutationsView permutations={permutations} render={permutation => <Card {...permutation} />} />
-    </CardPage>
-  );
-}
diff --git a/pages/card/permutations.page.tsx b/pages/card/permutations.page.tsx
deleted file mode 100644
index 651445755d..0000000000
--- a/pages/card/permutations.page.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
-// SPDX-License-Identifier: Apache-2.0
-import React from 'react';
-
-import Card from '~components/internal/components/card';
-import { InternalCardProps } from '~components/internal/components/card/interfaces';
-
-import createPermutations from '../utils/permutations';
-import PermutationsView from '../utils/permutations-view';
-import { actions, CardPage, icon, longContent, longHeader, shortDescription } from './common';
-
-const permutations = createPermutations<InternalCardProps & { width?: number }>([
-  {
-    header: [longHeader, undefined],
-    children: [longContent, undefined],
-    description: [shortDescription, undefined],
-    actions: [actions],
-    icon: [icon],
-    disableHeaderPaddings: [false, true],
-    disableContentPaddings: [false, true],
-  },
-]);
-
-export default function CardPermutations() {
-  return (
-    <CardPage title="Card permutations">
-      <PermutationsView permutations={permutations} render={permutation => <Card {...permutation} />} />
-    </CardPage>
-  );
-}
diff --git a/pages/item-card/assets/image-placeholder.png b/pages/item-card/assets/image-placeholder.png
new file mode 100644
index 0000000000..bafb5bdb91
Binary files /dev/null and b/pages/item-card/assets/image-placeholder.png differ
diff --git a/pages/card/common.tsx b/pages/item-card/common.tsx
similarity index 68%
rename from pages/card/common.tsx
rename to pages/item-card/common.tsx
index a90ad2b91d..bc6086eef7 100644
--- a/pages/card/common.tsx
+++ b/pages/item-card/common.tsx
@@ -2,15 +2,19 @@
 // SPDX-License-Identifier: Apache-2.0
 import { ReactNode, useContext } from 'react';
 import React from 'react';
+import clsx from 'clsx';
 
+import { Box, Button, Icon } from '~components';
 import ButtonGroup from '~components/button-group';
 import FormField from '~components/form-field';
-import Icon from '~components/icon';
 import Input from '~components/input';
 import SpaceBetween from '~components/space-between';
 
 import AppContext, { AppContextType } from '../app/app-context';
 import ScreenshotArea from '../utils/screenshot-area';
+import img from './assets/image-placeholder.png';
+
+import styles from './styles.scss';
 
 type PageContext = React.Context<
   AppContextType<{
@@ -54,6 +58,18 @@ export const longDescription =
 export const longContent =
   'This is long card content with multiple sentences. It provides more detailed information and might wrap across several lines.';
 
+export const longFooter =
+  'Long card footer with multiple sentences. It provides more detailed information and might wrap across several lines.';
+
+export const shortFooter = 'Short card footer';
+
+export const reactNodeContent = (
+  <Box padding="xs">
+    <div>This is a React Node</div>
+    <Button>Test Button</Button>
+  </Box>
+);
+
 export const actions = (
   <ButtonGroup
     variant="icon"
@@ -64,4 +80,16 @@ export const actions = (
   />
 );
 
-export const icon = <Icon name="settings" />;
+export const icon = <Icon name="settings"></Icon>;
+
+export const imageContentEmbedded = (
+  <div className={clsx(styles['image-wrapper--embedded'], styles['image-wrapper'])}>
+    <img src={img} alt="Image placeholder for item card media" className={styles.image} />
+  </div>
+);
+
+export const imageContentDefault = (
+  <div className={clsx(styles['image-wrapper--default'], styles['image-wrapper'])}>
+    <img src={img} alt="Image placeholder for item card media" className={styles.image} />
+  </div>
+);
diff --git a/pages/item-card/padding-permutations.page.tsx b/pages/item-card/padding-permutations.page.tsx
new file mode 100644
index 0000000000..aadc6ba903
--- /dev/null
+++ b/pages/item-card/padding-permutations.page.tsx
@@ -0,0 +1,48 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+
+import ItemCard from '~components/item-card';
+import { ItemCardProps } from '~components/item-card/interfaces';
+
+import createPermutations from '../utils/permutations';
+import PermutationsView from '../utils/permutations-view';
+import { CardPage, longContent, longHeader, reactNodeContent, shortFooter } from './common';
+
+/* Disable-padding permutations for header, content, and footer */
+const permutations = createPermutations<ItemCardProps>([
+  // All padding toggle combinations with all slots present
+  {
+    header: [longHeader],
+    children: [longContent],
+    footer: [shortFooter],
+    disableHeaderPaddings: [false, true],
+    disableContentPaddings: [false, true],
+    disableFooterPaddings: [false, true],
+  },
+  // Disabled paddings with custom React node content
+  {
+    children: [reactNodeContent],
+    disableContentPaddings: [false, true],
+  },
+  // Header padding only (no footer)
+  {
+    header: [longHeader],
+    children: [longContent],
+    disableHeaderPaddings: [false, true],
+  },
+  // Footer padding only (no header)
+  {
+    children: [longContent],
+    footer: [shortFooter],
+    disableFooterPaddings: [false, true],
+  },
+]);
+
+export default function CardPaddingPermutations() {
+  return (
+    <CardPage title="Item card padding permutations">
+      <PermutationsView permutations={permutations} render={permutation => <ItemCard {...permutation} />} />
+    </CardPage>
+  );
+}
diff --git a/pages/item-card/permutations.page.tsx b/pages/item-card/permutations.page.tsx
new file mode 100644
index 0000000000..6a14bcf04c
--- /dev/null
+++ b/pages/item-card/permutations.page.tsx
@@ -0,0 +1,72 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+
+import ItemCard from '~components/item-card';
+import { ItemCardProps } from '~components/item-card/interfaces';
+
+import createPermutations from '../utils/permutations';
+import PermutationsView from '../utils/permutations-view';
+import {
+  actions,
+  CardPage,
+  icon,
+  longContent,
+  longDescription,
+  longFooter,
+  longHeader,
+  shortDescription,
+  shortFooter,
+  shortHeader,
+} from './common';
+
+/* Content slot combinations: header, description, children, footer, actions, icon */
+const permutations = createPermutations<ItemCardProps>([
+  // All content slots filled
+  {
+    header: [shortHeader],
+    description: [shortDescription],
+    children: [longContent],
+    footer: [shortFooter],
+    actions: [actions],
+    icon: [icon],
+  },
+  // Header variations
+  {
+    header: [shortHeader, longHeader, undefined],
+    description: [shortDescription],
+    children: [longContent],
+  },
+  // Description variations
+  {
+    header: [shortHeader],
+    description: [shortDescription, longDescription, undefined],
+    children: [longContent],
+    footer: [shortFooter],
+  },
+  // Footer variations
+  {
+    header: [longHeader],
+    children: [longContent],
+    footer: [longFooter, shortFooter, undefined],
+  },
+  // Actions with and without header
+  {
+    header: [shortHeader, undefined],
+    children: [longContent],
+    actions: [actions, undefined],
+    description: [longDescription],
+  },
+  // Minimal: content only
+  {
+    children: [longContent],
+  },
+]);
+
+export default function CardPermutations() {
+  return (
+    <CardPage title="Item card permutations">
+      <PermutationsView permutations={permutations} render={permutation => <ItemCard {...permutation} />} />
+    </CardPage>
+  );
+}
diff --git a/pages/item-card/style-custom.page.tsx b/pages/item-card/style-custom.page.tsx
new file mode 100644
index 0000000000..8c3c3642cf
--- /dev/null
+++ b/pages/item-card/style-custom.page.tsx
@@ -0,0 +1,157 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+
+import { SpaceBetween } from '~components';
+import ItemCard from '~components/item-card';
+
+import { SimplePage } from '../app/templates';
+
+export default function CustomCard() {
+  const background = 'light-dark(#ffe1e1, rgb(40, 0, 0))';
+
+  return (
+    <SimplePage
+      title="Item card with custom style api"
+      screenshotArea={{
+        style: {
+          padding: 10,
+        },
+      }}
+    >
+      <SpaceBetween size="m" direction="horizontal">
+        <ItemCard
+          disableHeaderPaddings={true}
+          style={{
+            root: {
+              background,
+              borderColor: 'green',
+              borderRadius: '8px',
+              borderWidth: '4px',
+              boxShadow: '0px 5px 5px red',
+            },
+            content: {
+              paddingBlock: '4px',
+              paddingInline: '4px',
+            },
+          }}
+        >
+          Card content
+        </ItemCard>
+
+        <ItemCard
+          header="Card header"
+          style={{
+            root: {
+              background,
+              borderColor: 'magenta',
+              borderRadius: '0px',
+              borderWidth: '1px',
+              boxShadow: '0px 5px 5px green',
+            },
+            content: {
+              paddingBlock: '20px',
+              paddingInline: '40px',
+            },
+            header: {
+              paddingBlock: '20px',
+              paddingInline: '40px',
+            },
+          }}
+        >
+          Card content
+        </ItemCard>
+
+        <ItemCard
+          footer="Card footer"
+          style={{
+            root: {
+              background,
+              borderColor: '#000',
+              borderRadius: '20px',
+              borderWidth: '3px',
+              boxShadow: '0px 5px 5px blue',
+            },
+            content: {
+              paddingBlock: '40px',
+              paddingInline: '40px',
+            },
+            footer: {
+              root: {
+                paddingBlock: '40px',
+                paddingInline: '40px',
+              },
+              divider: {
+                borderColor: '#000',
+                borderWidth: '3px',
+              },
+            },
+          }}
+        >
+          Card content
+        </ItemCard>
+
+        <ItemCard
+          header="Card header"
+          footer="Card footer"
+          style={{
+            root: {
+              background,
+              borderColor: 'blue',
+              borderRadius: '40px',
+              borderWidth: '4px',
+              boxShadow: '5px 5px 5px pink',
+            },
+            header: {
+              paddingBlock: '60px',
+              paddingInline: '10px',
+            },
+            footer: {
+              root: {
+                paddingBlock: '60px',
+                paddingInline: '10px',
+              },
+              divider: {
+                borderWidth: '0px',
+              },
+            },
+          }}
+        />
+
+        <ItemCard
+          header="Card header"
+          footer="Card footer"
+          style={{
+            root: {
+              background,
+              borderColor: 'purple',
+              borderRadius: '240px',
+              borderWidth: '6px',
+              boxShadow: '0px 5px 5px orange',
+            },
+            content: {
+              paddingBlock: '20px',
+              paddingInline: '140px',
+            },
+            header: {
+              paddingBlock: '20px 0px',
+              paddingInline: '140px',
+            },
+            footer: {
+              root: {
+                paddingBlock: '40px',
+                paddingInline: '140px',
+              },
+              divider: {
+                borderColor: 'purple',
+                borderWidth: '6px',
+              },
+            },
+          }}
+        >
+          Card content
+        </ItemCard>
+      </SpaceBetween>
+    </SimplePage>
+  );
+}
diff --git a/pages/item-card/styles.scss b/pages/item-card/styles.scss
new file mode 100644
index 0000000000..18c55c1cd9
--- /dev/null
+++ b/pages/item-card/styles.scss
@@ -0,0 +1,30 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+@use '~design-tokens' as awsui;
+
+.image-wrapper {
+  block-size: 250px;
+  overflow: hidden;
+  &--embedded {
+    padding-block-start: 6px;
+    border-start-start-radius: awsui.$border-radius-card-embedded;
+    border-start-end-radius: awsui.$border-radius-card-embedded;
+    border-end-start-radius: awsui.$border-radius-card-embedded;
+    border-end-end-radius: awsui.$border-radius-card-embedded;
+  }
+  &--default {
+    padding-block-start: 12px;
+    border-start-start-radius: awsui.$border-radius-card-default;
+    border-start-end-radius: awsui.$border-radius-card-default;
+    border-end-start-radius: awsui.$border-radius-card-default;
+    border-end-end-radius: awsui.$border-radius-card-default;
+  }
+}
+
+.image {
+  block-size: 100%;
+  inline-size: 100%;
+  object-fit: 'cover';
+}
diff --git a/pages/item-card/variant-permutations.page.tsx b/pages/item-card/variant-permutations.page.tsx
new file mode 100644
index 0000000000..b2d588c41f
--- /dev/null
+++ b/pages/item-card/variant-permutations.page.tsx
@@ -0,0 +1,70 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+
+import ItemCard from '~components/item-card';
+import { ItemCardProps } from '~components/item-card/interfaces';
+
+import createPermutations from '../utils/permutations';
+import PermutationsView from '../utils/permutations-view';
+import {
+  actions,
+  CardPage,
+  icon,
+  imageContentDefault,
+  imageContentEmbedded,
+  longContent,
+  longDescription,
+  shortDescription,
+  shortFooter,
+  shortHeader,
+} from './common';
+
+/* Visual variant permutations: default vs embedded */
+const permutations = createPermutations<ItemCardProps>([
+  // Variants with all slots
+  {
+    header: [shortHeader],
+    description: [shortDescription],
+    children: [longContent],
+    footer: [shortFooter],
+    actions: [actions],
+    icon: [icon],
+    variant: ['default', 'embedded'],
+  },
+  // Variants with minimal content
+  {
+    children: [longContent],
+    variant: ['default', 'embedded'],
+  },
+  // Variants with header only
+  {
+    header: [shortHeader],
+    children: [longContent],
+    variant: ['default', 'embedded'],
+  },
+  // Image in body (default variant)
+  {
+    header: [shortHeader],
+    description: [longDescription],
+    children: [imageContentDefault],
+    disableContentPaddings: [true],
+    variant: ['default'],
+  },
+  // Image in body (embedded variant)
+  {
+    header: [shortHeader],
+    description: [longDescription],
+    children: [imageContentEmbedded],
+    disableContentPaddings: [true],
+    variant: ['embedded'],
+  },
+]);
+
+export default function CardVariantPermutations() {
+  return (
+    <CardPage title="Item card variant permutations">
+      <PermutationsView permutations={permutations} render={permutation => <ItemCard {...permutation} />} />
+    </CardPage>
+  );
+}
diff --git a/src/__integ__/__snapshots__/themes.test.ts.snap b/src/__integ__/__snapshots__/themes.test.ts.snap
index 7f10a10e39..34358bd451 100644
--- a/src/__integ__/__snapshots__/themes.test.ts.snap
+++ b/src/__integ__/__snapshots__/themes.test.ts.snap
@@ -25,6 +25,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] =
   "border-radius-badge": "16px",
   "border-radius-button": "2px",
   "border-radius-calendar-day-focus-ring": "2px",
+  "border-radius-card-default": "0px",
+  "border-radius-card-embedded": "2px",
   "border-radius-chat-bubble": "2px",
   "border-radius-code-editor": "0px",
   "border-radius-container": "0px",
@@ -43,6 +45,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] =
   "border-table-sticky-width": "0px",
   "border-width-alert": "1px",
   "border-width-button": "1px",
+  "border-width-card": "0px",
+  "border-width-card-highlighted": "1px",
   "border-width-dropdown": "1px",
   "border-width-field": "1px",
   "border-width-icon-big": "3px",
@@ -67,6 +71,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] =
   "color-background-button-primary-disabled": "#ffffff",
   "color-background-button-primary-hover": "#0a4a74",
   "color-background-calendar-current-date": "#f2f3f3",
+  "color-background-card": "#ffffff",
   "color-background-cell-shaded": "#f2f3f3",
   "color-background-chat-bubble-incoming": "#f2f3f3",
   "color-background-chat-bubble-outgoing": "transparent",
@@ -162,6 +167,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] =
   "color-border-button-primary-disabled": "#d5dbdb",
   "color-border-calendar-grid": "#eaeded",
   "color-border-calendar-grid-selected-focus-ring": "#0073bb",
+  "color-border-card": "#eaeded",
+  "color-border-card-highlighted": "#0073bb",
   "color-border-cell-shaded": "#d5dbdb",
   "color-border-code-editor-ace-active-line-dark-theme": "#687078",
   "color-border-code-editor-ace-active-line-light-theme": "#d5dbdb",
@@ -644,6 +651,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] =
   "motion-keyframes-fade-out": "awsui-fade-out-35003c",
   "motion-keyframes-scale-popup": "awsui-none-35003c",
   "motion-keyframes-status-icon-error": "awsui-none-35003c",
+  "shadow-card": "0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15)",
   "shadow-container": "0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15)",
   "shadow-container-active": "0px 4px 8px rgba(0, 28, 36, 0.45)",
   "shadow-dropdown": "0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15)",
@@ -682,8 +690,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] =
   "space-calendar-grid-focus-outline-gutter": "0px",
   "space-calendar-grid-gutter": "0px",
   "space-calendar-grid-selected-focus-outline-gutter": "2px",
-  "space-card-horizontal": "20px",
-  "space-card-vertical": "16px",
+  "space-card-horizontal-default": "20px",
+  "space-card-horizontal-embedded": "10px",
+  "space-card-vertical-default": "16px",
+  "space-card-vertical-embedded": "8px",
   "space-code-editor-status-focus-outline-gutter": "3px",
   "space-container-content-top": "12px",
   "space-container-header-bottom": "8px",
@@ -792,6 +802,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = `
   "border-radius-badge": "16px",
   "border-radius-button": "2px",
   "border-radius-calendar-day-focus-ring": "2px",
+  "border-radius-card-default": "0px",
+  "border-radius-card-embedded": "2px",
   "border-radius-chat-bubble": "2px",
   "border-radius-code-editor": "0px",
   "border-radius-container": "0px",
@@ -810,6 +822,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = `
   "border-table-sticky-width": "0px",
   "border-width-alert": "1px",
   "border-width-button": "1px",
+  "border-width-card": "0px",
+  "border-width-card-highlighted": "1px",
   "border-width-dropdown": "1px",
   "border-width-field": "1px",
   "border-width-icon-big": "3px",
@@ -834,6 +848,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = `
   "color-background-button-primary-disabled": "#2a2e33",
   "color-background-button-primary-hover": "#00a1c9",
   "color-background-calendar-current-date": "#16191f",
+  "color-background-card": "#2a2e33",
   "color-background-cell-shaded": "#16191f",
   "color-background-chat-bubble-incoming": "#16191f",
   "color-background-chat-bubble-outgoing": "transparent",
@@ -929,6 +944,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = `
   "color-border-button-primary-disabled": "#414750",
   "color-border-calendar-grid": "#414750",
   "color-border-calendar-grid-selected-focus-ring": "#00a1c9",
+  "color-border-card": "#414750",
+  "color-border-card-highlighted": "#00a1c9",
   "color-border-cell-shaded": "#414750",
   "color-border-code-editor-ace-active-line-dark-theme": "#687078",
   "color-border-code-editor-ace-active-line-light-theme": "#d5dbdb",
@@ -1411,6 +1428,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = `
   "motion-keyframes-fade-out": "awsui-fade-out-35003c",
   "motion-keyframes-scale-popup": "awsui-none-35003c",
   "motion-keyframes-status-icon-error": "awsui-none-35003c",
+  "shadow-card": "0 1px 1px 0 rgba(0, 0, 0, 0.3), 1px 1px 1px 0 rgba(0, 0, 0, 0.3), -1px 1px 1px 0 rgba(0, 0, 0, 0.3)",
   "shadow-container": "0 1px 1px 0 rgba(0, 0, 0, 0.3), 1px 1px 1px 0 rgba(0, 0, 0, 0.3), -1px 1px 1px 0 rgba(0, 0, 0, 0.3)",
   "shadow-container-active": "0px 4px 8px rgba(0, 28, 36, 0.45)",
   "shadow-dropdown": "0 1px 1px 0 rgba(0, 0, 0, 0.3), 1px 1px 1px 0 rgba(0, 0, 0, 0.3), -1px 1px 1px 0 rgba(0, 0, 0, 0.3)",
@@ -1449,8 +1467,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = `
   "space-calendar-grid-focus-outline-gutter": "0px",
   "space-calendar-grid-gutter": "0px",
   "space-calendar-grid-selected-focus-outline-gutter": "2px",
-  "space-card-horizontal": "20px",
-  "space-card-vertical": "20px",
+  "space-card-horizontal-default": "20px",
+  "space-card-horizontal-embedded": "12px",
+  "space-card-vertical-default": "20px",
+  "space-card-vertical-embedded": "10px",
   "space-code-editor-status-focus-outline-gutter": "3px",
   "space-container-content-top": "16px",
   "space-container-header-bottom": "12px",
@@ -1559,6 +1579,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = `
   "border-radius-badge": "16px",
   "border-radius-button": "2px",
   "border-radius-calendar-day-focus-ring": "2px",
+  "border-radius-card-default": "0px",
+  "border-radius-card-embedded": "2px",
   "border-radius-chat-bubble": "2px",
   "border-radius-code-editor": "0px",
   "border-radius-container": "0px",
@@ -1577,6 +1599,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = `
   "border-table-sticky-width": "0px",
   "border-width-alert": "1px",
   "border-width-button": "1px",
+  "border-width-card": "0px",
+  "border-width-card-highlighted": "1px",
   "border-width-dropdown": "1px",
   "border-width-field": "1px",
   "border-width-icon-big": "3px",
@@ -1601,6 +1625,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = `
   "color-background-button-primary-disabled": "#ffffff",
   "color-background-button-primary-hover": "#0a4a74",
   "color-background-calendar-current-date": "#f2f3f3",
+  "color-background-card": "#ffffff",
   "color-background-cell-shaded": "#f2f3f3",
   "color-background-chat-bubble-incoming": "#f2f3f3",
   "color-background-chat-bubble-outgoing": "transparent",
@@ -1696,6 +1721,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = `
   "color-border-button-primary-disabled": "#d5dbdb",
   "color-border-calendar-grid": "#eaeded",
   "color-border-calendar-grid-selected-focus-ring": "#0073bb",
+  "color-border-card": "#eaeded",
+  "color-border-card-highlighted": "#0073bb",
   "color-border-cell-shaded": "#d5dbdb",
   "color-border-code-editor-ace-active-line-dark-theme": "#687078",
   "color-border-code-editor-ace-active-line-light-theme": "#d5dbdb",
@@ -2178,6 +2205,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = `
   "motion-keyframes-fade-out": "awsui-fade-out-35003c",
   "motion-keyframes-scale-popup": "awsui-none-35003c",
   "motion-keyframes-status-icon-error": "awsui-none-35003c",
+  "shadow-card": "0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15)",
   "shadow-container": "0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15)",
   "shadow-container-active": "0px 4px 8px rgba(0, 28, 36, 0.45)",
   "shadow-dropdown": "0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15)",
@@ -2216,8 +2244,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = `
   "space-calendar-grid-focus-outline-gutter": "0px",
   "space-calendar-grid-gutter": "0px",
   "space-calendar-grid-selected-focus-outline-gutter": "2px",
-  "space-card-horizontal": "20px",
-  "space-card-vertical": "20px",
+  "space-card-horizontal-default": "20px",
+  "space-card-horizontal-embedded": "12px",
+  "space-card-vertical-default": "20px",
+  "space-card-vertical-embedded": "10px",
   "space-code-editor-status-focus-outline-gutter": "3px",
   "space-container-content-top": "16px",
   "space-container-header-bottom": "12px",
@@ -2326,6 +2356,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion"
   "border-radius-badge": "16px",
   "border-radius-button": "2px",
   "border-radius-calendar-day-focus-ring": "2px",
+  "border-radius-card-default": "0px",
+  "border-radius-card-embedded": "2px",
   "border-radius-chat-bubble": "2px",
   "border-radius-code-editor": "0px",
   "border-radius-container": "0px",
@@ -2344,6 +2376,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion"
   "border-table-sticky-width": "0px",
   "border-width-alert": "1px",
   "border-width-button": "1px",
+  "border-width-card": "0px",
+  "border-width-card-highlighted": "1px",
   "border-width-dropdown": "1px",
   "border-width-field": "1px",
   "border-width-icon-big": "3px",
@@ -2368,6 +2402,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion"
   "color-background-button-primary-disabled": "#ffffff",
   "color-background-button-primary-hover": "#0a4a74",
   "color-background-calendar-current-date": "#f2f3f3",
+  "color-background-card": "#ffffff",
   "color-background-cell-shaded": "#f2f3f3",
   "color-background-chat-bubble-incoming": "#f2f3f3",
   "color-background-chat-bubble-outgoing": "transparent",
@@ -2463,6 +2498,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion"
   "color-border-button-primary-disabled": "#d5dbdb",
   "color-border-calendar-grid": "#eaeded",
   "color-border-calendar-grid-selected-focus-ring": "#0073bb",
+  "color-border-card": "#eaeded",
+  "color-border-card-highlighted": "#0073bb",
   "color-border-cell-shaded": "#d5dbdb",
   "color-border-code-editor-ace-active-line-dark-theme": "#687078",
   "color-border-code-editor-ace-active-line-light-theme": "#d5dbdb",
@@ -2945,6 +2982,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion"
   "motion-keyframes-fade-out": "awsui-fade-out-35003c",
   "motion-keyframes-scale-popup": "awsui-none-35003c",
   "motion-keyframes-status-icon-error": "awsui-none-35003c",
+  "shadow-card": "0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15)",
   "shadow-container": "0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15)",
   "shadow-container-active": "0px 4px 8px rgba(0, 28, 36, 0.45)",
   "shadow-dropdown": "0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15)",
@@ -2983,8 +3021,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion"
   "space-calendar-grid-focus-outline-gutter": "0px",
   "space-calendar-grid-gutter": "0px",
   "space-calendar-grid-selected-focus-outline-gutter": "2px",
-  "space-card-horizontal": "20px",
-  "space-card-vertical": "20px",
+  "space-card-horizontal-default": "20px",
+  "space-card-horizontal-embedded": "12px",
+  "space-card-vertical-default": "20px",
+  "space-card-vertical-embedded": "10px",
   "space-code-editor-status-focus-outline-gutter": "3px",
   "space-container-content-top": "16px",
   "space-container-header-bottom": "12px",
@@ -3093,6 +3133,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
   "border-radius-badge": "4px",
   "border-radius-button": "20px",
   "border-radius-calendar-day-focus-ring": "3px",
+  "border-radius-card-default": "16px",
+  "border-radius-card-embedded": "8px",
   "border-radius-chat-bubble": "8px",
   "border-radius-code-editor": "8px",
   "border-radius-container": "16px",
@@ -3111,6 +3153,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
   "border-table-sticky-width": "1px",
   "border-width-alert": "2px",
   "border-width-button": "2px",
+  "border-width-card": "1px",
+  "border-width-card-highlighted": "2px",
   "border-width-dropdown": "2px",
   "border-width-field": "1px",
   "border-width-icon-big": "3px",
@@ -3135,6 +3179,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
   "color-background-button-primary-disabled": "#ebebf0",
   "color-background-button-primary-hover": "#002b66",
   "color-background-calendar-current-date": "#f3f3f7",
+  "color-background-card": "#ffffff",
   "color-background-cell-shaded": "#f6f6f9",
   "color-background-chat-bubble-incoming": "#f6f6f9",
   "color-background-chat-bubble-outgoing": "transparent",
@@ -3230,6 +3275,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
   "color-border-button-primary-disabled": "#ebebf0",
   "color-border-calendar-grid": "transparent",
   "color-border-calendar-grid-selected-focus-ring": "#f9f9fa",
+  "color-border-card": "#c6c6cd",
+  "color-border-card-highlighted": "#006ce0",
   "color-border-cell-shaded": "#dedee3",
   "color-border-code-editor-ace-active-line-dark-theme": "#656871",
   "color-border-code-editor-ace-active-line-light-theme": "#dedee3",
@@ -3712,6 +3759,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
   "motion-keyframes-fade-out": "awsui-fade-out-35003c",
   "motion-keyframes-scale-popup": "awsui-scale-popup-35003c",
   "motion-keyframes-status-icon-error": "awsui-status-icon-error-35003c",
+  "shadow-card": "none",
   "shadow-container": "0px 0px 1px 1px #e9ebed, 0px 1px 8px 2px rgba(0, 7, 22, 0.12)",
   "shadow-container-active": "0px 1px 1px 1px #e9ebed, 0px 6px 36px #0007161a",
   "shadow-dropdown": "0px 4px 20px 1px rgba(0, 7, 22, 0.1)",
@@ -3750,8 +3798,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
   "space-calendar-grid-focus-outline-gutter": "-5px",
   "space-calendar-grid-gutter": "6px",
   "space-calendar-grid-selected-focus-outline-gutter": "-5px",
-  "space-card-horizontal": "20px",
-  "space-card-vertical": "16px",
+  "space-card-horizontal-default": "20px",
+  "space-card-horizontal-embedded": "12px",
+  "space-card-vertical-default": "16px",
+  "space-card-vertical-embedded": "10px",
   "space-code-editor-status-focus-outline-gutter": "-7px",
   "space-container-content-top": "4px",
   "space-container-header-bottom": "8px",
@@ -3860,6 +3910,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "border-radius-badge": "4px",
   "border-radius-button": "20px",
   "border-radius-calendar-day-focus-ring": "3px",
+  "border-radius-card-default": "16px",
+  "border-radius-card-embedded": "8px",
   "border-radius-chat-bubble": "8px",
   "border-radius-code-editor": "8px",
   "border-radius-container": "16px",
@@ -3878,6 +3930,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "border-table-sticky-width": "1px",
   "border-width-alert": "2px",
   "border-width-button": "2px",
+  "border-width-card": "1px",
+  "border-width-card-highlighted": "2px",
   "border-width-dropdown": "2px",
   "border-width-field": "1px",
   "border-width-icon-big": "3px",
@@ -3902,6 +3956,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-background-button-primary-disabled": "#ebebf0",
   "color-background-button-primary-hover": "#002b66",
   "color-background-calendar-current-date": "#f3f3f7",
+  "color-background-card": "#ffffff",
   "color-background-cell-shaded": "#f6f6f9",
   "color-background-chat-bubble-incoming": "#f6f6f9",
   "color-background-chat-bubble-outgoing": "transparent",
@@ -3997,6 +4052,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-border-button-primary-disabled": "#ebebf0",
   "color-border-calendar-grid": "transparent",
   "color-border-calendar-grid-selected-focus-ring": "#f9f9fa",
+  "color-border-card": "#c6c6cd",
+  "color-border-card-highlighted": "#006ce0",
   "color-border-cell-shaded": "#dedee3",
   "color-border-code-editor-ace-active-line-dark-theme": "#656871",
   "color-border-code-editor-ace-active-line-light-theme": "#dedee3",
@@ -4479,6 +4536,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "motion-keyframes-fade-out": "awsui-fade-out-35003c",
   "motion-keyframes-scale-popup": "awsui-scale-popup-35003c",
   "motion-keyframes-status-icon-error": "awsui-status-icon-error-35003c",
+  "shadow-card": "none",
   "shadow-container": "0px 0px 1px 1px #e9ebed, 0px 1px 8px 2px rgba(0, 7, 22, 0.12)",
   "shadow-container-active": "0px 1px 1px 1px #e9ebed, 0px 6px 36px #0007161a",
   "shadow-dropdown": "0px 4px 20px 1px rgba(0, 7, 22, 0.1)",
@@ -4517,8 +4575,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "space-calendar-grid-focus-outline-gutter": "-5px",
   "space-calendar-grid-gutter": "6px",
   "space-calendar-grid-selected-focus-outline-gutter": "-5px",
-  "space-card-horizontal": "20px",
-  "space-card-vertical": "12px",
+  "space-card-horizontal-default": "20px",
+  "space-card-horizontal-embedded": "10px",
+  "space-card-vertical-default": "12px",
+  "space-card-vertical-embedded": "8px",
   "space-code-editor-status-focus-outline-gutter": "-7px",
   "space-container-content-top": "4px",
   "space-container-header-bottom": "4px",
@@ -4627,6 +4687,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "border-radius-badge": "4px",
   "border-radius-button": "20px",
   "border-radius-calendar-day-focus-ring": "3px",
+  "border-radius-card-default": "16px",
+  "border-radius-card-embedded": "8px",
   "border-radius-chat-bubble": "8px",
   "border-radius-code-editor": "8px",
   "border-radius-container": "16px",
@@ -4645,6 +4707,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "border-table-sticky-width": "1px",
   "border-width-alert": "2px",
   "border-width-button": "2px",
+  "border-width-card": "1px",
+  "border-width-card-highlighted": "2px",
   "border-width-dropdown": "2px",
   "border-width-field": "1px",
   "border-width-icon-big": "3px",
@@ -4669,6 +4733,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-background-button-primary-disabled": "#232b37",
   "color-background-button-primary-hover": "#75cfff",
   "color-background-calendar-current-date": "#333843",
+  "color-background-card": "#161d26",
   "color-background-cell-shaded": "#1b232d",
   "color-background-chat-bubble-incoming": "#0f141a",
   "color-background-chat-bubble-outgoing": "transparent",
@@ -4764,6 +4829,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-border-button-primary-disabled": "#232b37",
   "color-border-calendar-grid": "transparent",
   "color-border-calendar-grid-selected-focus-ring": "#161d26",
+  "color-border-card": "#424650",
+  "color-border-card-highlighted": "#42b4ff",
   "color-border-cell-shaded": "#333843",
   "color-border-code-editor-ace-active-line-dark-theme": "#656871",
   "color-border-code-editor-ace-active-line-light-theme": "#dedee3",
@@ -5246,6 +5313,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "motion-keyframes-fade-out": "awsui-fade-out-35003c",
   "motion-keyframes-scale-popup": "awsui-scale-popup-35003c",
   "motion-keyframes-status-icon-error": "awsui-status-icon-error-35003c",
+  "shadow-card": "none",
   "shadow-container": "0px 1px 8px 2px rgba(0, 7, 22, 0.6)",
   "shadow-container-active": "0px 1px 1px 1px #192534, 0px 6px 36px #00040c",
   "shadow-dropdown": "0px 4px 20px 1px rgba(0, 4, 12, 1)",
@@ -5284,8 +5352,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "space-calendar-grid-focus-outline-gutter": "-5px",
   "space-calendar-grid-gutter": "6px",
   "space-calendar-grid-selected-focus-outline-gutter": "-5px",
-  "space-card-horizontal": "20px",
-  "space-card-vertical": "16px",
+  "space-card-horizontal-default": "20px",
+  "space-card-horizontal-embedded": "12px",
+  "space-card-vertical-default": "16px",
+  "space-card-vertical-embedded": "10px",
   "space-code-editor-status-focus-outline-gutter": "-7px",
   "space-container-content-top": "4px",
   "space-container-header-bottom": "8px",
@@ -5394,6 +5464,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "border-radius-badge": "4px",
   "border-radius-button": "20px",
   "border-radius-calendar-day-focus-ring": "3px",
+  "border-radius-card-default": "16px",
+  "border-radius-card-embedded": "8px",
   "border-radius-chat-bubble": "8px",
   "border-radius-code-editor": "8px",
   "border-radius-container": "16px",
@@ -5412,6 +5484,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "border-table-sticky-width": "1px",
   "border-width-alert": "2px",
   "border-width-button": "2px",
+  "border-width-card": "1px",
+  "border-width-card-highlighted": "2px",
   "border-width-dropdown": "2px",
   "border-width-field": "1px",
   "border-width-icon-big": "3px",
@@ -5436,6 +5510,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-background-button-primary-disabled": "#232b37",
   "color-background-button-primary-hover": "#75cfff",
   "color-background-calendar-current-date": "#333843",
+  "color-background-card": "#161d26",
   "color-background-cell-shaded": "#1b232d",
   "color-background-chat-bubble-incoming": "#0f141a",
   "color-background-chat-bubble-outgoing": "transparent",
@@ -5531,6 +5606,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-border-button-primary-disabled": "#232b37",
   "color-border-calendar-grid": "transparent",
   "color-border-calendar-grid-selected-focus-ring": "#161d26",
+  "color-border-card": "#424650",
+  "color-border-card-highlighted": "#42b4ff",
   "color-border-cell-shaded": "#333843",
   "color-border-code-editor-ace-active-line-dark-theme": "#656871",
   "color-border-code-editor-ace-active-line-light-theme": "#dedee3",
@@ -6013,6 +6090,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "motion-keyframes-fade-out": "awsui-fade-out-35003c",
   "motion-keyframes-scale-popup": "awsui-scale-popup-35003c",
   "motion-keyframes-status-icon-error": "awsui-status-icon-error-35003c",
+  "shadow-card": "none",
   "shadow-container": "0px 1px 8px 2px rgba(0, 7, 22, 0.6)",
   "shadow-container-active": "0px 1px 1px 1px #192534, 0px 6px 36px #00040c",
   "shadow-dropdown": "0px 4px 20px 1px rgba(0, 4, 12, 1)",
@@ -6051,8 +6129,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "space-calendar-grid-focus-outline-gutter": "-5px",
   "space-calendar-grid-gutter": "6px",
   "space-calendar-grid-selected-focus-outline-gutter": "-5px",
-  "space-card-horizontal": "20px",
-  "space-card-vertical": "16px",
+  "space-card-horizontal-default": "20px",
+  "space-card-horizontal-embedded": "12px",
+  "space-card-vertical-default": "16px",
+  "space-card-vertical-embedded": "10px",
   "space-code-editor-status-focus-outline-gutter": "-7px",
   "space-container-content-top": "4px",
   "space-container-header-bottom": "8px",
diff --git a/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap b/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap
index 7dcac6fe42..4deb428688 100644
--- a/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap
+++ b/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap
@@ -21,6 +21,14 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
           "$description": "The border radius of the focused day in date picker and date range picker.",
           "$value": "2px",
         },
+        "border-radius-card-default": {
+          "$description": "The border radius of default cards.",
+          "$value": "0px",
+        },
+        "border-radius-card-embedded": {
+          "$description": "The border radius of embedded cards.",
+          "$value": "2px",
+        },
         "border-radius-chat-bubble": {
           "$description": "The border radius of chat bubbles.",
           "$value": "2px",
@@ -2782,6 +2790,14 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
           "$description": "The border radius of the focused day in date picker and date range picker.",
           "$value": "2px",
         },
+        "border-radius-card-default": {
+          "$description": "The border radius of default cards.",
+          "$value": "0px",
+        },
+        "border-radius-card-embedded": {
+          "$description": "The border radius of embedded cards.",
+          "$value": "2px",
+        },
         "border-radius-chat-bubble": {
           "$description": "The border radius of chat bubbles.",
           "$value": "2px",
@@ -5543,6 +5559,14 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
           "$description": "The border radius of the focused day in date picker and date range picker.",
           "$value": "2px",
         },
+        "border-radius-card-default": {
+          "$description": "The border radius of default cards.",
+          "$value": "0px",
+        },
+        "border-radius-card-embedded": {
+          "$description": "The border radius of embedded cards.",
+          "$value": "2px",
+        },
         "border-radius-chat-bubble": {
           "$description": "The border radius of chat bubbles.",
           "$value": "2px",
@@ -8304,6 +8328,14 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
           "$description": "The border radius of the focused day in date picker and date range picker.",
           "$value": "2px",
         },
+        "border-radius-card-default": {
+          "$description": "The border radius of default cards.",
+          "$value": "0px",
+        },
+        "border-radius-card-embedded": {
+          "$description": "The border radius of embedded cards.",
+          "$value": "2px",
+        },
         "border-radius-chat-bubble": {
           "$description": "The border radius of chat bubbles.",
           "$value": "2px",
@@ -11065,6 +11097,14 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
           "$description": "The border radius of the focused day in date picker and date range picker.",
           "$value": "2px",
         },
+        "border-radius-card-default": {
+          "$description": "The border radius of default cards.",
+          "$value": "0px",
+        },
+        "border-radius-card-embedded": {
+          "$description": "The border radius of embedded cards.",
+          "$value": "2px",
+        },
         "border-radius-chat-bubble": {
           "$description": "The border radius of chat bubbles.",
           "$value": "2px",
@@ -13826,6 +13866,14 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
           "$description": "The border radius of the focused day in date picker and date range picker.",
           "$value": "2px",
         },
+        "border-radius-card-default": {
+          "$description": "The border radius of default cards.",
+          "$value": "0px",
+        },
+        "border-radius-card-embedded": {
+          "$description": "The border radius of embedded cards.",
+          "$value": "2px",
+        },
         "border-radius-chat-bubble": {
           "$description": "The border radius of chat bubbles.",
           "$value": "2px",
@@ -16587,6 +16635,14 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
       "$description": "The border radius of the focused day in date picker and date range picker.",
       "$value": "2px",
     },
+    "border-radius-card-default": {
+      "$description": "The border radius of default cards.",
+      "$value": "0px",
+    },
+    "border-radius-card-embedded": {
+      "$description": "The border radius of embedded cards.",
+      "$value": "2px",
+    },
     "border-radius-chat-bubble": {
       "$description": "The border radius of chat bubbles.",
       "$value": "2px",
@@ -19353,6 +19409,14 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The border radius of the focused day in date picker and date range picker.",
           "$value": "3px",
         },
+        "border-radius-card-default": {
+          "$description": "The border radius of default cards.",
+          "$value": "16px",
+        },
+        "border-radius-card-embedded": {
+          "$description": "The border radius of embedded cards.",
+          "$value": "8px",
+        },
         "border-radius-chat-bubble": {
           "$description": "The border radius of chat bubbles.",
           "$value": "8px",
@@ -22114,6 +22178,14 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The border radius of the focused day in date picker and date range picker.",
           "$value": "3px",
         },
+        "border-radius-card-default": {
+          "$description": "The border radius of default cards.",
+          "$value": "16px",
+        },
+        "border-radius-card-embedded": {
+          "$description": "The border radius of embedded cards.",
+          "$value": "8px",
+        },
         "border-radius-chat-bubble": {
           "$description": "The border radius of chat bubbles.",
           "$value": "8px",
@@ -24875,6 +24947,14 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The border radius of the focused day in date picker and date range picker.",
           "$value": "3px",
         },
+        "border-radius-card-default": {
+          "$description": "The border radius of default cards.",
+          "$value": "16px",
+        },
+        "border-radius-card-embedded": {
+          "$description": "The border radius of embedded cards.",
+          "$value": "8px",
+        },
         "border-radius-chat-bubble": {
           "$description": "The border radius of chat bubbles.",
           "$value": "8px",
@@ -27636,6 +27716,14 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The border radius of the focused day in date picker and date range picker.",
           "$value": "3px",
         },
+        "border-radius-card-default": {
+          "$description": "The border radius of default cards.",
+          "$value": "16px",
+        },
+        "border-radius-card-embedded": {
+          "$description": "The border radius of embedded cards.",
+          "$value": "8px",
+        },
         "border-radius-chat-bubble": {
           "$description": "The border radius of chat bubbles.",
           "$value": "8px",
@@ -30397,6 +30485,14 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The border radius of the focused day in date picker and date range picker.",
           "$value": "3px",
         },
+        "border-radius-card-default": {
+          "$description": "The border radius of default cards.",
+          "$value": "16px",
+        },
+        "border-radius-card-embedded": {
+          "$description": "The border radius of embedded cards.",
+          "$value": "8px",
+        },
         "border-radius-chat-bubble": {
           "$description": "The border radius of chat bubbles.",
           "$value": "8px",
@@ -33158,6 +33254,14 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The border radius of the focused day in date picker and date range picker.",
           "$value": "3px",
         },
+        "border-radius-card-default": {
+          "$description": "The border radius of default cards.",
+          "$value": "16px",
+        },
+        "border-radius-card-embedded": {
+          "$description": "The border radius of embedded cards.",
+          "$value": "8px",
+        },
         "border-radius-chat-bubble": {
           "$description": "The border radius of chat bubbles.",
           "$value": "8px",
@@ -35919,6 +36023,14 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The border radius of the focused day in date picker and date range picker.",
           "$value": "3px",
         },
+        "border-radius-card-default": {
+          "$description": "The border radius of default cards.",
+          "$value": "16px",
+        },
+        "border-radius-card-embedded": {
+          "$description": "The border radius of embedded cards.",
+          "$value": "8px",
+        },
         "border-radius-chat-bubble": {
           "$description": "The border radius of chat bubbles.",
           "$value": "8px",
@@ -38680,6 +38792,14 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The border radius of the focused day in date picker and date range picker.",
           "$value": "3px",
         },
+        "border-radius-card-default": {
+          "$description": "The border radius of default cards.",
+          "$value": "16px",
+        },
+        "border-radius-card-embedded": {
+          "$description": "The border radius of embedded cards.",
+          "$value": "8px",
+        },
         "border-radius-chat-bubble": {
           "$description": "The border radius of chat bubbles.",
           "$value": "8px",
@@ -41441,6 +41561,14 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
       "$description": "The border radius of the focused day in date picker and date range picker.",
       "$value": "3px",
     },
+    "border-radius-card-default": {
+      "$description": "The border radius of default cards.",
+      "$value": "16px",
+    },
+    "border-radius-card-embedded": {
+      "$description": "The border radius of embedded cards.",
+      "$value": "8px",
+    },
     "border-radius-chat-bubble": {
       "$description": "The border radius of chat bubbles.",
       "$value": "8px",
diff --git a/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap b/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap
index 2e3a2e834f..9da07d0b97 100644
--- a/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap
+++ b/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap
@@ -16027,6 +16027,274 @@ with the input using \`ariaDescribedby\`.",
 }
 `;
 
+exports[`Components definition for item-card matches the snapshot: item-card 1`] = `
+{
+  "dashCaseName": "item-card",
+  "events": [],
+  "functions": [],
+  "name": "ItemCard",
+  "properties": [
+    {
+      "deprecatedTag": "Custom CSS is not supported. For testing and other use cases, use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes).",
+      "description": "Adds the specified classes to the root element of the component.",
+      "name": "className",
+      "optional": true,
+      "type": "string",
+    },
+    {
+      "defaultValue": "false",
+      "description": "Removes the default padding from the content area.",
+      "name": "disableContentPaddings",
+      "optional": true,
+      "type": "boolean",
+    },
+    {
+      "defaultValue": "false",
+      "description": "Removes the default padding from the footer area.",
+      "name": "disableFooterPaddings",
+      "optional": true,
+      "type": "boolean",
+    },
+    {
+      "defaultValue": "false",
+      "description": "Removes the default padding from the header area.",
+      "name": "disableHeaderPaddings",
+      "optional": true,
+      "type": "boolean",
+    },
+    {
+      "deprecatedTag": "The usage of the \`id\` attribute is reserved for internal use cases. For testing and other use cases,
+use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes). If you must
+use the \`id\` attribute, consider setting it on a parent element instead.",
+      "description": "Adds the specified ID to the root element of the component.",
+      "name": "id",
+      "optional": true,
+      "type": "string",
+    },
+    {
+      "description": "Attributes to add to the native root element.
+Some attributes will be automatically combined with internal attribute values:
+- \`className\` will be appended.
+- Event handlers will be chained, unless the default is prevented.
+
+We do not support using this attribute to apply custom styling.",
+      "inlineType": {
+        "name": "Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & Record<\`data-\${string}\`, string>",
+        "type": "union",
+        "values": [
+          "Omit<React.HTMLAttributes<HTMLDivElement>, "children">",
+          "Record<\`data-\${string}\`, string>",
+        ],
+      },
+      "name": "nativeAttributes",
+      "optional": true,
+      "systemTags": [
+        "core",
+      ],
+      "type": "Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & Record<\`data-\${string}\`, string>",
+    },
+    {
+      "description": "An object containing CSS properties to customize the item card's visual appearance.
+Refer to the [style](/components/item-card/?tabId=style) tab for more details.",
+      "inlineType": {
+        "name": "ItemCardProps.Style",
+        "properties": [
+          {
+            "inlineType": {
+              "name": "{ paddingBlock?: string | undefined; paddingInline?: string | undefined; }",
+              "properties": [
+                {
+                  "name": "paddingBlock",
+                  "optional": true,
+                  "type": "string",
+                },
+                {
+                  "name": "paddingInline",
+                  "optional": true,
+                  "type": "string",
+                },
+              ],
+              "type": "object",
+            },
+            "name": "content",
+            "optional": true,
+            "type": "{ paddingBlock?: string | undefined; paddingInline?: string | undefined; }",
+          },
+          {
+            "inlineType": {
+              "name": "object",
+              "properties": [
+                {
+                  "inlineType": {
+                    "name": "{ borderColor?: string | undefined; borderWidth?: string | undefined; }",
+                    "properties": [
+                      {
+                        "name": "borderColor",
+                        "optional": true,
+                        "type": "string",
+                      },
+                      {
+                        "name": "borderWidth",
+                        "optional": true,
+                        "type": "string",
+                      },
+                    ],
+                    "type": "object",
+                  },
+                  "name": "divider",
+                  "optional": true,
+                  "type": "{ borderColor?: string | undefined; borderWidth?: string | undefined; }",
+                },
+                {
+                  "inlineType": {
+                    "name": "{ paddingBlock?: string | undefined; paddingInline?: string | undefined; }",
+                    "properties": [
+                      {
+                        "name": "paddingBlock",
+                        "optional": true,
+                        "type": "string",
+                      },
+                      {
+                        "name": "paddingInline",
+                        "optional": true,
+                        "type": "string",
+                      },
+                    ],
+                    "type": "object",
+                  },
+                  "name": "root",
+                  "optional": true,
+                  "type": "{ paddingBlock?: string | undefined; paddingInline?: string | undefined; }",
+                },
+              ],
+              "type": "object",
+            },
+            "name": "footer",
+            "optional": true,
+            "type": "{ root?: { paddingBlock?: string | undefined; paddingInline?: string | undefined; } | undefined; divider?: { borderColor?: string | undefined; borderWidth?: string | undefined; } | undefined; }",
+          },
+          {
+            "inlineType": {
+              "name": "{ paddingBlock?: string | undefined; paddingInline?: string | undefined; }",
+              "properties": [
+                {
+                  "name": "paddingBlock",
+                  "optional": true,
+                  "type": "string",
+                },
+                {
+                  "name": "paddingInline",
+                  "optional": true,
+                  "type": "string",
+                },
+              ],
+              "type": "object",
+            },
+            "name": "header",
+            "optional": true,
+            "type": "{ paddingBlock?: string | undefined; paddingInline?: string | undefined; }",
+          },
+          {
+            "inlineType": {
+              "name": "object",
+              "properties": [
+                {
+                  "name": "background",
+                  "optional": true,
+                  "type": "string",
+                },
+                {
+                  "name": "borderColor",
+                  "optional": true,
+                  "type": "string",
+                },
+                {
+                  "name": "borderRadius",
+                  "optional": true,
+                  "type": "string",
+                },
+                {
+                  "name": "borderWidth",
+                  "optional": true,
+                  "type": "string",
+                },
+                {
+                  "name": "boxShadow",
+                  "optional": true,
+                  "type": "string",
+                },
+              ],
+              "type": "object",
+            },
+            "name": "root",
+            "optional": true,
+            "type": "{ background?: string | undefined; borderColor?: string | undefined; borderRadius?: string | undefined; borderWidth?: string | undefined; boxShadow?: string | undefined; }",
+          },
+        ],
+        "type": "object",
+      },
+      "name": "style",
+      "optional": true,
+      "systemTags": [
+        "core",
+      ],
+      "type": "ItemCardProps.Style",
+    },
+    {
+      "defaultValue": "'default'",
+      "description": "Specifies the visual variant of the item card, which controls the border radius and padding.
+
+- \`default\` - Uses container-level border radius and padding (larger).
+- \`embedded\` - Uses compact border radius and padding (smaller).",
+      "inlineType": {
+        "name": "ItemCardProps.Variant",
+        "type": "union",
+        "values": [
+          "default",
+          "embedded",
+        ],
+      },
+      "name": "variant",
+      "optional": true,
+      "type": "string",
+    },
+  ],
+  "regions": [
+    {
+      "description": "Actions to display in the item card header area, typically buttons or links.",
+      "isDefault": false,
+      "name": "actions",
+    },
+    {
+      "description": "Main content of the item card.",
+      "isDefault": true,
+      "name": "children",
+    },
+    {
+      "description": "A description or subtitle displayed below the header.",
+      "isDefault": false,
+      "name": "description",
+    },
+    {
+      "description": "Footer content displayed at the bottom of the item card.",
+      "isDefault": false,
+      "name": "footer",
+    },
+    {
+      "description": "Heading element of the item card. Use this to add a title or header text.",
+      "isDefault": false,
+      "name": "header",
+    },
+    {
+      "description": "Icon content displayed next to the header.",
+      "isDefault": false,
+      "name": "icon",
+    },
+  ],
+  "releaseStatus": "stable",
+}
+`;
+
 exports[`Components definition for key-value-pairs matches the snapshot: key-value-pairs 1`] = `
 {
   "dashCaseName": "key-value-pairs",
@@ -38355,6 +38623,95 @@ The dismiss button is only rendered when the \`dismissible\` property is set to
       "methods": [],
       "name": "IconWrapper",
     },
+    {
+      "methods": [
+        {
+          "description": "Finds the action slot of the item card.",
+          "name": "findActions",
+          "parameters": [],
+          "returnType": {
+            "isNullable": true,
+            "name": "ElementWrapper",
+            "typeArguments": [
+              {
+                "name": "HTMLElement",
+              },
+            ],
+          },
+        },
+        {
+          "description": "Finds the content slot of the item card.",
+          "name": "findContent",
+          "parameters": [],
+          "returnType": {
+            "isNullable": true,
+            "name": "ElementWrapper",
+            "typeArguments": [
+              {
+                "name": "HTMLElement",
+              },
+            ],
+          },
+        },
+        {
+          "description": "Finds the description slot of the item card.",
+          "name": "findDescription",
+          "parameters": [],
+          "returnType": {
+            "isNullable": true,
+            "name": "ElementWrapper",
+            "typeArguments": [
+              {
+                "name": "HTMLElement",
+              },
+            ],
+          },
+        },
+        {
+          "description": "Finds the footer slot of the item card.",
+          "name": "findFooter",
+          "parameters": [],
+          "returnType": {
+            "isNullable": true,
+            "name": "ElementWrapper",
+            "typeArguments": [
+              {
+                "name": "HTMLElement",
+              },
+            ],
+          },
+        },
+        {
+          "description": "Finds the header slot of the item card.",
+          "name": "findHeader",
+          "parameters": [],
+          "returnType": {
+            "isNullable": true,
+            "name": "ElementWrapper",
+            "typeArguments": [
+              {
+                "name": "HTMLElement",
+              },
+            ],
+          },
+        },
+        {
+          "description": "Finds the icon slot of the item card.",
+          "name": "findIcon",
+          "parameters": [],
+          "returnType": {
+            "isNullable": true,
+            "name": "ElementWrapper",
+            "typeArguments": [
+              {
+                "name": "HTMLElement",
+              },
+            ],
+          },
+        },
+      ],
+      "name": "ItemCardWrapper",
+    },
     {
       "methods": [
         {
@@ -48179,6 +48536,65 @@ The dismiss button is only rendered when the \`dismissible\` property is set to
       "methods": [],
       "name": "IconWrapper",
     },
+    {
+      "methods": [
+        {
+          "description": "Finds the action slot of the item card.",
+          "name": "findActions",
+          "parameters": [],
+          "returnType": {
+            "isNullable": false,
+            "name": "ElementWrapper",
+          },
+        },
+        {
+          "description": "Finds the content slot of the item card.",
+          "name": "findContent",
+          "parameters": [],
+          "returnType": {
+            "isNullable": false,
+            "name": "ElementWrapper",
+          },
+        },
+        {
+          "description": "Finds the description slot of the item card.",
+          "name": "findDescription",
+          "parameters": [],
+          "returnType": {
+            "isNullable": false,
+            "name": "ElementWrapper",
+          },
+        },
+        {
+          "description": "Finds the footer slot of the item card.",
+          "name": "findFooter",
+          "parameters": [],
+          "returnType": {
+            "isNullable": false,
+            "name": "ElementWrapper",
+          },
+        },
+        {
+          "description": "Finds the header slot of the item card.",
+          "name": "findHeader",
+          "parameters": [],
+          "returnType": {
+            "isNullable": false,
+            "name": "ElementWrapper",
+          },
+        },
+        {
+          "description": "Finds the icon slot of the item card.",
+          "name": "findIcon",
+          "parameters": [],
+          "returnType": {
+            "isNullable": false,
+            "name": "ElementWrapper",
+          },
+        },
+      ],
+      "name": "ItemCardWrapper",
+    },
     {
       "methods": [
         {
diff --git a/src/__tests__/snapshot-tests/__snapshots__/test-utils-selectors.test.tsx.snap b/src/__tests__/snapshot-tests/__snapshots__/test-utils-selectors.test.tsx.snap
index 3ecacd0926..ff0f1a847c 100644
--- a/src/__tests__/snapshot-tests/__snapshots__/test-utils-selectors.test.tsx.snap
+++ b/src/__tests__/snapshot-tests/__snapshots__/test-utils-selectors.test.tsx.snap
@@ -432,6 +432,14 @@ exports[`test-utils selectors 1`] = `
     "awsui_value_10ipo",
     "awsui_wrapper_1wepg",
   ],
+  "item-card": [
+    "awsui_body_14an4",
+    "awsui_description_14an4",
+    "awsui_footer_14an4",
+    "awsui_header_14an4",
+    "awsui_icon_14an4",
+    "awsui_root_n1fwt",
+  ],
   "key-value-pairs": [
     "awsui_detail_1y9fy",
     "awsui_group-list-item_1y9fy",
diff --git a/src/__tests__/snapshot-tests/__snapshots__/test-utils-wrappers.test.tsx.snap b/src/__tests__/snapshot-tests/__snapshots__/test-utils-wrappers.test.tsx.snap
index 3416b14a95..c3891760d6 100644
--- a/src/__tests__/snapshot-tests/__snapshots__/test-utils-wrappers.test.tsx.snap
+++ b/src/__tests__/snapshot-tests/__snapshots__/test-utils-wrappers.test.tsx.snap
@@ -53,6 +53,7 @@ import HelpPanelWrapper from './help-panel';
 import HotspotWrapper from './hotspot';
 import IconWrapper from './icon';
 import InputWrapper from './input';
+import ItemCardWrapper from './item-card';
 import KeyValuePairsWrapper from './key-value-pairs';
 import LineChartWrapper from './line-chart';
 import LinkWrapper from './link';
@@ -144,6 +145,7 @@ export { HelpPanelWrapper };
 export { HotspotWrapper };
 export { IconWrapper };
 export { InputWrapper };
+export { ItemCardWrapper };
 export { KeyValuePairsWrapper };
 export { LineChartWrapper };
 export { LinkWrapper };
@@ -1425,6 +1427,34 @@ findAllInputs(selector?: string): Array<InputWrapper>;
  * @returns {InputWrapper | null}
  */
 findClosestInput(): InputWrapper | null;
+/**
+ * Returns the wrapper of the first ItemCard that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first ItemCard.
+ * If no matching ItemCard is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {ItemCardWrapper | null}
+ */
+findItemCard(selector?: string): ItemCardWrapper | null;
+
+/**
+ * Returns an array of ItemCard wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the ItemCards inside the current wrapper.
+ * If no matching ItemCard is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<ItemCardWrapper>}
+ */
+findAllItemCards(selector?: string): Array<ItemCardWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent ItemCard for the current element,
+ * or the element itself if it is an instance of ItemCard.
+ * If no ItemCard is found, returns \`null\`.
+ *
+ * @returns {ItemCardWrapper | null}
+ */
+findClosestItemCard(): ItemCardWrapper | null;
 /**
  * Returns the wrapper of the first KeyValuePairs that matches the specified CSS selector.
  * If no CSS selector is specified, returns the wrapper of the first KeyValuePairs.
@@ -3261,6 +3291,19 @@ ElementWrapper.prototype.findInput = function(selector) {
 ElementWrapper.prototype.findAllInputs = function(selector) {
   return this.findAllComponents(InputWrapper, selector);
 };
+ElementWrapper.prototype.findItemCard = function(selector) {
+  let rootSelector = \`.\${ItemCardWrapper.rootSelector}\`;
+  if("legacyRootSelector" in ItemCardWrapper && ItemCardWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${ItemCardWrapper.rootSelector}, .\${ItemCardWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, ItemCardWrapper);
+};
+
+ElementWrapper.prototype.findAllItemCards = function(selector) {
+  return this.findAllComponents(ItemCardWrapper, selector);
+};
 ElementWrapper.prototype.findKeyValuePairs = function(selector) {
   let rootSelector = \`.\${KeyValuePairsWrapper.rootSelector}\`;
   if("legacyRootSelector" in KeyValuePairsWrapper && KeyValuePairsWrapper.legacyRootSelector){
@@ -4067,6 +4110,11 @@ ElementWrapper.prototype.findClosestInput = function() {
   // https://github.com/microsoft/TypeScript/issues/29132
   return (this as any).findClosestComponent(InputWrapper);
 };
+ElementWrapper.prototype.findClosestItemCard = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(ItemCardWrapper);
+};
 ElementWrapper.prototype.findClosestKeyValuePairs = function() {
   // casting to 'any' is needed to avoid this issue with generics
   // https://github.com/microsoft/TypeScript/issues/29132
@@ -4355,6 +4403,7 @@ import HelpPanelWrapper from './help-panel';
 import HotspotWrapper from './hotspot';
 import IconWrapper from './icon';
 import InputWrapper from './input';
+import ItemCardWrapper from './item-card';
 import KeyValuePairsWrapper from './key-value-pairs';
 import LineChartWrapper from './line-chart';
 import LinkWrapper from './link';
@@ -4446,6 +4495,7 @@ export { HelpPanelWrapper };
 export { HotspotWrapper };
 export { IconWrapper };
 export { InputWrapper };
+export { ItemCardWrapper };
 export { KeyValuePairsWrapper };
 export { LineChartWrapper };
 export { LinkWrapper };
@@ -5243,6 +5293,23 @@ findInput(selector?: string): InputWrapper;
  * @returns {MultiElementWrapper<InputWrapper>}
  */
 findAllInputs(selector?: string): MultiElementWrapper<InputWrapper>;
+/**
+ * Returns a wrapper that matches the ItemCards with the specified CSS selector.
+ * If no CSS selector is specified, returns a wrapper that matches ItemCards.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {ItemCardWrapper}
+ */
+findItemCard(selector?: string): ItemCardWrapper;
+
+/**
+ * Returns a multi-element wrapper that matches ItemCards with the specified CSS selector.
+ * If no CSS selector is specified, returns a multi-element wrapper that matches ItemCards.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {MultiElementWrapper<ItemCardWrapper>}
+ */
+findAllItemCards(selector?: string): MultiElementWrapper<ItemCardWrapper>;
 /**
  * Returns a wrapper that matches the KeyValuePairs with the specified CSS selector.
  * If no CSS selector is specified, returns a wrapper that matches KeyValuePairs.
@@ -6584,6 +6651,19 @@ ElementWrapper.prototype.findInput = function(selector) {
 ElementWrapper.prototype.findAllInputs = function(selector) {
   return this.findAllComponents(InputWrapper, selector);
 };
+ElementWrapper.prototype.findItemCard = function(selector) {
+  let rootSelector = \`.\${ItemCardWrapper.rootSelector}\`;
+  if("legacyRootSelector" in ItemCardWrapper && ItemCardWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${ItemCardWrapper.rootSelector}, .\${ItemCardWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, ItemCardWrapper);
+};
+
+ElementWrapper.prototype.findAllItemCards = function(selector) {
+  return this.findAllComponents(ItemCardWrapper, selector);
+};
 ElementWrapper.prototype.findKeyValuePairs = function(selector) {
   let rootSelector = \`.\${KeyValuePairsWrapper.rootSelector}\`;
   if("legacyRootSelector" in KeyValuePairsWrapper && KeyValuePairsWrapper.legacyRootSelector){
diff --git a/src/cards/index.tsx b/src/cards/index.tsx
index 0b97831189..b88d98a922 100644
--- a/src/cards/index.tsx
+++ b/src/cards/index.tsx
@@ -12,7 +12,6 @@ import { InternalContainerAsSubstep } from '../container/internal';
 import { useInternalI18n } from '../i18n/context';
 import { AnalyticsFunnelSubStep } from '../internal/analytics/components/analytics-funnel';
 import { getBaseProps } from '../internal/base-component';
-import Card from '../internal/components/card';
 import { CollectionLabelContext } from '../internal/context/collection-label-context';
 import { LinkDefaultVariantContext } from '../internal/context/link-default-variant-context';
 import useBaseComponent from '../internal/hooks/use-base-component';
@@ -20,6 +19,7 @@ import { useMobile } from '../internal/hooks/use-mobile';
 import useMouseDownTarget from '../internal/hooks/use-mouse-down-target';
 import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
 import { applyDisplayName } from '../internal/utils/apply-display-name';
+import InternalItemCard from '../item-card/internal';
 import InternalLiveRegion from '../live-region/internal';
 import InternalStatusIndicator from '../status-indicator/internal';
 import {
@@ -336,8 +336,9 @@ const CardsList = <T,>({
               },
             })}
           >
-            <Card
-              selected={selectable && selected}
+            <InternalItemCard
+              fullHeight={true}
+              highlighted={selectable && selected}
               header={
                 <div className={styles['card-header']}>
                   <div
@@ -381,7 +382,7 @@ const CardsList = <T,>({
                     {content ? <div className={styles['section-content']}>{content(item)}</div> : ''}
                   </div>
                 ))}
-            </Card>
+            </InternalItemCard>
           </li>
         );
       })}
diff --git a/src/cards/styles.scss b/src/cards/styles.scss
index a8e5360076..3589e124e5 100644
--- a/src/cards/styles.scss
+++ b/src/cards/styles.scss
@@ -47,11 +47,11 @@
 .selection-control {
   position: absolute;
   box-sizing: border-box;
-  inline-size: calc(#{awsui.$size-control} + (2 * #{awsui.$space-card-horizontal}));
+  inline-size: calc(#{awsui.$size-control} + (2 * #{awsui.$space-card-horizontal-default}));
   inset-block-start: 0;
   inset-inline-end: 0;
-  padding-block: awsui.$space-card-vertical;
-  padding-inline: awsui.$space-card-horizontal;
+  padding-block: awsui.$space-card-vertical-default;
+  padding-inline: awsui.$space-card-horizontal-default;
 }
 
 .loading,
@@ -87,7 +87,7 @@
   &-header {
     @include styles.font-heading-m;
     &-inner {
-      padding-block-start: styles.$control-padding-vertical;
+      /* used in test-utils */
       &-selectable {
         inline-size: 90%;
       }
diff --git a/src/dropdown/__tests__/__snapshots__/styles.test.tsx.snap b/src/dropdown/__tests__/__snapshots__/styles.test.tsx.snap
index 08f099e43c..e365408648 100644
--- a/src/dropdown/__tests__/__snapshots__/styles.test.tsx.snap
+++ b/src/dropdown/__tests__/__snapshots__/styles.test.tsx.snap
@@ -6,9 +6,9 @@ exports[`getDropdownStyles handles all possible style configurations 2`] = `unde
 
 exports[`getDropdownStyles handles all possible style configurations 3`] = `
 {
-  "--awsui-dropdown-content-border-color-u09ddc": "rgb(0, 0, 0)",
-  "--awsui-dropdown-content-border-radius-u09ddc": "8px",
-  "--awsui-dropdown-content-border-width-u09ddc": "2px",
+  "--awsui-dropdown-content-border-color-6b9ypa": "rgb(0, 0, 0)",
+  "--awsui-dropdown-content-border-radius-6b9ypa": "8px",
+  "--awsui-dropdown-content-border-width-6b9ypa": "2px",
   "background": "rgb(255, 255, 255)",
 }
 `;
diff --git a/src/input/__tests__/__snapshots__/styles.test.tsx.snap b/src/input/__tests__/__snapshots__/styles.test.tsx.snap
index 8f029aebbb..85c1053781 100644
--- a/src/input/__tests__/__snapshots__/styles.test.tsx.snap
+++ b/src/input/__tests__/__snapshots__/styles.test.tsx.snap
@@ -2,30 +2,30 @@
 
 exports[`getInputStyles handles all possible style configurations 1`] = `
 {
-  "--awsui-style-background-default-u09ddc": undefined,
-  "--awsui-style-background-disabled-u09ddc": undefined,
-  "--awsui-style-background-focus-u09ddc": undefined,
-  "--awsui-style-background-hover-u09ddc": undefined,
-  "--awsui-style-background-readonly-u09ddc": undefined,
-  "--awsui-style-border-color-default-u09ddc": undefined,
-  "--awsui-style-border-color-disabled-u09ddc": undefined,
-  "--awsui-style-border-color-focus-u09ddc": undefined,
-  "--awsui-style-border-color-hover-u09ddc": undefined,
-  "--awsui-style-border-color-readonly-u09ddc": undefined,
-  "--awsui-style-box-shadow-default-u09ddc": undefined,
-  "--awsui-style-box-shadow-disabled-u09ddc": undefined,
-  "--awsui-style-box-shadow-focus-u09ddc": undefined,
-  "--awsui-style-box-shadow-hover-u09ddc": undefined,
-  "--awsui-style-box-shadow-readonly-u09ddc": undefined,
-  "--awsui-style-color-default-u09ddc": undefined,
-  "--awsui-style-color-disabled-u09ddc": undefined,
-  "--awsui-style-color-focus-u09ddc": undefined,
-  "--awsui-style-color-hover-u09ddc": undefined,
-  "--awsui-style-color-readonly-u09ddc": undefined,
-  "--awsui-style-placeholder-color-u09ddc": undefined,
-  "--awsui-style-placeholder-font-size-u09ddc": undefined,
-  "--awsui-style-placeholder-font-style-u09ddc": undefined,
-  "--awsui-style-placeholder-font-weight-u09ddc": undefined,
+  "--awsui-style-background-default-6b9ypa": undefined,
+  "--awsui-style-background-disabled-6b9ypa": undefined,
+  "--awsui-style-background-focus-6b9ypa": undefined,
+  "--awsui-style-background-hover-6b9ypa": undefined,
+  "--awsui-style-background-readonly-6b9ypa": undefined,
+  "--awsui-style-border-color-default-6b9ypa": undefined,
+  "--awsui-style-border-color-disabled-6b9ypa": undefined,
+  "--awsui-style-border-color-focus-6b9ypa": undefined,
+  "--awsui-style-border-color-hover-6b9ypa": undefined,
+  "--awsui-style-border-color-readonly-6b9ypa": undefined,
+  "--awsui-style-box-shadow-default-6b9ypa": undefined,
+  "--awsui-style-box-shadow-disabled-6b9ypa": undefined,
+  "--awsui-style-box-shadow-focus-6b9ypa": undefined,
+  "--awsui-style-box-shadow-hover-6b9ypa": undefined,
+  "--awsui-style-box-shadow-readonly-6b9ypa": undefined,
+  "--awsui-style-color-default-6b9ypa": undefined,
+  "--awsui-style-color-disabled-6b9ypa": undefined,
+  "--awsui-style-color-focus-6b9ypa": undefined,
+  "--awsui-style-color-hover-6b9ypa": undefined,
+  "--awsui-style-color-readonly-6b9ypa": undefined,
+  "--awsui-style-placeholder-color-6b9ypa": undefined,
+  "--awsui-style-placeholder-font-size-6b9ypa": undefined,
+  "--awsui-style-placeholder-font-style-6b9ypa": undefined,
+  "--awsui-style-placeholder-font-weight-6b9ypa": undefined,
   "borderRadius": undefined,
   "borderWidth": undefined,
   "fontSize": undefined,
@@ -37,30 +37,30 @@ exports[`getInputStyles handles all possible style configurations 1`] = `
 
 exports[`getInputStyles handles all possible style configurations 2`] = `
 {
-  "--awsui-style-background-default-u09ddc": undefined,
-  "--awsui-style-background-disabled-u09ddc": undefined,
-  "--awsui-style-background-focus-u09ddc": undefined,
-  "--awsui-style-background-hover-u09ddc": undefined,
-  "--awsui-style-background-readonly-u09ddc": undefined,
-  "--awsui-style-border-color-default-u09ddc": undefined,
-  "--awsui-style-border-color-disabled-u09ddc": undefined,
-  "--awsui-style-border-color-focus-u09ddc": undefined,
-  "--awsui-style-border-color-hover-u09ddc": undefined,
-  "--awsui-style-border-color-readonly-u09ddc": undefined,
-  "--awsui-style-box-shadow-default-u09ddc": undefined,
-  "--awsui-style-box-shadow-disabled-u09ddc": undefined,
-  "--awsui-style-box-shadow-focus-u09ddc": undefined,
-  "--awsui-style-box-shadow-hover-u09ddc": undefined,
-  "--awsui-style-box-shadow-readonly-u09ddc": undefined,
-  "--awsui-style-color-default-u09ddc": undefined,
-  "--awsui-style-color-disabled-u09ddc": undefined,
-  "--awsui-style-color-focus-u09ddc": undefined,
-  "--awsui-style-color-hover-u09ddc": undefined,
-  "--awsui-style-color-readonly-u09ddc": undefined,
-  "--awsui-style-placeholder-color-u09ddc": undefined,
-  "--awsui-style-placeholder-font-size-u09ddc": undefined,
-  "--awsui-style-placeholder-font-style-u09ddc": undefined,
-  "--awsui-style-placeholder-font-weight-u09ddc": undefined,
+  "--awsui-style-background-default-6b9ypa": undefined,
+  "--awsui-style-background-disabled-6b9ypa": undefined,
+  "--awsui-style-background-focus-6b9ypa": undefined,
+  "--awsui-style-background-hover-6b9ypa": undefined,
+  "--awsui-style-background-readonly-6b9ypa": undefined,
+  "--awsui-style-border-color-default-6b9ypa": undefined,
+  "--awsui-style-border-color-disabled-6b9ypa": undefined,
+  "--awsui-style-border-color-focus-6b9ypa": undefined,
+  "--awsui-style-border-color-hover-6b9ypa": undefined,
+  "--awsui-style-border-color-readonly-6b9ypa": undefined,
+  "--awsui-style-box-shadow-default-6b9ypa": undefined,
+  "--awsui-style-box-shadow-disabled-6b9ypa": undefined,
+  "--awsui-style-box-shadow-focus-6b9ypa": undefined,
+  "--awsui-style-box-shadow-hover-6b9ypa": undefined,
+  "--awsui-style-box-shadow-readonly-6b9ypa": undefined,
+  "--awsui-style-color-default-6b9ypa": undefined,
+  "--awsui-style-color-disabled-6b9ypa": undefined,
+  "--awsui-style-color-focus-6b9ypa": undefined,
+  "--awsui-style-color-hover-6b9ypa": undefined,
+  "--awsui-style-color-readonly-6b9ypa": undefined,
+  "--awsui-style-placeholder-color-6b9ypa": undefined,
+  "--awsui-style-placeholder-font-size-6b9ypa": undefined,
+  "--awsui-style-placeholder-font-style-6b9ypa": undefined,
+  "--awsui-style-placeholder-font-weight-6b9ypa": undefined,
   "borderRadius": undefined,
   "borderWidth": undefined,
   "fontSize": undefined,
@@ -72,30 +72,30 @@ exports[`getInputStyles handles all possible style configurations 2`] = `
 
 exports[`getInputStyles handles all possible style configurations 3`] = `
 {
-  "--awsui-style-background-default-u09ddc": "#ffffff",
-  "--awsui-style-background-disabled-u09ddc": "#f0f0f0",
-  "--awsui-style-background-focus-u09ddc": "#ffffff",
-  "--awsui-style-background-hover-u09ddc": "#fafafa",
-  "--awsui-style-background-readonly-u09ddc": "#ffffff",
-  "--awsui-style-border-color-default-u09ddc": "#cccccc",
-  "--awsui-style-border-color-disabled-u09ddc": "#e0e0e0",
-  "--awsui-style-border-color-focus-u09ddc": "#0073bb",
-  "--awsui-style-border-color-hover-u09ddc": "#999999",
-  "--awsui-style-border-color-readonly-u09ddc": "#e0e0e0",
-  "--awsui-style-box-shadow-default-u09ddc": "none",
-  "--awsui-style-box-shadow-disabled-u09ddc": "none",
-  "--awsui-style-box-shadow-focus-u09ddc": "0 0 0 2px #0073bb",
-  "--awsui-style-box-shadow-hover-u09ddc": "0 1px 2px rgba(0,0,0,0.1)",
-  "--awsui-style-box-shadow-readonly-u09ddc": "none",
-  "--awsui-style-color-default-u09ddc": "#000000",
-  "--awsui-style-color-disabled-u09ddc": "#999999",
-  "--awsui-style-color-focus-u09ddc": "#000000",
-  "--awsui-style-color-hover-u09ddc": "#000000",
-  "--awsui-style-color-readonly-u09ddc": "#000000",
-  "--awsui-style-placeholder-color-u09ddc": "#999999",
-  "--awsui-style-placeholder-font-size-u09ddc": "14px",
-  "--awsui-style-placeholder-font-style-u09ddc": "italic",
-  "--awsui-style-placeholder-font-weight-u09ddc": "400",
+  "--awsui-style-background-default-6b9ypa": "#ffffff",
+  "--awsui-style-background-disabled-6b9ypa": "#f0f0f0",
+  "--awsui-style-background-focus-6b9ypa": "#ffffff",
+  "--awsui-style-background-hover-6b9ypa": "#fafafa",
+  "--awsui-style-background-readonly-6b9ypa": "#ffffff",
+  "--awsui-style-border-color-default-6b9ypa": "#cccccc",
+  "--awsui-style-border-color-disabled-6b9ypa": "#e0e0e0",
+  "--awsui-style-border-color-focus-6b9ypa": "#0073bb",
+  "--awsui-style-border-color-hover-6b9ypa": "#999999",
+  "--awsui-style-border-color-readonly-6b9ypa": "#e0e0e0",
+  "--awsui-style-box-shadow-default-6b9ypa": "none",
+  "--awsui-style-box-shadow-disabled-6b9ypa": "none",
+  "--awsui-style-box-shadow-focus-6b9ypa": "0 0 0 2px #0073bb",
+  "--awsui-style-box-shadow-hover-6b9ypa": "0 1px 2px rgba(0,0,0,0.1)",
+  "--awsui-style-box-shadow-readonly-6b9ypa": "none",
+  "--awsui-style-color-default-6b9ypa": "#000000",
+  "--awsui-style-color-disabled-6b9ypa": "#999999",
+  "--awsui-style-color-focus-6b9ypa": "#000000",
+  "--awsui-style-color-hover-6b9ypa": "#000000",
+  "--awsui-style-color-readonly-6b9ypa": "#000000",
+  "--awsui-style-placeholder-color-6b9ypa": "#999999",
+  "--awsui-style-placeholder-font-size-6b9ypa": "14px",
+  "--awsui-style-placeholder-font-style-6b9ypa": "italic",
+  "--awsui-style-placeholder-font-weight-6b9ypa": "400",
   "borderRadius": "4px",
   "borderWidth": "1px",
   "fontSize": "14px",
diff --git a/src/internal/components/card/index.tsx b/src/internal/components/card/index.tsx
deleted file mode 100644
index 3cecc4ddc6..0000000000
--- a/src/internal/components/card/index.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
-// SPDX-License-Identifier: Apache-2.0
-import React from 'react';
-import clsx from 'clsx';
-
-import { useVisualRefresh } from '../../hooks/use-visual-mode';
-import InternalStructuredItem from '../structured-item';
-import { InternalCardProps } from './interfaces';
-
-import styles from './styles.css.js';
-
-export default function Card({
-  actions,
-  selected,
-  children,
-  className,
-  header,
-  description,
-  icon,
-  metadataAttributes,
-  onClick,
-  disableHeaderPaddings,
-  disableContentPaddings,
-}: InternalCardProps) {
-  const isRefresh = useVisualRefresh();
-
-  const headerRowEmpty = !header && !description && !icon && !actions;
-
-  return (
-    <div
-      className={clsx(
-        className,
-        styles.root,
-        selected && styles.selected,
-        headerRowEmpty && styles['no-header'],
-        !children && styles['no-content'],
-        isRefresh && styles.refresh
-      )}
-      {...metadataAttributes}
-      onClick={onClick}
-    >
-      <div
-        className={clsx(
-          styles.header,
-          disableHeaderPaddings && styles['no-padding'],
-          !!actions && styles['with-actions']
-        )}
-      >
-        <InternalStructuredItem
-          content={header && <div className={styles['header-inner']}>{header}</div>}
-          secondaryContent={description && <div className={styles.description}>{description}</div>}
-          icon={icon}
-          actions={actions}
-          disablePaddings={disableHeaderPaddings}
-          wrapActions={false}
-        />
-      </div>
-      <div className={clsx(styles.body, disableContentPaddings && styles['no-padding'])}>{children}</div>
-    </div>
-  );
-}
diff --git a/src/internal/components/card/interfaces.ts b/src/internal/components/card/interfaces.ts
deleted file mode 100644
index adf72487b9..0000000000
--- a/src/internal/components/card/interfaces.ts
+++ /dev/null
@@ -1,57 +0,0 @@
-// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
-// SPDX-License-Identifier: Apache-2.0
-import React from 'react';
-
-import { BaseComponentProps } from '../../base-component';
-
-export interface BaseCardProps extends BaseComponentProps {
-  /**
-   * Heading text.
-   */
-  header?: React.ReactNode;
-
-  /**
-   * Supplementary text below the heading.
-   */
-  description?: React.ReactNode;
-
-  /**
-   * Specifies actions for the card.
-   */
-  actions?: React.ReactNode;
-
-  /**
-   * Primary content displayed in the card.
-   */
-  children?: React.ReactNode;
-
-  /**
-   * Icon which will be displayed at the top of the card,
-   * aligned with the start of the content.
-   */
-  icon?: React.ReactNode;
-
-  /**
-   * Determines whether the card header has padding. If `true`, removes the default padding from the header.
-   */
-  disableHeaderPaddings?: boolean;
-
-  /**
-   * Determines whether the card content has padding. If `true`, removes the default padding from the content area.
-   */
-  disableContentPaddings?: boolean;
-}
-
-export interface InternalCardProps extends BaseCardProps {
-  /**
-   * Called when the user clicks on the card.
-   */
-  onClick?: React.MouseEventHandler<HTMLElement>;
-
-  /**
-   * Specifies whether the card is in active state.
-   */
-  selected?: boolean;
-
-  metadataAttributes?: Record<string, string | undefined>;
-}
diff --git a/src/internal/components/card/styles.scss b/src/internal/components/card/styles.scss
deleted file mode 100644
index f68442a87e..0000000000
--- a/src/internal/components/card/styles.scss
+++ /dev/null
@@ -1,113 +0,0 @@
-/*
- Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
- SPDX-License-Identifier: Apache-2.0
-*/
-
-@use 'sass:math';
-
-@use '../../styles' as styles;
-@use '../../styles/tokens' as awsui;
-@use './motion';
-
-@mixin card-style {
-  border-start-start-radius: awsui.$border-radius-container;
-  border-start-end-radius: awsui.$border-radius-container;
-  border-end-start-radius: awsui.$border-radius-container;
-  border-end-end-radius: awsui.$border-radius-container;
-  box-sizing: border-box;
-  block-size: 100%;
-
-  &::before {
-    @include styles.base-pseudo-element;
-    // Reset border color to prevent it from flashing black during card selection animation
-    border-color: transparent;
-    border-block-start: awsui.$border-container-top-width solid awsui.$color-border-container-top;
-    border-start-start-radius: awsui.$border-radius-container;
-    border-start-end-radius: awsui.$border-radius-container;
-    border-end-start-radius: awsui.$border-radius-container;
-    border-end-end-radius: awsui.$border-radius-container;
-    z-index: 1;
-  }
-
-  &::after {
-    @include styles.base-pseudo-element;
-    border-start-start-radius: awsui.$border-radius-container;
-    border-start-end-radius: awsui.$border-radius-container;
-    border-end-start-radius: awsui.$border-radius-container;
-    border-end-end-radius: awsui.$border-radius-container;
-  }
-  &:not(.refresh)::after {
-    box-shadow: awsui.$shadow-container;
-  }
-  &.refresh::after {
-    border-block: solid awsui.$border-divider-section-width awsui.$color-border-divider-default;
-    border-inline: solid awsui.$border-divider-section-width awsui.$color-border-divider-default;
-  }
-}
-
-.root {
-  @include styles.styles-reset();
-  box-sizing: border-box;
-  position: relative;
-  background-color: awsui.$color-background-container-content;
-  min-inline-size: 0;
-  @include card-style;
-}
-
-$button-padding-vertical: styles.$control-padding-vertical;
-$button-padding-horizontal: awsui.$space-xxs;
-$padding-block-start-base: calc(awsui.$space-card-vertical - $button-padding-vertical);
-
-.header {
-  &:not(.no-padding) {
-    padding-block-end: awsui.$space-xxs;
-    padding-inline-start: awsui.$space-card-horizontal;
-    &:not(.with-actions) {
-      padding-block-start: $padding-block-start-base;
-      padding-inline-end: awsui.$space-card-horizontal;
-    }
-    &.with-actions {
-      // Compensate the padding given by the buttons in the actions slot
-      padding-block-start: calc($padding-block-start-base - $button-padding-vertical);
-      padding-inline-end: calc(awsui.$space-card-horizontal - $button-padding-horizontal);
-    }
-  }
-  &-inner {
-    @include styles.font-heading-s;
-  }
-}
-
-.body {
-  &:not(.no-padding) {
-    padding-block-start: awsui.$space-xxs;
-    padding-block-end: awsui.$space-card-vertical;
-    padding-inline: awsui.$space-card-horizontal;
-  }
-  &.no-padding {
-    border-end-start-radius: awsui.$border-radius-container;
-    border-end-end-radius: awsui.$border-radius-container;
-  }
-}
-
-.no-header,
-.no-content {
-  // No need to preserve the space between header and content when one of them is missing.
-  > .header:not(.no-padding) {
-    padding-block-end: 0;
-  }
-  > .body:not(.no-padding) {
-    padding-block-start: 0;
-  }
-}
-
-.selected {
-  background-color: awsui.$color-background-item-selected;
-  &::before {
-    border-block: awsui.$border-item-width solid awsui.$color-border-item-selected;
-    border-inline: awsui.$border-item-width solid awsui.$color-border-item-selected;
-  }
-}
-
-.description {
-  color: awsui.$color-text-heading-secondary;
-}
diff --git a/src/item-card/__tests__/__snapshots__/styles.test.tsx.snap b/src/item-card/__tests__/__snapshots__/styles.test.tsx.snap
new file mode 100644
index 0000000000..ecc1b65139
--- /dev/null
+++ b/src/item-card/__tests__/__snapshots__/styles.test.tsx.snap
@@ -0,0 +1,52 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`getContentStyles handles all possible style configurations 1`] = `{}`;
+
+exports[`getContentStyles handles all possible style configurations 2`] = `{}`;
+
+exports[`getContentStyles handles all possible style configurations 3`] = `
+{
+  "paddingBlock": "16px",
+  "paddingInline": "20px",
+}
+`;
+
+exports[`getFooterStyles handles all possible style configurations 1`] = `{}`;
+
+exports[`getFooterStyles handles all possible style configurations 2`] = `{}`;
+
+exports[`getFooterStyles handles all possible style configurations 3`] = `
+{
+  "borderBlockStartColor": "#e0e0e0",
+  "borderBlockStartStyle": "solid",
+  "borderBlockStartWidth": "1px",
+  "paddingBlock": "12px",
+  "paddingInline": "20px",
+}
+`;
+
+exports[`getHeaderStyles handles all possible style configurations 1`] = `{}`;
+
+exports[`getHeaderStyles handles all possible style configurations 2`] = `{}`;
+
+exports[`getHeaderStyles handles all possible style configurations 3`] = `
+{
+  "paddingBlock": "12px",
+  "paddingInline": "20px",
+}
+`;
+
+exports[`getRootStyles handles all possible style configurations 1`] = `{}`;
+
+exports[`getRootStyles handles all possible style configurations 2`] = `{}`;
+
+exports[`getRootStyles handles all possible style configurations 3`] = `
+{
+  "--awsui-style-item-card-background-default-6b9ypa": "#ffffff",
+  "--awsui-style-item-card-border-color-default-6b9ypa": "#e0e0e0",
+  "--awsui-style-item-card-border-radius-6b9ypa": "8px",
+  "--awsui-style-item-card-border-width-default-6b9ypa": "1px",
+  "--awsui-style-item-card-box-shadow-default-6b9ypa": "0 1px 3px rgba(0,0,0,0.1)",
+  "borderRadius": "8px",
+}
+`;
diff --git a/src/item-card/__tests__/card.test.tsx b/src/item-card/__tests__/card.test.tsx
new file mode 100644
index 0000000000..b401888d94
--- /dev/null
+++ b/src/item-card/__tests__/card.test.tsx
@@ -0,0 +1,341 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+import { fireEvent, render } from '@testing-library/react';
+
+import Icon from '../../../lib/components/icon';
+import ItemCard from '../../../lib/components/item-card';
+import InternalItemCard from '../../../lib/components/item-card/internal';
+import createWrapper from '../../../lib/components/test-utils/dom';
+
+import styles from '../../../lib/components/item-card/styles.css.js';
+
+function renderItemCard(jsx: React.ReactElement) {
+  const { container } = render(jsx);
+  const wrapper = createWrapper(container);
+  const itemCard = wrapper.findItemCard()!;
+  return { wrapper, itemCard };
+}
+
+test('renders children content', () => {
+  const { itemCard } = renderItemCard(<ItemCard>test content</ItemCard>);
+  expect(itemCard.getElement()).toHaveTextContent('test content');
+});
+
+test('renders without header, footer, or actions by default', () => {
+  const { itemCard } = renderItemCard(<ItemCard>content only</ItemCard>);
+  expect(itemCard.findHeader()).toBeNull();
+  expect(itemCard.findFooter()).toBeNull();
+  expect(itemCard.getElement()).toHaveTextContent('content only');
+});
+
+test('renders header when provided', () => {
+  const { itemCard } = renderItemCard(<ItemCard header="Card title">content</ItemCard>);
+  const header = itemCard.findHeader();
+  expect(header).not.toBeNull();
+  expect(header!.getElement()).toHaveTextContent('Card title');
+});
+
+test('renders header text content', () => {
+  const { itemCard } = renderItemCard(<ItemCard header="My Header">content</ItemCard>);
+  const header = itemCard.findHeader();
+  expect(header).not.toBeNull();
+  expect(header!.getElement()).toHaveTextContent('My Header');
+});
+
+test('renders description when provided', () => {
+  const { itemCard } = renderItemCard(
+    <ItemCard header="Title" description="A description">
+      content
+    </ItemCard>
+  );
+  const description = itemCard.findDescription();
+  expect(description).not.toBeNull();
+  expect(description!.getElement()).toHaveTextContent('A description');
+});
+
+test('renders footer when provided', () => {
+  const { itemCard } = renderItemCard(<ItemCard footer="Footer text">content</ItemCard>);
+  const footer = itemCard.findFooter();
+  expect(footer).not.toBeNull();
+  expect(footer!.getElement()).toHaveTextContent('Footer text');
+});
+
+test('does not render footer element when footer is not provided', () => {
+  const { itemCard } = renderItemCard(<ItemCard>content</ItemCard>);
+  expect(itemCard.findFooter()).toBeNull();
+});
+
+test('renders actions in the header area', () => {
+  const { itemCard } = renderItemCard(
+    <ItemCard header="Title" actions={<button>Action</button>}>
+      content
+    </ItemCard>
+  );
+  const actions = itemCard.findActions();
+  expect(actions).not.toBeNull();
+  expect(actions!.getElement()).toHaveTextContent('Action');
+});
+
+test('renders header and actions together', () => {
+  const { itemCard } = renderItemCard(
+    <ItemCard header="Title" actions={<button>Action</button>}>
+      content
+    </ItemCard>
+  );
+  expect(itemCard.findHeader()!.getElement()).toHaveTextContent('Title');
+  expect(itemCard.findActions()!.getElement()).toHaveTextContent('Action');
+});
+
+test('renders all parts together: header, description, actions, children, footer', () => {
+  const { itemCard } = renderItemCard(
+    <ItemCard header="Header" description="Description" actions={<button>Act</button>} footer="Footer">
+      Body
+    </ItemCard>
+  );
+  expect(itemCard.findHeader()!.getElement()).toHaveTextContent('Header');
+  expect(itemCard.findDescription()!.getElement()).toHaveTextContent('Description');
+  expect(itemCard.findActions()!.getElement()).toHaveTextContent('Act');
+  expect(itemCard.findContent()!.getElement()).toHaveTextContent('Body');
+  expect(itemCard.findFooter()!.getElement()).toHaveTextContent('Footer');
+});
+
+test('does not render body when children are not provided', () => {
+  const { itemCard } = renderItemCard(<ItemCard header="Title" />);
+  expect(itemCard.findContent()).toBeNull();
+});
+
+describe('disableHeaderPaddings', () => {
+  test('applies no-padding class to header when disableHeaderPaddings is true', () => {
+    const { itemCard } = renderItemCard(
+      <ItemCard header="Title" disableHeaderPaddings={true}>
+        content
+      </ItemCard>
+    );
+    const headerWrapper = itemCard.findByClassName(styles.header);
+    expect(headerWrapper!.getElement()).toHaveClass(styles['no-padding']);
+  });
+
+  test('does not apply no-padding class to header by default', () => {
+    const { itemCard } = renderItemCard(<ItemCard header="Title">content</ItemCard>);
+    const headerWrapper = itemCard.findByClassName(styles.header);
+    expect(headerWrapper!.getElement()).not.toHaveClass(styles['no-padding']);
+  });
+});
+
+describe('disableContentPaddings', () => {
+  test('applies no-padding class to body when disableContentPaddings is true', () => {
+    const { itemCard } = renderItemCard(<ItemCard disableContentPaddings={true}>content</ItemCard>);
+    const body = itemCard.findContent();
+    expect(body!.getElement()).toHaveClass(styles['no-padding']);
+  });
+
+  test('does not apply no-padding class to body by default', () => {
+    const { itemCard } = renderItemCard(<ItemCard>content</ItemCard>);
+    const body = itemCard.findContent();
+    expect(body!.getElement()).not.toHaveClass(styles['no-padding']);
+  });
+});
+
+describe('disableFooterPaddings', () => {
+  test('applies no-padding class to footer when disableFooterPaddings is true', () => {
+    const { itemCard } = renderItemCard(
+      <ItemCard footer="Footer" disableFooterPaddings={true}>
+        content
+      </ItemCard>
+    );
+    const footer = itemCard.findFooter();
+    expect(footer!.getElement()).toHaveClass(styles['no-padding']);
+  });
+
+  test('does not apply no-padding class to footer by default', () => {
+    const { itemCard } = renderItemCard(<ItemCard footer="Footer">content</ItemCard>);
+    const footer = itemCard.findFooter();
+    expect(footer!.getElement()).not.toHaveClass(styles['no-padding']);
+  });
+});
+
+describe('icon', () => {
+  test('renders icon when icon is provided', () => {
+    const { itemCard } = renderItemCard(
+      <ItemCard header="Title" icon={<Icon name="settings"></Icon>}>
+        content
+      </ItemCard>
+    );
+    expect(itemCard.findIcon()).not.toBeNull();
+    expect(itemCard.findHeader()).not.toBeNull();
+  });
+
+  test('renders icon and header area when icon is provided without header text', () => {
+    const { itemCard } = renderItemCard(<ItemCard icon={<Icon name="settings"></Icon>}>content</ItemCard>);
+    expect(itemCard.findIcon()).not.toBeNull();
+  });
+
+  test('does not render icon when icon is not provided', () => {
+    const { itemCard } = renderItemCard(<ItemCard header="Title">content</ItemCard>);
+    expect(itemCard.findIcon()).toBeNull();
+  });
+});
+
+describe('Style API', () => {
+  test('applies style properties to root element', () => {
+    const { itemCard } = renderItemCard(
+      <ItemCard
+        header="Header"
+        footer="Footer"
+        style={{
+          root: {
+            borderRadius: '20px',
+          },
+          content: {
+            paddingBlock: '30px',
+            paddingInline: '40px',
+          },
+          header: {
+            paddingBlock: '10px',
+            paddingInline: '20px',
+          },
+          footer: {
+            root: {
+              paddingBlock: '15px',
+              paddingInline: '25px',
+            },
+            divider: {
+              borderColor: 'red',
+              borderWidth: '2px',
+            },
+          },
+        }}
+      >
+        Content
+      </ItemCard>
+    );
+
+    expect(getComputedStyle(itemCard.getElement()).getPropertyValue('border-radius')).toBe('20px');
+
+    const body = itemCard.findContent()!;
+    expect(getComputedStyle(body.getElement()).getPropertyValue('padding-block')).toBe('30px');
+    expect(getComputedStyle(body.getElement()).getPropertyValue('padding-inline')).toBe('40px');
+
+    const headerWrapper = itemCard.findByClassName(styles.header)!;
+    expect(getComputedStyle(headerWrapper.getElement()).getPropertyValue('padding-block')).toBe('10px');
+    expect(getComputedStyle(headerWrapper.getElement()).getPropertyValue('padding-inline')).toBe('20px');
+
+    const footer = itemCard.findFooter()!;
+    expect(getComputedStyle(footer.getElement()).getPropertyValue('border-block-start-color')).toBe('red');
+    expect(getComputedStyle(footer.getElement()).getPropertyValue('border-block-start-width')).toBe('2px');
+    expect(getComputedStyle(footer.getElement()).getPropertyValue('padding-block')).toBe('15px');
+    expect(getComputedStyle(footer.getElement()).getPropertyValue('padding-inline')).toBe('25px');
+  });
+});
+
+test('renders actions even when header text is not provided', () => {
+  const { itemCard } = renderItemCard(<ItemCard actions={<button>Click</button>}>content</ItemCard>);
+  expect(itemCard.findActions()).not.toBeNull();
+  expect(itemCard.findActions()!.getElement()).toHaveTextContent('Click');
+});
+
+test('renders with only footer and children', () => {
+  const { itemCard } = renderItemCard(<ItemCard footer="Some footer">content</ItemCard>);
+  expect(itemCard.findHeader()).toBeNull();
+  expect(itemCard.findFooter()).not.toBeNull();
+  expect(itemCard.findContent()).not.toBeNull();
+});
+
+test('renders with only header and no children', () => {
+  const { itemCard } = renderItemCard(<ItemCard header="Title" />);
+  expect(itemCard.findHeader()).not.toBeNull();
+  expect(itemCard.findContent()).toBeNull();
+  expect(itemCard.findFooter()).toBeNull();
+});
+
+test('renders with React nodes as header and footer', () => {
+  const { itemCard } = renderItemCard(
+    <ItemCard header={<span data-testid="custom-header">Custom Header</span>} footer={<div>Custom Footer</div>}>
+      content
+    </ItemCard>
+  );
+  expect(itemCard.findHeader()!.getElement()).toHaveTextContent('Custom Header');
+  expect(itemCard.findFooter()!.getElement()).toHaveTextContent('Custom Footer');
+});
+
+describe('variant', () => {
+  test('applies variant-default class by default', () => {
+    const { itemCard } = renderItemCard(<ItemCard>content</ItemCard>);
+    expect(itemCard.getElement()).toHaveClass(styles['variant-default']);
+  });
+
+  test('applies variant-default class when variant is "default"', () => {
+    const { itemCard } = renderItemCard(<ItemCard variant="default">content</ItemCard>);
+    expect(itemCard.getElement()).toHaveClass(styles['variant-default']);
+    expect(itemCard.getElement()).not.toHaveClass(styles['variant-embedded']);
+  });
+
+  test('applies variant-embedded class when variant is "embedded"', () => {
+    const { itemCard } = renderItemCard(<ItemCard variant="embedded">content</ItemCard>);
+    expect(itemCard.getElement()).toHaveClass(styles['variant-embedded']);
+    expect(itemCard.getElement()).not.toHaveClass(styles['variant-default']);
+  });
+});
+
+describe('nativeAttributes', () => {
+  test('forwards data-* attributes to the root element', () => {
+    const { itemCard } = renderItemCard(
+      <ItemCard nativeAttributes={{ 'data-testid': 'my-card', 'data-custom': 'value' }}>content</ItemCard>
+    );
+    expect(itemCard.getElement()).toHaveAttribute('data-testid', 'my-card');
+    expect(itemCard.getElement()).toHaveAttribute('data-custom', 'value');
+  });
+
+  test('forwards aria-* attributes to the root element', () => {
+    const { itemCard } = renderItemCard(
+      <ItemCard nativeAttributes={{ 'aria-label': 'Card label', 'aria-describedby': 'desc-id' }}>content</ItemCard>
+    );
+    expect(itemCard.getElement()).toHaveAttribute('aria-label', 'Card label');
+    expect(itemCard.getElement()).toHaveAttribute('aria-describedby', 'desc-id');
+  });
+
+  test('forwards event handlers via nativeAttributes', () => {
+    const onMouseEnter = jest.fn();
+    const { itemCard } = renderItemCard(<ItemCard nativeAttributes={{ onMouseEnter }}>content</ItemCard>);
+    fireEvent.mouseEnter(itemCard.getElement());
+    expect(onMouseEnter).toHaveBeenCalledTimes(1);
+  });
+});
+
+describe('internal props', () => {
+  function renderInternalItemCard(jsx: React.ReactElement) {
+    const { container } = render(jsx);
+    const wrapper = createWrapper(container);
+    const itemCard = wrapper.findItemCard()!;
+    return { wrapper, itemCard };
+  }
+
+  describe('highlighted', () => {
+    it.each([true])('applies highlighted class when highlighted=%s', highlighted => {
+      const { itemCard } = renderInternalItemCard(
+        <InternalItemCard highlighted={highlighted}>content</InternalItemCard>
+      );
+      expect(itemCard.getElement()).toHaveClass(styles.highlighted);
+    });
+
+    it.each([false, undefined])('does not apply highlighted class when highlighted=%s', highlighted => {
+      const { itemCard } = renderInternalItemCard(
+        <InternalItemCard highlighted={highlighted}>content</InternalItemCard>
+      );
+      expect(itemCard.getElement()).not.toHaveClass(styles.highlighted);
+    });
+  });
+
+  describe('fullHeight', () => {
+    it.each([true])('applies full-height class when fullHeight=%s', fullHeight => {
+      const { itemCard } = renderInternalItemCard(<InternalItemCard fullHeight={fullHeight}>content</InternalItemCard>);
+      expect(itemCard.getElement()).toHaveClass(styles['full-height']);
+    });
+
+    it.each([false, undefined])('does not apply full-height class when fullHeight=%s', fullHeight => {
+      const { itemCard } = renderInternalItemCard(<InternalItemCard fullHeight={fullHeight}>content</InternalItemCard>);
+      expect(itemCard.getElement()).not.toHaveClass(styles['full-height']);
+    });
+  });
+});
diff --git a/src/item-card/__tests__/styles.test.tsx b/src/item-card/__tests__/styles.test.tsx
new file mode 100644
index 0000000000..8bf07a2148
--- /dev/null
+++ b/src/item-card/__tests__/styles.test.tsx
@@ -0,0 +1,131 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { getContentStyles, getFooterStyles, getHeaderStyles, getRootStyles } from '../style';
+
+jest.mock('../../internal/environment', () => ({
+  SYSTEM: 'core',
+}));
+
+const allStyles = {
+  root: {
+    background: '#ffffff',
+    borderColor: '#e0e0e0',
+    borderRadius: '8px',
+    borderWidth: '1px',
+    boxShadow: '0 1px 3px rgba(0,0,0,0.1)',
+  },
+  content: {
+    paddingBlock: '16px',
+    paddingInline: '20px',
+  },
+  header: {
+    paddingBlock: '12px',
+    paddingInline: '20px',
+  },
+  footer: {
+    root: {
+      paddingBlock: '12px',
+      paddingInline: '20px',
+    },
+    divider: {
+      borderColor: '#e0e0e0',
+      borderWidth: '1px',
+    },
+  },
+};
+
+describe('getRootStyles', () => {
+  afterEach(() => {
+    jest.resetModules();
+  });
+
+  test('handles all possible style configurations', () => {
+    expect(getRootStyles(undefined)).toMatchSnapshot();
+    expect(getRootStyles({})).toMatchSnapshot();
+    expect(getRootStyles(allStyles)).toMatchSnapshot();
+  });
+
+  test('returns empty object when SYSTEM is not core', async () => {
+    jest.resetModules();
+    jest.doMock('../../internal/environment', () => ({
+      SYSTEM: 'visual-refresh',
+    }));
+
+    const { getRootStyles: getRootStylesNonCore } = await import('../style');
+
+    const result = getRootStylesNonCore(allStyles);
+    expect(result).toEqual({});
+  });
+});
+
+describe('getContentStyles', () => {
+  afterEach(() => {
+    jest.resetModules();
+  });
+
+  test('handles all possible style configurations', () => {
+    expect(getContentStyles(undefined)).toMatchSnapshot();
+    expect(getContentStyles({})).toMatchSnapshot();
+    expect(getContentStyles(allStyles)).toMatchSnapshot();
+  });
+
+  test('returns empty object when SYSTEM is not core', async () => {
+    jest.resetModules();
+    jest.doMock('../../internal/environment', () => ({
+      SYSTEM: 'visual-refresh',
+    }));
+
+    const { getContentStyles: getContentStylesNonCore } = await import('../style');
+
+    const result = getContentStylesNonCore(allStyles);
+    expect(result).toEqual({});
+  });
+});
+
+describe('getHeaderStyles', () => {
+  afterEach(() => {
+    jest.resetModules();
+  });
+
+  test('handles all possible style configurations', () => {
+    expect(getHeaderStyles(undefined)).toMatchSnapshot();
+    expect(getHeaderStyles({})).toMatchSnapshot();
+    expect(getHeaderStyles(allStyles)).toMatchSnapshot();
+  });
+
+  test('returns empty object when SYSTEM is not core', async () => {
+    jest.resetModules();
+    jest.doMock('../../internal/environment', () => ({
+      SYSTEM: 'visual-refresh',
+    }));
+
+    const { getHeaderStyles: getHeaderStylesNonCore } = await import('../style');
+
+    const result = getHeaderStylesNonCore(allStyles);
+    expect(result).toEqual({});
+  });
+});
+
+describe('getFooterStyles', () => {
+  afterEach(() => {
+    jest.resetModules();
+  });
+
+  test('handles all possible style configurations', () => {
+    expect(getFooterStyles(undefined)).toMatchSnapshot();
+    expect(getFooterStyles({})).toMatchSnapshot();
+    expect(getFooterStyles(allStyles)).toMatchSnapshot();
+  });
+
+  test('returns empty object when SYSTEM is not core', async () => {
+    jest.resetModules();
+    jest.doMock('../../internal/environment', () => ({
+      SYSTEM: 'visual-refresh',
+    }));
+
+    const { getFooterStyles: getFooterStylesNonCore } = await import('../style');
+
+    const result = getFooterStylesNonCore(allStyles);
+    expect(result).toEqual({});
+  });
+});
diff --git a/src/item-card/index.tsx b/src/item-card/index.tsx
new file mode 100644
index 0000000000..0827c40c80
--- /dev/null
+++ b/src/item-card/index.tsx
@@ -0,0 +1,44 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+'use client';
+import React from 'react';
+
+import useBaseComponent from '../internal/hooks/use-base-component';
+import { applyDisplayName } from '../internal/utils/apply-display-name';
+import { getExternalProps } from '../internal/utils/external-props';
+import { ItemCardProps } from './interfaces';
+import InternalItemCard from './internal';
+
+export { ItemCardProps };
+const ItemCard = ({
+  disableHeaderPaddings = false,
+  disableContentPaddings = false,
+  disableFooterPaddings = false,
+  variant = 'default',
+  ...props
+}: ItemCardProps) => {
+  const baseComponentProps = useBaseComponent('ItemCard', {
+    props: {
+      disableHeaderPaddings,
+      disableContentPaddings,
+      disableFooterPaddings,
+      variant,
+    },
+  });
+
+  const externalProps = getExternalProps(props);
+
+  return (
+    <InternalItemCard
+      disableHeaderPaddings={disableHeaderPaddings}
+      disableContentPaddings={disableContentPaddings}
+      disableFooterPaddings={disableFooterPaddings}
+      variant={variant}
+      {...externalProps}
+      {...baseComponentProps}
+    />
+  );
+};
+
+applyDisplayName(ItemCard, 'ItemCard');
+export default ItemCard;
diff --git a/src/item-card/interfaces.ts b/src/item-card/interfaces.ts
new file mode 100644
index 0000000000..4db3f3b3c9
--- /dev/null
+++ b/src/item-card/interfaces.ts
@@ -0,0 +1,143 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+
+import { BaseComponentProps } from '../internal/base-component';
+import { InternalBaseComponentProps } from '../internal/hooks/use-base-component';
+/**
+ * @awsuiSystem core
+ */
+import { NativeAttributes } from '../internal/utils/with-native-attributes';
+
+export interface ItemCardProps extends BaseComponentProps {
+  /**
+   * Heading element of the item card. Use this to add a title or header text.
+   */
+  header?: React.ReactNode;
+
+  /**
+   * A description or subtitle displayed below the header.
+   */
+  description?: React.ReactNode;
+
+  /**
+   * Footer content displayed at the bottom of the item card.
+   */
+  footer?: React.ReactNode;
+
+  /**
+   * Actions to display in the item card header area, typically buttons or links.
+   */
+  actions?: React.ReactNode;
+
+  /**
+   * Main content of the item card.
+   */
+  children?: React.ReactNode;
+
+  /**
+   * Icon content displayed next to the header.
+   */
+  icon?: React.ReactNode;
+
+  /**
+   * Removes the default padding from the header area.
+   * @default false
+   */
+  disableHeaderPaddings?: boolean;
+
+  /**
+   * Removes the default padding from the content area.
+   * @default false
+   */
+  disableContentPaddings?: boolean;
+
+  /**
+   * Removes the default padding from the footer area.
+   * @default false
+   */
+  disableFooterPaddings?: boolean;
+
+  /**
+   * Specifies the visual variant of the item card, which controls the border radius and padding.
+   *
+   * - `default` - Uses container-level border radius and padding (larger).
+   * - `embedded` - Uses compact border radius and padding (smaller).
+   *
+   * @default 'default'
+   */
+  variant?: ItemCardProps.Variant;
+
+  /**
+   * An object containing CSS properties to customize the item card's visual appearance.
+   * Refer to the [style](/components/item-card/?tabId=style) tab for more details.
+   * @awsuiSystem core
+   */
+  style?: ItemCardProps.Style;
+
+  /**
+   * Attributes to add to the native root element.
+   * Some attributes will be automatically combined with internal attribute values:
+   * - `className` will be appended.
+   * - Event handlers will be chained, unless the default is prevented.
+   *
+   * We do not support using this attribute to apply custom styling.
+   *
+   * @awsuiSystem core
+   */
+  nativeAttributes?: NativeAttributes<React.HTMLAttributes<HTMLDivElement>>;
+}
+
+export namespace ItemCardProps {
+  export type Variant = 'embedded' | 'default';
+
+  export interface Style {
+    root?: {
+      background?: string;
+      borderColor?: string;
+      borderRadius?: string;
+      borderWidth?: string;
+      boxShadow?: string;
+    };
+    content?: {
+      paddingBlock?: string;
+      paddingInline?: string;
+    };
+    header?: {
+      paddingBlock?: string;
+      paddingInline?: string;
+    };
+    footer?: {
+      root?: {
+        paddingBlock?: string;
+        paddingInline?: string;
+      };
+      divider?: {
+        borderColor?: string;
+        borderWidth?: string;
+      };
+    };
+  }
+}
+
+export interface InternalItemCardProps extends ItemCardProps, InternalBaseComponentProps {
+  /**
+   * Called when the user clicks on the item card.
+   */
+  onClick?: React.MouseEventHandler<HTMLElement>;
+
+  /**
+   * Specifies whether the item card is in highlighted state.
+   */
+  highlighted?: boolean;
+
+  /**
+   * Makes the item card stretch to fill the full height of its container.
+   */
+  fullHeight?: boolean;
+
+  /**
+   * Specifies metadata for analytics in cards
+   */
+  metadataAttributes?: Record<string, string | undefined>;
+}
diff --git a/src/item-card/internal.tsx b/src/item-card/internal.tsx
new file mode 100644
index 0000000000..0252a9dc37
--- /dev/null
+++ b/src/item-card/internal.tsx
@@ -0,0 +1,103 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+import clsx from 'clsx';
+
+import { getBaseProps } from '../internal/base-component';
+import InternalStructuredItem from '../internal/components/structured-item';
+import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
+import { processAttributes } from '../internal/utils/with-native-attributes';
+import { InternalItemCardProps } from './interfaces';
+import { getContentStyles, getFooterStyles, getHeaderStyles, getRootStyles } from './style';
+
+import styles from './styles.css.js';
+import testStyles from './test-classes/styles.css.js';
+
+export default function InternalItemCard({
+  actions,
+  highlighted,
+  children,
+  className,
+  header,
+  description,
+  footer,
+  icon,
+  style,
+  metadataAttributes,
+  nativeAttributes,
+  onClick,
+  disableHeaderPaddings,
+  disableContentPaddings,
+  disableFooterPaddings,
+  fullHeight,
+  variant = 'default',
+  __internalRootRef,
+  ...restProps
+}: InternalItemCardProps) {
+  const baseProps = getBaseProps(restProps);
+  const isRefresh = useVisualRefresh();
+
+  const headerRowEmpty = !header && !description && !icon && !actions;
+
+  const rootAttributes = processAttributes<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+    {
+      className: clsx(
+        className,
+        styles.root,
+        highlighted && styles.highlighted,
+        fullHeight && styles['full-height'],
+        isRefresh && styles.refresh,
+        styles[`variant-${variant}`]
+      ),
+      ...metadataAttributes,
+      onClick,
+      style: getRootStyles(style),
+    },
+    nativeAttributes,
+    'Card'
+  );
+
+  return (
+    <div ref={__internalRootRef} {...baseProps} {...rootAttributes}>
+      <div className={styles['inner-card']}>
+        {!headerRowEmpty && (
+          <div
+            className={clsx(
+              styles.header,
+              disableHeaderPaddings && styles['no-padding'],
+              !!actions && styles['with-actions']
+            )}
+            style={getHeaderStyles(style)}
+          >
+            <InternalStructuredItem
+              content={header && <div className={clsx(styles['header-inner'], testStyles.header)}>{header}</div>}
+              secondaryContent={
+                description && <div className={clsx(styles.description, testStyles.description)}>{description}</div>
+              }
+              icon={icon && <div className={testStyles.icon}>{icon}</div>}
+              actions={actions}
+              disablePaddings={disableHeaderPaddings}
+              wrapActions={false}
+            />
+          </div>
+        )}
+        {children && (
+          <div
+            className={clsx(styles.body, testStyles.body, disableContentPaddings && styles['no-padding'])}
+            style={getContentStyles(style)}
+          >
+            {children}
+          </div>
+        )}
+        {footer && (
+          <div
+            className={clsx(styles.footer, testStyles.footer, disableFooterPaddings && styles['no-padding'])}
+            style={getFooterStyles(style)}
+          >
+            {footer}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/src/internal/components/card/motion.scss b/src/item-card/motion.scss
similarity index 89%
rename from src/internal/components/card/motion.scss
rename to src/item-card/motion.scss
index d17e521a8b..1cf811db27 100644
--- a/src/internal/components/card/motion.scss
+++ b/src/item-card/motion.scss
@@ -3,8 +3,8 @@
  SPDX-License-Identifier: Apache-2.0
 */
 
-@use '../../styles' as styles;
-@use '../../styles/tokens' as awsui;
+@use '../internal/styles' as styles;
+@use '../internal/styles/tokens' as awsui;
 
 .root {
   @include styles.with-motion {
diff --git a/src/item-card/style.tsx b/src/item-card/style.tsx
new file mode 100644
index 0000000000..437035000e
--- /dev/null
+++ b/src/item-card/style.tsx
@@ -0,0 +1,60 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { SYSTEM } from '../internal/environment';
+import customCssProps from '../internal/generated/custom-css-properties';
+import { ItemCardProps } from './interfaces';
+
+export function getRootStyles(style: ItemCardProps.Style | undefined) {
+  if (SYSTEM !== 'core') {
+    return {};
+  }
+
+  return {
+    ...(style?.root?.background && { [customCssProps.styleItemCardBackgroundDefault]: style.root.background }),
+    ...(style?.root?.borderRadius && {
+      [customCssProps.styleItemCardBorderRadius]: style.root.borderRadius,
+      borderRadius: style.root.borderRadius,
+    }),
+    ...(style?.root?.borderColor && { [customCssProps.styleItemCardBorderColorDefault]: style.root.borderColor }),
+    ...(style?.root?.borderWidth && { [customCssProps.styleItemCardBorderWidthDefault]: style.root.borderWidth }),
+    ...(style?.root?.boxShadow && { [customCssProps.styleItemCardBoxShadowDefault]: style.root.boxShadow }),
+  };
+}
+
+export function getContentStyles(style: ItemCardProps.Style | undefined) {
+  if (SYSTEM !== 'core') {
+    return {};
+  }
+
+  return {
+    ...(style?.content?.paddingBlock && { paddingBlock: style.content.paddingBlock }),
+    ...(style?.content?.paddingInline && { paddingInline: style.content.paddingInline }),
+  };
+}
+
+export function getHeaderStyles(style: ItemCardProps.Style | undefined) {
+  if (SYSTEM !== 'core') {
+    return {};
+  }
+
+  return {
+    ...(style?.header?.paddingBlock && { paddingBlock: style.header.paddingBlock }),
+    ...(style?.header?.paddingInline && { paddingInline: style.header.paddingInline }),
+  };
+}
+
+export function getFooterStyles(style: ItemCardProps.Style | undefined) {
+  if (SYSTEM !== 'core') {
+    return {};
+  }
+
+  const hasDivider = style?.footer?.divider?.borderColor || style?.footer?.divider?.borderWidth;
+
+  return {
+    ...(hasDivider && { borderBlockStartStyle: 'solid' as const }),
+    ...(style?.footer?.divider?.borderColor && { borderBlockStartColor: style.footer.divider.borderColor }),
+    ...(style?.footer?.divider?.borderWidth && { borderBlockStartWidth: style.footer.divider.borderWidth }),
+    ...(style?.footer?.root?.paddingBlock && { paddingBlock: style.footer.root.paddingBlock }),
+    ...(style?.footer?.root?.paddingInline && { paddingInline: style.footer.root.paddingInline }),
+  };
+}
diff --git a/src/item-card/styles.scss b/src/item-card/styles.scss
new file mode 100644
index 0000000000..7226f944e1
--- /dev/null
+++ b/src/item-card/styles.scss
@@ -0,0 +1,166 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+@use 'sass:map';
+@use 'sass:math';
+
+@use '../internal/styles' as styles;
+@use '../internal/styles/tokens' as awsui;
+@use '../internal/generated/custom-css-properties/index.scss' as custom-props;
+@use './motion';
+
+// Variant configuration maps — adjust values here for easy customization
+$variant-border-radius: (
+  'embedded': awsui.$border-radius-card-embedded,
+  'default': awsui.$border-radius-card-default,
+);
+
+$variant-padding-block: (
+  'embedded': awsui.$space-card-vertical-embedded,
+  'default': awsui.$space-card-vertical-default,
+);
+
+$variant-padding-inline: (
+  'embedded': awsui.$space-card-horizontal-embedded,
+  'default': awsui.$space-card-horizontal-default,
+);
+
+$action-padding-vertical: styles.$control-padding-vertical;
+$action-padding-horizontal: awsui.$space-xxs;
+
+@mixin apply-border-radius($variant: 'default') {
+  $radius: map.get($variant-border-radius, $variant);
+  border-start-start-radius: var(#{custom-props.$styleItemCardBorderRadius}, $radius);
+  border-start-end-radius: var(#{custom-props.$styleItemCardBorderRadius}, $radius);
+  border-end-start-radius: var(#{custom-props.$styleItemCardBorderRadius}, $radius);
+  border-end-end-radius: var(#{custom-props.$styleItemCardBorderRadius}, $radius);
+}
+
+.header {
+  &-inner {
+    @include styles.font-heading-s;
+  }
+  &:not(:has(+ .body)) {
+    flex: 1;
+  }
+}
+
+.body {
+  flex: 1;
+}
+
+.footer {
+  &:first-child {
+    margin-block-start: auto;
+  }
+}
+
+.root {
+  @include styles.styles-reset();
+  box-sizing: border-box;
+  position: relative;
+  background-color: var(#{custom-props.$styleItemCardBackgroundDefault}, awsui.$color-background-card);
+  min-inline-size: 0;
+  box-shadow: var(#{custom-props.$styleItemCardBoxShadowDefault}, awsui.$shadow-card);
+
+  &:before {
+    @include styles.base-pseudo-element;
+    box-shadow: none;
+    border-color: transparent;
+    border-block: solid var(#{custom-props.$styleItemCardBorderWidthDefault}, awsui.$border-width-card)
+      var(#{custom-props.$styleItemCardBorderColorDefault}, awsui.$color-border-card);
+    border-inline: solid var(#{custom-props.$styleItemCardBorderWidthDefault}, awsui.$border-width-card)
+      var(#{custom-props.$styleItemCardBorderColorDefault}, awsui.$color-border-card);
+  }
+
+  &::after {
+    @include styles.base-pseudo-element;
+  }
+
+  &:not(.refresh)::before {
+    border-block-start: solid var(#{custom-props.$styleItemCardBorderWidthDefault}, awsui.$border-container-top-width)
+      var(#{custom-props.$styleItemCardBorderColorDefault}, awsui.$color-border-container-top);
+  }
+
+  &.highlighted {
+    background-color: awsui.$color-background-item-selected;
+
+    &:before {
+      border-block: solid awsui.$border-width-card-highlighted awsui.$color-border-card-highlighted;
+      border-inline: solid awsui.$border-width-card-highlighted awsui.$color-border-card-highlighted;
+    }
+  }
+
+  &.variant-embedded,
+  &.variant-default {
+    > .inner-card {
+      display: flex;
+      flex-direction: column;
+      block-size: 100%;
+      inline-size: 100%;
+
+      > .header + .body,
+      > .header + .footer,
+      > .body + .footer {
+        &:not(.no-padding) {
+          padding-block-start: awsui.$space-xxs;
+        }
+      }
+
+      > .header,
+      > .body {
+        &:not(.no-padding):has(+ .body, + .footer) {
+          padding-block-end: awsui.$space-xxs;
+        }
+      }
+    }
+  }
+
+  // Generate variant styles from the configuration maps
+  @each $variant in ('embedded', 'default') {
+    &.variant-#{$variant} {
+      &,
+      &:before,
+      &::after,
+      > .inner-card {
+        @include apply-border-radius($variant);
+      }
+
+      $padding-block: map.get($variant-padding-block, $variant);
+      $padding-inline: map.get($variant-padding-inline, $variant);
+
+      > .inner-card > .header,
+      > .inner-card > .body,
+      > .inner-card > .footer {
+        &:not(.no-padding) {
+          padding-block: $padding-block;
+          padding-inline-start: $padding-inline;
+          &:not(.with-actions) {
+            padding-inline-end: $padding-inline;
+          }
+          &.with-actions {
+            padding-inline-end: calc($padding-inline - $action-padding-horizontal);
+          }
+        }
+      }
+
+      > .inner-card > .header:not(.no-padding).with-actions {
+        padding-block: calc($padding-block - $action-padding-vertical);
+        &:has(+ .body, + .footer) {
+          padding-block-end: awsui.$space-xxs;
+        }
+      }
+    }
+  }
+}
+
+.full-height {
+  block-size: 100%;
+}
+
+.description {
+  color: awsui.$color-text-heading-secondary;
+  @include styles.font-body-s;
+}
diff --git a/src/item-card/test-classes/styles.scss b/src/item-card/test-classes/styles.scss
new file mode 100644
index 0000000000..eadca55107
--- /dev/null
+++ b/src/item-card/test-classes/styles.scss
@@ -0,0 +1,24 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+.icon {
+  /* used in test-utils */
+}
+
+.body {
+  /* used in test-utils */
+}
+
+.description {
+  /* used in test-utils */
+}
+
+.header {
+  /* used in test-utils */
+}
+
+.footer {
+  /* used in test-utils */
+}
diff --git a/src/segmented-control/__tests__/__snapshots__/styles.test.tsx.snap b/src/segmented-control/__tests__/__snapshots__/styles.test.tsx.snap
index 15649abf77..9cfed12417 100644
--- a/src/segmented-control/__tests__/__snapshots__/styles.test.tsx.snap
+++ b/src/segmented-control/__tests__/__snapshots__/styles.test.tsx.snap
@@ -20,17 +20,17 @@ exports[`getSegmentedControlRootStyles handles all possible style configurations
 
 exports[`getSegmentedControlSegmentStyles handles all possible style configurations 1`] = `
 {
-  "--awsui-style-background-active-u09ddc": undefined,
-  "--awsui-style-background-default-u09ddc": undefined,
-  "--awsui-style-background-disabled-u09ddc": undefined,
-  "--awsui-style-background-hover-u09ddc": undefined,
-  "--awsui-style-color-active-u09ddc": undefined,
-  "--awsui-style-color-default-u09ddc": undefined,
-  "--awsui-style-color-disabled-u09ddc": undefined,
-  "--awsui-style-color-hover-u09ddc": undefined,
-  "--awsui-style-focus-ring-border-color-u09ddc": undefined,
-  "--awsui-style-focus-ring-border-radius-u09ddc": undefined,
-  "--awsui-style-focus-ring-border-width-u09ddc": undefined,
+  "--awsui-style-background-active-6b9ypa": undefined,
+  "--awsui-style-background-default-6b9ypa": undefined,
+  "--awsui-style-background-disabled-6b9ypa": undefined,
+  "--awsui-style-background-hover-6b9ypa": undefined,
+  "--awsui-style-color-active-6b9ypa": undefined,
+  "--awsui-style-color-default-6b9ypa": undefined,
+  "--awsui-style-color-disabled-6b9ypa": undefined,
+  "--awsui-style-color-hover-6b9ypa": undefined,
+  "--awsui-style-focus-ring-border-color-6b9ypa": undefined,
+  "--awsui-style-focus-ring-border-radius-6b9ypa": undefined,
+  "--awsui-style-focus-ring-border-width-6b9ypa": undefined,
   "borderRadius": undefined,
   "fontSize": undefined,
   "paddingBlock": undefined,
@@ -40,17 +40,17 @@ exports[`getSegmentedControlSegmentStyles handles all possible style configurati
 
 exports[`getSegmentedControlSegmentStyles handles all possible style configurations 2`] = `
 {
-  "--awsui-style-background-active-u09ddc": undefined,
-  "--awsui-style-background-default-u09ddc": undefined,
-  "--awsui-style-background-disabled-u09ddc": undefined,
-  "--awsui-style-background-hover-u09ddc": undefined,
-  "--awsui-style-color-active-u09ddc": undefined,
-  "--awsui-style-color-default-u09ddc": undefined,
-  "--awsui-style-color-disabled-u09ddc": undefined,
-  "--awsui-style-color-hover-u09ddc": undefined,
-  "--awsui-style-focus-ring-border-color-u09ddc": undefined,
-  "--awsui-style-focus-ring-border-radius-u09ddc": undefined,
-  "--awsui-style-focus-ring-border-width-u09ddc": undefined,
+  "--awsui-style-background-active-6b9ypa": undefined,
+  "--awsui-style-background-default-6b9ypa": undefined,
+  "--awsui-style-background-disabled-6b9ypa": undefined,
+  "--awsui-style-background-hover-6b9ypa": undefined,
+  "--awsui-style-color-active-6b9ypa": undefined,
+  "--awsui-style-color-default-6b9ypa": undefined,
+  "--awsui-style-color-disabled-6b9ypa": undefined,
+  "--awsui-style-color-hover-6b9ypa": undefined,
+  "--awsui-style-focus-ring-border-color-6b9ypa": undefined,
+  "--awsui-style-focus-ring-border-radius-6b9ypa": undefined,
+  "--awsui-style-focus-ring-border-width-6b9ypa": undefined,
   "borderRadius": undefined,
   "fontSize": undefined,
   "paddingBlock": undefined,
@@ -60,17 +60,17 @@ exports[`getSegmentedControlSegmentStyles handles all possible style configurati
 
 exports[`getSegmentedControlSegmentStyles handles all possible style configurations 3`] = `
 {
-  "--awsui-style-background-active-u09ddc": "#0073bb",
-  "--awsui-style-background-default-u09ddc": "#ffffff",
-  "--awsui-style-background-disabled-u09ddc": "#f0f0f0",
-  "--awsui-style-background-hover-u09ddc": "#fafafa",
-  "--awsui-style-color-active-u09ddc": "#ffffff",
-  "--awsui-style-color-default-u09ddc": "#000000",
-  "--awsui-style-color-disabled-u09ddc": "#999999",
-  "--awsui-style-color-hover-u09ddc": "#000000",
-  "--awsui-style-focus-ring-border-color-u09ddc": "#0073bb",
-  "--awsui-style-focus-ring-border-radius-u09ddc": "8px",
-  "--awsui-style-focus-ring-border-width-u09ddc": "2px",
+  "--awsui-style-background-active-6b9ypa": "#0073bb",
+  "--awsui-style-background-default-6b9ypa": "#ffffff",
+  "--awsui-style-background-disabled-6b9ypa": "#f0f0f0",
+  "--awsui-style-background-hover-6b9ypa": "#fafafa",
+  "--awsui-style-color-active-6b9ypa": "#ffffff",
+  "--awsui-style-color-default-6b9ypa": "#000000",
+  "--awsui-style-color-disabled-6b9ypa": "#999999",
+  "--awsui-style-color-hover-6b9ypa": "#000000",
+  "--awsui-style-focus-ring-border-color-6b9ypa": "#0073bb",
+  "--awsui-style-focus-ring-border-radius-6b9ypa": "8px",
+  "--awsui-style-focus-ring-border-width-6b9ypa": "2px",
   "borderRadius": "6px",
   "fontSize": "14px",
   "paddingBlock": "8px",
diff --git a/src/slider/__tests__/__snapshots__/styles.test.tsx.snap b/src/slider/__tests__/__snapshots__/styles.test.tsx.snap
index b0e2bb7918..2ee8224105 100644
--- a/src/slider/__tests__/__snapshots__/styles.test.tsx.snap
+++ b/src/slider/__tests__/__snapshots__/styles.test.tsx.snap
@@ -2,36 +2,36 @@
 
 exports[`getSliderStyles handles all possible style configurations 1`] = `
 {
-  "--awsui-style-slider-handle-background-active-u09ddc": undefined,
-  "--awsui-style-slider-handle-background-default-u09ddc": undefined,
-  "--awsui-style-slider-handle-background-hover-u09ddc": undefined,
-  "--awsui-style-slider-handle-border-radius-u09ddc": undefined,
-  "--awsui-style-slider-range-background-active-u09ddc": undefined,
-  "--awsui-style-slider-range-background-default-u09ddc": undefined,
-  "--awsui-style-slider-track-background-color-u09ddc": undefined,
+  "--awsui-style-slider-handle-background-active-6b9ypa": undefined,
+  "--awsui-style-slider-handle-background-default-6b9ypa": undefined,
+  "--awsui-style-slider-handle-background-hover-6b9ypa": undefined,
+  "--awsui-style-slider-handle-border-radius-6b9ypa": undefined,
+  "--awsui-style-slider-range-background-active-6b9ypa": undefined,
+  "--awsui-style-slider-range-background-default-6b9ypa": undefined,
+  "--awsui-style-slider-track-background-color-6b9ypa": undefined,
 }
 `;
 
 exports[`getSliderStyles handles all possible style configurations 2`] = `
 {
-  "--awsui-style-slider-handle-background-active-u09ddc": undefined,
-  "--awsui-style-slider-handle-background-default-u09ddc": undefined,
-  "--awsui-style-slider-handle-background-hover-u09ddc": undefined,
-  "--awsui-style-slider-handle-border-radius-u09ddc": undefined,
-  "--awsui-style-slider-range-background-active-u09ddc": undefined,
-  "--awsui-style-slider-range-background-default-u09ddc": undefined,
-  "--awsui-style-slider-track-background-color-u09ddc": undefined,
+  "--awsui-style-slider-handle-background-active-6b9ypa": undefined,
+  "--awsui-style-slider-handle-background-default-6b9ypa": undefined,
+  "--awsui-style-slider-handle-background-hover-6b9ypa": undefined,
+  "--awsui-style-slider-handle-border-radius-6b9ypa": undefined,
+  "--awsui-style-slider-range-background-active-6b9ypa": undefined,
+  "--awsui-style-slider-range-background-default-6b9ypa": undefined,
+  "--awsui-style-slider-track-background-color-6b9ypa": undefined,
 }
 `;
 
 exports[`getSliderStyles handles all possible style configurations 3`] = `
 {
-  "--awsui-style-slider-handle-background-active-u09ddc": "#1d4ed8",
-  "--awsui-style-slider-handle-background-default-u09ddc": "#3b82f6",
-  "--awsui-style-slider-handle-background-hover-u09ddc": "#2563eb",
-  "--awsui-style-slider-handle-border-radius-u09ddc": "50%",
-  "--awsui-style-slider-range-background-active-u09ddc": "#2563eb",
-  "--awsui-style-slider-range-background-default-u09ddc": "#3b82f6",
-  "--awsui-style-slider-track-background-color-u09ddc": "#dbeafe",
+  "--awsui-style-slider-handle-background-active-6b9ypa": "#1d4ed8",
+  "--awsui-style-slider-handle-background-default-6b9ypa": "#3b82f6",
+  "--awsui-style-slider-handle-background-hover-6b9ypa": "#2563eb",
+  "--awsui-style-slider-handle-border-radius-6b9ypa": "50%",
+  "--awsui-style-slider-range-background-active-6b9ypa": "#2563eb",
+  "--awsui-style-slider-range-background-default-6b9ypa": "#3b82f6",
+  "--awsui-style-slider-track-background-color-6b9ypa": "#dbeafe",
 }
 `;
diff --git a/src/tabs/__tests__/__snapshots__/styles.test.tsx.snap b/src/tabs/__tests__/__snapshots__/styles.test.tsx.snap
index 1f3da2473a..369fed8a6e 100644
--- a/src/tabs/__tests__/__snapshots__/styles.test.tsx.snap
+++ b/src/tabs/__tests__/__snapshots__/styles.test.tsx.snap
@@ -2,21 +2,21 @@
 
 exports[`getTabStyles transforms tab styles to CSS properties 1`] = `
 {
-  "--awsui-style-background-active-u09ddc": "#bfdbfe",
-  "--awsui-style-background-default-u09ddc": "#dbeafe",
-  "--awsui-style-background-disabled-u09ddc": "#f3f4f6",
-  "--awsui-style-background-hover-u09ddc": "#eff6ff",
-  "--awsui-style-border-color-active-u09ddc": "#1d4ed8",
-  "--awsui-style-border-color-default-u09ddc": "#3b82f6",
-  "--awsui-style-border-color-disabled-u09ddc": "#93c5fd",
-  "--awsui-style-border-color-hover-u09ddc": "#2563eb",
-  "--awsui-style-color-active-u09ddc": "#1e3a8a",
-  "--awsui-style-color-default-u09ddc": "#1e40af",
-  "--awsui-style-color-disabled-u09ddc": "#93c5fd",
-  "--awsui-style-color-hover-u09ddc": "#1e40af",
-  "--awsui-style-focus-ring-border-color-u09ddc": "#3b82f6",
-  "--awsui-style-focus-ring-border-radius-u09ddc": "4px",
-  "--awsui-style-focus-ring-border-width-u09ddc": "2px",
+  "--awsui-style-background-active-6b9ypa": "#bfdbfe",
+  "--awsui-style-background-default-6b9ypa": "#dbeafe",
+  "--awsui-style-background-disabled-6b9ypa": "#f3f4f6",
+  "--awsui-style-background-hover-6b9ypa": "#eff6ff",
+  "--awsui-style-border-color-active-6b9ypa": "#1d4ed8",
+  "--awsui-style-border-color-default-6b9ypa": "#3b82f6",
+  "--awsui-style-border-color-disabled-6b9ypa": "#93c5fd",
+  "--awsui-style-border-color-hover-6b9ypa": "#2563eb",
+  "--awsui-style-color-active-6b9ypa": "#1e3a8a",
+  "--awsui-style-color-default-6b9ypa": "#1e40af",
+  "--awsui-style-color-disabled-6b9ypa": "#93c5fd",
+  "--awsui-style-color-hover-6b9ypa": "#1e40af",
+  "--awsui-style-focus-ring-border-color-6b9ypa": "#3b82f6",
+  "--awsui-style-focus-ring-border-radius-6b9ypa": "4px",
+  "--awsui-style-focus-ring-border-width-6b9ypa": "2px",
   "borderRadius": "4px",
   "borderWidth": "2px",
   "fontSize": "16px",
@@ -28,10 +28,10 @@ exports[`getTabStyles transforms tab styles to CSS properties 1`] = `
 
 exports[`getTabStyles transforms tab styles to CSS properties 2`] = `
 {
-  "--awsui-style-tabs-active-indicator-border-radius-u09ddc": "2px",
-  "--awsui-style-tabs-active-indicator-color-u09ddc": "#1d4ed8",
-  "--awsui-style-tabs-active-indicator-width-u09ddc": "3px",
-  "--awsui-style-tabs-separator-color-u09ddc": "#cbd5e1",
-  "--awsui-style-tabs-separator-width-u09ddc": "2px",
+  "--awsui-style-tabs-active-indicator-border-radius-6b9ypa": "2px",
+  "--awsui-style-tabs-active-indicator-color-6b9ypa": "#1d4ed8",
+  "--awsui-style-tabs-active-indicator-width-6b9ypa": "3px",
+  "--awsui-style-tabs-separator-color-6b9ypa": "#cbd5e1",
+  "--awsui-style-tabs-separator-width-6b9ypa": "2px",
 }
 `;
diff --git a/src/test-utils/dom/item-card/index.ts b/src/test-utils/dom/item-card/index.ts
new file mode 100644
index 0000000000..0e4955b76b
--- /dev/null
+++ b/src/test-utils/dom/item-card/index.ts
@@ -0,0 +1,53 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { ComponentWrapper, ElementWrapper } from '@cloudscape-design/test-utils-core/dom';
+
+import structuredItemStyles from '../../../internal/components/structured-item/test-classes/styles.selectors.js';
+import styles from '../../../item-card/styles.selectors.js';
+import testStyles from '../../../item-card/test-classes/styles.selectors.js';
+
+export default class ItemCardWrapper extends ComponentWrapper<HTMLDivElement> {
+  static rootSelector: string = styles.root;
+
+  /**
+   * Finds the action slot of the item card.
+   */
+  findActions(): ElementWrapper | null {
+    return this.findByClassName(structuredItemStyles.actions);
+  }
+
+  /**
+   * Finds the content slot of the item card.
+   */
+  findContent(): ElementWrapper | null {
+    return this.findByClassName(testStyles.body);
+  }
+
+  /**
+   * Finds the description slot of the item card.
+   */
+  findDescription(): ElementWrapper | null {
+    return this.findByClassName(testStyles.description);
+  }
+
+  /**
+   * Finds the header slot of the item card.
+   */
+  findHeader(): ElementWrapper | null {
+    return this.findByClassName(testStyles.header);
+  }
+
+  /**
+   * Finds the footer slot of the item card.
+   */
+  findFooter(): ElementWrapper | null {
+    return this.findByClassName(testStyles.footer);
+  }
+
+  /**
+   * Finds the icon slot of the item card.
+   */
+  findIcon(): ElementWrapper | null {
+    return this.findByClassName(testStyles.icon);
+  }
+}
diff --git a/src/text-filter/__tests__/__snapshots__/styles.test.tsx.snap b/src/text-filter/__tests__/__snapshots__/styles.test.tsx.snap
index c01110fd53..daf5208fe6 100644
--- a/src/text-filter/__tests__/__snapshots__/styles.test.tsx.snap
+++ b/src/text-filter/__tests__/__snapshots__/styles.test.tsx.snap
@@ -2,30 +2,30 @@
 
 exports[`getTextFilterStyles handles all possible style configurations 1`] = `
 {
-  "--awsui-style-background-default-u09ddc": undefined,
-  "--awsui-style-background-disabled-u09ddc": undefined,
-  "--awsui-style-background-focus-u09ddc": undefined,
-  "--awsui-style-background-hover-u09ddc": undefined,
-  "--awsui-style-background-readonly-u09ddc": undefined,
-  "--awsui-style-border-color-default-u09ddc": undefined,
-  "--awsui-style-border-color-disabled-u09ddc": undefined,
-  "--awsui-style-border-color-focus-u09ddc": undefined,
-  "--awsui-style-border-color-hover-u09ddc": undefined,
-  "--awsui-style-border-color-readonly-u09ddc": undefined,
-  "--awsui-style-box-shadow-default-u09ddc": undefined,
-  "--awsui-style-box-shadow-disabled-u09ddc": undefined,
-  "--awsui-style-box-shadow-focus-u09ddc": undefined,
-  "--awsui-style-box-shadow-hover-u09ddc": undefined,
-  "--awsui-style-box-shadow-readonly-u09ddc": undefined,
-  "--awsui-style-color-default-u09ddc": undefined,
-  "--awsui-style-color-disabled-u09ddc": undefined,
-  "--awsui-style-color-focus-u09ddc": undefined,
-  "--awsui-style-color-hover-u09ddc": undefined,
-  "--awsui-style-color-readonly-u09ddc": undefined,
-  "--awsui-style-placeholder-color-u09ddc": undefined,
-  "--awsui-style-placeholder-font-size-u09ddc": undefined,
-  "--awsui-style-placeholder-font-style-u09ddc": undefined,
-  "--awsui-style-placeholder-font-weight-u09ddc": undefined,
+  "--awsui-style-background-default-6b9ypa": undefined,
+  "--awsui-style-background-disabled-6b9ypa": undefined,
+  "--awsui-style-background-focus-6b9ypa": undefined,
+  "--awsui-style-background-hover-6b9ypa": undefined,
+  "--awsui-style-background-readonly-6b9ypa": undefined,
+  "--awsui-style-border-color-default-6b9ypa": undefined,
+  "--awsui-style-border-color-disabled-6b9ypa": undefined,
+  "--awsui-style-border-color-focus-6b9ypa": undefined,
+  "--awsui-style-border-color-hover-6b9ypa": undefined,
+  "--awsui-style-border-color-readonly-6b9ypa": undefined,
+  "--awsui-style-box-shadow-default-6b9ypa": undefined,
+  "--awsui-style-box-shadow-disabled-6b9ypa": undefined,
+  "--awsui-style-box-shadow-focus-6b9ypa": undefined,
+  "--awsui-style-box-shadow-hover-6b9ypa": undefined,
+  "--awsui-style-box-shadow-readonly-6b9ypa": undefined,
+  "--awsui-style-color-default-6b9ypa": undefined,
+  "--awsui-style-color-disabled-6b9ypa": undefined,
+  "--awsui-style-color-focus-6b9ypa": undefined,
+  "--awsui-style-color-hover-6b9ypa": undefined,
+  "--awsui-style-color-readonly-6b9ypa": undefined,
+  "--awsui-style-placeholder-color-6b9ypa": undefined,
+  "--awsui-style-placeholder-font-size-6b9ypa": undefined,
+  "--awsui-style-placeholder-font-style-6b9ypa": undefined,
+  "--awsui-style-placeholder-font-weight-6b9ypa": undefined,
   "borderRadius": undefined,
   "borderWidth": undefined,
   "fontSize": undefined,
@@ -37,30 +37,30 @@ exports[`getTextFilterStyles handles all possible style configurations 1`] = `
 
 exports[`getTextFilterStyles handles all possible style configurations 2`] = `
 {
-  "--awsui-style-background-default-u09ddc": undefined,
-  "--awsui-style-background-disabled-u09ddc": undefined,
-  "--awsui-style-background-focus-u09ddc": undefined,
-  "--awsui-style-background-hover-u09ddc": undefined,
-  "--awsui-style-background-readonly-u09ddc": undefined,
-  "--awsui-style-border-color-default-u09ddc": undefined,
-  "--awsui-style-border-color-disabled-u09ddc": undefined,
-  "--awsui-style-border-color-focus-u09ddc": undefined,
-  "--awsui-style-border-color-hover-u09ddc": undefined,
-  "--awsui-style-border-color-readonly-u09ddc": undefined,
-  "--awsui-style-box-shadow-default-u09ddc": undefined,
-  "--awsui-style-box-shadow-disabled-u09ddc": undefined,
-  "--awsui-style-box-shadow-focus-u09ddc": undefined,
-  "--awsui-style-box-shadow-hover-u09ddc": undefined,
-  "--awsui-style-box-shadow-readonly-u09ddc": undefined,
-  "--awsui-style-color-default-u09ddc": undefined,
-  "--awsui-style-color-disabled-u09ddc": undefined,
-  "--awsui-style-color-focus-u09ddc": undefined,
-  "--awsui-style-color-hover-u09ddc": undefined,
-  "--awsui-style-color-readonly-u09ddc": undefined,
-  "--awsui-style-placeholder-color-u09ddc": undefined,
-  "--awsui-style-placeholder-font-size-u09ddc": undefined,
-  "--awsui-style-placeholder-font-style-u09ddc": undefined,
-  "--awsui-style-placeholder-font-weight-u09ddc": undefined,
+  "--awsui-style-background-default-6b9ypa": undefined,
+  "--awsui-style-background-disabled-6b9ypa": undefined,
+  "--awsui-style-background-focus-6b9ypa": undefined,
+  "--awsui-style-background-hover-6b9ypa": undefined,
+  "--awsui-style-background-readonly-6b9ypa": undefined,
+  "--awsui-style-border-color-default-6b9ypa": undefined,
+  "--awsui-style-border-color-disabled-6b9ypa": undefined,
+  "--awsui-style-border-color-focus-6b9ypa": undefined,
+  "--awsui-style-border-color-hover-6b9ypa": undefined,
+  "--awsui-style-border-color-readonly-6b9ypa": undefined,
+  "--awsui-style-box-shadow-default-6b9ypa": undefined,
+  "--awsui-style-box-shadow-disabled-6b9ypa": undefined,
+  "--awsui-style-box-shadow-focus-6b9ypa": undefined,
+  "--awsui-style-box-shadow-hover-6b9ypa": undefined,
+  "--awsui-style-box-shadow-readonly-6b9ypa": undefined,
+  "--awsui-style-color-default-6b9ypa": undefined,
+  "--awsui-style-color-disabled-6b9ypa": undefined,
+  "--awsui-style-color-focus-6b9ypa": undefined,
+  "--awsui-style-color-hover-6b9ypa": undefined,
+  "--awsui-style-color-readonly-6b9ypa": undefined,
+  "--awsui-style-placeholder-color-6b9ypa": undefined,
+  "--awsui-style-placeholder-font-size-6b9ypa": undefined,
+  "--awsui-style-placeholder-font-style-6b9ypa": undefined,
+  "--awsui-style-placeholder-font-weight-6b9ypa": undefined,
   "borderRadius": undefined,
   "borderWidth": undefined,
   "fontSize": undefined,
@@ -72,30 +72,30 @@ exports[`getTextFilterStyles handles all possible style configurations 2`] = `
 
 exports[`getTextFilterStyles handles all possible style configurations 3`] = `
 {
-  "--awsui-style-background-default-u09ddc": "#ffffff",
-  "--awsui-style-background-disabled-u09ddc": "#f0f0f0",
-  "--awsui-style-background-focus-u09ddc": "#ffffff",
-  "--awsui-style-background-hover-u09ddc": "#fafafa",
-  "--awsui-style-background-readonly-u09ddc": "#ffffff",
-  "--awsui-style-border-color-default-u09ddc": "#cccccc",
-  "--awsui-style-border-color-disabled-u09ddc": "#e0e0e0",
-  "--awsui-style-border-color-focus-u09ddc": "#0073bb",
-  "--awsui-style-border-color-hover-u09ddc": "#999999",
-  "--awsui-style-border-color-readonly-u09ddc": "#e0e0e0",
-  "--awsui-style-box-shadow-default-u09ddc": "none",
-  "--awsui-style-box-shadow-disabled-u09ddc": "none",
-  "--awsui-style-box-shadow-focus-u09ddc": "0 0 0 2px #0073bb",
-  "--awsui-style-box-shadow-hover-u09ddc": "0 1px 2px rgba(0,0,0,0.1)",
-  "--awsui-style-box-shadow-readonly-u09ddc": "none",
-  "--awsui-style-color-default-u09ddc": "#000000",
-  "--awsui-style-color-disabled-u09ddc": "#999999",
-  "--awsui-style-color-focus-u09ddc": "#000000",
-  "--awsui-style-color-hover-u09ddc": "#000000",
-  "--awsui-style-color-readonly-u09ddc": "#000000",
-  "--awsui-style-placeholder-color-u09ddc": "#999999",
-  "--awsui-style-placeholder-font-size-u09ddc": "14px",
-  "--awsui-style-placeholder-font-style-u09ddc": "italic",
-  "--awsui-style-placeholder-font-weight-u09ddc": "400",
+  "--awsui-style-background-default-6b9ypa": "#ffffff",
+  "--awsui-style-background-disabled-6b9ypa": "#f0f0f0",
+  "--awsui-style-background-focus-6b9ypa": "#ffffff",
+  "--awsui-style-background-hover-6b9ypa": "#fafafa",
+  "--awsui-style-background-readonly-6b9ypa": "#ffffff",
+  "--awsui-style-border-color-default-6b9ypa": "#cccccc",
+  "--awsui-style-border-color-disabled-6b9ypa": "#e0e0e0",
+  "--awsui-style-border-color-focus-6b9ypa": "#0073bb",
+  "--awsui-style-border-color-hover-6b9ypa": "#999999",
+  "--awsui-style-border-color-readonly-6b9ypa": "#e0e0e0",
+  "--awsui-style-box-shadow-default-6b9ypa": "none",
+  "--awsui-style-box-shadow-disabled-6b9ypa": "none",
+  "--awsui-style-box-shadow-focus-6b9ypa": "0 0 0 2px #0073bb",
+  "--awsui-style-box-shadow-hover-6b9ypa": "0 1px 2px rgba(0,0,0,0.1)",
+  "--awsui-style-box-shadow-readonly-6b9ypa": "none",
+  "--awsui-style-color-default-6b9ypa": "#000000",
+  "--awsui-style-color-disabled-6b9ypa": "#999999",
+  "--awsui-style-color-focus-6b9ypa": "#000000",
+  "--awsui-style-color-hover-6b9ypa": "#000000",
+  "--awsui-style-color-readonly-6b9ypa": "#000000",
+  "--awsui-style-placeholder-color-6b9ypa": "#999999",
+  "--awsui-style-placeholder-font-size-6b9ypa": "14px",
+  "--awsui-style-placeholder-font-style-6b9ypa": "italic",
+  "--awsui-style-placeholder-font-weight-6b9ypa": "400",
   "borderRadius": "4px",
   "borderWidth": "1px",
   "fontSize": "14px",
diff --git a/src/token/__tests__/__snapshots__/styles.test.tsx.snap b/src/token/__tests__/__snapshots__/styles.test.tsx.snap
index 77360a56c2..6e76a3e401 100644
--- a/src/token/__tests__/__snapshots__/styles.test.tsx.snap
+++ b/src/token/__tests__/__snapshots__/styles.test.tsx.snap
@@ -2,19 +2,19 @@
 
 exports[`getTokenRootStyles handles all possible style configurations 1`] = `
 {
-  "--awsui-style-focus-ring-border-color-u09ddc": "#6366f1",
-  "--awsui-style-focus-ring-border-radius-u09ddc": "12px",
-  "--awsui-style-focus-ring-border-width-u09ddc": "2px",
-  "--awsui-token-style-background-default-u09ddc": "#eef2ff",
-  "--awsui-token-style-background-disabled-u09ddc": "#f1f5f9",
-  "--awsui-token-style-background-read-only-u09ddc": "#f8fafc",
-  "--awsui-token-style-border-color-default-u09ddc": "#c7d2fe",
-  "--awsui-token-style-border-color-disabled-u09ddc": "#e2e8f0",
-  "--awsui-token-style-border-color-read-only-u09ddc": "#cbd5e1",
-  "--awsui-token-style-dismiss-color-default-u09ddc": "#6366f1",
-  "--awsui-token-style-dismiss-color-disabled-u09ddc": "#cbd5e1",
-  "--awsui-token-style-dismiss-color-hover-u09ddc": "#4338ca",
-  "--awsui-token-style-dismiss-color-read-only-u09ddc": "#94a3b8",
+  "--awsui-style-focus-ring-border-color-6b9ypa": "#6366f1",
+  "--awsui-style-focus-ring-border-radius-6b9ypa": "12px",
+  "--awsui-style-focus-ring-border-width-6b9ypa": "2px",
+  "--awsui-token-style-background-default-6b9ypa": "#eef2ff",
+  "--awsui-token-style-background-disabled-6b9ypa": "#f1f5f9",
+  "--awsui-token-style-background-read-only-6b9ypa": "#f8fafc",
+  "--awsui-token-style-border-color-default-6b9ypa": "#c7d2fe",
+  "--awsui-token-style-border-color-disabled-6b9ypa": "#e2e8f0",
+  "--awsui-token-style-border-color-read-only-6b9ypa": "#cbd5e1",
+  "--awsui-token-style-dismiss-color-default-6b9ypa": "#6366f1",
+  "--awsui-token-style-dismiss-color-disabled-6b9ypa": "#cbd5e1",
+  "--awsui-token-style-dismiss-color-hover-6b9ypa": "#4338ca",
+  "--awsui-token-style-dismiss-color-read-only-6b9ypa": "#94a3b8",
   "borderRadius": "24px",
   "borderWidth": "2px",
   "paddingBlock": "4px",
diff --git a/style-dictionary/classic/borders.ts b/style-dictionary/classic/borders.ts
index 40f4df14ec..af0f0c8bb5 100644
--- a/style-dictionary/classic/borders.ts
+++ b/style-dictionary/classic/borders.ts
@@ -38,6 +38,7 @@ const tokens: StyleDictionary.BordersDictionary = {
   borderLinkFocusRingShadowSpread: '0px',
   borderWidthAlert: '1px',
   borderWidthButton: '1px',
+  borderWidthCard: '0px',
   borderWidthDropdown: '1px',
   borderWidthField: '1px',
   borderWidthPopover: '1px',
diff --git a/style-dictionary/classic/shadows.ts b/style-dictionary/classic/shadows.ts
index a83be0b458..b80dbdbdf4 100644
--- a/style-dictionary/classic/shadows.ts
+++ b/style-dictionary/classic/shadows.ts
@@ -7,6 +7,7 @@ import { StyleDictionary } from '../utils/interfaces.js';
 import { tokens as parentTokens } from '../visual-refresh/shadows.js';
 
 const tokens: StyleDictionary.ShadowsDictionary = {
+  shadowCard: '{shadowContainer}',
   shadowContainer: {
     light:
       '0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15)',
diff --git a/style-dictionary/classic/spacing.ts b/style-dictionary/classic/spacing.ts
index 2255af898a..8bee0f2cb0 100644
--- a/style-dictionary/classic/spacing.ts
+++ b/style-dictionary/classic/spacing.ts
@@ -20,7 +20,10 @@ const tokens: StyleDictionary.SpacingDictionary = {
   spaceCalendarGridFocusOutlineGutter: '0px',
   spaceCalendarGridSelectedFocusOutlineGutter: '2px',
   spaceCalendarGridGutter: '0px',
-  spaceCardVertical: '{spaceScaledL}',
+  spaceCardHorizontalDefault: '{spaceContainerHorizontal}',
+  spaceCardHorizontalEmbedded: { comfortable: '{spaceS}', compact: '10px' },
+  spaceCardVerticalDefault: '{spaceScaledL}',
+  spaceCardVerticalEmbedded: { comfortable: '10px', compact: '{spaceXs}' },
   spaceCodeEditorStatusFocusOutlineGutter: '3px',
   spaceContainerContentTop: '{spaceScaledM}',
   spaceContainerHeaderTop: '{spaceScaledS}',
diff --git a/style-dictionary/utils/token-names.ts b/style-dictionary/utils/token-names.ts
index 736ed1882b..fd791ece8e 100644
--- a/style-dictionary/utils/token-names.ts
+++ b/style-dictionary/utils/token-names.ts
@@ -523,6 +523,7 @@ export type ColorsTokenName =
   | 'colorBackgroundCodeEditorLoading'
   | 'colorBackgroundCodeEditorPaneItemHover'
   | 'colorBackgroundCodeEditorStatusBar'
+  | 'colorBackgroundCard'
   | 'colorBackgroundContainerContent'
   | 'colorBackgroundContainerHeader'
   | 'colorBackgroundControlChecked'
@@ -612,6 +613,8 @@ export type ColorsTokenName =
   | 'colorBorderCodeEditorAceActiveLineDarkTheme'
   | 'colorBorderCodeEditorDefault'
   | 'colorBorderCodeEditorPaneItemHover'
+  | 'colorBorderCard'
+  | 'colorBorderCardHighlighted'
   | 'colorBorderContainerDivider'
   | 'colorBorderContainerTop'
   | 'colorBorderControlChecked'
@@ -845,6 +848,8 @@ export type BordersTokenName =
   | 'borderRadiusBadge'
   | 'borderRadiusButton'
   | 'borderRadiusCalendarDayFocusRing'
+  | 'borderRadiusCardDefault'
+  | 'borderRadiusCardEmbedded'
   | 'borderRadiusCodeEditor'
   | 'borderRadiusContainer'
   | 'borderRadiusControlCircularFocusRing'
@@ -864,6 +869,8 @@ export type BordersTokenName =
   | 'borderLinkFocusRingOutline'
   | 'borderLinkFocusRingShadowSpread'
   | 'borderWidthAlert'
+  | 'borderWidthCard'
+  | 'borderWidthCardHighlighted'
   | 'borderWidthButton'
   | 'borderWidthDropdown'
   | 'borderWidthField'
@@ -940,8 +947,10 @@ export type SpacingTokenName =
   | 'spaceCalendarGridFocusOutlineGutter'
   | 'spaceCalendarGridSelectedFocusOutlineGutter'
   | 'spaceCalendarGridGutter'
-  | 'spaceCardHorizontal'
-  | 'spaceCardVertical'
+  | 'spaceCardHorizontalDefault'
+  | 'spaceCardHorizontalEmbedded'
+  | 'spaceCardVerticalDefault'
+  | 'spaceCardVerticalEmbedded'
   | 'spaceCodeEditorStatusFocusOutlineGutter'
   | 'spaceContainerContentTop'
   | 'spaceContainerHeaderTop'
@@ -1028,6 +1037,7 @@ export type SpacingTokenName =
   | 'spaceXxxl'
   | 'spaceXxxs';
 export type ShadowsTokenName =
+  | 'shadowCard'
   | 'shadowContainer'
   | 'shadowContainerActive'
   | 'shadowDropdown'
diff --git a/style-dictionary/visual-refresh/borders.ts b/style-dictionary/visual-refresh/borders.ts
index ea3b3d3b89..6bae311727 100644
--- a/style-dictionary/visual-refresh/borders.ts
+++ b/style-dictionary/visual-refresh/borders.ts
@@ -24,6 +24,8 @@ export const tokens: StyleDictionary.BordersDictionary = {
   borderRadiusButton: '20px',
   borderRadiusCalendarDayFocusRing: '3px',
   borderRadiusCodeEditor: '{borderRadiusInput}',
+  borderRadiusCardDefault: '{borderRadiusContainer}',
+  borderRadiusCardEmbedded: '{borderRadiusChatBubble}',
   borderRadiusContainer: '16px',
   borderRadiusControlCircularFocusRing: '4px',
   borderRadiusControlDefaultFocusRing: '4px',
@@ -41,6 +43,8 @@ export const tokens: StyleDictionary.BordersDictionary = {
   borderTableStickyWidth: '1px',
   borderLinkFocusRingOutline: '0',
   borderLinkFocusRingShadowSpread: '2px',
+  borderWidthCard: '{borderDividerSectionWidth}',
+  borderWidthCardHighlighted: '{borderItemWidth}',
   borderWidthAlert: '2px',
   borderWidthButton: '2px',
   borderWidthDropdown: '2px',
diff --git a/style-dictionary/visual-refresh/colors.ts b/style-dictionary/visual-refresh/colors.ts
index f6a6c8d3cf..ec7adff6a6 100644
--- a/style-dictionary/visual-refresh/colors.ts
+++ b/style-dictionary/visual-refresh/colors.ts
@@ -40,6 +40,7 @@ const tokens: StyleDictionary.ColorsDictionary = {
   colorBackgroundCodeEditorLoading: { light: '{colorNeutral100}', dark: '{colorNeutral800}' },
   colorBackgroundCodeEditorPaneItemHover: { light: '{colorNeutral250}', dark: '{colorNeutral700}' },
   colorBackgroundCodeEditorStatusBar: { light: '{colorNeutral200}', dark: '{colorNeutral800}' },
+  colorBackgroundCard: '{colorBackgroundContainerContent}',
   colorBackgroundContainerContent: { light: '{colorWhite}', dark: '{colorNeutral850}' },
   colorBackgroundContainerHeader: { light: '{colorWhite}', dark: '{colorNeutral850}' },
   colorBackgroundControlChecked: { light: '{colorPrimary600}', dark: '{colorPrimary400}' },
@@ -132,6 +133,8 @@ const tokens: StyleDictionary.ColorsDictionary = {
   colorBorderCodeEditorAceActiveLineDarkTheme: '{colorNeutral600}',
   colorBorderCodeEditorDefault: { light: '{colorNeutral300}', dark: '{colorNeutral600}' },
   colorBorderCodeEditorPaneItemHover: '{colorBorderDropdownItemHover}',
+  colorBorderCard: '{colorBorderDividerDefault}',
+  colorBorderCardHighlighted: '{colorBorderItemSelected}',
   colorBorderContainerDivider: 'transparent',
   colorBorderContainerTop: 'transparent',
   colorBorderControlChecked: '{colorBackgroundControlChecked}',
diff --git a/style-dictionary/visual-refresh/metadata/borders.ts b/style-dictionary/visual-refresh/metadata/borders.ts
index bfe420cac7..86bdd396d1 100644
--- a/style-dictionary/visual-refresh/metadata/borders.ts
+++ b/style-dictionary/visual-refresh/metadata/borders.ts
@@ -164,6 +164,16 @@ const metadata: StyleDictionary.MetadataIndex = {
     public: true,
     themeable: true,
   },
+  borderRadiusCardDefault: {
+    description: 'The border radius of default cards.',
+    public: true,
+    themeable: true,
+  },
+  borderRadiusCardEmbedded: {
+    description: 'The border radius of embedded cards.',
+    public: true,
+    themeable: true,
+  },
 };
 
 export default metadata;
diff --git a/style-dictionary/visual-refresh/shadows.ts b/style-dictionary/visual-refresh/shadows.ts
index 730a7c1ff2..32ec398448 100644
--- a/style-dictionary/visual-refresh/shadows.ts
+++ b/style-dictionary/visual-refresh/shadows.ts
@@ -4,6 +4,7 @@ import { expandColorDictionary } from '../utils/index.js';
 import { StyleDictionary } from '../utils/interfaces.js';
 
 const tokens: StyleDictionary.ShadowsDictionary = {
+  shadowCard: 'none',
   shadowContainer: {
     light: '0px 0px 1px 1px #e9ebed, 0px 1px 8px 2px rgba(0, 7, 22, 0.12)', // 1px grey-200 faux border
     dark: '0px 1px 8px 2px rgba(0, 7, 22, 0.6)',
diff --git a/style-dictionary/visual-refresh/spacing.ts b/style-dictionary/visual-refresh/spacing.ts
index 18e97743f0..76c306aacb 100644
--- a/style-dictionary/visual-refresh/spacing.ts
+++ b/style-dictionary/visual-refresh/spacing.ts
@@ -17,8 +17,10 @@ const tokens: StyleDictionary.SpacingDictionary = {
   spaceCalendarGridFocusOutlineGutter: '-5px',
   spaceCalendarGridSelectedFocusOutlineGutter: '{spaceCalendarGridFocusOutlineGutter}',
   spaceCalendarGridGutter: '6px',
-  spaceCardHorizontal: '{spaceContainerHorizontal}',
-  spaceCardVertical: '{spaceScaledM}',
+  spaceCardHorizontalDefault: '{spaceContainerHorizontal}',
+  spaceCardHorizontalEmbedded: { comfortable: '{spaceS}', compact: '10px' },
+  spaceCardVerticalDefault: '{spaceScaledM}',
+  spaceCardVerticalEmbedded: { comfortable: '10px', compact: '{spaceXs}' },
   spaceCodeEditorStatusFocusOutlineGutter: '-7px',
   spaceContainerContentTop: '{spaceXxs}',
   spaceContainerHeaderTop: '{spaceS}',