diff --git a/pages/card/preview.page.tsx b/pages/card/preview.page.tsx
new file mode 100644
index 0000000000..493ca97b40
--- /dev/null
+++ b/pages/card/preview.page.tsx
@@ -0,0 +1,46 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+
+import ButtonGroup from '~components/button-group';
+import Card from '~components/internal/components/card';
+
+import image from '../container/images/16-9.png';
+import ScreenshotArea from '../utils/screenshot-area';
+
+export default function ButtonsScenario() {
+  return (
+    <article>
+      <h1>Preview</h1>
+      <ScreenshotArea>
+        <Card
+          header="image-title.jpg"
+          //   description="Metadata about file - 4GB"
+          action={
+            <ButtonGroup
+              onItemClick={() => null}
+              items={[
+                {
+                  type: 'icon-button',
+                  id: 'download',
+                  iconName: 'download',
+                  text: 'Download',
+                },
+                {
+                  type: 'icon-button',
+                  id: 'expand',
+                  iconName: 'expand',
+                  text: 'Expand',
+                },
+              ]}
+              variant={'icon'}
+            />
+          }
+          disableContentPaddings={true}
+        >
+          <img style={{ width: '100%', height: '100%', display: 'block' }} src={image} />
+        </Card>
+      </ScreenshotArea>
+    </article>
+  );
+}
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 d1620c2d1d..924427038f 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
@@ -117,7 +117,6 @@ exports[`test-utils selectors 1`] = `
   ],
   "cards": [
     "awsui_card-header-inner_p8a6i",
-    "awsui_card-selected_p8a6i",
     "awsui_card_p8a6i",
     "awsui_empty_p8a6i",
     "awsui_loading_p8a6i",
@@ -357,6 +356,7 @@ exports[`test-utils selectors 1`] = `
   ],
   "internal": [
     "awsui_actions_x6dl3",
+    "awsui_active_1xxz5",
     "awsui_application_1fcus",
     "awsui_axis-label--x_f0fot",
     "awsui_axis-label--y_f0fot",
@@ -381,6 +381,7 @@ exports[`test-utils selectors 1`] = `
     "awsui_filtering-match-highlight_1p2cx",
     "awsui_footer_dgs8z",
     "awsui_has-background_15o6u",
+    "awsui_header-inner_1xxz5",
     "awsui_header_dgs8z",
     "awsui_highlighted_15o6u",
     "awsui_icon_x6dl3",
@@ -405,6 +406,7 @@ exports[`test-utils selectors 1`] = `
     "awsui_root_1om0h",
     "awsui_root_1qprf",
     "awsui_root_1t44z",
+    "awsui_root_1xxz5",
     "awsui_root_qwoo0",
     "awsui_root_vrgzu",
     "awsui_screenreader-content_15o6u",
diff --git a/src/cards/index.tsx b/src/cards/index.tsx
index 93207b5624..6ea70bbf35 100644
--- a/src/cards/index.tsx
+++ b/src/cards/index.tsx
@@ -12,6 +12,7 @@ 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';
@@ -269,7 +270,6 @@ const CardsList = <T,>({
 }) => {
   const selectable = !!selectionType;
   const canClickEntireCard = selectable && entireCardClickable;
-  const isRefresh = useVisualRefresh();
 
   const { moveFocusDown, moveFocusUp } = useSelectionFocusMove(selectionType, items.length);
 
@@ -315,60 +315,65 @@ const CardsList = <T,>({
           },
         };
         return (
-          <li
-            className={clsx(styles.card, {
-              [styles['card-selectable']]: selectable,
-              [styles['card-selected']]: selectable && selected,
-            })}
-            key={key}
+          <Card
+            action={
+              selectionProps && (
+                <div
+                  className={styles['selection-control']}
+                  {...(!canClickEntireCard && !disabled
+                    ? getAnalyticsMetadataAttribute(selectionAnalyticsMetadata)
+                    : {})}
+                >
+                  <SelectionControl onFocusDown={moveFocusDown} onFocusUp={moveFocusUp} {...selectionProps} />
+                </div>
+              )
+            }
+            active={selectable && selected}
+            className={styles.card}
+            header={
+              cardDefinition.header ? (
+                <div className={clsx(styles['card-header'], analyticsSelectors['card-header'])}>
+                  {cardDefinition.header(item)}
+                </div>
+              ) : (
+                ''
+              )
+            }
+            innerMetadataAttributes={
+              canClickEntireCard && !disabled ? getAnalyticsMetadataAttribute(selectionAnalyticsMetadata) : {}
+            }
+            key={index}
+            metadataAttributes={{
+              ...getAnalyticsMetadataAttribute({
+                component: {
+                  innerContext: {
+                    position: `${index + 1}`,
+                    item: `${key}`,
+                  },
+                },
+              }),
+              ...focusMarkers.item,
+            }}
+            onClick={
+              canClickEntireCard
+                ? event => {
+                    selectionProps?.onChange();
+                    // Manually move focus to the native input (checkbox or radio button)
+                    event.currentTarget.querySelector('input')?.focus();
+                  }
+                : undefined
+            }
             onFocus={onFocus}
-            {...(focusMarkers && focusMarkers.item)}
             role={listItemRole}
-            {...getAnalyticsMetadataAttribute({
-              component: {
-                innerContext: {
-                  position: `${index + 1}`,
-                  item: `${key}`,
-                },
-              },
-            })}
+            tagName="li"
           >
-            <div
-              className={clsx(styles['card-inner'], isRefresh && styles.refresh)}
-              {...(canClickEntireCard && !disabled ? getAnalyticsMetadataAttribute(selectionAnalyticsMetadata) : {})}
-              onClick={
-                canClickEntireCard
-                  ? event => {
-                      selectionProps?.onChange();
-                      // Manually move focus to the native input (checkbox or radio button)
-                      event.currentTarget.querySelector('input')?.focus();
-                    }
-                  : undefined
-              }
-            >
-              <div className={styles['card-header']}>
-                <div className={clsx(styles['card-header-inner'], analyticsSelectors['card-header'])}>
-                  {cardDefinition.header ? cardDefinition.header(item) : ''}
-                </div>
-                {selectionProps && (
-                  <div
-                    className={styles['selection-control']}
-                    {...(!canClickEntireCard && !disabled
-                      ? getAnalyticsMetadataAttribute(selectionAnalyticsMetadata)
-                      : {})}
-                  >
-                    <SelectionControl onFocusDown={moveFocusDown} onFocusUp={moveFocusUp} {...selectionProps} />
-                  </div>
-                )}
+            {visibleSectionsDefinition.map(({ width = 100, header, content, id }, index) => (
+              <div key={id || index} className={styles.section} style={{ width: `${width}%` }}>
+                {header ? <div className={styles['section-header']}>{header}</div> : ''}
+                {content ? <div className={styles['section-content']}>{content(item)}</div> : ''}
               </div>
-              {visibleSectionsDefinition.map(({ width = 100, header, content, id }, index) => (
-                <div key={id || index} className={styles.section} style={{ width: `${width}%` }}>
-                  {header ? <div className={styles['section-header']}>{header}</div> : ''}
-                  {content ? <div className={styles['section-content']}>{content(item)}</div> : ''}
-                </div>
-              ))}
-            </div>
-          </li>
+            ))}
+          </Card>
         );
       })}
     </ol>
