diff --git a/.storybook/public/global.css b/.storybook/public/global.css
index b31107e08a..ec09bbf3e8 100644
--- a/.storybook/public/global.css
+++ b/.storybook/public/global.css
@@ -862,3 +862,7 @@ table.docblock-argstable tbody.docblock-argstable-body td div:only-child span {
     border-color: var(--color-light-border-secondary);
     background: var(--color-light-bg-secondary);
 }
+
+.plateGlobal {
+    --plate-background: url('./images/docs-background.png');
+}
diff --git a/.storybook/public/images/docs-background.png b/.storybook/public/images/docs-background.png
new file mode 100644
index 0000000000..7d0e315af9
Binary files /dev/null and b/.storybook/public/images/docs-background.png differ
diff --git a/packages/alert/src/Component.tsx b/packages/alert/src/Component.tsx
index 753d0773f1..adad7919db 100644
--- a/packages/alert/src/Component.tsx
+++ b/packages/alert/src/Component.tsx
@@ -10,9 +10,9 @@ export type AlertProps = Omit<PlateProps, 'foldable' | 'defaultFolded' | 'leftAd
 export const Alert: FC<AlertProps> = ({ className, title, ...restProps }) => (
     <Plate
         className={cn(styles.component, className)}
-        buttonsClassName={styles.buttons}
-        contentClassName={styles.content}
         title={title ? <span className={styles.title}>{title}</span> : null}
+        rounded={false}
+        limitContentWidth={false}
         {...restProps}
     />
 );
