feat: add background for card-layout-block

src/blocks/CardLayout/CardLayout.scss

@@ -8,5 +8,28 @@ $block: '.#{$ns}card-layout-block';
         margin-top: $indentSM;
     }
 
+    &__content {
+        position: relative;
+
+        &_with-background {
+            padding: 8px 32px 48px;
+            margin-top: 24px;
+        }
+    }
+
+    &__image {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        border-radius: 40px;
+
+        img {
+            object-fit: cover;
+            object-position: left;
+        }
+    }
+
     @include animate-slides(#{$block}__item);
 }

src/blocks/CardLayout/CardLayout.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {AnimateBlock, Title} from '../../components';
+import {AnimateBlock, BackgroundImage, Title} from '../../components';
 import {Col, GridColumnSizesType, Row} from '../../grid';
 import {
     CardLayoutBlockProps as CardLayoutBlockParams,
@@ -29,19 +29,32 @@ const CardLayout: React.FC<CardLayoutBlockProps> = ({
     children,
     className,
     titleClassName,
-}) => (
-    <AnimateBlock className={b(null, className)} animate={animated}>
-        {(title || description) && (
-            <Title title={title} subtitle={description} className={titleClassName} />
-        )}
-        <Row>
-            {React.Children.map(children, (child, index) => (
-                <Col key={index} sizes={colSizes} className={b('item')}>
-                    {child}
-                </Col>
-            ))}
-        </Row>
-    </AnimateBlock>
-);
+    background,
+}) => {
+    const withBackground = Boolean(
+        background && (background.src || background.desktop || background.style?.backgroundColor),
+    );
+    return (
+        <AnimateBlock className={b(null, className)} animate={animated}>
+            {(title || description) && (
+                <Title title={title} subtitle={description} className={titleClassName} />
+            )}
+            <div
+                className={b('content', {
+                    'with-background': withBackground,
+                })}
+            >
+                <BackgroundImage className={b('image')} {...background} />
+                <Row>
+                    {React.Children.map(children, (child, index) => (
+                        <Col key={index} sizes={colSizes} className={b('item')}>
+                            {child}
+                        </Col>
+                    ))}
+                </Row>
+            </div>
+        </AnimateBlock>
+    );
+};
 
 export default CardLayout;

src/blocks/CardLayout/__stories__/CardLayout.mdx

