diff --git a/src/sub-blocks/BasicCard/__snapshots__/BasicCard.visual.test.tsx-snapshots/BasicCard-render-stories-Default-light-chromium-linux.png b/src/sub-blocks/BasicCard/__snapshots__/BasicCard.visual.test.tsx-snapshots/BasicCard-render-stories-Default-light-chromium-linux.png
index b6a2cc700..ee119a445 100644
Binary files a/src/sub-blocks/BasicCard/__snapshots__/BasicCard.visual.test.tsx-snapshots/BasicCard-render-stories-Default-light-chromium-linux.png and b/src/sub-blocks/BasicCard/__snapshots__/BasicCard.visual.test.tsx-snapshots/BasicCard-render-stories-Default-light-chromium-linux.png differ
diff --git a/src/sub-blocks/BasicCard/__snapshots__/BasicCard.visual.test.tsx-snapshots/BasicCard-render-stories-Default-light-webkit-linux.png b/src/sub-blocks/BasicCard/__snapshots__/BasicCard.visual.test.tsx-snapshots/BasicCard-render-stories-Default-light-webkit-linux.png
index 9659c8604..94cef3576 100644
Binary files a/src/sub-blocks/BasicCard/__snapshots__/BasicCard.visual.test.tsx-snapshots/BasicCard-render-stories-Default-light-webkit-linux.png and b/src/sub-blocks/BasicCard/__snapshots__/BasicCard.visual.test.tsx-snapshots/BasicCard-render-stories-Default-light-webkit-linux.png differ
diff --git a/src/sub-blocks/BasicCard/__snapshots__/BasicCard.visual.test.tsx-snapshots/BasicCard-render-stories-WithBorder-light-chromium-linux.png b/src/sub-blocks/BasicCard/__snapshots__/BasicCard.visual.test.tsx-snapshots/BasicCard-render-stories-WithBorder-light-chromium-linux.png
index 59a46e5d9..a35ebedc0 100644
Binary files a/src/sub-blocks/BasicCard/__snapshots__/BasicCard.visual.test.tsx-snapshots/BasicCard-render-stories-WithBorder-light-chromium-linux.png and b/src/sub-blocks/BasicCard/__snapshots__/BasicCard.visual.test.tsx-snapshots/BasicCard-render-stories-WithBorder-light-chromium-linux.png differ
diff --git a/src/sub-blocks/BasicCard/__snapshots__/BasicCard.visual.test.tsx-snapshots/BasicCard-render-stories-WithBorder-light-webkit-linux.png b/src/sub-blocks/BasicCard/__snapshots__/BasicCard.visual.test.tsx-snapshots/BasicCard-render-stories-WithBorder-light-webkit-linux.png
index 266b0ea8c..54bc8f6bd 100644
Binary files a/src/sub-blocks/BasicCard/__snapshots__/BasicCard.visual.test.tsx-snapshots/BasicCard-render-stories-WithBorder-light-webkit-linux.png and b/src/sub-blocks/BasicCard/__snapshots__/BasicCard.visual.test.tsx-snapshots/BasicCard-render-stories-WithBorder-light-webkit-linux.png differ
diff --git a/src/sub-blocks/BasicCard/__snapshots__/BasicCard.visual.test.tsx-snapshots/BasicCard-render-stories-WithContentList-light-chromium-linux.png b/src/sub-blocks/BasicCard/__snapshots__/BasicCard.visual.test.tsx-snapshots/BasicCard-render-stories-WithContentList-light-chromium-linux.png
index 157f7b110..a64e448ee 100644
Binary files a/src/sub-blocks/BasicCard/__snapshots__/BasicCard.visual.test.tsx-snapshots/BasicCard-render-stories-WithContentList-light-chromium-linux.png and b/src/sub-blocks/BasicCard/__snapshots__/BasicCard.visual.test.tsx-snapshots/BasicCard-render-stories-WithContentList-light-chromium-linux.png differ
diff --git a/src/sub-blocks/BasicCard/__snapshots__/BasicCard.visual.test.tsx-snapshots/BasicCard-render-stories-WithContentList-light-webkit-linux.png b/src/sub-blocks/BasicCard/__snapshots__/BasicCard.visual.test.tsx-snapshots/BasicCard-render-stories-WithContentList-light-webkit-linux.png
index fb079b31a..6357b0634 100644
Binary files a/src/sub-blocks/BasicCard/__snapshots__/BasicCard.visual.test.tsx-snapshots/BasicCard-render-stories-WithContentList-light-webkit-linux.png and b/src/sub-blocks/BasicCard/__snapshots__/BasicCard.visual.test.tsx-snapshots/BasicCard-render-stories-WithContentList-light-webkit-linux.png differ
diff --git a/src/sub-blocks/BasicCard/__snapshots__/BasicCard.visual.test.tsx-snapshots/BasicCard-render-stories-WithIcon-light-chromium-linux.png b/src/sub-blocks/BasicCard/__snapshots__/BasicCard.visual.test.tsx-snapshots/BasicCard-render-stories-WithIcon-light-chromium-linux.png
index e42cbc0bc..14d4b401f 100644
Binary files a/src/sub-blocks/BasicCard/__snapshots__/BasicCard.visual.test.tsx-snapshots/BasicCard-render-stories-WithIcon-light-chromium-linux.png and b/src/sub-blocks/BasicCard/__snapshots__/BasicCard.visual.test.tsx-snapshots/BasicCard-render-stories-WithIcon-light-chromium-linux.png differ
diff --git a/src/sub-blocks/BasicCard/__snapshots__/BasicCard.visual.test.tsx-snapshots/BasicCard-render-stories-WithIcon-light-webkit-linux.png b/src/sub-blocks/BasicCard/__snapshots__/BasicCard.visual.test.tsx-snapshots/BasicCard-render-stories-WithIcon-light-webkit-linux.png
index 54963b0c5..2f4274d77 100644
Binary files a/src/sub-blocks/BasicCard/__snapshots__/BasicCard.visual.test.tsx-snapshots/BasicCard-render-stories-WithIcon-light-webkit-linux.png and b/src/sub-blocks/BasicCard/__snapshots__/BasicCard.visual.test.tsx-snapshots/BasicCard-render-stories-WithIcon-light-webkit-linux.png differ
diff --git a/src/sub-blocks/BasicCard/__snapshots__/BasicCard.visual.test.tsx-snapshots/BasicCard-render-stories-WithUrl-light-chromium-linux.png b/src/sub-blocks/BasicCard/__snapshots__/BasicCard.visual.test.tsx-snapshots/BasicCard-render-stories-WithUrl-light-chromium-linux.png
index d0fc6d55d..a35ebedc0 100644
Binary files a/src/sub-blocks/BasicCard/__snapshots__/BasicCard.visual.test.tsx-snapshots/BasicCard-render-stories-WithUrl-light-chromium-linux.png and b/src/sub-blocks/BasicCard/__snapshots__/BasicCard.visual.test.tsx-snapshots/BasicCard-render-stories-WithUrl-light-chromium-linux.png differ
diff --git a/src/sub-blocks/BasicCard/__snapshots__/BasicCard.visual.test.tsx-snapshots/BasicCard-render-stories-WithUrl-light-webkit-linux.png b/src/sub-blocks/BasicCard/__snapshots__/BasicCard.visual.test.tsx-snapshots/BasicCard-render-stories-WithUrl-light-webkit-linux.png
index 67b193a9d..54bc8f6bd 100644
Binary files a/src/sub-blocks/BasicCard/__snapshots__/BasicCard.visual.test.tsx-snapshots/BasicCard-render-stories-WithUrl-light-webkit-linux.png and b/src/sub-blocks/BasicCard/__snapshots__/BasicCard.visual.test.tsx-snapshots/BasicCard-render-stories-WithUrl-light-webkit-linux.png differ
diff --git a/src/sub-blocks/BasicCard/__stories__/BasicCard.stories.tsx b/src/sub-blocks/BasicCard/__stories__/BasicCard.stories.tsx
index 12f8ed9c6..691845718 100644
--- a/src/sub-blocks/BasicCard/__stories__/BasicCard.stories.tsx
+++ b/src/sub-blocks/BasicCard/__stories__/BasicCard.stories.tsx
@@ -1,30 +1,16 @@
 import {Meta, StoryFn} from '@storybook/react';
 