diff --git a/src/cards/styles.scss b/src/cards/styles.scss
index b2075f281b..46551f03d5 100644
--- a/src/cards/styles.scss
+++ b/src/cards/styles.scss
@@ -7,47 +7,9 @@
 
 @use '../internal/styles' as styles;
 @use '../internal/styles/tokens' as awsui;
-@use '../container/shared' as container;
-@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;
-
-  &::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();
-  @include styles.default-text-style;
 }
 
 .header {
@@ -112,48 +74,16 @@
 }
 
 .card {
-  display: flex;
-  overflow-wrap: break-word;
-  word-wrap: break-word;
-  margin-block: 0;
-  margin-inline: 0;
-  padding-block: 0;
-  padding-inline: 0;
-  list-style: none;
-  &-inner {
-    position: relative;
-    background-color: awsui.$color-background-container-content;
-    margin-block-start: 0;
-    margin-block-end: awsui.$space-grid-gutter;
-    margin-inline-start: awsui.$space-grid-gutter;
-    margin-inline-end: 0;
-    padding-block: awsui.$space-card-vertical;
-    padding-inline: awsui.$space-card-horizontal;
-    inline-size: 100%;
-    min-inline-size: 0;
-    @include card-style;
-  }
-  &-header {
-    @include styles.font-heading-m;
-    &-inner {
-      inline-size: 100%;
-      display: inline-block;
-    }
-  }
-  &-selectable {
-    > .card-inner > .card-header {
-      inline-size: 90%;
-    }
-  }
-  &-selected {
-    > .card-inner {
-      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;
-      }
-    }
-  }
+  /* Used in test utils */
+}
+
+.card-header-inner {
+  /* Used in test utils */
+  padding-block-start: 4px;
+}
+
+.card-header {
+  @include styles.font-heading-m;
 }
 
 .section {
diff --git a/src/internal/components/card/index.tsx b/src/internal/components/card/index.tsx
new file mode 100644
index 0000000000..84d4fa42c7
--- /dev/null
+++ b/src/internal/components/card/index.tsx
@@ -0,0 +1,50 @@
+// 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 { InternalCardProps } from './interfaces';
+
+import styles from './styles.css.js';
+
+export default function Card({
+  action,
+  active,
+  children,
+  className,
+  header,
+  innerMetadataAttributes,
+  metadataAttributes,
+  onClick,
+  onFocus,
+  role,
+  tagName: TagName = 'div',
+  disableContentPaddings,
+}: InternalCardProps) {
+  const isRefresh = useVisualRefresh();
+
+  return (
+    <TagName
+      className={clsx(className, styles.root, {
+        [styles['with-action']]: !!action,
+        [styles.active]: active,
+      })}
+      onFocus={onFocus}
+      role={role}
+      {...metadataAttributes}
+    >
+      <div
+        className={clsx(styles['card-inner'], isRefresh && styles.refresh)}
+        {...innerMetadataAttributes}
+        onClick={onClick}
+      >
+        <div className={styles.header}>
+          <div className={styles['header-inner']}>{header}</div>
+          {action && <div className={styles.action}>{action}</div>}
+        </div>
+        <div className={clsx(styles.body, disableContentPaddings && styles['no-padding'])}>{children}</div>
+      </div>
+    </TagName>
+  );
+}
diff --git a/src/internal/components/card/interfaces.ts b/src/internal/components/card/interfaces.ts
new file mode 100644
index 0000000000..acb0e07da5
--- /dev/null
+++ b/src/internal/components/card/interfaces.ts
@@ -0,0 +1,58 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { FocusEventHandler } from 'react';
+
+import { BaseComponentProps } from '../../base-component';
+
+export interface InternalCardProps extends BaseComponentProps {
+  /**
+   * Specifies an action for the card.
+   * It is recommended to use a button with inline-icon variant.
+   */
+  action?: React.ReactNode;
+
+  /**
+   * Specifies whether the card is in active state.
+   */
+  active?: boolean;
+
+  /**
+   * Optional URL for an image which will be displayed cropped as a background of the card.
+   * When this property is used, a dark gradient is overlayed and the text above defaults to bright colors.
+   * Make sure that any content you place on the card has sufficient contrast with the overlayed image behind.
+   */
+  imageUrl?: string;
+
+  /**
+   * Primary content displayed in the card.
+   */
+  children?: React.ReactNode;
+
+  /**
+   * Heading text.
+   */
+  header?: React.ReactNode;
+
+  /**
+   * Icon which will be displayed at the top of the card,
+   * inline at the start of the content.
+   */
+  icon?: React.ReactNode;
+
+  /**
+   * Called when the user clicks on the card.
+   */
+  onClick?: React.MouseEventHandler<HTMLElement>;
+
+  onFocus?: FocusEventHandler<HTMLElement>;
+
+  role?: string;
+
+  tagName?: 'li' | 'div';
+
+  disableContentPaddings?: boolean;
+
+  metadataAttributes?: Record<string, string | undefined>;
+
+  innerMetadataAttributes?: Record<string, string | undefined>;
+}
diff --git a/src/cards/motion.scss b/src/internal/components/card/motion.scss
similarity index 89%
rename from src/cards/motion.scss
rename to src/internal/components/card/motion.scss
index 385aa1d4b2..4dcf4658d3 100644
--- a/src/cards/motion.scss
+++ b/src/internal/components/card/motion.scss
@@ -3,8 +3,8 @@
  SPDX-License-Identifier: Apache-2.0
 */
 
-@use '../internal/styles' as styles;
-@use '../internal/styles/tokens' as awsui;
+@use '../../styles' as styles;
+@use '../../styles/tokens' as awsui;
 
 .card-inner {
   @include styles.with-motion {
diff --git a/src/internal/components/card/styles.scss b/src/internal/components/card/styles.scss
new file mode 100644
index 0000000000..211ba3b3ab
--- /dev/null
+++ b/src/internal/components/card/styles.scss
@@ -0,0 +1,106 @@
+/*
+ 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;
+
+  &::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();
+  display: flex;
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  margin-block: 0;
+  margin-inline: 0;
+  padding-block: 0;
+  padding-inline: 0;
+  list-style: none;
+}
+
+.card-inner {
+  position: relative;
+  background-color: awsui.$color-background-container-content;
+  margin-block-start: 0;
+  margin-block-end: awsui.$space-grid-gutter;
+  margin-inline-start: awsui.$space-grid-gutter;
+  margin-inline-end: 0;
+  inline-size: 100%;
+  min-inline-size: 0;
+  @include card-style;
+}
+
+.header {
+  @include styles.font-heading-s;
+  padding-block-start: 8px;
+  padding-inline: awsui.$space-card-horizontal;
+  display: flex;
+  &-inner {
+    padding-block-start: 4px;
+    inline-size: 100%;
+    display: inline-block;
+  }
+}
+
+.body:not(.no-padding) {
+  padding-block-end: awsui.$space-card-vertical;
+  padding-inline: awsui.$space-card-horizontal;
+}
+
+.with-action {
+  > .card-inner > .card-header {
+    inline-size: 90%;
+  }
+}
+
+.active {
+  > .card-inner {
+    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;
+    }
+  }
+}
+
+.action {
+  flex-shrink: 0;
+}
diff --git a/src/test-utils/dom/cards/index.ts b/src/test-utils/dom/cards/index.ts
index adc16584c3..574a6f7250 100644
--- a/src/test-utils/dom/cards/index.ts
+++ b/src/test-utils/dom/cards/index.ts
@@ -8,6 +8,7 @@ import PaginationWrapper from '../pagination';
 import TextFilterWrapper from '../text-filter';
 
 import styles from '../../../cards/styles.selectors.js';
+import cardStyles from '../../../internal/components/card/styles.selectors.js';
 import tableStyles from '../../../table/styles.selectors.js';
 
 class CardSectionWrapper extends ComponentWrapper {
@@ -31,7 +32,7 @@ class CardWrapper extends ComponentWrapper {
   }
 
   findCardHeader(): ElementWrapper | null {
-    return this.findByClassName(styles['card-header-inner']);
+    return this.find(`:is(.${cardStyles['header-inner']}, .${styles['card-header-inner']})`);
   }
 
   findSelectionArea(): ElementWrapper | null {
@@ -45,11 +46,11 @@ export default class CardsWrapper extends ComponentWrapper {
   private containerWrapper = new ContainerWrapper(this.getElement());
 
   findItems(): Array<CardWrapper> {
-    return this.findAllByClassName(styles.card).map(c => new CardWrapper(c.getElement()));
+    return this.findAll(`:is(.${cardStyles.root}, .${styles.card})`).map(c => new CardWrapper(c.getElement()));
   }
 
   findSelectedItems(): Array<CardWrapper> {
-    return this.findAllByClassName(styles['card-selected']).map(c => new CardWrapper(c.getElement()));
+    return this.findAllByClassName(cardStyles.active).map(c => new CardWrapper(c.getElement()));
   }
 
   findHeader(): ElementWrapper | null {