diff --git a/packages/alert/src/__image_snapshots__/alert-screenshots-views-view-0-snap.png b/packages/alert/src/__image_snapshots__/alert-screenshots-views-view-0-snap.png
index 0464bf88df..29ca95bb5b 100644
--- a/packages/alert/src/__image_snapshots__/alert-screenshots-views-view-0-snap.png
+++ b/packages/alert/src/__image_snapshots__/alert-screenshots-views-view-0-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:b50d3325adecc9d2e688d2255ef4120bb096f706912e21e344ae155e85734b1b
-size 4117
+oid sha256:1d9e400838dcc3962b2b836bce4138cfc675c51f6f757720beb860736ab29d3f
+size 4080
diff --git a/packages/alert/src/__image_snapshots__/alert-screenshots-views-view-1-snap.png b/packages/alert/src/__image_snapshots__/alert-screenshots-views-view-1-snap.png
index c41dfb7440..62de1a13ba 100644
--- a/packages/alert/src/__image_snapshots__/alert-screenshots-views-view-1-snap.png
+++ b/packages/alert/src/__image_snapshots__/alert-screenshots-views-view-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:a6c5e82f9ea602b14bfcb78ccafca7968d8c409fcc6be00ec1e718c5bbcfb868
-size 4124
+oid sha256:8e0c621f3cd93c1f3aaeca89336f6f9dd33444babe020f65ccac65f803b25021
+size 4086
diff --git a/packages/alert/src/__image_snapshots__/alert-screenshots-views-view-2-snap.png b/packages/alert/src/__image_snapshots__/alert-screenshots-views-view-2-snap.png
index 2a7ed445dc..3cf30c66be 100644
--- a/packages/alert/src/__image_snapshots__/alert-screenshots-views-view-2-snap.png
+++ b/packages/alert/src/__image_snapshots__/alert-screenshots-views-view-2-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:06cc0aba06e0c2845f7e75caeca4bbbb48a452507782bb08a8864a8cc5332df8
-size 4119
+oid sha256:8dcb4eea7c64f65213e67028e43116c4263dc8720b537386ee9c82f74640543c
+size 4078
diff --git a/packages/alert/src/__image_snapshots__/alert-screenshots-views-view-3-snap.png b/packages/alert/src/__image_snapshots__/alert-screenshots-views-view-3-snap.png
index 3c2851618f..c38ceebfc3 100644
--- a/packages/alert/src/__image_snapshots__/alert-screenshots-views-view-3-snap.png
+++ b/packages/alert/src/__image_snapshots__/alert-screenshots-views-view-3-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:0e5d9a528b23922228123aa11f98d8a734d716a5c3407bea02a2fe4747522586
-size 4106
+oid sha256:51eb6da85dce2f1f80bc5afe1d793fd1d5742c009e8b49cd435082300dbfc6ad
+size 4068
diff --git a/packages/alert/src/__image_snapshots__/alert-screenshots-with-buttons-buttons-0-title-0-snap.png b/packages/alert/src/__image_snapshots__/alert-screenshots-with-buttons-buttons-0-title-0-snap.png
index a024e64dec..e4eb93e256 100644
--- a/packages/alert/src/__image_snapshots__/alert-screenshots-with-buttons-buttons-0-title-0-snap.png
+++ b/packages/alert/src/__image_snapshots__/alert-screenshots-with-buttons-buttons-0-title-0-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:1eb46afad00441fd61f73559b4cac66543ee76dd29aeb132d78f3ae6582e67c2
-size 7922
+oid sha256:9c13260291805e4e2f8d8db75c639e67e8388592e799e838ac0305a492469cf1
+size 7782
diff --git a/packages/alert/src/__image_snapshots__/alert-screenshots-with-buttons-buttons-0-title-1-snap.png b/packages/alert/src/__image_snapshots__/alert-screenshots-with-buttons-buttons-0-title-1-snap.png
index 65365bebad..fcdd9d9ace 100644
--- a/packages/alert/src/__image_snapshots__/alert-screenshots-with-buttons-buttons-0-title-1-snap.png
+++ b/packages/alert/src/__image_snapshots__/alert-screenshots-with-buttons-buttons-0-title-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:f7851674d0c0a44a9e4a861000ff5b4b8bbc894d3ed144e669d5558a14529ec4
-size 7394
+oid sha256:36cc0aa4ef2a942f71ebb71ae5d763da2320ee5f7506ef4392d3535f530dd63a
+size 7249
diff --git a/packages/alert/src/__image_snapshots__/alert-screenshots-with-title-and-closer-title-0-has-closer-0-snap.png b/packages/alert/src/__image_snapshots__/alert-screenshots-with-title-and-closer-title-0-has-closer-0-snap.png
index a927786327..d051e7b8aa 100644
--- a/packages/alert/src/__image_snapshots__/alert-screenshots-with-title-and-closer-title-0-has-closer-0-snap.png
+++ b/packages/alert/src/__image_snapshots__/alert-screenshots-with-title-and-closer-title-0-has-closer-0-snap.png
@@ -1,3 +1,4 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:a9330ef5207d4f92255f62f8b42dc4a74b100a9bcd3f41f447ea42d453d5e366
-size 4893
+
+oid sha256:ccb0bcbfc73f8a0fbaff6ae5c6c90f4a97b04a34066812c803c25990c97d3865
+size 4809
diff --git a/packages/alert/src/__image_snapshots__/alert-screenshots-with-title-and-closer-title-0-has-closer-1-snap.png b/packages/alert/src/__image_snapshots__/alert-screenshots-with-title-and-closer-title-0-has-closer-1-snap.png
index c2d0514339..476cea5e87 100644
--- a/packages/alert/src/__image_snapshots__/alert-screenshots-with-title-and-closer-title-0-has-closer-1-snap.png
+++ b/packages/alert/src/__image_snapshots__/alert-screenshots-with-title-and-closer-title-0-has-closer-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:806de7733a75f7a4b8b6a2cb6026774ee065f6a54cbd238a094644d323203b14
-size 4657
+oid sha256:b0ddb089d8c860f63315bf9d851ada7702bb706e887b3be27034c1bbce44b1e2
+size 4617
diff --git a/packages/alert/src/__image_snapshots__/alert-screenshots-with-title-and-closer-title-1-has-closer-0-snap.png b/packages/alert/src/__image_snapshots__/alert-screenshots-with-title-and-closer-title-1-has-closer-0-snap.png
index 08456c050f..dfb4ae7dcd 100644
--- a/packages/alert/src/__image_snapshots__/alert-screenshots-with-title-and-closer-title-1-has-closer-0-snap.png
+++ b/packages/alert/src/__image_snapshots__/alert-screenshots-with-title-and-closer-title-1-has-closer-0-snap.png
@@ -1,3 +1,4 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:99391c56393940bf8f4219250d961483950923f7ab543013e6378726b1b359c8
-size 4375
+
+oid sha256:bf626fb6e13e3e64fce2578ffcf431cd8f809f39d6ff09f5c5cfe43a25e68f66
+size 4331
diff --git a/packages/alert/src/__image_snapshots__/alert-screenshots-with-title-and-closer-title-1-has-closer-1-snap.png b/packages/alert/src/__image_snapshots__/alert-screenshots-with-title-and-closer-title-1-has-closer-1-snap.png
index 0464bf88df..29ca95bb5b 100644
--- a/packages/alert/src/__image_snapshots__/alert-screenshots-with-title-and-closer-title-1-has-closer-1-snap.png
+++ b/packages/alert/src/__image_snapshots__/alert-screenshots-with-title-and-closer-title-1-has-closer-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:b50d3325adecc9d2e688d2255ef4120bb096f706912e21e344ae155e85734b1b
-size 4117
+oid sha256:1d9e400838dcc3962b2b836bce4138cfc675c51f6f757720beb860736ab29d3f
+size 4080
diff --git a/packages/alert/src/index.module.css b/packages/alert/src/index.module.css
index e04161ca63..29e307b82d 100644
--- a/packages/alert/src/index.module.css
+++ b/packages/alert/src/index.module.css
@@ -1,25 +1,9 @@
 @import '../../themes/src/default.css';
 
 .component {
-    border-radius: var(--border-radius-xs) 0 0 var(--border-radius-xs);
-    border-top: 0;
-    border-right: 0;
-    border-bottom: 0;
-    border-left-width: 2px;
-    padding-top: var(--gap-s);
-    padding-bottom: var(--gap-s);
-    padding-right: var(--gap-s);
     min-height: 48px;
 }
 
-.buttons {
-    margin-top: var(--gap-m);
-}
-
 .title {
     @mixin accent_primary_medium;
 }
-
-.content {
-    max-width: none;
-}
diff --git a/packages/plate/src/Component.test.tsx b/packages/plate/src/Component.test.tsx
index 735cefe389..2d9ac857d1 100644
--- a/packages/plate/src/Component.test.tsx
+++ b/packages/plate/src/Component.test.tsx
@@ -34,7 +34,7 @@ describe('Plate', () => {
         expect(getByTestId(dataTestId).tagName).toBe('DIV');
     });
 