-import {blockTransform, yfmTransform} from '../../../../.storybook/utils';
+import {blockListTransform, blockTransform} from '../../../../.storybook/utils';
 import CardLayout from '../../../blocks/CardLayout/CardLayout';
 import {BlockBase} from '../../../components';
 import {ConstructorRow} from '../../../containers/PageConstructor/components/ConstructorRow';
 import {Grid} from '../../../grid';
-import {BasicCardModel, BasicCardProps, ContentItemProps} from '../../../models';
+import {BasicCardModel, BasicCardProps, CardLayoutBlockModel} from '../../../models';
 import {IconPosition} from '../../../models/constructor-items/sub-blocks';
 import BasicCard from '../BasicCard';
 
 import data from './data.json';
 
-const transformedContentList = data.list.map((item) => {
-    return {
-        ...item,
-        text: item?.text && yfmTransform(item.text),
-    };
-}) as ContentItemProps[];
-
-const transformedShortContentList = data.shortList.map((item) => {
-    return {
-        ...item,
-        text: item?.text && yfmTransform(item.text),
-    };
-}) as ContentItemProps[];
-
 const getCardWithBorderTitle = (border: string) =>
     data.withBorder.title.replace('{{border}}', border);
 
@@ -36,80 +22,51 @@ export default {
     title: 'Components/Cards/BasicCard',
 } as Meta;
 
