diff --git a/src-docs/src/services/playground/playground.js b/src-docs/src/services/playground/playground.js
index 7c23dd19114..72882d5d8c9 100644
--- a/src-docs/src/services/playground/playground.js
+++ b/src-docs/src/services/playground/playground.js
@@ -6,7 +6,7 @@ import { useView, Compiler, Placeholder } from 'react-view';
 import { EuiSpacer, EuiTitle, EuiCodeBlock } from '../../../../src/components';
 import Knobs from './knobs';
 
-export default ({ config, setGhostBackground }) => {
+export default ({ config, setGhostBackground, playgroundClassName }) => {
   const getSnippet = code => {
     let regex = /return \(([\S\s]*?)(;)$/gm;
     let newCode = code.match(regex);
@@ -45,9 +45,13 @@ export default ({ config, setGhostBackground }) => {
       }
     }, [params.knobProps]);
 
-    const compilerClasses = classNames('playgroundCompiler', {
-      playgroundCompiler__ghostBackground: isGhost,
-    });
+    const compilerClasses = classNames(
+      'playgroundCompiler',
+      {
+        playgroundCompiler__ghostBackground: isGhost,
+      },
+      playgroundClassName
+    );
 
     return (
       <React.Fragment>
diff --git a/src-docs/src/views/horizontal_rule/horizontal_rule_example.js b/src-docs/src/views/horizontal_rule/horizontal_rule_example.js
index abc1e03be5b..6bfcf86cd85 100644
--- a/src-docs/src/views/horizontal_rule/horizontal_rule_example.js
+++ b/src-docs/src/views/horizontal_rule/horizontal_rule_example.js
@@ -6,6 +6,8 @@ import { GuideSectionTypes } from '../../components';
 
 import { EuiHorizontalRule } from '../../../../src/components';
 
+import { horizontalRuleConfig } from './playground';
+
 import HorizontalRule from './horizontal_rule';
 const horizontalRuleSource = require('!!raw-loader!./horizontal_rule');
 const horizontalRuleHtml = renderToHtml(HorizontalRule);
@@ -64,4 +66,5 @@ export const HorizontalRuleExample = {
       demo: <HorizontalRuleMargin />,
     },
   ],
+  playground: horizontalRuleConfig,
 };
diff --git a/src-docs/src/views/horizontal_rule/playground.js b/src-docs/src/views/horizontal_rule/playground.js
new file mode 100644
index 00000000000..2c43bdb56f8
--- /dev/null
+++ b/src-docs/src/views/horizontal_rule/playground.js
@@ -0,0 +1,24 @@
+import { EuiHorizontalRule } from '../../../../src/components/';
+import { propUtilityForPlayground } from '../../services/playground';
+
+export const horizontalRuleConfig = () => {
+  const docgenInfo = Array.isArray(EuiHorizontalRule.__docgenInfo)
+    ? EuiHorizontalRule.__docgenInfo[0]
+    : EuiHorizontalRule.__docgenInfo;
+  const propsToUse = propUtilityForPlayground(docgenInfo.props);
+
+  return {
+    config: {
+      componentName: 'EuiHorizontalRule',
+      props: propsToUse,
+      scope: {
+        EuiHorizontalRule,
+      },
+      imports: {
+        '@elastic/eui': {
+          named: ['EuiHorizontalRule'],
+        },
+      },
+    },
+  };
+};
diff --git a/src-docs/src/views/spacer/playground.js b/src-docs/src/views/spacer/playground.js
new file mode 100644
index 00000000000..48ba4c2ce67
--- /dev/null
+++ b/src-docs/src/views/spacer/playground.js
@@ -0,0 +1,25 @@
+import { EuiSpacer } from '../../../../src/components/';
+import { propUtilityForPlayground } from '../../services/playground';
+
+export const spacerConfig = () => {
+  const docgenInfo = Array.isArray(EuiSpacer.__docgenInfo)
+    ? EuiSpacer.__docgenInfo[0]
+    : EuiSpacer.__docgenInfo;
+  const propsToUse = propUtilityForPlayground(docgenInfo.props);
+
+  return {
+    config: {
+      componentName: 'EuiSpacer',
+      props: propsToUse,
+      scope: {
+        EuiSpacer,
+      },
+      imports: {
+        '@elastic/eui': {
+          named: ['EuiSpacer'],
+        },
+      },
+    },
+    playgroundClassName: 'guideDemo__highlightSpacer',
+  };
+};
diff --git a/src-docs/src/views/spacer/spacer_example.js b/src-docs/src/views/spacer/spacer_example.js
index 46297dbebb3..22d225209e9 100644
--- a/src-docs/src/views/spacer/spacer_example.js
+++ b/src-docs/src/views/spacer/spacer_example.js
@@ -7,6 +7,8 @@ import { GuideSectionTypes } from '../../components';
 
 import { EuiCode, EuiSpacer } from '../../../../src/components';
 
+import { spacerConfig } from './playground';
+
 import Spacer from './spacer';
 const spacerSource = require('!!raw-loader!./spacer');
 const spacerHtml = renderToHtml(Spacer);
@@ -48,4 +50,5 @@ export const SpacerExample = {
       ),
     },
   ],
+  playground: spacerConfig,
 };