diff --git a/packages/web-react/docs/DocsBox.tsx b/packages/web-react/docs/DocsBox.tsx
new file mode 100644
index 0000000000..2f02a0ed1a
--- /dev/null
+++ b/packages/web-react/docs/DocsBox.tsx
@@ -0,0 +1,21 @@
+import React, { ReactNode } from 'react';
+import { SizesDictionaryType } from '../src/types';
+
+interface DocsBoxProps {
+  children: ReactNode;
+  size?: SizesDictionaryType;
+}
+
+const defaultProps = {
+  size: 'medium',
+};
+
+const DocsBox = ({ children, size }: DocsBoxProps) => {
+  const sizeClass = size ? `docs-Box--${size}` : '';
+
+  return <div className={`docs-Box ${sizeClass}`}>{children}</div>;
+};
+
+DocsBox.defaultProps = defaultProps;
+
+export default DocsBox;
diff --git a/packages/web-react/src/components/Container/demo/ContainerDefault.tsx b/packages/web-react/src/components/Container/demo/ContainerDefault.tsx
index 1fe6f43065..03a3baffdd 100644
--- a/packages/web-react/src/components/Container/demo/ContainerDefault.tsx
+++ b/packages/web-react/src/components/Container/demo/ContainerDefault.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
+import DocsBox from '../../../../docs/DocsBox';
 
-const ContainerDefault = () => {
-  return <div className="docs-Box">Container</div>;
-};
+const ContainerDefault = () => <DocsBox>Container</DocsBox>;
 
 export default ContainerDefault;