-const DefaultTemplate: StoryFn<BasicCardProps> = (args) => (
-    <div style={{maxWidth: '400px'}}>
-        <BasicCard {...args} target="_blank" />
-    </div>
-);
-
-const WithIconTemplate: StoryFn<BasicCardProps> = (args) => (
-    <div style={{display: 'flex'}}>
-        <div style={{maxWidth: '400px', padding: '0 8px'}}>
-            <BasicCard
-                {...args}
-                icon={data.withIcon.icons[0]}
-                title={getCardWithIconTitle('top')}
-            />
-        </div>
-        <div style={{maxWidth: '400px', padding: '0 8px'}}>
-            <BasicCard
-                {...args}
-                icon={data.withIcon.icons[1]}
-                iconPosition={IconPosition.Left}
-                title={getCardWithIconTitle('left')}
-            />
-        </div>
-    </div>
-);
-
-const WithBorderTemplate: StoryFn<BasicCardProps> = (args) => (
-    <div style={{display: 'flex'}}>
-        <div style={{maxWidth: '400px', padding: '0 8px'}}>
-            <BasicCard {...args} title={getCardWithBorderTitle('shadow')} />
-        </div>
-        <div style={{maxWidth: '400px', padding: '0 8px'}}>
-            <BasicCard {...args} border="line" title={getCardWithBorderTitle('line')} />
+const DefaultTemplate: StoryFn<BasicCardModel> = (args) => {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const {type, ...props} = blockTransform(args);
+    return (
+        <div style={{maxWidth: '400px'}}>
+            <BasicCard {...(props as BasicCardProps)} target="_blank" />
         </div>
-        <div style={{maxWidth: '400px', padding: '0 8px'}}>
-            <BasicCard {...args} border="none" title={getCardWithBorderTitle('none')} />
-        </div>
-    </div>
-);
+    );
+};
 
