diff --git a/packages/web-react/docs/stories/examples/CardComposition.stories.tsx b/packages/web-react/docs/stories/examples/CardComposition.stories.tsx
index 1fbfd0959c..5b4a5109d7 100644
--- a/packages/web-react/docs/stories/examples/CardComposition.stories.tsx
+++ b/packages/web-react/docs/stories/examples/CardComposition.stories.tsx
@@ -45,12 +45,13 @@ type CardCompositionType = {
 export default {
   title: 'Examples/Compositions',
   argTypes: {
-    footerAlignmentX: {
+    artworkAlignmentX: {
       control: 'select',
-      description: 'Alignment inside CardFooter component.',
+      description: 'Alignment inside CardArtwork component.',
       options: [...Object.values(AlignmentX)],
+      name: 'alignmentX',
       table: {
-        category: 'CardFooter',
+        category: 'CardArtwork',
         defaultValue: { summary: AlignmentX.LEFT },
       },
     },
@@ -111,6 +112,16 @@ export default {
         defaultValue: { summary: '' },
       },
     },
+    footerAlignmentX: {
+      control: 'select',
+      description: 'Alignment inside CardFooter component.',
+      options: [...Object.values(AlignmentX)],
+      name: 'alignmentX',
+      table: {
+        category: 'CardFooter',
+        defaultValue: { summary: AlignmentX.LEFT },
+      },
+    },
     gridCols: {
       control: 'select',
       name: 'grid columns',
@@ -270,7 +281,7 @@ export default {
     },
   },
   args: {
-    alignmentX: AlignmentX.LEFT,
+    artworkAlignmentX: AlignmentX.LEFT,
     cardElementType: 'article',
     cardLogoHasSafeArea: true,
     cardLogoSize: Sizes.MEDIUM,
@@ -278,6 +289,7 @@ export default {
       'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat. Morbi fringilla convallis sapien. Sed ac felis. Aliquam erat volutpat. Aliquam euismod. Aenean vel lectus. Nunc imperdiet justo nec dolor.',
     direction: CardDirection.VERTICAL,
     eyebrowText: 'Eyebrow title',
+    footerAlignmentX: AlignmentX.LEFT,
     gridCols: 3,
     hasFilledHeight: false,
     image: MEDIA_IMAGE,
@@ -302,6 +314,7 @@ export default {
 
 export const CardComposition = (args: CardCompositionType) => {
   const {
+    artworkAlignmentX,
     cardElementType,
     cardLogoHasSafeArea,
     cardLogoSize,
@@ -347,7 +360,7 @@ export const CardComposition = (args: CardCompositionType) => {
             </CardMedia>
           )}
           {showArtwork && (
-            <CardArtwork>
+            <CardArtwork alignmentX={artworkAlignmentX}>
               <Icon name="file" />
             </CardArtwork>
           )}