-    it('should render buttons size=xs, first view=outlined, others view=link', () => {
+    it('should render buttons size=xxs, first view=secondary, others view=link', () => {
         const { queryByTestId } = render(
             <Plate
                 buttons={[
@@ -49,11 +49,11 @@ describe('Plate', () => {
         expect(queryByTestId('button-2')).toBeInTheDocument();
         expect(queryByTestId('button-3')).toBeInTheDocument();
 
-        expect(queryByTestId('button-1')).toHaveClass('xs');
-        expect(queryByTestId('button-2')).toHaveClass('xs');
-        expect(queryByTestId('button-3')).toHaveClass('xs');
+        expect(queryByTestId('button-1')).toHaveClass('xxs');
+        expect(queryByTestId('button-2')).toHaveClass('xxs');
+        expect(queryByTestId('button-3')).toHaveClass('xxs');
 
-        expect(queryByTestId('button-1')).toHaveClass('outlined');
+        expect(queryByTestId('button-1')).toHaveClass('secondary');
         expect(queryByTestId('button-2')).toHaveClass('link');
         expect(queryByTestId('button-3')).toHaveClass('link');
     });
@@ -61,16 +61,18 @@ describe('Plate', () => {
     describe('Classes tests', () => {
         it('should set `className` class', () => {
             const className = 'test-class';
-            const { container } = render(<Plate className={className} />);
+            const dataTestId = 'test-id';
+            const { getByTestId } = render(<Plate className={className} dataTestId={dataTestId} />);
 
-            expect(container.firstElementChild).toHaveClass(className);
+            expect(getByTestId(dataTestId)).toHaveClass(className);
         });
 
         it('should set `positive` class if `view` prop is `positive`', () => {
             const view = 'positive';
-            const { container } = render(<Plate view={view} />);
+            const dataTestId = 'test-id';
+            const { getByTestId } = render(<Plate view={view} dataTestId={dataTestId} />);
 
-            expect(container.firstElementChild).toHaveClass(view);
+            expect(getByTestId(dataTestId)).toHaveClass(view);
         });
     });
 
diff --git a/packages/plate/src/Component.tsx b/packages/plate/src/Component.tsx
index 23a60258c6..3d01d30a3f 100644
--- a/packages/plate/src/Component.tsx
+++ b/packages/plate/src/Component.tsx
@@ -14,6 +14,7 @@ import { useFocus } from '@alfalab/hooks';
 import { Button, ComponentProps as ButtonProps } from '@alfalab/core-components-button';
 
 import styles from './index.module.css';
+import { ButtonList } from './components/button-list/component';
 
 export type PlateProps = {
     /**
@@ -41,6 +42,31 @@ export type PlateProps = {
      */
     leftAddons?: ReactNode;
 
+    /**
+     * Слот для субаддонов (слева от крестика)
+     */
+    subAddons?: ReactNode | Array<ReactElement<ButtonProps>>;
+
+    /**
+     * Включить/выключить скругление
+     */
+    rounded?: boolean;
+
+    /**
+     * Включить/Выключить обводку
+     */
+    border?: boolean;
+
+    /**
+     * Включить/выключить тени
+     */
+    shadow?: boolean;
+
+    /**
+     * Включить/выключить ограничение максимальной ширины контента в 560px
+     */
+    limitContentWidth?: boolean;
+
     /**
      * Дочерние элементы
      */
@@ -51,10 +77,15 @@ export type PlateProps = {
      */
     title?: ReactNode;
 
+    /**
+     * Вид заголовка
+     */
+    titleView?: 'bold' | 'light';
+
     /**
      * Вид компонента
      */
-    view?: 'common' | 'negative' | 'positive' | 'attention';
+    view?: 'common' | 'negative' | 'positive' | 'attention' | 'custom';
 
     /**
      * Набор действий
@@ -76,6 +107,11 @@ export type PlateProps = {
      */
     contentClassName?: string;
 
+    /**
+     * Дополнительный класс для субаддонов
+     */
+    subAddonsClassName?: string;
+
     /**
      * Обработчик клика по плашке
      */
@@ -100,6 +136,7 @@ export type PlateProps = {
     dataTestId?: string;
 };
 
+/* eslint-disable complexity */
 export const Plate = forwardRef<HTMLDivElement, PlateProps>(
     (
         {
@@ -107,14 +144,21 @@ export const Plate = forwardRef<HTMLDivElement, PlateProps>(
             foldable: foldableProp = false,
             folded: foldedProp,
             defaultFolded = true,
+            rounded = true,
+            limitContentWidth = true,
             leftAddons,
+            subAddons,
             children,
             buttons,
             title,
+            titleView = 'bold',
             view = 'common',
+            border = view !== 'custom',
+            shadow = view === 'custom',
             className,
             buttonsClassName,
             contentClassName,
+            subAddonsClassName,
             dataTestId,
             onClick,
             onClose,
@@ -124,6 +168,7 @@ export const Plate = forwardRef<HTMLDivElement, PlateProps>(
     ) => {
         const plateRef = useRef<HTMLDivElement>(null);
         const contentRef = useRef<HTMLDivElement>(null);
+        const subAddonsRef = useRef<HTMLDivElement>(null);
 
         const [focused] = useFocus(plateRef, 'keyboard');
 
@@ -137,8 +182,8 @@ export const Plate = forwardRef<HTMLDivElement, PlateProps>(
 
         const hasButtons = !!buttons && typeof buttons !== 'boolean';
         const hasContent = children || hasButtons;
-
-        const buttonsIsArray = Array.isArray(buttons) && buttons.length > 0;
+        const hasSubAddons = !!subAddons && typeof subAddons !== 'boolean';
+        const hasAnyAddons = leftAddons || subAddons || foldable || hasCloser;
 
         const handleClick = useCallback(
             (event: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => {
@@ -148,6 +193,9 @@ export const Plate = forwardRef<HTMLDivElement, PlateProps>(
                 const eventInsideContent =
                     contentRef.current && contentRef.current.contains(target);
 
+                const eventInsideSubAddons =
+                    subAddonsRef.current && subAddonsRef.current.contains(target);
+
                 const clickSimilarKeys = ['Enter', ' '].includes(
                     (event as React.KeyboardEvent<HTMLDivElement>).key,
                 );
@@ -155,6 +203,7 @@ export const Plate = forwardRef<HTMLDivElement, PlateProps>(
                 const shouldChangeIsFolded =
                     eventInsideComponent &&
                     !eventInsideContent &&
+                    !eventInsideSubAddons &&
                     (event.type === 'click' || clickSimilarKeys);
 
                 if (foldable && shouldChangeIsFolded) {
@@ -185,94 +234,110 @@ export const Plate = forwardRef<HTMLDivElement, PlateProps>(
             [onClose],
         );
 
-        const renderButtons = () => {
-            if (buttonsIsArray) {
-                return (
-                    <div className={cn(styles.buttons, buttonsClassName)}>
-                        {(buttons as Array<ReactElement<ButtonProps>>).map((button, index) =>
-                            button
-                                ? React.cloneElement(button, {
-                                      // eslint-disable-next-line react/no-array-index-key
-                                      key: index,
-                                      size: 'xs',
-                                      view: index === 0 ? 'outlined' : 'link',
-                                      className: cn(button.props.className, styles.button),
-                                  })
-                                : null,
-                        )}
-                    </div>
-                );
-            }
-
-            return <div className={cn(styles.buttons, buttonsClassName)}>{buttons}</div>;
-        };
-
         return (
-            // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
             <div
-                className={cn(
-                    styles.component,
-                    styles[view],
-                    {
-                        [styles.foldable]: foldable,
-                        [styles.focused]: focused,
-                        [styles.isHidden]: hasCloser && isHidden,
-                        [styles.isFolded]: foldable && folded,
-                    },
-                    className,
-                )}
-                onClick={handleClick}
-                onKeyDown={handleClick}
-                role='alert'
-                ref={mergeRefs([plateRef, ref])}
-                /* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */
-                tabIndex={foldable ? 0 : -1}
-                data-test-id={dataTestId}
+                className={cn({
+                    [styles.shadow]: shadow,
+                    [styles.rounded]: rounded,
+                })}
             >
-                <div className={styles.inner}>
-                    {leftAddons && <div className={styles.leftAddons}>{leftAddons}</div>}
-                    <div
-                        className={cn(styles.contentContainer, contentClassName, {
-                            [styles.withoutTitle]: !title,
-                        })}
-                    >
-                        {title && <div className={styles.title}>{title}</div>}
-                        {hasContent && (
-                            <div
-                                ref={contentRef}
-                                className={cn(styles.content, {
-                                    [styles.isFolded]: foldable && folded,
-                                })}
-                            >
-                                <div className={styles.contentInner}>
-                                    {children}
-                                    {hasButtons ? renderButtons() : null}
+                {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */}
+                <div
+                    className={cn(
+                        styles.component,
+                        styles[view],
+                        {
+                            [styles.foldable]: foldable,
+                            [styles.focused]: focused,
+                            [styles.isHidden]: hasCloser && isHidden,
+                            [styles.isFolded]: foldable && folded,
+                            [styles.rounded]: rounded,
+                            [styles.rect]: !rounded,
+                            [styles.noBorder]: !border,
+                        },
+                        className,
+                    )}
+                    onClick={handleClick}
+                    onKeyDown={handleClick}
+                    role='alert'
+                    ref={mergeRefs([plateRef, ref])}
+                    /* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */
+                    tabIndex={foldable ? 0 : -1}
+                    data-test-id={dataTestId}
+                >
+                    <div className={styles.inner}>
+                        {leftAddons && <div className={styles.leftAddons}>{leftAddons}</div>}
+                        <div
+                            className={cn(styles.contentContainer, contentClassName, {
+                                [styles.withoutTitle]: !title && hasAnyAddons,
+                                [styles.limitWidth]: limitContentWidth,
+                            })}
+                        >
+                            {title && <div className={styles[titleView]}>{title}</div>}
+                            {hasContent && (
+                                <div
+                                    ref={contentRef}
+                                    className={cn(styles.content, {
+                                        [styles.isFolded]: foldable && folded,
+                                    })}
+                                >
+                                    {children && (
+                                        <div className={styles.description}>{children}</div>
+                                    )}
+
+                                    {hasButtons && (
+                                        <div className={styles.footer}>
+                                            <ButtonList
+                                                buttons={buttons}
+                                                containerClassName={buttonsClassName}
+                                                buttonClassName={cn(
+                                                    styles.button,
+                                                    buttonsClassName,
+                                                )}
+                                            />
+                                        </div>
+                                    )}
                                 </div>
+                            )}
+                        </div>
+
+                        {hasSubAddons && (
+                            <div ref={subAddonsRef} className={styles.subAddons}>
+                                <ButtonList
+                                    buttons={subAddons}
+                                    containerClassName={subAddonsClassName}
+                                    buttonClassName={styles.button}
+                                />
                             </div>
                         )}
-                    </div>
 
-                    {foldable && (
-                        <div
-                            className={cn(styles.folder, {
-                                [styles.isFolded]: folded,
-                            })}
-                        />
-                    )}
+                        {foldable && (
+                            <div className={styles.rightAddons}>
+                                <div
+                                    className={cn(styles.folder, {
+                                        [styles.isFolded]: folded,
+                                    })}
+                                />
+                            </div>
+                        )}
 
-                    {hasCloser && !foldable && (
-                        <Button
-                            className={styles.closer}
-                            aria-label='закрыть'
-                            view='ghost'
-                            onClick={handleClose}
-                        />
-                    )}
+                        {hasCloser && !foldable && (
+                            <div className={styles.rightAddons}>
+                                <Button
+                                    className={styles.closer}
+                                    aria-label='закрыть'
+                                    view='ghost'
+                                    onClick={handleClose}
+                                />
+                            </div>
+                        )}
+                    </div>
                 </div>
             </div>
         );
     },
 );
+/* eslint-enable complexity */
 
 /**
  * Для отображения в сторибуке
diff --git a/packages/plate/src/__image_snapshots__/plate-buttons-addons-left-addons-0-snap.png b/packages/plate/src/__image_snapshots__/plate-buttons-addons-left-addons-0-snap.png
index 21a14e5d57..aa1608d900 100644
--- a/packages/plate/src/__image_snapshots__/plate-buttons-addons-left-addons-0-snap.png
+++ b/packages/plate/src/__image_snapshots__/plate-buttons-addons-left-addons-0-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:0d9c912d1b5cd0d62ed59b3c254015a89e530fb873968ec9cbd0204f8f2fc22a
-size 11105
+oid sha256:80849729262475f8e6d4b013126c3b5fdc02e8b1d93cbeb5524014c0ffc22ede
+size 11090
diff --git a/packages/plate/src/__image_snapshots__/plate-buttons-addons-left-addons-1-snap.png b/packages/plate/src/__image_snapshots__/plate-buttons-addons-left-addons-1-snap.png
index 8ccc5a3ae8..09d2b7094b 100644
--- a/packages/plate/src/__image_snapshots__/plate-buttons-addons-left-addons-1-snap.png
+++ b/packages/plate/src/__image_snapshots__/plate-buttons-addons-left-addons-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:83f937d803a3216bec48f03df4f72c9b52055cf65f162b8ee2d48c8fa9023186
-size 11546
+oid sha256:85a29c8304fe78bc3cdb9a70e44ba5588ae4c6bc18cb6a647cea5ca9d2292167
+size 11536
diff --git a/packages/plate/src/__image_snapshots__/plate-foldable-with-buttons-addons-foldable-0-snap.png b/packages/plate/src/__image_snapshots__/plate-foldable-with-buttons-addons-foldable-0-snap.png
index 8ccc5a3ae8..09d2b7094b 100644
--- a/packages/plate/src/__image_snapshots__/plate-foldable-with-buttons-addons-foldable-0-snap.png
+++ b/packages/plate/src/__image_snapshots__/plate-foldable-with-buttons-addons-foldable-0-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:83f937d803a3216bec48f03df4f72c9b52055cf65f162b8ee2d48c8fa9023186
-size 11546
+oid sha256:85a29c8304fe78bc3cdb9a70e44ba5588ae4c6bc18cb6a647cea5ca9d2292167
+size 11536
diff --git a/packages/plate/src/__image_snapshots__/plate-foldable-with-buttons-addons-foldable-1-snap.png b/packages/plate/src/__image_snapshots__/plate-foldable-with-buttons-addons-foldable-1-snap.png
index ba70b47cee..66631296ac 100644
--- a/packages/plate/src/__image_snapshots__/plate-foldable-with-buttons-addons-foldable-1-snap.png
+++ b/packages/plate/src/__image_snapshots__/plate-foldable-with-buttons-addons-foldable-1-snap.png
@@ -1,3 +1,4 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:1e72944851ed87ff84558d4cf894d256e3ca0ef5b4ab1342a33b109639831385
-size 5880
+
+oid sha256:f815082f51657b1bb83989a57c7b3d0527eea1a20dc528a57d8a886b7209f68b
+size 5996
\ No newline at end of file
diff --git a/packages/plate/src/__image_snapshots__/plate-main-props-sprite-snap.png b/packages/plate/src/__image_snapshots__/plate-main-props-sprite-snap.png
index 92b7445c5e..f499137d07 100644
--- a/packages/plate/src/__image_snapshots__/plate-main-props-sprite-snap.png
+++ b/packages/plate/src/__image_snapshots__/plate-main-props-sprite-snap.png
@@ -1,3 +1,4 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:b42a905ebc69df6013a13e574e17b7668e4295d51545956f5f500174c8144e12
-size 179185
+
+oid sha256:d6ebe3cf81c84438f5cc554a6ab3d54b19da49a68eff40399ff244aab54932b2
+size 181390
diff --git a/packages/plate/src/__snapshots__/Component.test.tsx.snap b/packages/plate/src/__snapshots__/Component.test.tsx.snap
index 180e209862..7a65c70204 100644
--- a/packages/plate/src/__snapshots__/Component.test.tsx.snap
+++ b/packages/plate/src/__snapshots__/Component.test.tsx.snap
@@ -3,46 +3,50 @@
 exports[`Plate Snapshots tests should match snapshot 1`] = `
 <div>
   <div
-    class="component positive"
-    role="alert"
-    tabindex="-1"
+    class="rounded"
   >
     <div
-      class="inner"
+      class="component positive rounded"
+      role="alert"
+      tabindex="-1"
     >
       <div
-        class="leftAddons"
-      >
-        <svg
-          fill="currentColor"
-          focusable="false"
-          height="24"
-          role="img"
-          viewBox="0 0 24 24"
-          width="24"
-        >
-          <path
-            clip-rule="evenodd"
-            d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10zm-1.5-6L17 9.5 15.5 8l-5 5-2-2L7 12.5l3.5 3.5z"
-            fill-rule="evenodd"
-          />
-        </svg>
-      </div>
-      <div
-        class="contentContainer"
+        class="inner"
       >
         <div
-          class="title"
+          class="leftAddons"
         >
-          title
+          <svg
+            fill="currentColor"
+            focusable="false"
+            height="24"
+            role="img"
+            viewBox="0 0 24 24"
+            width="24"
+          >
+            <path
+              clip-rule="evenodd"
+              d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10zm-1.5-6L17 9.5 15.5 8l-5 5-2-2L7 12.5l3.5 3.5z"
+              fill-rule="evenodd"
+            />
+          </svg>
         </div>
         <div
-          class="content"
+          class="contentContainer limitWidth"
         >
           <div
-            class="contentInner"
+            class="bold"
+          >
+            title
+          </div>
+          <div
+            class="content"
           >
-            text
+            <div
+              class="description"
+            >
+              text
+            </div>
           </div>
         </div>
       </div>
diff --git a/packages/plate/src/components/button-list/component.tsx b/packages/plate/src/components/button-list/component.tsx
new file mode 100644
index 0000000000..8ae1d8bffa
--- /dev/null
+++ b/packages/plate/src/components/button-list/component.tsx
@@ -0,0 +1,49 @@
+import React, { FC, ReactElement, ReactNode } from 'react';
+import cn from 'classnames';
+
+import { ButtonProps } from '@alfalab/core-components-button';
+
+export type ButtonListProps = {
+    /**
+     * Кнопки для рендера
+     */
+    buttons: ReactNode;
+
+    /**
+     * Дополнительный класс для контейнера
+     */
+    containerClassName?: string;
+
+    /**
+     * Дополнительный класс для кнопок
+     */
+    buttonClassName?: string;
+};
+
+export const ButtonList: FC<ButtonListProps> = ({
+    buttons,
+    buttonClassName,
+    containerClassName,
+}) => {
+    const buttonsIsArray = Array.isArray(buttons) && buttons.length > 0;
+
+    if (buttonsIsArray) {
+        return (
+            <div className={containerClassName}>
+                {(buttons as Array<ReactElement<ButtonProps>>).map((button, index) =>
+                    button
+                        ? React.cloneElement(button, {
+                              // eslint-disable-next-line react/no-array-index-key
+                              key: index,
+                              size: 'xxs',
+                              view: index === 0 ? 'secondary' : 'link',
+                              className: cn(button.props.className, buttonClassName),
+                          })
+                        : null,
+                )}
+            </div>
+        );
+    }
+
+    return <div className={containerClassName}>{buttons}</div>;
+};
diff --git a/packages/plate/src/docs/component.stories.mdx b/packages/plate/src/docs/component.stories.mdx
index 6ffabc8f92..6e24f9c4fd 100644
--- a/packages/plate/src/docs/component.stories.mdx
+++ b/packages/plate/src/docs/component.stories.mdx
@@ -19,19 +19,33 @@ import { version } from '../../package.json';
 <!-- Canvas -->
 
 <Story name='Plate'>
-    <Plate
-        view={select('view', ['common', 'negative', 'positive', 'attention'], 'positive')}
-        title={text('title', 'Поздравляем, полный успех')}
-        foldable={boolean('foldable', false)}
-        hasCloser={boolean('hasCloser', false)}
-        leftAddons={boolean('leftAddons', true) ? <CheckmarkOnCircleMIcon /> : null}
-        buttons={boolean('buttons', false) ? [
-            <Button>Хорошо</Button>,
-            <Button>Подробнее</Button>
-        ] : null}
-    >
-        {text('children', 'Вам одобрено. Согласитесь на предложение')}
-    </Plate>
+    {React.createElement(() => {
+        const view = select('view', ['common', 'negative', 'positive', 'attention', 'custom'], 'positive');
+        return (
+            <Plate
+                view={view}
+                title={text('title', 'Поздравляем, полный успех')}
+                foldable={boolean('foldable', false)}
+                hasCloser={boolean('hasCloser', false)}
+                rounded={boolean('rounded', true)}
+                border={boolean('border', view !== 'custom')}
+                shadow={boolean('shadow', false)}
+                limitContentWidth={boolean('limitContentWidth', true)}
+                titleView={select('titleView', ['bold', 'light'])}
+                leftAddons={boolean('leftAddons', true) ? <CheckmarkOnCircleMIcon /> : null}
+                buttons={boolean('buttons', false) ? [
+                    <Button view='primary'>Хорошо</Button>,
+                    <Button>Подробнее</Button>,
+                ] : null}
+                subAddons={boolean('subAddons', false) ? [
+                    <Button view='link' size='xxs'>Хорошо</Button>,
+                    <Button view='secondary' size='xxs'>Подробнее</Button>,
+                ] : null}
+            >
+                {text('children', 'Вам одобрено. Согласитесь на предложение')}
+            </Plate>
+        )
+    })}
 </Story>
 
 <!-- Docs -->
diff --git a/packages/plate/src/docs/description.mdx b/packages/plate/src/docs/description.mdx
index 42a0385618..d54f62816c 100644
--- a/packages/plate/src/docs/description.mdx
+++ b/packages/plate/src/docs/description.mdx
@@ -1,63 +1,139 @@
-Компонент плашки.
+Компонент может использоваться самостоятельно или в составе более сложных компонентов
 
-```jsx live
-// import { InformationCircleMIcon } from '@alfalab/icons-glyph/InformationCircleMIcon';
+## Архитектура
+
+Компонент состоит из слотов. Часто используемые конфигурации слотов могут быть сохранены как пресеты.
+
+## Примеры
+
+### Скругление и обводка
 
-<Space fullWidth={true}>
+Для плашки можно включить скругление и обводку. Наличие скругления влияет на формат обводки.
+
+```jsx live
+<Space fullWidth>
     <Plate
-        view='common'
+        view='positive'
         title='Компонент плашки'
-        leftAddons={
-            <Badge view='icon' iconColor='secondary' content={<InformationCircleMIcon />} />
-        }
-    >
-        Самая обыкновенная плашка
-    </Plate>
+        border={false}
+        subAddons={[<Button>Подробнее</Button>]}
+        leftAddons={<Badge view='icon' iconColor='positive' content={<CheckmarkOnCircleMIcon />} />}
+    />
+    <Plate
+        view='positive'
+        title='Компонент плашки'
+        subAddons={[<Button>Подробнее</Button>]}
+        leftAddons={<Badge view='icon' iconColor='positive' content={<CheckmarkOnCircleMIcon />} />}
+    />
+    <Plate
+        view='positive'
+        title='Компонент плашки'
+        rounded={false}
+        border={false}
+        subAddons={[<Button>Подробнее</Button>]}
+        leftAddons={<Badge view='icon' iconColor='positive' content={<CheckmarkOnCircleMIcon />} />}
+    />
+    <Plate
+        view='positive'
+        title='Компонент плашки'
+        rounded={false}
+        subAddons={[<Button>Подробнее</Button>]}
+        leftAddons={<Badge view='icon' iconColor='positive' content={<CheckmarkOnCircleMIcon />} />}
+    />
+</Space>
+```
 
+### Фон
+
+Компоненту может быть задан произвольный фон с использованием токенов из набора bg или передано фоновое изображение. При необходимости для плашки может быть включена тень.
+
+```jsx live
+<Space fullWidth>
     <Plate
         view='positive'
+        hasCloser
         title='Компонент плашки'
+        subAddons={[<Button>Подробнее</Button>, <Button>Хорошо</Button>]}
         leftAddons={<Badge view='icon' iconColor='positive' content={<CheckmarkOnCircleMIcon />} />}
-    >
-        Самая обыкновенная плашка
-    </Plate>
+    />
 
     <Plate
         view='negative'
+        hasCloser
         title='Компонент плашки'
+        subAddons={[<Button>Хорошо</Button>]}
         leftAddons={<Badge view='icon' iconColor='negative' content={<AlertCircleMIcon />} />}
-    >
-        Самая обыкновенная плашка
-    </Plate>
+    />
 
     <Plate
         view='attention'
+        hasCloser
         title='Компонент плашки'
         leftAddons={<Badge view='icon' iconColor='attention' content={<AlertCircleMIcon />} />}
-    >
-        Самая обыкновенная плашка
-    </Plate>
+    />
+    <Plate
+        view='common'
+        hasCloser
+        title='Компонент плашки'
+        leftAddons={
+            <Badge view='icon' iconColor='secondary' content={<InformationCircleMIcon />} />
+        }
+    />
+    <Plate
+        view='custom'
+        hasCloser
+        title='Компонент плашки'
+        leftAddons={
+            <Badge view='icon' iconColor='secondary' content={<InformationCircleMIcon />} />
+        }
+    />
+    <Plate
+        view='custom'
+        hasCloser
+        title='Компонент плашки'
+        className='plateGlobal'
+        leftAddons={
+            <Badge view='icon' iconColor='secondary' content={<InformationCircleMIcon />} />
+        }
+    />
 </Space>
 ```
 
-### Управление сворачиванием
+### Механики
+
+Классическая
+
+```jsx live
+<Plate
+    view='positive'
+    hasCloser
+    title='Компонент плашки'
+    leftAddons={<Badge view='icon' iconColor='positive' content={<CheckmarkOnCircleMIcon />} />}
+    buttons={[<Button>Хорошо</Button>, <Button>Подробнее</Button>]}
+>
+    Самая обыкновенная плашка
+</Plate>
+```
+
+Collapsed / Expanded
 
 ```jsx live
 render(() => {
     const [folded, setFolded] = React.useState(true);
 
-    const onToggle = (_, { folded }) => setFolded(folded);
-
     return (
-        <Space>
-            <Button onClick={() => setFolded(!folded)}>{folded ? 'Открыть' : 'Закрыть'}</Button>
-
+        <Space fullWidth>
             <Plate
-                view='common'
+                view='negative'
+                hasCloser
                 title='Компонент плашки'
-                foldable={true}
+                foldable
                 folded={folded}
-                onToggle={onToggle}
+                onToggle={() => setFolded(!folded)}
+                leftAddons={
+                    <Badge view='icon' iconColor='negative' content={<AlertCircleMIcon />} />
+                }
+                buttons={[<Button>Хорошо</Button>, <Button>Подробнее</Button>]}
             >
                 Самая обыкновенная плашка
             </Plate>
diff --git a/packages/plate/src/index.module.css b/packages/plate/src/index.module.css
index e427ff3d1a..925d00f9d8 100644
--- a/packages/plate/src/index.module.css
+++ b/packages/plate/src/index.module.css
@@ -2,9 +2,18 @@
 
 :root {
     /* border */
-    --plate-border: 1px solid;
+    --plate-border-left: 2px;
+    --plate-border: 0 0 0 1px;
     --plate-border-radius: var(--border-radius-m);
 
+    /* width limit */
+
+    --plate-width-limit: 560px;
+
+    /* custom view */
+    --plate-background: transparent;
+    --plate-border-color: var(--color-static-status-grey);
+
     /* icons */
     --plate-closer-icon: url('https://alfabank.servicecdn.ru/icons/glyph_cross_m.svg');
     --plate-arrow-icon: url('https://alfabank.servicecdn.ru/icons/glyph_chevron-down_m.svg');
@@ -14,13 +23,20 @@
     position: relative;
     display: inline-flex;
     box-sizing: border-box;
-    border-radius: var(--plate-border-radius);
-    border: var(--plate-border);
     color: var(--color-light-text-primary);
     width: 100%;
     min-height: 56px;
-    padding: var(--gap-m);
+    padding: var(--gap-s);
     outline: none;
+
+    &:before {
+        content: '';
+        width: var(--plate-border-left);
+        position: absolute;
+        height: 100%;
+        top: 0;
+        left: 0;
+    }
 }
 
 .foldable {
@@ -42,50 +58,107 @@
     justify-content: space-between;
 }
 
+.rounded,
+.noBorder {
+    &:before {
+        display: none;
+    }
+}
+
+.rounded {
+    border-radius: var(--plate-border-radius);
+}
+
+.shadow {
+    box-shadow: var(--shadow-s);
+}
+
 .common {
     background-color: var(--color-light-bg-secondary);
-    border-color: var(--color-static-status-grey);
+    box-shadow: var(--plate-border) var(--color-static-status-grey);
+    &:before {
+        background-color: var(--color-static-status-grey);
+    }
 }
 
 .negative {
     background-color: var(--color-light-bg-negative-muted);
-    border-color: var(--color-static-status-red);
+    box-shadow: var(--plate-border) var(--color-static-status-red);
+    &:before {
+        background-color: var(--color-static-status-red);
+    }
 }
 
 .positive {
     background-color: var(--color-light-bg-positive-muted);
-    border-color: var(--color-static-status-green);
+    box-shadow: var(--plate-border) var(--color-static-status-green);
+    &:before {
+        background-color: var(--color-static-status-green);
+    }
 }
 
 .attention {
     background-color: var(--color-light-bg-attention-muted);
-    border-color: var(--color-static-status-orange);
+    box-shadow: var(--plate-border) var(--color-static-status-orange);
+    &:before {
+        background-color: var(--color-static-status-orange);
+    }
+}
+
+.custom {
+    background: var(--plate-background);
+    box-shadow: var(--plate-border) var(--plate-border-color);
+    &:before {
+        background-color: var(--plate-border-color);
+    }
+}
+
+.rect,
+.noBorder {
+    box-shadow: none;
 }
 
 .isHidden {
     display: none;
 }
 
+.leftAddons,
+.rightAddons {
+    padding: var(--gap-2xs);
+}
+
 .leftAddons {
     flex-shrink: 0;
     min-width: 24px;
-    margin-right: var(--gap-s);
+    margin-right: var(--gap-2xs);
 }
 
-.title {
-    @mixin accent_primary_large;
+.subAddons {
+    cursor: default;
+    align-self: flex-start;
+}
 
+.bold,
+.light {
     word-break: break-word;
 }
 
+.bold {
+    @mixin headline-system_xsmall;
+    padding: 5px var(--gap-s) 5px var(--gap-2xs);
+}
+
+.light {
+    @mixin paragraph_primary_small;
+    padding: 6px var(--gap-s) 6px var(--gap-2xs);
+}
+
 .content {
     @mixin paragraph_primary_small;
 
     max-height: 300vh;
     overflow: hidden;
     transition: max-height 2s ease-in-out;
-    padding: var(--gap-2xs);
-    margin: var(--gap-2xs-neg);
     cursor: default;
 
     &.isFolded {
@@ -96,7 +169,6 @@
 
 .contentContainer {
     flex: 1;
-    max-width: 586px;
     margin-right: auto;
 
     &.withoutTitle {
@@ -104,8 +176,17 @@
     }
 }
 
-.title + .content > .contentInner {
-    padding-top: var(--gap-xs);
+.limitWidth {
+    max-width: var(--plate-width-limit);
+}
+
+.description {
+    @mixin paragraph_primary_small;
+    padding: var(--gap-2xs) var(--gap-s) var(--gap-2xs) var(--gap-2xs);
+}
+
+.footer {
+    padding: var(--gap-l) 0 var(--gap-2xs) var(--gap-2xs);
 }
 
 .closer,
@@ -116,7 +197,7 @@
     opacity: 1;
     transition: opacity 0.2s ease;
     cursor: pointer;
-    margin-left: var(--gap-m);
+    margin-left: var(--gap-s);
 
     &:hover {
         opacity: 0.7;
@@ -141,14 +222,8 @@
     }
 }
 
-.buttons {
-    margin-top: var(--gap-xl);
-}
-
 .button {
-    margin-right: var(--gap-s);
-
-    &:last-child {
-        margin-right: 0;
+    &:not(:last-child) {
+        margin-right: var(--gap-xs);
     }
 }