-const WithContentListTemplate: StoryFn<BasicCardProps> = (args) => (
-    <div style={{display: 'flex', flexWrap: 'wrap', alignItems: 'flex-start'}}>
-        <div style={{maxWidth: '400px', padding: '0 8px', marginBottom: '24px', marginTop: '8px'}}>
-            <BasicCard
-                {...args}
-                target="_blank"
-                list={transformedContentList}
-                title={data.withContentList.titleForLongList}
-            />
-        </div>
-        <div style={{maxWidth: '400px', padding: '0 8px'}}>
-            <BasicCard
-                {...args}
-                target="_blank"
-                list={transformedShortContentList}
-                title={data.withContentList.titleForShortList}
-            />
+const ListTemplate: StoryFn<Record<number, BasicCardModel>> = (args) => {
+    const items = blockListTransform(Object.values(args)) as BasicCardModel[];
+    return (
+        <div style={{display: 'flex'}}>
+            {/* eslint-disable-next-line @typescript-eslint/no-unused-vars */}
+            {items.map(({type, ...itemArgs}, index) => (
+                <div key={index} style={{maxWidth: '400px', padding: '0 8px'}}>
+                    <BasicCard {...itemArgs} />
+                </div>
+            ))}
         </div>
-    </div>
-);
+    );
+};
 
