diff --git a/src/sub-blocks/BackgroundCard/__stories__/BackgroundCard.stories.tsx b/src/sub-blocks/BackgroundCard/__stories__/BackgroundCard.stories.tsx
index 1ffa4b1c6..a9cee5a36 100644
--- a/src/sub-blocks/BackgroundCard/__stories__/BackgroundCard.stories.tsx
+++ b/src/sub-blocks/BackgroundCard/__stories__/BackgroundCard.stories.tsx
@@ -1,12 +1,16 @@
 import {Meta, Story} from '@storybook/react/types-6-0';
 import React from 'react';
+import yfm from '@doc-tools/transform';
 
 import BackgroundCard from '../BackgroundCard';
-import {BackgroundCardModel, BackgroundCardProps} from '../../../models';
+import {BackgroundCardProps} from '../../../models';
 import {CARDS, COMPONENTS} from '../../../demo/constants';
 
 import data from './data.json';
 
+const getPaddingBottomTitle = (padding: string) =>
+    data.paddings.title.replace('{{padding}}', padding);
+
 export default {
     component: BackgroundCard,
     title: `${COMPONENTS}/${CARDS}/BackgroundCard`,
@@ -26,46 +30,77 @@ const DefaultTemplate: Story<BackgroundCardProps> = (args) => (
 const PaddingsTemplate: Story<BackgroundCardProps> = (args) => (
     <div style={{display: 'flex'}}>
         <div style={{display: 'inline-table', maxWidth: '400px', padding: '0 8px'}}>
-            <BackgroundCard {...args} title="paddingBottom = s" paddingBottom="s" />
+            <BackgroundCard {...args} title={getPaddingBottomTitle('S')} paddingBottom="s" />
         </div>
         <div style={{display: 'inline-table', maxWidth: '400px', padding: '0 8px'}}>
-            <BackgroundCard {...args} title="paddingBottom = m" paddingBottom="m" />
+            <BackgroundCard {...args} title={getPaddingBottomTitle('M')} paddingBottom="m" />
         </div>
         <div style={{display: 'inline-table', maxWidth: '400px', padding: '0 8px'}}>
-            <BackgroundCard {...args} title="paddingBottom = l" paddingBottom="l" />
+            <BackgroundCard {...args} title={getPaddingBottomTitle('L')} paddingBottom="l" />
         </div>
         <div style={{display: 'inline-table', maxWidth: '400px', padding: '0 8px'}}>
-            <BackgroundCard {...args} title="paddingBottom = xl" paddingBottom="xl" />
+            <BackgroundCard {...args} title={getPaddingBottomTitle('XL')} paddingBottom="xl" />
         </div>
     </div>
 );
 
-const CardThemesTemplate: Story<BackgroundCardProps> = (args) => (
-    <div style={{display: 'flex'}}>
-        <div style={{maxWidth: '400px', padding: '0 8px'}}>
-            <BackgroundCard {...args} title="Тема по умолчанию = s" theme="default" />
-        </div>
-        <div style={{maxWidth: '400px', padding: '0 8px'}}>
-            <BackgroundCard {...args} title="Темная тема = m" theme="dark" />
-        </div>
-        <div style={{maxWidth: '400px', padding: '0 8px'}}>
-            <BackgroundCard {...args} title="Светлая тема = l" theme="light" />
+const CardThemesTemplate: Story<BackgroundCardProps[]> = (args) => {
+    return (
+        <div style={{display: 'flex'}}>
+            {Object.values(args).map((item, i) => (
+                <div style={{maxWidth: '400px', padding: '0 8px'}} key={i}>
+                    <BackgroundCard {...item} />
+                </div>
+            ))}
         </div>
-    </div>
-);
+    );
+};
 
 export const Default = DefaultTemplate.bind({});
 export const WithBackgroundImage = DefaultTemplate.bind({});
 export const Paddings = PaddingsTemplate.bind({});
-export const CardThemes = CardThemesTemplate.bind({});
+export const CardThemes = CardThemesTemplate.bind([]);
 export const BorderLine = DefaultTemplate.bind({});
 export const BackgroundColor = DefaultTemplate.bind({});
 export const WithTheme = DefaultTemplate.bind({});
 
-Default.args = data.default.content as BackgroundCardModel;
-WithBackgroundImage.args = data.withBackgroundImage.content as BackgroundCardModel;
-Paddings.args = data.paddings.content as BackgroundCardModel;
-CardThemes.args = data.cardThemes.content as BackgroundCardModel;
-BorderLine.args = data.borderLine.content as BackgroundCardModel;
-BackgroundColor.args = data.backgroundColor.content as BackgroundCardModel;
-WithTheme.args = data.withTheme.content as BackgroundCardModel;
+const DefaultArgs = {
+    ...data.default.content,
+    text: yfm(data.default.content.text).result.html,
+    additionalInfo: yfm(data.default.content.additionalInfo).result.html,
+};
+
+Default.args = {
+    ...DefaultArgs,
+} as BackgroundCardProps;
+
+WithBackgroundImage.args = {
+    ...DefaultArgs,
+    ...data.withBackgroundImage.content,
+} as BackgroundCardProps;
+
+Paddings.args = {
+    ...DefaultArgs,
+    ...data.withBackgroundImage.content,
+} as BackgroundCardProps;
+
+CardThemes.args = [...data.cardThemes.content].map((item) => ({
+    ...DefaultArgs,
+    ...item,
+})) as BackgroundCardProps[];
+
+BorderLine.args = {
+    ...DefaultArgs,
+    ...data.borderLine.content,
+    ...data.withBackgroundImage.content,
+} as BackgroundCardProps;
+
+BackgroundColor.args = {
+    ...DefaultArgs,
+    ...data.backgroundColor.content,
+} as BackgroundCardProps;
+
+WithTheme.args = {
+    ...DefaultArgs,
+    ...data.withTheme.content,
+} as BackgroundCardProps;
diff --git a/src/sub-blocks/BackgroundCard/__stories__/data.json b/src/sub-blocks/BackgroundCard/__stories__/data.json
index 769b311e8..2890407f3 100644
--- a/src/sub-blocks/BackgroundCard/__stories__/data.json
+++ b/src/sub-blocks/BackgroundCard/__stories__/data.json
@@ -1,44 +1,18 @@
 {
   "backgroundColor": {
     "content": {
-      "url": "#",
-      "title": "Lorem ipsumt",
-      "text": "<p><strong>Lorem ipsum dolor sit amet</strong> <a href=\"https://example.com\">consectetur adipiscing elit</a> sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> ",
-      "additionalInfo": "<p>Lorem ipsum dolor sit amet <a href=\"https://example.com\">consectetur adipiscing elit</a> sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> ",
-      "paddingBottom": "s",
-      "links": [
-        {
-          "url": "#",
-          "text": "Link",
-          "theme": "normal",
-          "arrow": true
-        }
-      ],
-      "buttons": [
-        {
-          "text": "Button\r",
-          "theme": "action",
-          "url": "https://example.com"
-        },
-        {
-          "text": "Button",
-          "theme": "outlined",
-          "url": "#"
-        }
-      ],
       "backgroundColor": "#7ccea0"
     }
   },
   "default": {
     "content": {
-      "url": "#",
+      "url": "https://example.com",
       "title": "Lorem ipsumt",
-      "text": "<p><strong>Lorem ipsum dolor sit amet</strong> that <a href=\"https://example.com\">consectetur adipiscing elit</a> sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> ",
-      "additionalInfo": "<p>Lorem ipsum dolor sit amet <a href=\"https://example.com\">consectetur adipiscing elit</a> sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> ",
-      "paddingBottom": "s",
+      "text": "**Ut enim ad minim veniam** [quis nostrud](https://example.com) exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
+      "additionalInfo": "Duis aute irure dolor in [reprehenderit](https://example.com) n voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
       "links": [
         {
-          "url": "#",
+          "url": "https://example.com",
           "text": "Link",
           "theme": "normal",
           "arrow": true
@@ -53,72 +27,13 @@
         {
           "text": "Button",
           "theme": "outlined",
-          "url": "#"
+          "url": "https://example.com"
         }
       ]
     }
   },
   "withBackgroundImage": {
     "content": {
-      "url": "#",
-      "title": "Lorem ipsumt",
-      "text": "<p><strong>Lorem ipsum dolor sit amet</strong> that <a href=\"https://example.com\">consectetur adipiscing elit</a> sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> ",
-      "additionalInfo": "<p>Lorem ipsum dolor sit amet <a href=\"https://example.com\">consectetur adipiscing elit</a> sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> ",
-      "paddingBottom": "s",
-      "links": [
-        {
-          "url": "#",
-          "text": "Link",
-          "theme": "normal",
-          "arrow": true
-        }
-      ],
-      "buttons": [
-        {
-          "text": "Button\r",
-          "theme": "action",
-          "url": "https://example.com"
-        },
-        {
-          "text": "Button",
-          "theme": "outlined",
-          "url": "#"
-        }
-      ],
-      "background": {
-        "src": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/img-gray.png",
-        "alt": "Lorem ipsumt",
-        "disableCompress": true
-      }
-    }
-  },
-  "cardThemes": {
-    "content": {
-      "url": "#",
-      "title": "Lorem ipsumt",
-      "text": "<p><strong>Lorem ipsum dolor sit amet</strong> that <a href=\"https://example.com\">consectetur adipiscing elit</a> sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> ",
-      "additionalInfo": "<p>Lorem ipsum dolor sit amet <a href=\"https://example.com\">consectetur adipiscing elit</a> sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> ",
-      "paddingBottom": "s",
-      "links": [
-        {
-          "url": "#",
-          "text": "Link",
-          "theme": "normal",
-          "arrow": true
-        }
-      ],
-      "buttons": [
-        {
-          "text": "Button\r",
-          "theme": "action",
-          "url": "https://example.com"
-        },
-        {
-          "text": "Button",
-          "theme": "outlined",
-          "url": "#"
-        }
-      ],
       "background": {
         "src": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/img-gray.png",
         "alt": "Lorem ipsumt",
@@ -128,67 +43,55 @@
   },
   "borderLine": {
     "content": {
-      "url": "#",
-      "title": "Lorem ipsumt",
-      "text": "<p><strong>Lorem ipsum dolor sit amet</strong> that <a href=\"https://example.com\">consectetur adipiscing elit</a> sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> ",
-      "additionalInfo": "<p>Lorem ipsum dolor sit amet <a href=\"https://example.com\">consectetur adipiscing elit</a> sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> ",
-      "paddingBottom": "s",
-      "links": [
-        {
-          "url": "#",
-          "text": "Link",
-          "theme": "normal",
-          "arrow": true
-        }
-      ],
-      "buttons": [
-        {
-          "text": "Button\r",
-          "theme": "action",
-          "url": "https://example.com"
-        },
-        {
-          "text": "Button",
-          "theme": "outlined",
-          "url": "#"
-        }
-      ],
-      "background": {
-        "src": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/img-gray.png",
-        "alt": "Lorem ipsumt",
-        "disableCompress": true
-      },
       "border": "line"
     }
   },
+  "paddings": {
+    "title": "Padding Bottom = {{padding}}"
+  },
+  "cardThemes": {
+    "content": [
+      {
+        "title": "Default theme",
+        "theme": "default"
+      },
+      {
+        "title": "Dark Monochrome theme",
+        "theme": "dark",
+        "background": "src: 'https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/img-black.png'",
+        "buttons": [
+          {
+            "text": "Button",
+            "theme": "normal-contrast",
+            "url": "https://example.com"
+          },
+          {
+            "text": "Button",
+            "theme": "outlined-contrast",
+            "url": "https://example.com"
+          }
+        ]
+      },
+      {
+        "title": "Light Monochrome theme",
+        "theme": "light",
+        "buttons": [
+          {
+            "text": "Button",
+            "theme": "monochrome",
+            "url": "https://example.com"
+          },
+          {
+            "text": "Button",
+            "theme": "normal",
+            "url": "https://example.com"
+          }
+        ]
+      }
+    ]
+  },
   "withTheme": {
     "content": {
-      "type": "background-card",
-      "url": "#",
-      "title": "Lorem ipsumt",
-      "text": "<p><strong>Lorem ipsum dolor sit amet</strong> that <a href=\"https://example.com\">consectetur adipiscing elit</a> sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> ",
-      "additionalInfo": "<p>Lorem ipsum dolor sit amet <a href=\"https://example.com\">consectetur adipiscing elit</a> sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> ",
-      "paddingBottom": "s",
-      "links": [
-        {
-          "url": "#",
-          "text": "Link",
-          "theme": "normal",
-          "arrow": true
-        }
-      ],
-      "buttons": [
-        {
-          "text": "Button\r",
-          "theme": "action",
-          "url": "https://example.com"
-        },
-        {
-          "text": "Button",
-          "theme": "outlined",
-          "url": "#"
-        }
-      ],
       "background": {
         "light": {
           "src": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/img-gray.png",
@@ -196,45 +99,11 @@
           "disableCompress": true
         },
         "dark": {
-          "src": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/img-white.png",
+          "src": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/img-black.png",
           "alt": "Lorem ipsumt",
           "disableCompress": true
         }
       }
     }
-  },
-  "paddings": {
-    "content": {
-      "url": "#",
-      "title": "Lorem ipsumt",
-      "text": "<p><strong>Lorem ipsum dolor sit amet</strong> that <a href=\"https://example.com\">consectetur adipiscing elit</a> sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> ",
-      "additionalInfo": "<p>Lorem ipsum dolor sit amet <a href=\"https://example.com\">consectetur adipiscing elit</a> sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> ",
-      "paddingBottom": "s",
-      "links": [
-        {
-          "url": "#",
-          "text": "Link",
-          "theme": "normal",
-          "arrow": true
-        }
-      ],
-      "buttons": [
-        {
-          "text": "Button\r",
-          "theme": "action",
-          "url": "https://example.com"
-        },
-        {
-          "text": "Button",
-          "theme": "outlined",
-          "url": "#"
-        }
-      ],
-      "background": {
-        "src": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/img-gray.png",
-        "alt": "Lorem ipsumt",
-        "disableCompress": true
-      }
-    }
   }
 }
diff --git a/src/sub-blocks/Content/Content.scss b/src/sub-blocks/Content/Content.scss
index 3232915dc..9eb7da4a1 100644
--- a/src/sub-blocks/Content/Content.scss
+++ b/src/sub-blocks/Content/Content.scss
@@ -120,14 +120,14 @@ $darkSecondary: var(--yc-color-text-dark-secondary);
         &_dark {
             #{$block}__title,
             #{$block}__text .yfm,
-            #{$block}__text .yfm > *,
+            #{$block}__text .yfm *,
             #{$block}__link a {
                 color: $lightPrimary;
             }
 
             #{$block}__notice {
                 .yfm,
-                .yfm > * {
+                .yfm * {
                     color: $lightSecondary;
                 }
 
@@ -153,14 +153,14 @@ $darkSecondary: var(--yc-color-text-dark-secondary);
         &_light {
             #{$block}__title,
             #{$block}__text .yfm,
-            #{$block}__text .yfm > *,
+            #{$block}__text .yfm *,
             #{$block}__link a {
                 color: $darkPrimary;
             }
 
             #{$block}__notice {
                 .yfm,
-                .yfm > * {
+                .yfm * {
                     color: $darkSecondary;
                 }