@@ -15,6 +15,8 @@ import * as CardLayoutStories from './CardLayout.stories.tsx';
 
 `colSizes?: Object` — more info [here](?path=/docs/documentation-types--docs#colsizes).
 
+`background?: BackgroundImage` — See [background](?path=/story/components-pics-video-datalens-backgroundimage--docs&viewMode=docs) properties.
+
 `children:[]` — You can add an array of any available cards here.
 
 The following blocks are currently supported:

src/blocks/CardLayout/__stories__/CardLayout.stories.tsx

@@ -3,13 +3,7 @@ import React, {Fragment} from 'react';
 import {Meta, StoryFn} from '@storybook/react';
 
 import {PageConstructor} from '../../../containers/PageConstructor';
-import {
-    CardLayoutBlockModel,
-    CardLayoutBlockProps,
-    LayoutItemModel,
-    LayoutItemProps,
-    SubBlockModels,
-} from '../../../models';
+import {CardLayoutBlockModel, CardLayoutBlockProps, SubBlockModels} from '../../../models';
 import CardLayout from '../CardLayout';
 
 import data from './data.json';
@@ -19,10 +13,11 @@ export default {
     component: CardLayout,
 } as Meta;
 
-const createCardArray: (count: number, shared: LayoutItemProps) => SubBlockModels[] = (
-    count,
-    shared,
-) => Array.from({length: count}, () => ({...shared} as LayoutItemModel));
+const createCardArray: (
+    count: number,
+    shared: Omit<SubBlockModels, 'type'> & {type: string},
+) => SubBlockModels[] = (count, shared) =>
+    Array.from({length: count}, () => ({...shared} as SubBlockModels));
 
 const DefaultTemplate: StoryFn<CardLayoutBlockModel> = (args) => (
     <PageConstructor content={{blocks: [args]}} />
@@ -109,9 +104,53 @@ const WithCustomIndentsTemplate: StoryFn<CardLayoutBlockModel> = ({title, ...res
     </Fragment>
 );
 
+const WithBackgroundTemplate: StoryFn<CardLayoutBlockModel> = (args) => (
+    <PageConstructor
+        content={{
+            blocks: [
+                {
+                    ...args,
+                    background: {
+                        src: 'https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/content-bg-img_light.png',
+                        disableCompress: true,
+                    },
+                    children: createCardArray(8, data.withBackgroundImage.card),
+                },
+                {
+                    ...args,
+                    background: {
+                        style: {
+                            backgroundColor: '#E5D0FF',
+                        },
+                    },
+                    children: createCardArray(4, data.withBackgroundImage.card),
+                },
+                {
+                    ...args,
+                    background: {
+                        src: null,
+                        desktop:
+                            'https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/content-bg-img_light.png',
+                        mobile: 'https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/img_8-12_dark.png',
+                    },
+                    description:
+                        'Three cards in a row on the desktop, two cards in a row on a tablet, one card in a row on a mobile phone. Dark background image on a mobile phone',
+                    colSizes: {
+                        all: 12,
+                        sm: 6,
+                        md: 4,
+                    },
+                    children: createCardArray(3, data.withBackgroundImage.card),
+                },
+            ],
+        }}
+    />
+);
+
 export const Default = DefaultTemplate.bind({});
 export const ColSize = ColSizeTemplate.bind({});
 export const WithCustomIndents = WithCustomIndentsTemplate.bind({});
+export const WithBackgroundImage = WithBackgroundTemplate.bind({});
 
 Default.args = {
     ...data.default.content,
@@ -127,3 +166,7 @@ WithCustomIndents.args = {
     ...data.default.content,
     children: createCardArray(3, data.default.card),
 } as CardLayoutBlockProps;
+
+WithBackgroundImage.args = {
+    ...data.withBackgroundImage.content,
+} as CardLayoutBlockProps;

src/blocks/CardLayout/__stories__/data.json

@@ -51,5 +51,23 @@
         "all": 6
       }
     }
+  },
+  "withBackgroundImage": {
+    "card": {
+      "type": "basic-card",
+      "title": "Tell a story and build a narrative",
+      "text": "We are all storytellers. Stories are a powerful way to communicate ideas and share information. The right story can lead to a better understanding of a situation, make us laugh, or even inspire us to do something in the future.",
+      "icon": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/icon_1_light.svg"
+    },
+    "content": {
+      "type": "card-layout-block",
+      "title": "Card Layout",
+      "description": "Four cards in a row on the desktop, three cards in a row on a tablet, two cards in a row on a mobile phone.",
+      "colSizes": {
+        "all": 6,
+        "sm": 4,
+        "md": 3
+      }
+    }
   }
 }

src/blocks/CardLayout/schema.ts

@@ -1,3 +1,4 @@
+import {ImageObjectProps} from '../../components/Image/schema';
 import {
     AnimatableProps,
     BlockBaseProps,
@@ -14,6 +15,7 @@ export const CardLayoutProps = {
         ...AnimatableProps,
         ...BlockHeaderProps,
         colSizes: containerSizesObject,
+        background: ImageObjectProps,
         children: ChildrenCardsProps,
     },
 };

src/models/constructor-items/blocks.ts

@@ -301,6 +301,7 @@ export interface CardLayoutBlockProps extends Childable, Animatable, LoadableChi
     titleClassName?: string;
     description?: string;
     colSizes?: GridColumnSizesType;
+    background?: BackgroundImageProps;
 }
 
 export type FilterTag = {