-const WithUrlTemplate: StoryFn<BasicCardProps> = (args) => (
-    <div style={{display: 'flex', padding: '40px 0'}}>
-        <div style={{maxWidth: '400px', padding: '0 8px'}}>
-            <BasicCard {...args} title={getCardWithBorderTitle('shadow')} />
-        </div>
-        <div style={{maxWidth: '400px', padding: '0 8px'}}>
-            <BasicCard {...args} border="line" title={getCardWithBorderTitle('line')} />
-        </div>
-        <div style={{maxWidth: '400px', padding: '0 8px'}}>
-            <BasicCard {...args} border="none" title={getCardWithBorderTitle('none')} />
+const WithContentListTemplate: StoryFn<Record<number, BasicCardModel>> = (args) => {
+    const items = blockListTransform(Object.values(args)) as BasicCardModel[];
+    return (
+        <div style={{display: 'flex', flexWrap: 'wrap', alignItems: 'flex-start'}}>
+            {/* eslint-disable-next-line @typescript-eslint/no-unused-vars */}
+            {items.map(({type, ...itemArgs}, index) => (
+                <div
+                    key={index}
+                    style={{
+                        maxWidth: '400px',
+                        padding: '0 8px',
+                        marginBottom: '24px',
+                        marginTop: '8px',
+                    }}
+                >
+                    <BasicCard {...itemArgs} />
+                </div>
+            ))}
         </div>
-    </div>
-);
+    );
+};
 
 const VariousTemplate: StoryFn<Record<number, BasicCardModel>> = (args) => (
     <div style={{display: 'flex', padding: '40px 0', flexWrap: 'wrap'}}>
@@ -130,80 +87,134 @@ const VariousTemplate: StoryFn<Record<number, BasicCardModel>> = (args) => (
     </div>
 );
 
-const ControlPositionTemplate: StoryFn<BasicCardProps> = (args) => (
-    <Grid>
-        <ConstructorRow>
-            <BlockBase>
-                <CardLayout title={data.cardLayout.contentTitle} animated={false}>
-                    {data.cardLayout.items.map((item, index) => (
-                        <BasicCard
-                            key={index}
-                            {...(item as Partial<BasicCardProps>)}
-                            {...args}
-                            controlPosition="content"
-                        />
-                    ))}
-                </CardLayout>
-            </BlockBase>
-            <BlockBase>
-                <CardLayout title={data.cardLayout.footerTitle} animated={false}>
-                    {data.cardLayout.items.map((item, index) => (
-                        <BasicCard
-                            key={index}
-                            {...(item as Partial<BasicCardProps>)}
-                            {...args}
-                            controlPosition="footer"
-                        />
-                    ))}
-                </CardLayout>
-            </BlockBase>
-        </ConstructorRow>
-    </Grid>
-);
+interface LayoutItemWithCards extends CardLayoutBlockModel {
+    children: BasicCardModel[];
+}
+
+const ControlPositionTemplate: StoryFn<Record<number, LayoutItemWithCards>> = (args) => {
+    const cardLayouts = Object.values(args);
+
+    return (
+        <Grid>
+            <ConstructorRow>
+                {/* eslint-disable-next-line @typescript-eslint/no-unused-vars */}
+                {cardLayouts.map(({type, children, ...cardLayoutProps}, index) => (
+                    <BlockBase key={index}>
+                        <CardLayout {...cardLayoutProps}>
+                            {children.map((itemArgs, itemIndex) => (
+                                <BasicCard
+                                    key={itemIndex}
+                                    {...(blockTransform(itemArgs) as BasicCardProps)}
+                                />
+                            ))}
+                        </CardLayout>
+                    </BlockBase>
+                ))}
+            </ConstructorRow>
+        </Grid>
+    );
+};
 
 export const Default = DefaultTemplate.bind({});
-export const WithIcon = WithIconTemplate.bind({});
-export const WithBorder = WithBorderTemplate.bind({});
-export const WithUrl = WithUrlTemplate.bind({});
+export const WithIcon = ListTemplate.bind({});
+export const WithBorder = ListTemplate.bind({});
+export const WithUrl = ListTemplate.bind({});
 export const WithContentList = WithContentListTemplate.bind({});
 export const ControlPosition = ControlPositionTemplate.bind({});
 export const Sizes = VariousTemplate.bind([]);
 export const GravityIcons = VariousTemplate.bind([]);
 
-const DefaultArgs = {
-    ...data.default.content,
-    text: yfmTransform(data.default.content.text),
+const DefaultArgs = data.default as BasicCardModel;
+
+Default.args = DefaultArgs;
+
+WithIcon.args = [
+    {
+        ...DefaultArgs,
+        icon: data.withIcon.icons[0],
+        title: getCardWithIconTitle('top'),
+    },
+    {
+        ...DefaultArgs,
+        icon: data.withIcon.icons[1],
+        iconPosition: IconPosition.Left,
+        title: getCardWithIconTitle('left'),
+    },
+];
+WithIcon.parameters = {
+    controls: {
+        include: Object.keys(WithIcon.args),
+    },
+};
+
+WithBorder.args = [
+    {
+        ...DefaultArgs,
+        title: getCardWithBorderTitle('shadow'),
+    },
+    {
+        ...DefaultArgs,
+        border: 'line',
+        title: getCardWithBorderTitle('line'),
+    },
+    {
+        ...DefaultArgs,
+        border: 'none',
+        title: getCardWithBorderTitle('none'),
+    },
+];
+WithBorder.parameters = {
+    controls: {
+        include: Object.keys(WithBorder.args),
+    },
+};
+
+WithUrl.args = [
+    {
+        ...DefaultArgs,
+        url: data.url,
+        title: getCardWithBorderTitle('shadow'),
+    },
+    {
+        ...DefaultArgs,
+        border: 'line',
+        title: getCardWithBorderTitle('line'),
+        url: data.url,
+    },
+    {
+        ...DefaultArgs,
+        border: 'none',
+        title: getCardWithBorderTitle('none'),
+        url: data.url,
+    },
+];
+WithUrl.parameters = {
+    controls: {
+        include: Object.keys(WithUrl.args),
+    },
+};
+
+WithContentList.args = [
+    {
+        ...DefaultArgs,
+        ...data.withContentList,
+    },
+    {
+        ...DefaultArgs,
+        ...data.withContentListShort,
+    },
+];
+WithContentList.parameters = {
+    controls: {
+        include: Object.keys(WithContentList.args),
+    },
 };
 
-Default.args = {
-    ...data.default.content,
-    ...DefaultArgs,
-} as BasicCardProps;
-WithIcon.args = DefaultArgs as BasicCardProps;
-WithBorder.args = DefaultArgs as BasicCardProps;
-WithUrl.args = {
-    url: data.url,
-    ...DefaultArgs,
-} as BasicCardProps;
-
-WithContentList.args = {
-    ...DefaultArgs,
-} as BasicCardProps;
-
-ControlPosition.argTypes = {
-    controlPosition: {table: {disable: true}},
-    url: {table: {disable: true}},
-    urlTitle: {table: {disable: true}},
-    analyticsEvents: {table: {disable: true}},
-    title: {table: {disable: true}},
-    text: {table: {disable: true}},
-    titleId: {table: {disable: true}},
-    textId: {table: {disable: true}},
-    icon: {table: {disable: true}},
-    list: {table: {disable: true}},
-    links: {table: {disable: true}},
-    buttons: {table: {disable: true}},
-    target: {table: {disable: true}},
+ControlPosition.args = data.cardLayout as LayoutItemWithCards[];
+ControlPosition.parameters = {
+    controls: {
+        include: Object.keys(ControlPosition.args),
+    },
 };
 
 Sizes.args = data.sizesContent.reduce(
@@ -221,7 +232,7 @@ Sizes.args = data.sizesContent.reduce(
 );
 Sizes.parameters = {
     controls: {
-        include: Object.keys([0, 1, 2, 3, 4, 5, 6, 7, 8]),
+        include: Object.keys(Sizes.args),
     },
 };
 
@@ -240,6 +251,6 @@ GravityIcons.args = data.gravityIcons.reduce(
 );
 GravityIcons.parameters = {
     controls: {
-        include: Object.keys([0, 1, 2, 3, 4, 5, 6, 7, 8]),
+        include: Object.keys(GravityIcons.args),
     },
 };
diff --git a/src/sub-blocks/BasicCard/__stories__/data.json b/src/sub-blocks/BasicCard/__stories__/data.json
index 426511b8f..861cfa637 100644
--- a/src/sub-blocks/BasicCard/__stories__/data.json
+++ b/src/sub-blocks/BasicCard/__stories__/data.json
@@ -23,123 +23,199 @@
     "title": "Card with size {{size}}"
   },
   "withContentList": {
-    "titleForLongList": "With content list",
-    "titleForShortList": "With content list without titles"
-  },
-  "shortList": [
-    {
-      "icon": {
-        "light": "/story-assets/icon_1_light.svg",
-        "dark": "/story-assets/icon_1_dark.svg"
-      },
-      "text": "**Ut enim ad minim veniam** [quis nostrud](https://example.com) exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
-    },
-    {
-      "icon": {
-        "light": "/story-assets/icon_3_light.svg",
-        "dark": "/story-assets/icon_3_dark.svg"
-      },
-      "text": "**Ut enim ad minim veniam** [quis nostrud](https://example.com) exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
-    },
-    {
-      "icon": {
-        "light": "/story-assets/icon_2_light.svg",
-        "dark": "/story-assets/icon_2_dark.svg"
-      },
-      "text": "**Ut enim ad minim veniam** [quis nostrud](https://example.com) exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
-    }
-  ],
-  "list": [
-    {
-      "icon": {
-        "light": "/story-assets/icon_1_light.svg",
-        "dark": "/story-assets/icon_1_dark.svg"
-      },
-      "title": "Lorem ipsum",
-      "text": "**Ut enim ad minim veniam** [quis nostrud](https://example.com) exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
-    },
-    {
-      "icon": {
-        "light": "/story-assets/icon_3_light.svg",
-        "dark": "/story-assets/icon_3_dark.svg"
+    "title": "With content list",
+    "target": "_blank",
+    "list": [
+      {
+        "icon": {
+          "light": "/story-assets/icon_1_light.svg",
+          "dark": "/story-assets/icon_1_dark.svg"
+        },
+        "title": "Lorem ipsum",
+        "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In egestas erat imperdiet sed euismod nisi porta lorem."
       },
-      "title": "Lorem ipsum ipsum",
-      "text": "**Ut enim ad minim veniam** [quis nostrud](https://example.com) exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
-    },
-    {
-      "icon": {
-        "light": "/story-assets/icon_2_light.svg",
-        "dark": "/story-assets/icon_2_dark.svg"
+      {
+        "icon": {
+          "light": "/story-assets/icon_3_light.svg",
+          "dark": "/story-assets/icon_3_dark.svg"
+        },
+        "title": "Lorem ipsum ipsum",
+        "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In egestas erat imperdiet sed euismod nisi porta lorem."
       },
-      "title": "Lorem ipsum",
-      "text": "**Ut enim ad minim veniam** [quis nostrud](https://example.com) exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
-    }
-  ],
-  "url": "https://example.com",
-  "default": {
-    "content": {
-      "title": "Lorem ipsum",
-      "text": "**Ut enim ad minim veniam** [quis nostrud](https://example.com) exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
-      "urlTitle": "Opens in a new tab"
-    }
+      {
+        "icon": {
+          "light": "/story-assets/icon_2_light.svg",
+          "dark": "/story-assets/icon_2_dark.svg"
+        },
+        "title": "Lorem ipsum",
+        "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In egestas erat imperdiet sed euismod nisi porta lorem."
+      }
+    ]
   },
-  "cardLayout": {
-    "contentTitle": "With controlPosition = content",
-    "footerTitle": "With controlPosition = footer",
-    "items": [
+  "withContentListShort": {
+    "title": "With content list without titles",
+    "target": "_blank",
+    "list": [
       {
-        "icon": "/story-assets/icon_1_light.svg",
-        "title": "Lorem ipsumt",
-        "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In egestas erat imperdiet sed euismod nisi porta lorem. Amet purus gravida quis blandit turpis cursus in hac.",
-        "buttons": [
-          {
-            "text": "Button 1",
-            "theme": "action",
-            "url": "#test1"
-          },
-          {
-            "text": "Button 2",
-            "theme": "outlined",
-            "url": "#test2"
-          }
-        ]
+        "icon": {
+          "light": "/story-assets/icon_1_light.svg",
+          "dark": "/story-assets/icon_1_dark.svg"
+        },
+        "text": "Lorem ipsum dolor sit amet, consectetur quis nostrud tempor incididunt ut labore et dolore magna."
       },
       {
-        "icon": "/story-assets/icon_2_light.svg",
-        "title": "Lorem ipsumt",
-        "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In egestas erat imperdiet sed euismod nisi porta lorem. Amet purus gravida quis blandit turpis cursus in hac. Pulvinar sapien et ligula ullamcorper malesuada proin libero nunc consequat.",
-        "buttons": [
-          {
-            "text": "Button 1",
-            "theme": "action",
-            "url": "#test1"
-          },
-          {
-            "text": "Button 2",
-            "theme": "outlined",
-            "url": "#test2"
-          }
-        ]
+        "icon": {
+          "light": "/story-assets/icon_3_light.svg",
+          "dark": "/story-assets/icon_3_dark.svg"
+        },
+        "text": "Lorem ipsum dolor sit amet, consectetur quis nostrud tempor incididunt ut labore et dolore magna."
       },
       {
-        "icon": "/story-assets/icon_3_light.svg",
-        "title": "Lorem ipsumt",
-        "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In egestas erat imperdiet sed euismod nisi porta lorem.",
-        "buttons": [
-          {
-            "text": "Button 1",
-            "theme": "action",
-            "url": "#test1"
-          },
-          {
-            "text": "Button 2",
-            "theme": "outlined",
-            "url": "#test2"
-          }
-        ]
+        "icon": {
+          "light": "/story-assets/icon_2_light.svg",
+          "dark": "/story-assets/icon_2_dark.svg"
+        },
+        "text": "Lorem ipsum dolor sit amet, consectetur quis nostrud tempor incididunt ut labore et dolore magna."
       }
     ]
   },
+  "url": "https://example.com",
+  "default": {
+    "type": "basic-card",
+    "title": "Lorem ipsum",
+    "text": "**Ut enim ad minim veniam** [quis nostrud](https://example.com) exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
+    "urlTitle": "Opens in a new tab"
+  },
+  "cardLayout": [
+    {
+      "type": "card-layout-block",
+      "title": "With controlPosition = content",
+      "animated": false,
+      "children": [
+        {
+          "type": "basic-card",
+          "icon": "/story-assets/icon_1_light.svg",
+          "title": "Lorem ipsumt",
+          "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In egestas erat imperdiet sed euismod nisi porta lorem. Amet purus gravida quis blandit turpis cursus in hac.",
+          "controlPosition": "content",
+          "buttons": [
+            {
+              "text": "Button 1",
+              "theme": "action",
+              "url": "#test1"
+            },
+            {
+              "text": "Button 2",
+              "theme": "outlined",
+              "url": "#test2"
+            }
+          ]
+        },
+        {
+          "type": "basic-card",
+          "icon": "/story-assets/icon_2_light.svg",
+          "title": "Lorem ipsumt",
+          "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In egestas erat imperdiet sed euismod nisi porta lorem. Amet purus gravida quis blandit turpis cursus in hac. Pulvinar sapien et ligula ullamcorper malesuada proin libero nunc consequat.",
+          "controlPosition": "content",
+          "buttons": [
+            {
+              "text": "Button 1",
+              "theme": "action",
+              "url": "#test1"
+            },
+            {
+              "text": "Button 2",
+              "theme": "outlined",
+              "url": "#test2"
+            }
+          ]
+        },
+        {
+          "type": "basic-card",
+          "icon": "/story-assets/icon_3_light.svg",
+          "title": "Lorem ipsumt",
+          "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In egestas erat imperdiet sed euismod nisi porta lorem.",
+          "controlPosition": "content",
+          "buttons": [
+            {
+              "text": "Button 1",
+              "theme": "action",
+              "url": "#test1"
+            },
+            {
+              "text": "Button 2",
+              "theme": "outlined",
+              "url": "#test2"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "type": "card-layout-block",
+      "title": "With controlPosition = footer",
+      "animated": false,
+      "children": [
+        {
+          "type": "basic-card",
+          "icon": "/story-assets/icon_1_light.svg",
+          "title": "Lorem ipsumt",
+          "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In egestas erat imperdiet sed euismod nisi porta lorem. Amet purus gravida quis blandit turpis cursus in hac.",
+          "controlPosition": "footer",
+          "buttons": [
+            {
+              "text": "Button 1",
+              "theme": "action",
+              "url": "#test1"
+            },
+            {
+              "text": "Button 2",
+              "theme": "outlined",
+              "url": "#test2"
+            }
+          ]
+        },
+        {
+          "type": "basic-card",
+          "icon": "/story-assets/icon_2_light.svg",
+          "title": "Lorem ipsumt",
+          "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In egestas erat imperdiet sed euismod nisi porta lorem. Amet purus gravida quis blandit turpis cursus in hac. Pulvinar sapien et ligula ullamcorper malesuada proin libero nunc consequat.",
+          "controlPosition": "footer",
+          "buttons": [
+            {
+              "text": "Button 1",
+              "theme": "action",
+              "url": "#test1"
+            },
+            {
+              "text": "Button 2",
+              "theme": "outlined",
+              "url": "#test2"
+            }
+          ]
+        },
+        {
+          "type": "basic-card",
+          "icon": "/story-assets/icon_3_light.svg",
+          "title": "Lorem ipsumt",
+          "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In egestas erat imperdiet sed euismod nisi porta lorem.",
+          "controlPosition": "footer",
+          "buttons": [
+            {
+              "text": "Button 1",
+              "theme": "action",
+              "url": "#test1"
+            },
+            {
+              "text": "Button 2",
+              "theme": "outlined",
+              "url": "#test2"
+            }
+          ]
+        }
+      ]
+    }
+  ],
   "sizes": [
     {
       "size": "s",