diff --git a/examples/cra-kitchen-sink/src/components/Container.js b/examples/cra-kitchen-sink/src/components/Container.js
index efd894da18a1..af3f53831359 100644
--- a/examples/cra-kitchen-sink/src/components/Container.js
+++ b/examples/cra-kitchen-sink/src/components/Container.js
@@ -10,7 +10,16 @@ const Container = ({ children, title, age, isAmazing }) => (
 );
 
 Container.propTypes = {
-  /** The nodes to be rendered in the button */
+  /**
+   * The nodes to be rendered in the button
+   * 
+   * Example value:
+   * 
+   * ```
+   * <h1>Node 1</h1>
+   * <h2>Node 2</h2>
+   * ```
+   */
   children: PropTypes.node.isRequired,
   /** Show exclamation marks */
   isAmazing: PropTypes.bool,
diff --git a/examples/cra-kitchen-sink/src/stories/test.stories.mdx b/examples/cra-kitchen-sink/src/stories/test.stories.mdx
index 14ec31fe6159..cfc8715570a6 100644
--- a/examples/cra-kitchen-sink/src/stories/test.stories.mdx
+++ b/examples/cra-kitchen-sink/src/stories/test.stories.mdx
@@ -1,7 +1,14 @@
-import { Story, Meta } from '@storybook/addon-docs';
+import { Story, Meta, ArgsTable } from '@storybook/addon-docs';
+import Container from '../components/Container'
 
-<Meta title="Docs/Test" />
+<Meta title="Docs/Test" component={Container} />
 
 <Story name="NewStory123">
-  <h2> Hello </h2>
+  <Container>
+    <h1>Hello</h1>
+  </Container>
 </Story>
+
+## Arguments
+
+<ArgsTable story="NewStory123" />
diff --git a/examples/cra-ts-kitchen-sink/src/components/Button.tsx b/examples/cra-ts-kitchen-sink/src/components/Button.tsx
index 0d3f77ead09b..a50f0cb33b48 100644
--- a/examples/cra-ts-kitchen-sink/src/components/Button.tsx
+++ b/examples/cra-ts-kitchen-sink/src/components/Button.tsx
@@ -4,7 +4,16 @@ export type Type = 'default' | 'action';
 
 interface Props {
   /**
-   * Click event handler
+   * Click event `handler`
+   * 
+   * Example function:
+   * 
+   * ```
+   * () => {
+   *   doThis();
+   * }
+   * ```
+   * 
    * @default null
    */
   onClick?: () => void;
diff --git a/lib/components/src/blocks/ArgsTable/ArgRow.tsx b/lib/components/src/blocks/ArgsTable/ArgRow.tsx
index fdf95425cfdf..e62aef714004 100644
--- a/lib/components/src/blocks/ArgsTable/ArgRow.tsx
+++ b/lib/components/src/blocks/ArgsTable/ArgRow.tsx
@@ -35,12 +35,20 @@ const Description = styled.div(({ theme }) => ({
     },
   },
 
-  code: codeCommon({ theme }),
+  code: {
+    ...codeCommon({ theme }),
+    fontSize: 12,
+    fontFamily: theme.typography.fonts.mono,
+  },
 
   '& code': {
     margin: 0,
     display: 'inline-block',
   },
+
+  '& pre > code': {
+    whiteSpace: 'pre-wrap',
+  },
 }));
 
 const Type = styled.div<{ hasDescription: boolean }>(({ theme, hasDescription }) => ({