diff --git a/apps/fabric-website-resources/src/AppDefinition.tsx b/apps/fabric-website-resources/src/AppDefinition.tsx
index 4d716c4bc75cc..379c7edba8541 100644
--- a/apps/fabric-website-resources/src/AppDefinition.tsx
+++ b/apps/fabric-website-resources/src/AppDefinition.tsx
@@ -384,6 +384,12 @@ export const AppDefinition: IAppDefinition = {
           name: 'Spinner',
           url: '#/examples/spinner'
         },
+        {
+          component: require<any>('./components/pages/StackPage').StackPage,
+          key: 'Stack',
+          name: 'Stack',
+          url: '#/examples/stack'
+        },
         {
           component: require<any>('./components/pages/SwatchColorPickerPage').SwatchColorPickerPage,
           key: 'SwatchColorPicker',
diff --git a/apps/fabric-website-resources/src/components/pages/StackPage.tsx b/apps/fabric-website-resources/src/components/pages/StackPage.tsx
new file mode 100644
index 0000000000000..11057ba1818e7
--- /dev/null
+++ b/apps/fabric-website-resources/src/components/pages/StackPage.tsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { DemoPage } from '../DemoPage';
+
+import { StackPageProps } from 'office-ui-fabric-react/lib/components/Stack/Stack.doc';
+
+export const StackPage = (props: { isHeaderVisible: boolean }) => <DemoPage {...{ ...StackPageProps, ...props }} />;
diff --git a/apps/vr-tests/src/stories/HorizontalStack.stories.tsx b/apps/vr-tests/src/stories/HorizontalStack.stories.tsx
index 17f60882b6cb6..7ddf3744e638a 100644
--- a/apps/vr-tests/src/stories/HorizontalStack.stories.tsx
+++ b/apps/vr-tests/src/stories/HorizontalStack.stories.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
 import Screener, { Steps } from 'screener-storybook/src/screener';
 import { storiesOf } from '@storybook/react';
 import { FabricDecoratorFullWidth } from '../utilities';
-import { HorizontalStack } from '@uifabric/experiments/lib/Stack';
+import { Stack } from 'office-ui-fabric-react';
 import { mergeStyleSets, DefaultPalette } from 'office-ui-fabric-react/lib/Styling';
 
 const rootStyles = {
@@ -52,110 +52,122 @@ const styles = mergeStyleSets({
 const defaultProps = {
   className: styles.root,
   children: [
-    <span key={1} className={styles.boxItem}>1</span>,
-    <span key={2} className={styles.boxItem}>2</span>,
-    <span key={3} className={styles.boxItem}>3</span>
+    <span key={1} className={styles.boxItem}>
+      1
+    </span>,
+    <span key={2} className={styles.boxItem}>
+      2
+    </span>,
+    <span key={3} className={styles.boxItem}>
+      3
+    </span>
   ]
 };
 
 storiesOf('HorizontalStack', module)
   .addDecorator(FabricDecoratorFullWidth)
-  .addDecorator(story => (
-    <Screener steps={new Steps().snapshot('default', { cropTo: '.testWrapper' }).end()}>{story()}</Screener>
-  ))
-  .addStory('Default', () => (
-    <HorizontalStack {...defaultProps} />
-  ), { rtl: true })
-  .addStory('Padding', () => (
-    <HorizontalStack {...defaultProps} padding={10} />
-  ))
-  .addStory('Gap', () => (
-    <HorizontalStack {...defaultProps} gap={10} />
-  ), { rtl: true })
-  .addStory('Horizontally centered', () => (
-    <HorizontalStack {...defaultProps} horizontalAlign="center" />
-  ))
-  .addStory('Right-aligned', () => (
-    <HorizontalStack {...defaultProps} horizontalAlign="right" />
-  ), { rtl: true })
-  .addStory('Space around', () => (
-    <HorizontalStack {...defaultProps} horizontalAlign="space-around" />
-  ))
-  .addStory('Space between', () => (
-    <HorizontalStack {...defaultProps} horizontalAlign="space-between" />
-  ))
-  .addStory('Space evenly', () => (
-    <HorizontalStack {...defaultProps} horizontalAlign="space-evenly" />
-  ))
-  .addStory('Vertically centered', () => (
-    <HorizontalStack {...defaultProps} verticalAlign="center" className={styles.fixedHeight} />
-  ))
-  .addStory('Bottom-aligned', () => (
-    <HorizontalStack {...defaultProps} verticalAlign="bottom" className={styles.fixedHeight} />
-  ))
-  .addStory('Item alignments', () => (
-    <HorizontalStack {...defaultProps} gap={10} className={styles.fixedHeight}>
-      <HorizontalStack.Item align="auto" className={styles.item}>Auto-aligned item</HorizontalStack.Item>
-      <HorizontalStack.Item align="stretch" className={styles.item}>Stretch-aligned item</HorizontalStack.Item>
-      <HorizontalStack.Item align="baseline" className={styles.item}>Baseline-aligned item</HorizontalStack.Item>
-      <HorizontalStack.Item align="start" className={styles.item}>Start-aligned item</HorizontalStack.Item>
-      <HorizontalStack.Item align="center" className={styles.item}>Center-aligned item</HorizontalStack.Item>
-      <HorizontalStack.Item align="end" className={styles.item}>End-aligned item</HorizontalStack.Item>
-    </HorizontalStack>
-  ), { rtl: true })
+  .addDecorator(story => <Screener steps={new Steps().snapshot('default', { cropTo: '.testWrapper' }).end()}>{story()}</Screener>)
+  .addStory('Default', () => <Stack horizontal {...defaultProps} />, { rtl: true })
+  .addStory('Padding', () => <Stack horizontal {...defaultProps} padding={10} />)
+  .addStory('Gap', () => <Stack horizontal {...defaultProps} gap={10} />, { rtl: true })
+  .addStory('Horizontally centered', () => <Stack horizontal {...defaultProps} horizontalAlignment="center" />)
+  .addStory('Right-aligned', () => <Stack horizontal {...defaultProps} horizontalAlignment="end" />, { rtl: true })
+  .addStory('Space around', () => <Stack horizontal {...defaultProps} horizontalAlignment="space-around" />)
+  .addStory('Space between', () => <Stack horizontal {...defaultProps} horizontalAlignment="space-between" />)
+  .addStory('Space evenly', () => <Stack horizontal {...defaultProps} horizontalAlignment="space-evenly" />)
+  .addStory('Vertically centered', () => <Stack horizontal {...defaultProps} verticalAlignment="center" className={styles.fixedHeight} />)
+  .addStory('Bottom-aligned', () => <Stack horizontal {...defaultProps} verticalAlignment="bottom" className={styles.fixedHeight} />)
+  .addStory(
+    'Item alignments',
+    () => (
+      <Stack horizontal {...defaultProps} gap={10} className={styles.fixedHeight}>
+        <Stack.Item align="auto" className={styles.item}>
+          Auto-aligned item
+        </Stack.Item>
+        <Stack.Item align="stretch" className={styles.item}>
+          Stretch-aligned item
+        </Stack.Item>
+        <Stack.Item align="baseline" className={styles.item}>
+          Baseline-aligned item
+        </Stack.Item>
+        <Stack.Item align="start" className={styles.item}>
+          Start-aligned item
+        </Stack.Item>
+        <Stack.Item align="center" className={styles.item}>
+          Center-aligned item
+        </Stack.Item>
+        <Stack.Item align="end" className={styles.item}>
+          End-aligned item
+        </Stack.Item>
+      </Stack>
+    ),
+    { rtl: true }
+  )
   .addStory('Growing items', () => (
-    <HorizontalStack {...defaultProps} gap={10}>
-      <HorizontalStack.Item grow={3} className={styles.item}>Grow is 3</HorizontalStack.Item>
-      <HorizontalStack.Item grow={2} className={styles.item}>Grow is 2</HorizontalStack.Item>
-      <HorizontalStack.Item grow className={styles.item}>Grow is 1</HorizontalStack.Item>
-    </HorizontalStack>
+    <Stack horizontal {...defaultProps} gap={10}>
+      <Stack.Item grow={3} className={styles.item}>
+        Grow is 3
+      </Stack.Item>
+      <Stack.Item grow={2} className={styles.item}>
+        Grow is 2
+      </Stack.Item>
+      <Stack.Item grow className={styles.item}>
+        Grow is 1
+      </Stack.Item>
+    </Stack>
   ))
   .addStory('Shrinking items', () => (
-    <HorizontalStack {...defaultProps} gap={10} shrinkItems>
-      <HorizontalStack.Item className={styles.shrinkItem}>1</HorizontalStack.Item>
-      <HorizontalStack.Item preventShrink className={styles.shrinkItem}>2 (does not shrink)</HorizontalStack.Item>
-      <HorizontalStack.Item className={styles.shrinkItem}>3</HorizontalStack.Item>
-      <HorizontalStack.Item className={styles.shrinkItem}>4</HorizontalStack.Item>
-      <HorizontalStack.Item className={styles.shrinkItem}>5</HorizontalStack.Item>
-      <HorizontalStack.Item className={styles.shrinkItem}>6</HorizontalStack.Item>
-      <HorizontalStack.Item className={styles.shrinkItem}>7</HorizontalStack.Item>
-    </HorizontalStack>
+    <Stack horizontal {...defaultProps} gap={10} shrinkItems>
+      <Stack.Item className={styles.shrinkItem}>1</Stack.Item>
+      <Stack.Item preventShrink className={styles.shrinkItem}>
+        2 (does not shrink)
+      </Stack.Item>
+      <Stack.Item className={styles.shrinkItem}>3</Stack.Item>
+      <Stack.Item className={styles.shrinkItem}>4</Stack.Item>
+      <Stack.Item className={styles.shrinkItem}>5</Stack.Item>
+      <Stack.Item className={styles.shrinkItem}>6</Stack.Item>
+      <Stack.Item className={styles.shrinkItem}>7</Stack.Item>
+    </Stack>
   ))
-  .addStory('Wrap', () => (
-    <HorizontalStack {...defaultProps} gap={10} wrap>
-      <span className={styles.boxItem}>1</span>
-      <span className={styles.boxItem}>2</span>
-      <span className={styles.boxItem}>3</span>
-      <span className={styles.boxItem}>4</span>
-      <span className={styles.boxItem}>5</span>
-      <span className={styles.boxItem}>6</span>
-      <span className={styles.boxItem}>7</span>
-      <span className={styles.boxItem}>8</span>
-      <span className={styles.boxItem}>9</span>
-      <span className={styles.boxItem}>10</span>
-      <span className={styles.boxItem}>11</span>
-      <span className={styles.boxItem}>12</span>
-      <span className={styles.boxItem}>13</span>
-      <span className={styles.boxItem}>14</span>
-      <span className={styles.boxItem}>15</span>
-      <span className={styles.boxItem}>16</span>
-      <span className={styles.boxItem}>17</span>
-      <span className={styles.boxItem}>18</span>
-      <span className={styles.boxItem}>19</span>
-      <span className={styles.boxItem}>20</span>
-      <span className={styles.boxItem}>22</span>
-      <span className={styles.boxItem}>23</span>
-      <span className={styles.boxItem}>24</span>
-      <span className={styles.boxItem}>25</span>
-      <span className={styles.boxItem}>26</span>
-      <span className={styles.boxItem}>27</span>
-      <span className={styles.boxItem}>28</span>
-      <span className={styles.boxItem}>29</span>
-      <span className={styles.boxItem}>30</span>
-    </HorizontalStack>
-  ), { rtl: true })
+  .addStory(
+    'Wrap',
+    () => (
+      <Stack horizontal {...defaultProps} gap={10} wrap>
+        <span className={styles.boxItem}>1</span>
+        <span className={styles.boxItem}>2</span>
+        <span className={styles.boxItem}>3</span>
+        <span className={styles.boxItem}>4</span>
+        <span className={styles.boxItem}>5</span>
+        <span className={styles.boxItem}>6</span>
+        <span className={styles.boxItem}>7</span>
+        <span className={styles.boxItem}>8</span>
+        <span className={styles.boxItem}>9</span>
+        <span className={styles.boxItem}>10</span>
+        <span className={styles.boxItem}>11</span>
+        <span className={styles.boxItem}>12</span>
+        <span className={styles.boxItem}>13</span>
+        <span className={styles.boxItem}>14</span>
+        <span className={styles.boxItem}>15</span>
+        <span className={styles.boxItem}>16</span>
+        <span className={styles.boxItem}>17</span>
+        <span className={styles.boxItem}>18</span>
+        <span className={styles.boxItem}>19</span>
+        <span className={styles.boxItem}>20</span>
+        <span className={styles.boxItem}>22</span>
+        <span className={styles.boxItem}>23</span>
+        <span className={styles.boxItem}>24</span>
+        <span className={styles.boxItem}>25</span>
+        <span className={styles.boxItem}>26</span>
+        <span className={styles.boxItem}>27</span>
+        <span className={styles.boxItem}>28</span>
+        <span className={styles.boxItem}>29</span>
+        <span className={styles.boxItem}>30</span>
+      </Stack>
+    ),
+    { rtl: true }
+  )
   .addStory('Wrap with specified vertical gap', () => (
-    <HorizontalStack {...defaultProps} wrap gap={10} verticalGap={40}>
+    <Stack horizontal {...defaultProps} wrap gap={10} verticalGap={40}>
       <span className={styles.boxItem}>1</span>
       <span className={styles.boxItem}>2</span>
       <span className={styles.boxItem}>3</span>
@@ -185,14 +197,14 @@ storiesOf('HorizontalStack', module)
       <span className={styles.boxItem}>28</span>
       <span className={styles.boxItem}>29</span>
       <span className={styles.boxItem}>30</span>
-    </HorizontalStack>
+    </Stack>
   ))
   .addStory('Box shadow around items', () => (
-    <HorizontalStack {...defaultProps} gap={25}>
+    <Stack horizontal {...defaultProps} gap={25}>
       <span className={styles.shadowItem}>1</span>
       <span className={styles.shadowItem}>2</span>
       <span className={styles.shadowItem}>3</span>
       <span className={styles.shadowItem}>4</span>
       <span className={styles.shadowItem}>5</span>
-    </HorizontalStack>
-  ));
\ No newline at end of file
+    </Stack>
+  ));
diff --git a/apps/vr-tests/src/stories/VerticalStack.stories.tsx b/apps/vr-tests/src/stories/VerticalStack.stories.tsx
index b3b369d9ca5c4..c3c8a635e7b16 100644
--- a/apps/vr-tests/src/stories/VerticalStack.stories.tsx
+++ b/apps/vr-tests/src/stories/VerticalStack.stories.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
 import Screener, { Steps } from 'screener-storybook/src/screener';
 import { storiesOf } from '@storybook/react';
 import { FabricDecoratorFullWidth } from '../utilities';
-import { VerticalStack } from '@uifabric/experiments/lib/Stack';
+import { Stack } from 'office-ui-fabric-react';
 import { mergeStyleSets, DefaultPalette } from 'office-ui-fabric-react/lib/Styling';
 
 const rootStyles = {
@@ -52,79 +52,87 @@ const styles = mergeStyleSets({
 const defaultProps = {
   className: styles.root,
   children: [
-    <span key={1} className={styles.boxItem}>1</span>,
-    <span key={2} className={styles.boxItem}>2</span>,
-    <span key={3} className={styles.boxItem}>3</span>
+    <span key={1} className={styles.boxItem}>
+      1
+    </span>,
+    <span key={2} className={styles.boxItem}>
+      2
+    </span>,
+    <span key={3} className={styles.boxItem}>
+      3
+    </span>
   ]
 };
 
 storiesOf('VerticalStack', module)
   .addDecorator(FabricDecoratorFullWidth)
-  .addDecorator(story => (
-    <Screener steps={new Steps().snapshot('default', { cropTo: '.testWrapper' }).end()}>{story()}</Screener>
-  ))
-  .addStory('Default', () => (
-    <VerticalStack {...defaultProps} />
-  ), { rtl: true })
-  .addStory('Padding', () => (
-    <VerticalStack {...defaultProps} padding={10} />
-  ))
-  .addStory('Gap', () => (
-    <VerticalStack {...defaultProps} gap={10} />
-  ))
-  .addStory('Vertically centered', () => (
-    <VerticalStack {...defaultProps} verticalAlign="center" className={styles.fixedHeight} />
-  ))
-  .addStory('Bottom-aligned', () => (
-    <VerticalStack {...defaultProps} verticalAlign="bottom" className={styles.fixedHeight} />
-  ))
-  .addStory('Space around', () => (
-    <VerticalStack {...defaultProps} verticalAlign="space-around" className={styles.fixedHeight} />
-  ))
-  .addStory('Space between', () => (
-    <VerticalStack {...defaultProps} verticalAlign="space-between" className={styles.fixedHeight} />
-  ))
-  .addStory('Space evenly', () => (
-    <VerticalStack {...defaultProps} verticalAlign="space-evenly" className={styles.fixedHeight} />
-  ))
-  .addStory('Horizontally centered', () => (
-    <VerticalStack {...defaultProps} horizontalAlign="center" />
-  ))
-  .addStory('Right-aligned', () => (
-    <VerticalStack {...defaultProps} horizontalAlign="right" />
-  ), { rtl: true })
-  .addStory('Item alignments', () => (
-    <VerticalStack {...defaultProps} gap={10}>
-      <VerticalStack.Item align="auto" className={styles.item}>Auto-aligned item</VerticalStack.Item>
-      <VerticalStack.Item align="stretch" className={styles.item}>Stretch-aligned item</VerticalStack.Item>
-      <VerticalStack.Item align="baseline" className={styles.item}>Baseline-aligned item</VerticalStack.Item>
-      <VerticalStack.Item align="start" className={styles.item}>Start-aligned item</VerticalStack.Item>
-      <VerticalStack.Item align="center" className={styles.item}>Center-aligned item</VerticalStack.Item>
-      <VerticalStack.Item align="end" className={styles.item}>End-aligned item</VerticalStack.Item>
-    </VerticalStack>
-  ), { rtl: true })
+  .addDecorator(story => <Screener steps={new Steps().snapshot('default', { cropTo: '.testWrapper' }).end()}>{story()}</Screener>)
+  .addStory('Default', () => <Stack {...defaultProps} />, { rtl: true })
+  .addStory('Padding', () => <Stack {...defaultProps} padding={10} />)
+  .addStory('Gap', () => <Stack {...defaultProps} gap={10} />)
+  .addStory('Vertically centered', () => <Stack {...defaultProps} verticalAlignment="center" className={styles.fixedHeight} />)
+  .addStory('Bottom-aligned', () => <Stack {...defaultProps} verticalAlignment="bottom" className={styles.fixedHeight} />)
+  .addStory('Space around', () => <Stack {...defaultProps} verticalAlignment="space-around" className={styles.fixedHeight} />)
+  .addStory('Space between', () => <Stack {...defaultProps} verticalAlignment="space-between" className={styles.fixedHeight} />)
+  .addStory('Space evenly', () => <Stack {...defaultProps} verticalAlignment="space-evenly" className={styles.fixedHeight} />)
+  .addStory('Horizontally centered', () => <Stack {...defaultProps} horizontalAlignment="center" />)
+  .addStory('Right-aligned', () => <Stack {...defaultProps} horizontalAlignment="end" />, { rtl: true })
+  .addStory(
+    'Item alignments',
+    () => (
+      <Stack {...defaultProps} gap={10}>
+        <Stack.Item align="auto" className={styles.item}>
+          Auto-aligned item
+        </Stack.Item>
+        <Stack.Item align="stretch" className={styles.item}>
+          Stretch-aligned item
+        </Stack.Item>
+        <Stack.Item align="baseline" className={styles.item}>
+          Baseline-aligned item
+        </Stack.Item>
+        <Stack.Item align="start" className={styles.item}>
+          Start-aligned item
+        </Stack.Item>
+        <Stack.Item align="center" className={styles.item}>
+          Center-aligned item
+        </Stack.Item>
+        <Stack.Item align="end" className={styles.item}>
+          End-aligned item
+        </Stack.Item>
+      </Stack>
+    ),
+    { rtl: true }
+  )
   .addStory('Growing items', () => (
-    <VerticalStack {...defaultProps} gap={10} className={styles.fixedHeight}>
-      <VerticalStack.Item grow={3} className={styles.item}>Grow is 3</VerticalStack.Item>
-      <VerticalStack.Item grow={2} className={styles.item}>Grow is 2</VerticalStack.Item>
-      <VerticalStack.Item grow className={styles.item}>Grow is 1</VerticalStack.Item>
-    </VerticalStack>
+    <Stack {...defaultProps} gap={10} className={styles.fixedHeight}>
+      <Stack.Item grow={3} className={styles.item}>
+        Grow is 3
+      </Stack.Item>
+      <Stack.Item grow={2} className={styles.item}>
+        Grow is 2
+      </Stack.Item>
+      <Stack.Item grow className={styles.item}>
+        Grow is 1
+      </Stack.Item>
+    </Stack>
   ))
   .addStory('Shrinking items', () => (
-    <VerticalStack {...defaultProps} gap={10} shrinkItems className={styles.fixedHeight}>
-      <VerticalStack.Item className={styles.shrinkItem}>1</VerticalStack.Item>
-      <VerticalStack.Item preventShrink className={styles.shrinkItem}>2 (does not shrink)</VerticalStack.Item>
-      <VerticalStack.Item className={styles.shrinkItem}>3</VerticalStack.Item>
-      <VerticalStack.Item className={styles.shrinkItem}>4</VerticalStack.Item>
-      <VerticalStack.Item className={styles.shrinkItem}>5</VerticalStack.Item>
-    </VerticalStack>
+    <Stack {...defaultProps} gap={10} shrinkItems className={styles.fixedHeight}>
+      <Stack.Item className={styles.shrinkItem}>1</Stack.Item>
+      <Stack.Item preventShrink className={styles.shrinkItem}>
+        2 (does not shrink)
+      </Stack.Item>
+      <Stack.Item className={styles.shrinkItem}>3</Stack.Item>
+      <Stack.Item className={styles.shrinkItem}>4</Stack.Item>
+      <Stack.Item className={styles.shrinkItem}>5</Stack.Item>
+    </Stack>
   ))
   .addStory('Box shadow around items', () => (
-    <VerticalStack {...defaultProps} gap={25}>
+    <Stack {...defaultProps} gap={25}>
       <span className={styles.shadowItem}>1</span>
       <span className={styles.shadowItem}>2</span>
       <span className={styles.shadowItem}>3</span>
       <span className={styles.shadowItem}>4</span>
       <span className={styles.shadowItem}>5</span>
-    </VerticalStack>
-  ));
\ No newline at end of file
+    </Stack>
+  ));
diff --git a/common/changes/@uifabric/experiments/stackPromotion_2018-11-27-01-47.json b/common/changes/@uifabric/experiments/stackPromotion_2018-11-27-01-47.json
new file mode 100644
index 0000000000000..b3ff6c507e34f
--- /dev/null
+++ b/common/changes/@uifabric/experiments/stackPromotion_2018-11-27-01-47.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@uifabric/experiments",
+      "comment": "Stack: Promoting from experiments to OUFR package.",
+      "type": "minor"
+    }
+  ],
+  "packageName": "@uifabric/experiments",
+  "email": "Humberto.Morimoto@microsoft.com"
+}
\ No newline at end of file
diff --git a/common/changes/@uifabric/fabric-website-resources/stackPromotion_2018-11-29-01-20.json b/common/changes/@uifabric/fabric-website-resources/stackPromotion_2018-11-29-01-20.json
new file mode 100644
index 0000000000000..310aed3c6078d
--- /dev/null
+++ b/common/changes/@uifabric/fabric-website-resources/stackPromotion_2018-11-29-01-20.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@uifabric/fabric-website-resources",
+      "comment": "Stack: Promoting from experiments to OUFR package.",
+      "type": "minor"
+    }
+  ],
+  "packageName": "@uifabric/fabric-website-resources",
+  "email": "Humberto.Morimoto@microsoft.com"
+}
\ No newline at end of file
diff --git a/common/changes/office-ui-fabric-react/stackPromotion_2018-11-27-01-47.json b/common/changes/office-ui-fabric-react/stackPromotion_2018-11-27-01-47.json
new file mode 100644
index 0000000000000..cc55a1feb229a
--- /dev/null
+++ b/common/changes/office-ui-fabric-react/stackPromotion_2018-11-27-01-47.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Stack: Promoting from experiments to OUFR package.",
+      "type": "minor"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "Humberto.Morimoto@microsoft.com"
+}
diff --git a/packages/experiments/src/components/Button/Button.view.tsx b/packages/experiments/src/components/Button/Button.view.tsx
index 501a637918e24..0da61110f2fbd 100644
--- a/packages/experiments/src/components/Button/Button.view.tsx
+++ b/packages/experiments/src/components/Button/Button.view.tsx
@@ -1,8 +1,7 @@
 import * as React from 'react';
 import { IButtonComponent, IButtonViewProps } from './Button.types';
 import { Text } from '../../Text';
-import { HorizontalStack } from '../../Stack';
-import { Icon, IIconProps } from 'office-ui-fabric-react';
+import { Icon, IIconProps, Stack } from 'office-ui-fabric-react';
 import { getNativeProps, buttonProperties } from '../../Utilities';
 
 export const ButtonView: IButtonComponent['view'] = props => {
@@ -30,7 +29,7 @@ export const ButtonView: IButtonComponent['view'] = props => {
       aria-disabled={disabled}
       className={classNames.root}
     >
-      <HorizontalStack className={classNames.stack} as="span" gap={8} verticalAlign="center" horizontalAlign="center">
+      <Stack horizontal className={classNames.stack} as="span" gap={8} verticalAlignment="center" horizontalAlignment="center">
         {IconProp && typeof IconProp === 'string' && <Icon className={classNames.icon} iconName={IconProp} />}
         {IconProp &&
           typeof IconProp === 'object' &&
@@ -48,11 +47,11 @@ export const ButtonView: IButtonComponent['view'] = props => {
         {text && <Text className={classNames.text}>{text}</Text>}
         {children}
         {Menu && (
-          <HorizontalStack.Item>
+          <Stack.Item>
             <Icon className={classNames.menuIcon} iconName="ChevronDown" />
-          </HorizontalStack.Item>
+          </Stack.Item>
         )}
-      </HorizontalStack>
+      </Stack>
       {expanded && Menu && <Menu target={menuTarget} onDismiss={onMenuDismiss} />}
     </RootType>
   );
diff --git a/packages/experiments/src/components/Button/examples/Button.Example.tsx b/packages/experiments/src/components/Button/examples/Button.Example.tsx
index e4625802b0cb6..bdbe25bc289b1 100644
--- a/packages/experiments/src/components/Button/examples/Button.Example.tsx
+++ b/packages/experiments/src/components/Button/examples/Button.Example.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Button } from '../index';
-import { HorizontalStack, Text, VerticalStack } from '@uifabric/experiments';
-import { ContextualMenu, IContextualMenuProps, Icon, CommandBar } from 'office-ui-fabric-react';
+import { Text } from '@uifabric/experiments';
+import { ContextualMenu, IContextualMenuProps, Icon, CommandBar, Stack } from 'office-ui-fabric-react';
 
 const menuItems = [{ key: 'a', name: 'Item a' }, { key: 'b', name: 'Item b' }];
 const buttonMenu = (props: IContextualMenuProps) => <ContextualMenu {...props} items={menuItems} />;
@@ -10,12 +10,16 @@ const sectionGap = 32;
 const headingGap = 16;
 const buttonGap = 12;
 
-const ButtonStack = (props: { children: JSX.Element[] }) => <HorizontalStack gap={buttonGap}>{props.children}</HorizontalStack>;
+const ButtonStack = (props: { children: JSX.Element[] }) => (
+  <Stack horizontal gap={buttonGap}>
+    {props.children}
+  </Stack>
+);
 
 const ButtonSet = () => (
-  <VerticalStack gap={headingGap} padding={8}>
+  <Stack gap={headingGap} padding={8}>
     <div>
-      <VerticalStack gap={buttonGap}>
+      <Stack gap={buttonGap}>
         <ButtonStack>
           <Button text="Default button" />
           <Button disabled text="Disabled default button" />
@@ -51,26 +55,26 @@ const ButtonSet = () => (
         </ButtonStack>
         <ButtonStack>
           <Button icon="Share" menu={buttonMenu}>
-            <VerticalStack padding="8px 0" as="span" gap={4} horizontalAlign="left">
+            <Stack padding="8px 0" as="span" gap={4} horizontalAlignment="start">
               <Text>I am a compound multiline button.</Text>
               <Text variant="caption">I can have a caption.</Text>
-            </VerticalStack>
+            </Stack>
           </Button>
           <Button disabled text="Menu disabled button" />
           <Button expanded text="Menu expanded button" />
         </ButtonStack>
         <CommandBar items={[{ key: '0', text: 'Button 1', iconProps: { iconName: 'Upload' } }]} />
-      </VerticalStack>
+      </Stack>
     </div>
-  </VerticalStack>
+  </Stack>
 );
 
 export class ButtonExample extends React.Component<{}, {}> {
   public render(): JSX.Element {
     return (
-      <VerticalStack gap={sectionGap}>
+      <Stack gap={sectionGap}>
         <ButtonSet />
-      </VerticalStack>
+      </Stack>
     );
   }
 }
diff --git a/packages/experiments/src/components/CollapsibleSection/examples/CollapsibleSection.Controlled.Example.tsx b/packages/experiments/src/components/CollapsibleSection/examples/CollapsibleSection.Controlled.Example.tsx
index 7f20b3c07948f..5b0aa7d7843a2 100644
--- a/packages/experiments/src/components/CollapsibleSection/examples/CollapsibleSection.Controlled.Example.tsx
+++ b/packages/experiments/src/components/CollapsibleSection/examples/CollapsibleSection.Controlled.Example.tsx
@@ -1,8 +1,6 @@
 import * as React from 'react';
-import { FocusZone } from 'office-ui-fabric-react/lib/FocusZone';
-import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
+import { DefaultButton, FocusZone, Stack } from 'office-ui-fabric-react';
 import { CollapsibleSection } from '@uifabric/experiments/lib/CollapsibleSection';
-import { HorizontalStack } from '@uifabric/experiments/lib/Stack';
 
 export interface ICollapsibleSectionControlledExampleState {
   collapsed: boolean;
@@ -28,7 +26,7 @@ export class CollapsibleSectionControlledExample extends React.Component<{}, ICo
             component's output when the controlled prop has a value passed in automatically. As a result, clicking on the titles in this
             example does not affect collapsed state, only clicking on the Toggle button does.
           </p>
-          <HorizontalStack gap={20} verticalAlign="center">
+          <Stack horizontal gap={20} verticalAlignment="center">
             <DefaultButton
               text="Toggle"
               onClick={() => {
@@ -36,7 +34,7 @@ export class CollapsibleSectionControlledExample extends React.Component<{}, ICo
               }}
             />
             <p>Number of title clicks: {this.state.clicks}</p>
-          </HorizontalStack>
+          </Stack>
           <CollapsibleSection
             collapsed={this.state.collapsed}
             titleProps={{
diff --git a/packages/experiments/src/components/Stack/HorizontalStack/HorizontalStack.styles.ts b/packages/experiments/src/components/Stack/HorizontalStack/HorizontalStack.styles.ts
deleted file mode 100644
index 8e58e3b6afd7e..0000000000000
--- a/packages/experiments/src/components/Stack/HorizontalStack/HorizontalStack.styles.ts
+++ /dev/null
@@ -1,66 +0,0 @@
-import { getGlobalClassNames } from '../../../Styling';
-import { IHorizontalStackComponent, IHorizontalStackStyles } from './HorizontalStack.types';
-import { parseGap } from '../StackUtils';
-
-const GlobalClassNames = {
-  root: 'ms-HorizontalStack',
-  inner: 'ms-HorizontalStack-inner'
-};
-
-export const styles: IHorizontalStackComponent['styles'] = props => {
-  const { wrap, gap, verticalGap, fillHorizontal, fillVertical, maxWidth, maxHeight, className, theme } = props;
-
-  const vertGap = verticalGap !== undefined ? verticalGap : gap;
-
-  const hGap = parseGap(gap, theme);
-  const vGap = parseGap(vertGap, theme);
-
-  const horizontalMargin = `${-0.5 * hGap.value}${hGap.unit}`;
-  const verticalMargin = `${-0.5 * vGap.value}${vGap.unit}`;
-
-  const classNames = getGlobalClassNames(GlobalClassNames, theme);
-
-  if (wrap) {
-    return {
-      root: [
-        classNames.root,
-        theme.fonts.medium,
-        {
-          maxWidth,
-          maxHeight,
-          width: fillHorizontal ? '100%' : 'auto',
-          height: fillVertical ? '100%' : 'auto',
-          overflow: 'visible'
-        },
-        className,
-        {
-          // not allowed to be overridden by className
-          // since this is necessary in order to prevent collapsing margins
-          display: 'inline-block'
-        }
-      ],
-
-      inner: [
-        classNames.inner,
-        {
-          flexWrap: 'wrap',
-          marginLeft: horizontalMargin,
-          marginRight: horizontalMargin,
-          marginTop: verticalMargin,
-          marginBottom: verticalMargin,
-          overflow: 'visible',
-          maxWidth: '100vw',
-
-          // avoid unnecessary calc() calls if vertical gap is 0
-          height: fillVertical ? (vGap.value === 0 ? '100%' : `calc(100% + ${vGap.value}${vGap.unit})`) : 'auto'
-        }
-      ]
-    } as IHorizontalStackStyles;
-  }
-
-  return {
-    root: [classNames.root, className, theme.fonts.medium]
-    // TODO: this cast may be hiding some potential issues with styling and name
-    //        lookups and should be removed
-  } as IHorizontalStackStyles;
-};
diff --git a/packages/experiments/src/components/Stack/HorizontalStack/HorizontalStack.test.tsx b/packages/experiments/src/components/Stack/HorizontalStack/HorizontalStack.test.tsx
deleted file mode 100644
index 2a9e1249d6bf6..0000000000000
--- a/packages/experiments/src/components/Stack/HorizontalStack/HorizontalStack.test.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-import * as React from 'react';
-import { mount } from 'enzyme';
-import * as renderer from 'react-test-renderer';
-import { HorizontalStack } from '../index';
-
-describe('HorizontalStack', () => {
-  it('can handle having no children', () => {
-    const createEmptyStack = () => {
-      mount(<HorizontalStack />);
-    };
-
-    expect(createEmptyStack).not.toThrow();
-  });
-
-  it('renders default HorizontalStack correctly', () => {
-    const component = renderer.create(
-      <HorizontalStack>
-        <div>Item 1</div>
-        <div>Item 2</div>
-      </HorizontalStack>
-    );
-    const tree = component.toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-
-  it('renders gap correctly', () => {
-    const component = renderer.create(
-      <HorizontalStack gap={5}>
-        <div>Item 1</div>
-        <div>Item 2</div>
-      </HorizontalStack>
-    );
-    const tree = component.toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-
-  it('renders growing items correctly', () => {
-    const component = renderer.create(
-      <HorizontalStack>
-        <HorizontalStack.Item>Item 1</HorizontalStack.Item>
-        <HorizontalStack.Item>Item 2</HorizontalStack.Item>
-      </HorizontalStack>
-    );
-    const tree = component.toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-
-  it('renders shrinking items correctly', () => {
-    const component = renderer.create(
-      <HorizontalStack shrinkItems>
-        <HorizontalStack.Item>Item 1</HorizontalStack.Item>
-        <HorizontalStack.Item preventShrink>Item 2</HorizontalStack.Item>
-      </HorizontalStack>
-    );
-    const tree = component.toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-
-  it('renders item alignments correctly', () => {
-    const component = renderer.create(
-      <HorizontalStack>
-        <HorizontalStack.Item align="auto">Auto</HorizontalStack.Item>
-        <HorizontalStack.Item align="stretch">Stretch</HorizontalStack.Item>
-        <HorizontalStack.Item align="baseline">Baseline</HorizontalStack.Item>
-        <HorizontalStack.Item align="start">Start</HorizontalStack.Item>
-        <HorizontalStack.Item align="center">Center</HorizontalStack.Item>
-        <HorizontalStack.Item align="end">End</HorizontalStack.Item>
-      </HorizontalStack>
-    );
-    const tree = component.toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-
-  it('renders wrapped HorizontalStack correctly', () => {
-    const component = renderer.create(
-      <HorizontalStack wrap>
-        <HorizontalStack.Item>1</HorizontalStack.Item>
-        <HorizontalStack.Item>2</HorizontalStack.Item>
-        <HorizontalStack.Item>3</HorizontalStack.Item>
-      </HorizontalStack>
-    );
-    const tree = component.toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-});
diff --git a/packages/experiments/src/components/Stack/HorizontalStack/HorizontalStack.tsx b/packages/experiments/src/components/Stack/HorizontalStack/HorizontalStack.tsx
deleted file mode 100644
index b2e5c661924cd..0000000000000
--- a/packages/experiments/src/components/Stack/HorizontalStack/HorizontalStack.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import * as React from 'react';
-import { createStatelessComponent } from '../../../Foundation';
-import { Stack } from '../Stack';
-import { StackItem } from '../StackItem/StackItem';
-import { IStackItemProps } from '../StackItem/StackItem.types';
-import { getVerticalAlignment, getHorizontalAlignment } from '../StackUtils';
-import { IHorizontalStackComponent, IHorizontalStackProps, IHorizontalStackStyles } from './HorizontalStack.types';
-import { styles } from './HorizontalStack.styles';
-
-const view: IHorizontalStackComponent['view'] = props => {
-  const { horizontalAlign, verticalAlign, gap, verticalGap, classNames, children, styles: customStyles, ...rest } = props;
-
-  const vertGap = verticalGap !== undefined ? verticalGap : gap;
-
-  if (props.wrap) {
-    return (
-      <div className={classNames.root}>
-        <Stack
-          {...rest}
-          wrap
-          horizontal
-          verticalAlignment={getVerticalAlignment(verticalAlign)}
-          horizontalAlignment={getHorizontalAlignment(horizontalAlign)}
-          className={classNames.inner}
-          horizontalGap={gap}
-          verticalGap={vertGap}
-        >
-          {children}
-        </Stack>
-      </div>
-    );
-  }
-
-  return (
-    <Stack
-      {...rest}
-      horizontal
-      verticalAlignment={getVerticalAlignment(verticalAlign)}
-      horizontalAlignment={getHorizontalAlignment(horizontalAlign)}
-      className={classNames.root}
-      horizontalGap={gap}
-    >
-      {children}
-    </Stack>
-  );
-};
-
-const HorizontalStackStatics = {
-  Item: StackItem,
-  defaultProps: {}
-};
-type IHorizontalStackStatics = typeof HorizontalStackStatics;
-
-export const HorizontalStack: React.StatelessComponent<IHorizontalStackProps> & {
-  Item: React.StatelessComponent<IStackItemProps>;
-} = createStatelessComponent<IHorizontalStackProps, IHorizontalStackStyles, IHorizontalStackStatics>({
-  displayName: 'HorizontalStack',
-  styles,
-  view,
-  statics: HorizontalStackStatics
-});
-
-export default HorizontalStack;
diff --git a/packages/experiments/src/components/Stack/HorizontalStack/HorizontalStack.types.ts b/packages/experiments/src/components/Stack/HorizontalStack/HorizontalStack.types.ts
deleted file mode 100644
index 0ae1d15c9b2af..0000000000000
--- a/packages/experiments/src/components/Stack/HorizontalStack/HorizontalStack.types.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-import { IPartialStackProps } from '../Stack.types';
-import { IStatelessComponent, IStylesProp } from '../../../Foundation';
-import { IStyle } from '../../../Styling';
-
-export type IHorizontalStackComponent = IStatelessComponent<IHorizontalStackProps, IHorizontalStackStyles>;
-
-export interface IHorizontalStackProps extends IPartialStackProps {
-  /**
-   * How to render the HorizontalStack.
-   */
-  as?: string | React.ReactType<IHorizontalStackProps>;
-
-  /**
-   * How to align child elements horizontally.
-   */
-  horizontalAlign?: 'left' | 'right' | 'center' | 'space-around' | 'space-between' | 'space-evenly';
-
-  /**
-   * How to align child elements vertically.
-   */
-  verticalAlign?: 'top' | 'bottom' | 'center' | 'baseline' | 'stretch';
-
-  /**
-   * Whether to allow child elements to wrap onto multiple rows.
-   */
-  wrap?: boolean;
-
-  /**
-   * Vertical space between children when children wrap onto multiple rows.
-   * Defaults to the value of the gap property.
-   */
-  verticalGap?: number | string;
-
-  /**
-   * Custom styles to apply to the HorizontalStack.
-   */
-  styles?: IStylesProp<IHorizontalStackProps, IHorizontalStackStyles>;
-}
-
-export interface IHorizontalStackStyles {
-  /**
-   * Style set for the root element.
-   */
-  root: IStyle;
-
-  /**
-   * Style set for the inner element (only when the wrap property is true).
-   */
-  inner: IStyle;
-}
diff --git a/packages/experiments/src/components/Stack/HorizontalStack/HorizontalStackPage.tsx b/packages/experiments/src/components/Stack/HorizontalStack/HorizontalStackPage.tsx
deleted file mode 100644
index 89d1c4a58f5ae..0000000000000
--- a/packages/experiments/src/components/Stack/HorizontalStack/HorizontalStackPage.tsx
+++ /dev/null
@@ -1,103 +0,0 @@
-import * as React from 'react';
-import { ExampleCard, IComponentDemoPageProps, ComponentPage, PropertiesTableSet } from '@uifabric/example-app-base';
-
-import { HorizontalStackBasicExample } from './examples/HorizontalStack.Basic.Example';
-const HorizontalStackBasicExampleCode = require('!raw-loader!@uifabric/experiments/src/components/Stack/HorizontalStack/examples/HorizontalStack.Basic.Example.tsx') as string;
-
-import { HorizontalStackSpacingExample } from './examples/HorizontalStack.Spacing.Example';
-const HorizontalStackSpacingExampleCode = require('!raw-loader!@uifabric/experiments/src/components/Stack/HorizontalStack/examples/HorizontalStack.Spacing.Example.tsx') as string;
-
-import { HorizontalStackGrowExample } from './examples/HorizontalStack.Grow.Example';
-const HorizontalStackGrowExampleCode = require('!raw-loader!@uifabric/experiments/src/components/Stack/HorizontalStack/examples/HorizontalStack.Grow.Example.tsx') as string;
-
-import { HorizontalStackShrinkExample } from './examples/HorizontalStack.Shrink.Example';
-const HorizontalStackShrinkExampleCode = require('!raw-loader!@uifabric/experiments/src/components/Stack/HorizontalStack/examples/HorizontalStack.Shrink.Example.tsx') as string;
-
-import { HorizontalStackWrapExample } from './examples/HorizontalStack.Wrap.Example';
-const HorizontalStackWrapExampleCode = require('!raw-loader!@uifabric/experiments/src/components/Stack/HorizontalStack/examples/HorizontalStack.Wrap.Example.tsx') as string;
-
-import { HorizontalStackWrapAdvancedExample } from './examples/HorizontalStack.WrapAdvanced.Example';
-const HorizontalStackWrapAdvancedExampleCode = require('!raw-loader!@uifabric/experiments/src/components/Stack/HorizontalStack/examples/HorizontalStack.WrapAdvanced.Example.tsx') as string;
-
-import { HorizontalStackWrapNestedExample } from './examples/HorizontalStack.WrapNested.Example';
-const HorizontalStackWrapNestedExampleCode = require('!raw-loader!@uifabric/experiments/src/components/Stack/HorizontalStack/examples/HorizontalStack.WrapNested.Example.tsx') as string;
-
-import { HorizontalStackHorizontalAlignExample } from './examples/HorizontalStack.HorizontalAlign.Example';
-const HorizontalStackHorizontalAlignExampleCode = require('!raw-loader!@uifabric/experiments/src/components/Stack/HorizontalStack/examples/HorizontalStack.HorizontalAlign.Example.tsx') as string;
-
-import { HorizontalStackVerticalAlignExample } from './examples/HorizontalStack.VerticalAlign.Example';
-const HorizontalStackVerticalAlignExampleCode = require('!raw-loader!@uifabric/experiments/src/components/Stack/HorizontalStack/examples/HorizontalStack.VerticalAlign.Example.tsx') as string;
-
-import { HorizontalStackConfigureExample } from './examples/HorizontalStack.Configure.Example';
-const HorizontalStackConfigureExampleCode = require('!raw-loader!@uifabric/experiments/src/components/Stack/HorizontalStack/examples/HorizontalStack.Configure.Example.tsx') as string;
-
-export class HorizontalStackPage extends React.Component<IComponentDemoPageProps, {}> {
-  public render(): JSX.Element {
-    return (
-      <ComponentPage
-        title="HorizontalStack"
-        componentName="HorizontalStack"
-        exampleCards={
-          <div>
-            <ExampleCard title="Basic Horizontal Stack" code={HorizontalStackBasicExampleCode}>
-              <HorizontalStackBasicExample />
-            </ExampleCard>
-            <ExampleCard title="Gap and Padding Sizes" code={HorizontalStackSpacingExampleCode}>
-              <HorizontalStackSpacingExample />
-            </ExampleCard>
-            <ExampleCard title="Growing Items" code={HorizontalStackGrowExampleCode}>
-              <HorizontalStackGrowExample />
-            </ExampleCard>
-            <ExampleCard title="Shrinking Items" code={HorizontalStackShrinkExampleCode}>
-              <HorizontalStackShrinkExample />
-            </ExampleCard>
-            <ExampleCard title="Wrapping - Basic" code={HorizontalStackWrapExampleCode}>
-              <HorizontalStackWrapExample />
-            </ExampleCard>
-            <ExampleCard title="Wrapping - Advanced" code={HorizontalStackWrapAdvancedExampleCode}>
-              <HorizontalStackWrapAdvancedExample />
-            </ExampleCard>
-            <ExampleCard title="Wrapping - Nested" code={HorizontalStackWrapNestedExampleCode}>
-              <HorizontalStackWrapNestedExample />
-            </ExampleCard>
-            <ExampleCard title="Horizontal Alignments" code={HorizontalStackHorizontalAlignExampleCode}>
-              <HorizontalStackHorizontalAlignExample />
-            </ExampleCard>
-            <ExampleCard title="Vertical Alignments" code={HorizontalStackVerticalAlignExampleCode}>
-              <HorizontalStackVerticalAlignExample />
-            </ExampleCard>
-            <ExampleCard title="Configure Properties" code={HorizontalStackConfigureExampleCode}>
-              <HorizontalStackConfigureExample />
-            </ExampleCard>
-          </div>
-        }
-        propertiesTables={
-          <PropertiesTableSet
-            sources={[
-              require<string>('!raw-loader!@uifabric/experiments/src/components/Stack/HorizontalStack/HorizontalStack.types.ts'),
-              require<string>('!raw-loader!@uifabric/experiments/src/components/Stack/Stack.types.ts'),
-              require<string>('!raw-loader!@uifabric/experiments/src/components/Stack/StackItem/StackItem.types.ts')
-            ]}
-          />
-        }
-        overview={<div />}
-        bestPractices={<div />}
-        dos={
-          <div>
-            <ul>
-              <li />
-            </ul>
-          </div>
-        }
-        donts={
-          <div>
-            <ul>
-              <li />
-            </ul>
-          </div>
-        }
-        isHeaderVisible={this.props.isHeaderVisible}
-      />
-    );
-  }
-}
diff --git a/packages/experiments/src/components/Stack/HorizontalStack/__snapshots__/HorizontalStack.test.tsx.snap b/packages/experiments/src/components/Stack/HorizontalStack/__snapshots__/HorizontalStack.test.tsx.snap
deleted file mode 100644
index e8aa7bd085582..0000000000000
--- a/packages/experiments/src/components/Stack/HorizontalStack/__snapshots__/HorizontalStack.test.tsx.snap
+++ /dev/null
@@ -1,437 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`HorizontalStack renders default HorizontalStack correctly 1`] = `
-<div
-  className=
-      ms-HorizontalStack
-      {
-        -moz-osx-font-smoothing: grayscale;
-        -webkit-font-smoothing: antialiased;
-        box-sizing: border-box;
-        display: flex;
-        flex-direction: row;
-        flex-wrap: nowrap;
-        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-        font-size: 14px;
-        font-weight: 400;
-        height: auto;
-        width: auto;
-      }
-      & > * {
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-      & > *:not(:first-child) {
-        margin-left: 0px;
-      }
-      & > *:not(.ms-StackItem) {
-        flex-shrink: 0;
-      }
->
-  <div>
-    Item 1
-  </div>
-  <div>
-    Item 2
-  </div>
-</div>
-`;
-
-exports[`HorizontalStack renders gap correctly 1`] = `
-<div
-  className=
-      ms-HorizontalStack
-      {
-        -moz-osx-font-smoothing: grayscale;
-        -webkit-font-smoothing: antialiased;
-        box-sizing: border-box;
-        display: flex;
-        flex-direction: row;
-        flex-wrap: nowrap;
-        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-        font-size: 14px;
-        font-weight: 400;
-        height: auto;
-        width: auto;
-      }
-      & > * {
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-      & > *:not(:first-child) {
-        margin-left: 5px;
-      }
-      & > *:not(.ms-StackItem) {
-        flex-shrink: 0;
-      }
->
-  <div>
-    Item 1
-  </div>
-  <div>
-    Item 2
-  </div>
-</div>
-`;
-
-exports[`HorizontalStack renders growing items correctly 1`] = `
-<div
-  className=
-      ms-HorizontalStack
-      {
-        -moz-osx-font-smoothing: grayscale;
-        -webkit-font-smoothing: antialiased;
-        box-sizing: border-box;
-        display: flex;
-        flex-direction: row;
-        flex-wrap: nowrap;
-        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-        font-size: 14px;
-        font-weight: 400;
-        height: auto;
-        width: auto;
-      }
-      & > * {
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-      & > *:not(:first-child) {
-        margin-left: 0px;
-      }
-      & > *:not(.ms-StackItem) {
-        flex-shrink: 0;
-      }
->
-  <span
-    className=
-        ms-StackItem
-        {
-          -moz-osx-font-smoothing: grayscale;
-          -webkit-font-smoothing: antialiased;
-          flex-shrink: 0;
-          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-          font-size: 14px;
-          font-weight: 400;
-          height: auto;
-          width: auto;
-        }
-  >
-    Item 1
-  </span>
-  <span
-    className=
-        ms-StackItem
-        {
-          -moz-osx-font-smoothing: grayscale;
-          -webkit-font-smoothing: antialiased;
-          flex-shrink: 0;
-          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-          font-size: 14px;
-          font-weight: 400;
-          height: auto;
-          width: auto;
-        }
-  >
-    Item 2
-  </span>
-</div>
-`;
-
-exports[`HorizontalStack renders item alignments correctly 1`] = `
-<div
-  className=
-      ms-HorizontalStack
-      {
-        -moz-osx-font-smoothing: grayscale;
-        -webkit-font-smoothing: antialiased;
-        box-sizing: border-box;
-        display: flex;
-        flex-direction: row;
-        flex-wrap: nowrap;
-        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-        font-size: 14px;
-        font-weight: 400;
-        height: auto;
-        width: auto;
-      }
-      & > * {
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-      & > *:not(:first-child) {
-        margin-left: 0px;
-      }
-      & > *:not(.ms-StackItem) {
-        flex-shrink: 0;
-      }
->
-  <span
-    className=
-        ms-StackItem
-        {
-          -moz-osx-font-smoothing: grayscale;
-          -webkit-font-smoothing: antialiased;
-          align-self: auto;
-          flex-shrink: 0;
-          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-          font-size: 14px;
-          font-weight: 400;
-          height: auto;
-          width: auto;
-        }
-  >
-    Auto
-  </span>
-  <span
-    className=
-        ms-StackItem
-        {
-          -moz-osx-font-smoothing: grayscale;
-          -webkit-font-smoothing: antialiased;
-          align-self: stretch;
-          flex-shrink: 0;
-          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-          font-size: 14px;
-          font-weight: 400;
-          height: auto;
-          width: auto;
-        }
-  >
-    Stretch
-  </span>
-  <span
-    className=
-        ms-StackItem
-        {
-          -moz-osx-font-smoothing: grayscale;
-          -webkit-font-smoothing: antialiased;
-          align-self: baseline;
-          flex-shrink: 0;
-          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-          font-size: 14px;
-          font-weight: 400;
-          height: auto;
-          width: auto;
-        }
-  >
-    Baseline
-  </span>
-  <span
-    className=
-        ms-StackItem
-        {
-          -moz-osx-font-smoothing: grayscale;
-          -webkit-font-smoothing: antialiased;
-          align-self: flex-start;
-          flex-shrink: 0;
-          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-          font-size: 14px;
-          font-weight: 400;
-          height: auto;
-          width: auto;
-        }
-  >
-    Start
-  </span>
-  <span
-    className=
-        ms-StackItem
-        {
-          -moz-osx-font-smoothing: grayscale;
-          -webkit-font-smoothing: antialiased;
-          align-self: center;
-          flex-shrink: 0;
-          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-          font-size: 14px;
-          font-weight: 400;
-          height: auto;
-          width: auto;
-        }
-  >
-    Center
-  </span>
-  <span
-    className=
-        ms-StackItem
-        {
-          -moz-osx-font-smoothing: grayscale;
-          -webkit-font-smoothing: antialiased;
-          align-self: flex-end;
-          flex-shrink: 0;
-          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-          font-size: 14px;
-          font-weight: 400;
-          height: auto;
-          width: auto;
-        }
-  >
-    End
-  </span>
-</div>
-`;
-
-exports[`HorizontalStack renders shrinking items correctly 1`] = `
-<div
-  className=
-      ms-HorizontalStack
-      {
-        -moz-osx-font-smoothing: grayscale;
-        -webkit-font-smoothing: antialiased;
-        box-sizing: border-box;
-        display: flex;
-        flex-direction: row;
-        flex-wrap: nowrap;
-        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-        font-size: 14px;
-        font-weight: 400;
-        height: auto;
-        width: auto;
-      }
-      & > * {
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-      & > *:not(:first-child) {
-        margin-left: 0px;
-      }
-      & > *:not(.ms-StackItem) {
-        flex-shrink: 1;
-      }
->
-  <span
-    className=
-        ms-StackItem
-        {
-          -moz-osx-font-smoothing: grayscale;
-          -webkit-font-smoothing: antialiased;
-          flex-shrink: 1;
-          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-          font-size: 14px;
-          font-weight: 400;
-          height: auto;
-          width: auto;
-        }
-  >
-    Item 1
-  </span>
-  <span
-    className=
-        ms-StackItem
-        {
-          -moz-osx-font-smoothing: grayscale;
-          -webkit-font-smoothing: antialiased;
-          flex-shrink: 0;
-          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-          font-size: 14px;
-          font-weight: 400;
-          height: auto;
-          width: auto;
-        }
-  >
-    Item 2
-  </span>
-</div>
-`;
-
-exports[`HorizontalStack renders wrapped HorizontalStack correctly 1`] = `
-<div
-  className=
-      ms-HorizontalStack
-      {
-        -moz-osx-font-smoothing: grayscale;
-        -webkit-font-smoothing: antialiased;
-        display: inline-block;
-        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-        font-size: 14px;
-        font-weight: 400;
-        height: auto;
-        overflow: visible;
-        width: auto;
-      }
->
-  <div
-    className=
-        ms-HorizontalStack-inner
-        {
-          -moz-osx-font-smoothing: grayscale;
-          -webkit-font-smoothing: antialiased;
-          box-sizing: border-box;
-          display: flex;
-          flex-direction: row;
-          flex-wrap: wrap;
-          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-          font-size: 14px;
-          font-weight: 400;
-          height: auto;
-          margin-bottom: 0px;
-          margin-left: 0px;
-          margin-right: 0px;
-          margin-top: 0px;
-          max-width: 100vw;
-          overflow: visible;
-          width: auto;
-        }
-        & > * {
-          margin-bottom: 0px;
-          margin-left: 0px;
-          margin-right: 0px;
-          margin-top: 0px;
-          max-width: 100%;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-        }
-        & > *:not(.ms-StackItem) {
-          flex-shrink: 0;
-        }
-  >
-    <span
-      className=
-          ms-StackItem
-          {
-            -moz-osx-font-smoothing: grayscale;
-            -webkit-font-smoothing: antialiased;
-            flex-shrink: 0;
-            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-            font-size: 14px;
-            font-weight: 400;
-            height: auto;
-            width: auto;
-          }
-    >
-      1
-    </span>
-    <span
-      className=
-          ms-StackItem
-          {
-            -moz-osx-font-smoothing: grayscale;
-            -webkit-font-smoothing: antialiased;
-            flex-shrink: 0;
-            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-            font-size: 14px;
-            font-weight: 400;
-            height: auto;
-            width: auto;
-          }
-    >
-      2
-    </span>
-    <span
-      className=
-          ms-StackItem
-          {
-            -moz-osx-font-smoothing: grayscale;
-            -webkit-font-smoothing: antialiased;
-            flex-shrink: 0;
-            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-            font-size: 14px;
-            font-weight: 400;
-            height: auto;
-            width: auto;
-          }
-    >
-      3
-    </span>
-  </div>
-</div>
-`;
diff --git a/packages/experiments/src/components/Stack/HorizontalStack/examples/HorizontalStack.Basic.Example.tsx b/packages/experiments/src/components/Stack/HorizontalStack/examples/HorizontalStack.Basic.Example.tsx
deleted file mode 100644
index 1b383ff63e22f..0000000000000
--- a/packages/experiments/src/components/Stack/HorizontalStack/examples/HorizontalStack.Basic.Example.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import * as React from 'react';
-import { VerticalStack, HorizontalStack } from '@uifabric/experiments/lib/Stack';
-import { Text } from '@uifabric/experiments/lib/Text';
-import { mergeStyleSets, DefaultPalette } from 'office-ui-fabric-react/lib/Styling';
-
-export class HorizontalStackBasicExample extends React.Component<{}, {}> {
-  public render(): JSX.Element {
-    const styles = mergeStyleSets({
-      root: {
-        background: DefaultPalette.themeTertiary
-      },
-
-      item: {
-        color: DefaultPalette.white,
-        background: DefaultPalette.themePrimary,
-        padding: 5
-      }
-    });
-
-    return (
-      <VerticalStack gap={5}>
-        <Text>Default horizontal stack</Text>
-        <HorizontalStack className={styles.root}>
-          <Text>Item One</Text>
-          <Text>Item Two</Text>
-          <Text>Item Three</Text>
-        </HorizontalStack>
-
-        <Text>Horizontal gap between items</Text>
-        <HorizontalStack gap={10} padding={10} className={styles.root}>
-          <Text>Item One</Text>
-          <Text>Item Two</Text>
-          <Text>Item Three</Text>
-        </HorizontalStack>
-
-        <Text>Item alignments</Text>
-        <HorizontalStack gap={5} padding={10} className={styles.root} styles={{ root: { height: 100 } }}>
-          <HorizontalStack.Item align="auto" className={styles.item}>
-            <Text>Auto-aligned item</Text>
-          </HorizontalStack.Item>
-          <HorizontalStack.Item align="stretch" className={styles.item}>
-            <Text>Stretch-aligned item</Text>
-          </HorizontalStack.Item>
-          <HorizontalStack.Item align="baseline" className={styles.item}>
-            <Text>Baseline-aligned item</Text>
-          </HorizontalStack.Item>
-          <HorizontalStack.Item align="start" className={styles.item}>
-            <Text>Start-aligned item</Text>
-          </HorizontalStack.Item>
-          <HorizontalStack.Item align="center" className={styles.item}>
-            <Text>Center-aligned item</Text>
-          </HorizontalStack.Item>
-          <HorizontalStack.Item align="end" className={styles.item}>
-            <Text>End-aligned item</Text>
-          </HorizontalStack.Item>
-        </HorizontalStack>
-
-        <Text>Clickable stack</Text>
-        <HorizontalStack onClick={this._onClick} padding={10} className={styles.root}>
-          <Text>Click inside this box</Text>
-        </HorizontalStack>
-      </VerticalStack>
-    );
-  }
-
-  private _onClick = (): void => {
-    alert('Clicked HorizontalStack');
-  };
-}
diff --git a/packages/experiments/src/components/Stack/HorizontalStack/examples/HorizontalStack.HorizontalAlign.Example.tsx b/packages/experiments/src/components/Stack/HorizontalStack/examples/HorizontalStack.HorizontalAlign.Example.tsx
deleted file mode 100644
index 883a90a6bf83d..0000000000000
--- a/packages/experiments/src/components/Stack/HorizontalStack/examples/HorizontalStack.HorizontalAlign.Example.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import * as React from 'react';
-import { VerticalStack, HorizontalStack } from '@uifabric/experiments/lib/Stack';
-import { Text } from '@uifabric/experiments/lib/Text';
-import { mergeStyleSets, DefaultPalette } from 'office-ui-fabric-react/lib/Styling';
-
-export class HorizontalStackHorizontalAlignExample extends React.Component<{}, {}> {
-  public render(): JSX.Element {
-    const styles = mergeStyleSets({
-      root: {
-        background: DefaultPalette.themeTertiary,
-        selectors: {
-          '> *': {
-            width: 50,
-            height: 50,
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            background: DefaultPalette.themePrimary,
-            color: DefaultPalette.white
-          }
-        }
-      }
-    });
-
-    return (
-      <VerticalStack gap={5}>
-        <Text>Left-aligned</Text>
-        <HorizontalStack horizontalAlign="left" className={styles.root}>
-          <Text>1</Text>
-          <Text>2</Text>
-          <Text>3</Text>
-        </HorizontalStack>
-
-        <Text>Horizontally centered</Text>
-        <HorizontalStack horizontalAlign="center" className={styles.root}>
-          <Text>1</Text>
-          <Text>2</Text>
-          <Text>3</Text>
-        </HorizontalStack>
-
-        <Text>Right-aligned</Text>
-        <HorizontalStack horizontalAlign="right" className={styles.root}>
-          <Text>1</Text>
-          <Text>2</Text>
-          <Text>3</Text>
-        </HorizontalStack>
-
-        <Text>Horizontal space around items</Text>
-        <HorizontalStack horizontalAlign="space-around" className={styles.root}>
-          <Text>1</Text>
-          <Text>2</Text>
-          <Text>3</Text>
-        </HorizontalStack>
-
-        <Text>Horizontal space between items</Text>
-        <HorizontalStack horizontalAlign="space-between" className={styles.root}>
-          <Text>1</Text>
-          <Text>2</Text>
-          <Text>3</Text>
-        </HorizontalStack>
-
-        <Text>Items horizontally evenly spaced</Text>
-        <HorizontalStack horizontalAlign="space-evenly" className={styles.root}>
-          <Text>1</Text>
-          <Text>2</Text>
-          <Text>3</Text>
-        </HorizontalStack>
-      </VerticalStack>
-    );
-  }
-}
diff --git a/packages/experiments/src/components/Stack/HorizontalStack/examples/HorizontalStack.Spacing.Example.tsx b/packages/experiments/src/components/Stack/HorizontalStack/examples/HorizontalStack.Spacing.Example.tsx
deleted file mode 100644
index 1b7c7b4e36866..0000000000000
--- a/packages/experiments/src/components/Stack/HorizontalStack/examples/HorizontalStack.Spacing.Example.tsx
+++ /dev/null
@@ -1,105 +0,0 @@
-import * as React from 'react';
-import { VerticalStack, HorizontalStack } from '@uifabric/experiments/lib/Stack';
-import { Text } from '@uifabric/experiments/lib/Text';
-import { mergeStyleSets, DefaultPalette } from 'office-ui-fabric-react/lib/Styling';
-
-export class HorizontalStackSpacingExample extends React.Component<{}, {}> {
-  public render(): JSX.Element {
-    const styles = mergeStyleSets({
-      root: {
-        background: DefaultPalette.themeTertiary,
-        width: 300,
-        selectors: {
-          '> *': {
-            width: 50,
-            height: 50,
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            background: DefaultPalette.themePrimary,
-            color: DefaultPalette.white
-          }
-        }
-      },
-
-      item: {
-        width: 50,
-        height: 50,
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        background: DefaultPalette.themePrimary,
-        color: DefaultPalette.white
-      }
-    });
-
-    return (
-      <VerticalStack gap={10}>
-        <HorizontalStack horizontalAlign="space-between">
-          <VerticalStack>
-            <Text>Numerical spacing</Text>
-            <HorizontalStack className={styles.root} gap={10} padding={10}>
-              <Text>1</Text>
-              <Text>2</Text>
-              <Text>3</Text>
-            </HorizontalStack>
-          </VerticalStack>
-          <VerticalStack>
-            <Text>Custom spacing</Text>
-            <HorizontalStack className={styles.root} gap="10%" padding="s1 15%">
-              <Text>1</Text>
-              <Text>2</Text>
-              <Text>3</Text>
-            </HorizontalStack>
-          </VerticalStack>
-        </HorizontalStack>
-
-        <HorizontalStack horizontalAlign="space-between">
-          <VerticalStack>
-            <Text>Themed spacing (extra small)</Text>
-            <HorizontalStack className={styles.root} gap="s2" padding="s2">
-              <Text>1</Text>
-              <Text>2</Text>
-              <Text>3</Text>
-            </HorizontalStack>
-          </VerticalStack>
-          <VerticalStack>
-            <Text>Themed spacing (small)</Text>
-            <HorizontalStack className={styles.root} gap="s1" padding="s1">
-              <Text>1</Text>
-              <Text>2</Text>
-              <Text>3</Text>
-            </HorizontalStack>
-          </VerticalStack>
-          <VerticalStack>
-            <Text>Themed spacing (medium)</Text>
-            <HorizontalStack className={styles.root} gap="m" padding="m">
-              <Text>1</Text>
-              <Text>2</Text>
-              <Text>3</Text>
-            </HorizontalStack>
-          </VerticalStack>
-        </HorizontalStack>
-
-        <HorizontalStack horizontalAlign="space-between">
-          <VerticalStack>
-            <Text>Themed spacing (large)</Text>
-            <HorizontalStack className={styles.root} gap="l1" padding="l1">
-              <Text>1</Text>
-              <Text>2</Text>
-              <Text>3</Text>
-            </HorizontalStack>
-          </VerticalStack>
-          <VerticalStack>
-            <Text>Themed spacing (extra large)</Text>
-            <HorizontalStack className={styles.root} gap="l2" padding="l2">
-              <Text>1</Text>
-              <Text>2</Text>
-              <Text>3</Text>
-            </HorizontalStack>
-          </VerticalStack>
-        </HorizontalStack>
-      </VerticalStack>
-    );
-  }
-}
diff --git a/packages/experiments/src/components/Stack/HorizontalStack/examples/HorizontalStack.VerticalAlign.Example.tsx b/packages/experiments/src/components/Stack/HorizontalStack/examples/HorizontalStack.VerticalAlign.Example.tsx
deleted file mode 100644
index 937d87e075650..0000000000000
--- a/packages/experiments/src/components/Stack/HorizontalStack/examples/HorizontalStack.VerticalAlign.Example.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import * as React from 'react';
-import { VerticalStack, HorizontalStack } from '@uifabric/experiments/lib/Stack';
-import { Text } from '@uifabric/experiments/lib/Text';
-import { mergeStyleSets, DefaultPalette } from 'office-ui-fabric-react/lib/Styling';
-
-export class HorizontalStackVerticalAlignExample extends React.Component<{}, {}> {
-  public render(): JSX.Element {
-    const styles = mergeStyleSets({
-      root: {
-        background: DefaultPalette.themeTertiary,
-        height: 100,
-        selectors: {
-          '> *': {
-            width: 50,
-            height: 50,
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            background: DefaultPalette.themePrimary,
-            color: DefaultPalette.white
-          }
-        }
-      }
-    });
-
-    return (
-      <VerticalStack gap={5}>
-        <Text>Top-aligned</Text>
-        <HorizontalStack verticalAlign="top" className={styles.root}>
-          <Text>1</Text>
-          <Text>2</Text>
-          <Text>3</Text>
-        </HorizontalStack>
-
-        <Text>Vertically centered</Text>
-        <HorizontalStack verticalAlign="center" className={styles.root}>
-          <Text>1</Text>
-          <Text>2</Text>
-          <Text>3</Text>
-        </HorizontalStack>
-
-        <Text>Bottom-aligned</Text>
-        <HorizontalStack verticalAlign="bottom" className={styles.root}>
-          <Text>1</Text>
-          <Text>2</Text>
-          <Text>3</Text>
-        </HorizontalStack>
-      </VerticalStack>
-    );
-  }
-}
diff --git a/packages/experiments/src/components/Stack/Stack.styles.ts b/packages/experiments/src/components/Stack/Stack.styles.ts
deleted file mode 100644
index e3b3b6d241bfb..0000000000000
--- a/packages/experiments/src/components/Stack/Stack.styles.ts
+++ /dev/null
@@ -1,103 +0,0 @@
-import { IStackComponent, IStackStyles } from './Stack.types';
-import { parseGap, parsePadding } from './StackUtils';
-
-const nameMap: { [key: string]: string } = {
-  start: 'flex-start',
-  end: 'flex-end'
-};
-
-export const styles: IStackComponent['styles'] = props => {
-  const {
-    fillHorizontal,
-    fillVertical,
-    maxWidth,
-    maxHeight,
-    horizontal,
-    grow,
-    wrap,
-    padding,
-    horizontalAlignment,
-    verticalAlignment,
-    horizontalGap,
-    verticalGap,
-    shrinkItems,
-    theme,
-    className
-  } = props;
-
-  const hGap = parseGap(horizontalGap, theme);
-  const vGap = parseGap(verticalGap, theme);
-
-  // styles to be applied to all direct children regardless of wrap or direction
-  const childStyles = {
-    whiteSpace: 'nowrap',
-    textOverflow: 'ellipsis'
-  };
-
-  // selectors to be applied regardless of wrap or direction
-  const commonSelectors = {
-    // flexShrink styles are applied by the StackItem
-    '> *:not(.ms-StackItem)': {
-      flexShrink: shrinkItems ? 1 : 0
-    }
-  };
-
-  return {
-    root: [
-      theme.fonts.medium,
-      {
-        display: 'flex',
-        flexDirection: horizontal ? 'row' : 'column',
-        flexWrap: 'nowrap',
-        width: fillHorizontal && !wrap ? '100%' : 'auto',
-        height: fillVertical && !wrap ? '100%' : 'auto',
-        maxWidth,
-        maxHeight,
-        padding: parsePadding(padding, theme),
-        boxSizing: 'border-box'
-      },
-      grow && {
-        flexGrow: grow === true ? 1 : grow,
-        overflow: 'hidden'
-      },
-      horizontalAlignment && {
-        [horizontal ? 'justifyContent' : 'alignItems']: nameMap[horizontalAlignment] || horizontalAlignment
-      },
-      verticalAlignment && {
-        [horizontal ? 'alignItems' : 'justifyContent']: nameMap[verticalAlignment] || verticalAlignment
-      },
-      wrap && {
-        selectors: {
-          '> *': {
-            margin: `${0.5 * vGap.value}${vGap.unit} ${0.5 * hGap.value}${hGap.unit}`,
-
-            // avoid unnecessary calc() calls if horizontal gap is 0
-            maxWidth: hGap.value === 0 ? '100%' : `calc(100% - ${hGap.value}${hGap.unit})`,
-
-            ...childStyles
-          },
-          ...commonSelectors
-        }
-      },
-      !wrap && {
-        selectors: {
-          '> *': childStyles,
-
-          // apply gap margin to every direct child except the first direct child
-          '> *:not(:first-child)': [
-            horizontal && {
-              marginLeft: `${hGap.value}${hGap.unit}`
-            },
-            !horizontal && {
-              marginTop: `${vGap.value}${vGap.unit}`
-            }
-          ],
-          ...commonSelectors
-        }
-      },
-      className
-    ]
-    // TODO: this cast may be hiding some potential issues with styling and name
-    //        lookups and should be removed
-  } as IStackStyles;
-};
diff --git a/packages/experiments/src/components/Stack/Stack.test.tsx b/packages/experiments/src/components/Stack/Stack.test.tsx
deleted file mode 100644
index 6d28c6bd817d5..0000000000000
--- a/packages/experiments/src/components/Stack/Stack.test.tsx
+++ /dev/null
@@ -1,111 +0,0 @@
-import * as React from 'react';
-import * as renderer from 'react-test-renderer';
-import { mergeStyles } from 'office-ui-fabric-react';
-
-import { Stack } from './Stack';
-
-const sampleClass = mergeStyles({
-  background: 'red'
-});
-
-describe('Stack', () => {
-  it('renders vertical Stack correctly', () => {
-    const component = renderer.create(
-      <Stack>
-        <div>Item 1</div>
-        <div>Item 2</div>
-      </Stack>
-    );
-    const tree = component.toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-
-  it('renders horizontal Stack correctly', () => {
-    const component = renderer.create(
-      <Stack horizontal>
-        <div>Item 1</div>
-        <div>Item 2</div>
-      </Stack>
-    );
-    const tree = component.toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-
-  it('renders Stack with vertical and horizontal alignment correctly', () => {
-    const component = renderer.create(
-      <Stack horizontalAlignment="start" verticalAlignment="end">
-        <div>Item 1</div>
-        <div>Item 2</div>
-      </Stack>
-    );
-    const tree = component.toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-
-  it('renders Stack with vertical and horizontal fill correctly', () => {
-    const component = renderer.create(
-      <Stack fillHorizontal fillVertical>
-        <div>Item 1</div>
-        <div>Item 2</div>
-      </Stack>
-    );
-    const tree = component.toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-
-  it('renders Stack with grow correctly', () => {
-    const component = renderer.create(
-      <Stack>
-        <Stack grow={5}>Item 1</Stack>
-        <Stack grow={2}>Item 2</Stack>
-        <Stack grow>Item 3</Stack>
-      </Stack>
-    );
-    const tree = component.toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-
-  it('renders Stack with StackItems correctly', () => {
-    const component = renderer.create(
-      <Stack>
-        <Stack.Item>Item 1</Stack.Item>
-        <Stack.Item>Item 2</Stack.Item>
-      </Stack>
-    );
-    const tree = component.toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-
-  it('renders Stack with a gap correctly', () => {
-    const component = renderer.create(
-      <Stack gap={10}>
-        <Stack.Item>Item 1</Stack.Item>
-        <Stack.Item>Item 2</Stack.Item>
-      </Stack>
-    );
-    const tree = component.toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-
-  it('renders Stack with shrinking StackItems correctly', () => {
-    const component = renderer.create(
-      <Stack shrinkItems>
-        <Stack.Item>Item 1</Stack.Item>
-        <Stack.Item>Item 2</Stack.Item>
-      </Stack>
-    );
-    const tree = component.toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-
-  it('accepts custom className on child items', () => {
-    const component = renderer.create(
-      <Stack>
-        <Stack.Item className={sampleClass}>Item 1</Stack.Item>
-        <div className={sampleClass}>Item 2</div>
-      </Stack>
-    );
-    const tree = component.toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-});
diff --git a/packages/experiments/src/components/Stack/VerticalStack/VerticalStack.styles.ts b/packages/experiments/src/components/Stack/VerticalStack/VerticalStack.styles.ts
deleted file mode 100644
index 71d3a808af197..0000000000000
--- a/packages/experiments/src/components/Stack/VerticalStack/VerticalStack.styles.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { getGlobalClassNames } from '../../../Styling';
-import { IVerticalStackComponent, IVerticalStackStyles } from './VerticalStack.types';
-
-const GlobalClassNames = {
-  root: 'ms-VerticalStack'
-};
-
-export const styles: IVerticalStackComponent['styles'] = props => {
-  const { className, theme } = props;
-  const classNames = getGlobalClassNames(GlobalClassNames, theme);
-
-  return {
-    root: [classNames.root, className, theme.fonts.medium]
-    // TODO: this cast may be hiding some potential issues with styling and name
-    //        lookups and should be removed
-  } as IVerticalStackStyles;
-};
diff --git a/packages/experiments/src/components/Stack/VerticalStack/VerticalStack.test.tsx b/packages/experiments/src/components/Stack/VerticalStack/VerticalStack.test.tsx
deleted file mode 100644
index 2a37ebda112fa..0000000000000
--- a/packages/experiments/src/components/Stack/VerticalStack/VerticalStack.test.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import * as React from 'react';
-import { mount } from 'enzyme';
-import * as renderer from 'react-test-renderer';
-import { VerticalStack } from '../index';
-
-describe('VerticalStack', () => {
-  it('can handle having no children', () => {
-    const createEmptyStack = () => {
-      mount(<VerticalStack />);
-    };
-
-    expect(createEmptyStack).not.toThrow();
-  });
-
-  it('renders default VerticalStack correctly', () => {
-    const component = renderer.create(
-      <VerticalStack>
-        <div>Item 1</div>
-        <div>Item 2</div>
-      </VerticalStack>
-    );
-    const tree = component.toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-
-  it('renders gap correctly', () => {
-    const component = renderer.create(
-      <VerticalStack gap={5}>
-        <div>Item 1</div>
-        <div>Item 2</div>
-      </VerticalStack>
-    );
-    const tree = component.toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-
-  it('renders growing items correctly', () => {
-    const component = renderer.create(
-      <VerticalStack>
-        <VerticalStack.Item>Item 1</VerticalStack.Item>
-        <VerticalStack.Item>Item 2</VerticalStack.Item>
-      </VerticalStack>
-    );
-    const tree = component.toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-
-  it('renders shrinking items correctly', () => {
-    const component = renderer.create(
-      <VerticalStack shrinkItems>
-        <VerticalStack.Item>Item 1</VerticalStack.Item>
-        <VerticalStack.Item preventShrink>Item 2</VerticalStack.Item>
-      </VerticalStack>
-    );
-    const tree = component.toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-
-  it('renders item alignments correctly', () => {
-    const component = renderer.create(
-      <VerticalStack>
-        <VerticalStack.Item align="auto">Auto</VerticalStack.Item>
-        <VerticalStack.Item align="stretch">Stretch</VerticalStack.Item>
-        <VerticalStack.Item align="baseline">Baseline</VerticalStack.Item>
-        <VerticalStack.Item align="start">Start</VerticalStack.Item>
-        <VerticalStack.Item align="center">Center</VerticalStack.Item>
-        <VerticalStack.Item align="end">End</VerticalStack.Item>
-      </VerticalStack>
-    );
-    const tree = component.toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-});
diff --git a/packages/experiments/src/components/Stack/VerticalStack/VerticalStack.tsx b/packages/experiments/src/components/Stack/VerticalStack/VerticalStack.tsx
deleted file mode 100644
index 99cb47bf5668e..0000000000000
--- a/packages/experiments/src/components/Stack/VerticalStack/VerticalStack.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import * as React from 'react';
-import { createStatelessComponent } from '../../../Foundation';
-import { Stack } from '../Stack';
-import { StackItem } from '../StackItem/StackItem';
-import { IStackItemProps } from '../StackItem/StackItem.types';
-import { getVerticalAlignment, getHorizontalAlignment } from '../StackUtils';
-import { IVerticalStackComponent, IVerticalStackProps, IVerticalStackStyles } from './VerticalStack.types';
-import { styles } from './VerticalStack.styles';
-
-const view: IVerticalStackComponent['view'] = props => {
-  const { verticalAlign, horizontalAlign, gap, classNames, children, styles: customStyles, ...rest } = props;
-
-  return (
-    <Stack
-      {...rest}
-      verticalAlignment={getVerticalAlignment(verticalAlign)}
-      horizontalAlignment={getHorizontalAlignment(horizontalAlign)}
-      className={classNames.root}
-      verticalGap={gap}
-    >
-      {children}
-    </Stack>
-  );
-};
-
-const VerticalStackStatics = {
-  Item: StackItem,
-  defaultProps: {}
-};
-type IVerticalStackStatics = typeof VerticalStackStatics;
-
-export const VerticalStack: React.StatelessComponent<IVerticalStackProps> & {
-  Item: React.StatelessComponent<IStackItemProps>;
-} = createStatelessComponent<IVerticalStackProps, IVerticalStackStyles, IVerticalStackStatics>({
-  displayName: 'VerticalStack',
-  styles,
-  view,
-  statics: VerticalStackStatics
-});
-
-export default VerticalStack;
diff --git a/packages/experiments/src/components/Stack/VerticalStack/VerticalStack.types.ts b/packages/experiments/src/components/Stack/VerticalStack/VerticalStack.types.ts
deleted file mode 100644
index da817935cd421..0000000000000
--- a/packages/experiments/src/components/Stack/VerticalStack/VerticalStack.types.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { IPartialStackProps } from '../Stack.types';
-import { IStatelessComponent, IStylesProp } from '../../../Foundation';
-import { IStyle } from '../../../Styling';
-
-export type IVerticalStackComponent = IStatelessComponent<IVerticalStackProps, IVerticalStackStyles>;
-
-export interface IVerticalStackProps extends IPartialStackProps {
-  /**
-   * How to render the VerticalStack.
-   */
-  as?: string | React.ReactType<IVerticalStackProps>;
-
-  /**
-   * How to align child elements vertically.
-   */
-  verticalAlign?: 'top' | 'bottom' | 'center' | 'space-around' | 'space-between' | 'space-evenly';
-
-  /**
-   * How to align child elements horizontally.
-   */
-  horizontalAlign?: 'left' | 'right' | 'center' | 'baseline' | 'stretch';
-
-  /**
-   * Custom styles to apply to the VerticalStack.
-   */
-  styles?: IStylesProp<IVerticalStackProps, IVerticalStackStyles>;
-}
-
-export interface IVerticalStackStyles {
-  /**
-   * Style set for the root element.
-   */
-  root: IStyle;
-}
diff --git a/packages/experiments/src/components/Stack/VerticalStack/VerticalStackPage.tsx b/packages/experiments/src/components/Stack/VerticalStack/VerticalStackPage.tsx
deleted file mode 100644
index 279dbde64e75b..0000000000000
--- a/packages/experiments/src/components/Stack/VerticalStack/VerticalStackPage.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-import * as React from 'react';
-import { ExampleCard, IComponentDemoPageProps, ComponentPage, PropertiesTableSet } from '@uifabric/example-app-base';
-
-import { VerticalStackBasicExample } from './examples/VerticalStack.Basic.Example';
-const VerticalStackBasicExampleCode = require('!raw-loader!@uifabric/experiments/src/components/Stack/VerticalStack/examples/VerticalStack.Basic.Example.tsx') as string;
-
-import { VerticalStackSpacingExample } from './examples/VerticalStack.Spacing.Example';
-const VerticalStackSpacingExampleCode = require('!raw-loader!@uifabric/experiments/src/components/Stack/VerticalStack/examples/VerticalStack.Spacing.Example.tsx') as string;
-
-import { VerticalStackGrowExample } from './examples/VerticalStack.Grow.Example';
-const VerticalStackGrowExampleCode = require('!raw-loader!@uifabric/experiments/src/components/Stack/VerticalStack/examples/VerticalStack.Grow.Example.tsx') as string;
-
-import { VerticalStackShrinkExample } from './examples/VerticalStack.Shrink.Example';
-const VerticalStackShrinkExampleCode = require('!raw-loader!@uifabric/experiments/src/components/Stack/VerticalStack/examples/VerticalStack.Shrink.Example.tsx') as string;
-
-import { VerticalStackVerticalAlignExample } from './examples/VerticalStack.VerticalAlign.Example';
-const VerticalStackVerticalAlignExampleCode = require('!raw-loader!@uifabric/experiments/src/components/Stack/VerticalStack/examples/VerticalStack.VerticalAlign.Example.tsx') as string;
-
-import { VerticalStackHorizontalAlignExample } from './examples/VerticalStack.HorizontalAlign.Example';
-const VerticalStackHorizontalAlignExampleCode = require('!raw-loader!@uifabric/experiments/src/components/Stack/VerticalStack/examples/VerticalStack.HorizontalAlign.Example.tsx') as string;
-
-import { VerticalStackConfigureExample } from './examples/VerticalStack.Configure.Example';
-const VerticalStackConfigureExampleCode = require('!raw-loader!@uifabric/experiments/src/components/Stack/VerticalStack/examples/VerticalStack.Configure.Example.tsx') as string;
-
-export class VerticalStackPage extends React.Component<IComponentDemoPageProps, {}> {
-  public render(): JSX.Element {
-    return (
-      <ComponentPage
-        title="VerticalStack"
-        componentName="VerticalStack"
-        exampleCards={
-          <div>
-            <ExampleCard title="Basic Vertical Stack" code={VerticalStackBasicExampleCode}>
-              <VerticalStackBasicExample />
-            </ExampleCard>
-            <ExampleCard title="Gap and Padding Sizes" code={VerticalStackSpacingExampleCode}>
-              <VerticalStackSpacingExample />
-            </ExampleCard>
-            <ExampleCard title="Growing Items" code={VerticalStackGrowExampleCode}>
-              <VerticalStackGrowExample />
-            </ExampleCard>
-            <ExampleCard title="Shrinking Items" code={VerticalStackShrinkExampleCode}>
-              <VerticalStackShrinkExample />
-            </ExampleCard>
-            <ExampleCard title="Vertical Alignments" code={VerticalStackVerticalAlignExampleCode}>
-              <VerticalStackVerticalAlignExample />
-            </ExampleCard>
-            <ExampleCard title="Horizontal Alignments" code={VerticalStackHorizontalAlignExampleCode}>
-              <VerticalStackHorizontalAlignExample />
-            </ExampleCard>
-            <ExampleCard title="Configure Properties" code={VerticalStackConfigureExampleCode}>
-              <VerticalStackConfigureExample />
-            </ExampleCard>
-          </div>
-        }
-        propertiesTables={
-          <PropertiesTableSet
-            sources={[
-              require<string>('!raw-loader!@uifabric/experiments/src/components/Stack/VerticalStack/VerticalStack.types.ts'),
-              require<string>('!raw-loader!@uifabric/experiments/src/components/Stack/Stack.types.ts'),
-              require<string>('!raw-loader!@uifabric/experiments/src/components/Stack/StackItem/StackItem.types.ts')
-            ]}
-          />
-        }
-        overview={<div />}
-        bestPractices={<div />}
-        dos={
-          <div>
-            <ul>
-              <li />
-            </ul>
-          </div>
-        }
-        donts={
-          <div>
-            <ul>
-              <li />
-            </ul>
-          </div>
-        }
-        isHeaderVisible={this.props.isHeaderVisible}
-      />
-    );
-  }
-}
diff --git a/packages/experiments/src/components/Stack/VerticalStack/__snapshots__/VerticalStack.test.tsx.snap b/packages/experiments/src/components/Stack/VerticalStack/__snapshots__/VerticalStack.test.tsx.snap
deleted file mode 100644
index 56fe338617baa..0000000000000
--- a/packages/experiments/src/components/Stack/VerticalStack/__snapshots__/VerticalStack.test.tsx.snap
+++ /dev/null
@@ -1,334 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`VerticalStack renders default VerticalStack correctly 1`] = `
-<div
-  className=
-      ms-VerticalStack
-      {
-        -moz-osx-font-smoothing: grayscale;
-        -webkit-font-smoothing: antialiased;
-        box-sizing: border-box;
-        display: flex;
-        flex-direction: column;
-        flex-wrap: nowrap;
-        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-        font-size: 14px;
-        font-weight: 400;
-        height: auto;
-        width: auto;
-      }
-      & > * {
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-      & > *:not(:first-child) {
-        margin-top: 0px;
-      }
-      & > *:not(.ms-StackItem) {
-        flex-shrink: 0;
-      }
->
-  <div>
-    Item 1
-  </div>
-  <div>
-    Item 2
-  </div>
-</div>
-`;
-
-exports[`VerticalStack renders gap correctly 1`] = `
-<div
-  className=
-      ms-VerticalStack
-      {
-        -moz-osx-font-smoothing: grayscale;
-        -webkit-font-smoothing: antialiased;
-        box-sizing: border-box;
-        display: flex;
-        flex-direction: column;
-        flex-wrap: nowrap;
-        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-        font-size: 14px;
-        font-weight: 400;
-        height: auto;
-        width: auto;
-      }
-      & > * {
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-      & > *:not(:first-child) {
-        margin-top: 5px;
-      }
-      & > *:not(.ms-StackItem) {
-        flex-shrink: 0;
-      }
->
-  <div>
-    Item 1
-  </div>
-  <div>
-    Item 2
-  </div>
-</div>
-`;
-
-exports[`VerticalStack renders growing items correctly 1`] = `
-<div
-  className=
-      ms-VerticalStack
-      {
-        -moz-osx-font-smoothing: grayscale;
-        -webkit-font-smoothing: antialiased;
-        box-sizing: border-box;
-        display: flex;
-        flex-direction: column;
-        flex-wrap: nowrap;
-        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-        font-size: 14px;
-        font-weight: 400;
-        height: auto;
-        width: auto;
-      }
-      & > * {
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-      & > *:not(:first-child) {
-        margin-top: 0px;
-      }
-      & > *:not(.ms-StackItem) {
-        flex-shrink: 0;
-      }
->
-  <span
-    className=
-        ms-StackItem
-        {
-          -moz-osx-font-smoothing: grayscale;
-          -webkit-font-smoothing: antialiased;
-          flex-shrink: 0;
-          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-          font-size: 14px;
-          font-weight: 400;
-          height: auto;
-          width: auto;
-        }
-  >
-    Item 1
-  </span>
-  <span
-    className=
-        ms-StackItem
-        {
-          -moz-osx-font-smoothing: grayscale;
-          -webkit-font-smoothing: antialiased;
-          flex-shrink: 0;
-          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-          font-size: 14px;
-          font-weight: 400;
-          height: auto;
-          width: auto;
-        }
-  >
-    Item 2
-  </span>
-</div>
-`;
-
-exports[`VerticalStack renders item alignments correctly 1`] = `
-<div
-  className=
-      ms-VerticalStack
-      {
-        -moz-osx-font-smoothing: grayscale;
-        -webkit-font-smoothing: antialiased;
-        box-sizing: border-box;
-        display: flex;
-        flex-direction: column;
-        flex-wrap: nowrap;
-        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-        font-size: 14px;
-        font-weight: 400;
-        height: auto;
-        width: auto;
-      }
-      & > * {
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-      & > *:not(:first-child) {
-        margin-top: 0px;
-      }
-      & > *:not(.ms-StackItem) {
-        flex-shrink: 0;
-      }
->
-  <span
-    className=
-        ms-StackItem
-        {
-          -moz-osx-font-smoothing: grayscale;
-          -webkit-font-smoothing: antialiased;
-          align-self: auto;
-          flex-shrink: 0;
-          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-          font-size: 14px;
-          font-weight: 400;
-          height: auto;
-          width: auto;
-        }
-  >
-    Auto
-  </span>
-  <span
-    className=
-        ms-StackItem
-        {
-          -moz-osx-font-smoothing: grayscale;
-          -webkit-font-smoothing: antialiased;
-          align-self: stretch;
-          flex-shrink: 0;
-          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-          font-size: 14px;
-          font-weight: 400;
-          height: auto;
-          width: auto;
-        }
-  >
-    Stretch
-  </span>
-  <span
-    className=
-        ms-StackItem
-        {
-          -moz-osx-font-smoothing: grayscale;
-          -webkit-font-smoothing: antialiased;
-          align-self: baseline;
-          flex-shrink: 0;
-          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-          font-size: 14px;
-          font-weight: 400;
-          height: auto;
-          width: auto;
-        }
-  >
-    Baseline
-  </span>
-  <span
-    className=
-        ms-StackItem
-        {
-          -moz-osx-font-smoothing: grayscale;
-          -webkit-font-smoothing: antialiased;
-          align-self: flex-start;
-          flex-shrink: 0;
-          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-          font-size: 14px;
-          font-weight: 400;
-          height: auto;
-          width: auto;
-        }
-  >
-    Start
-  </span>
-  <span
-    className=
-        ms-StackItem
-        {
-          -moz-osx-font-smoothing: grayscale;
-          -webkit-font-smoothing: antialiased;
-          align-self: center;
-          flex-shrink: 0;
-          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-          font-size: 14px;
-          font-weight: 400;
-          height: auto;
-          width: auto;
-        }
-  >
-    Center
-  </span>
-  <span
-    className=
-        ms-StackItem
-        {
-          -moz-osx-font-smoothing: grayscale;
-          -webkit-font-smoothing: antialiased;
-          align-self: flex-end;
-          flex-shrink: 0;
-          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-          font-size: 14px;
-          font-weight: 400;
-          height: auto;
-          width: auto;
-        }
-  >
-    End
-  </span>
-</div>
-`;
-
-exports[`VerticalStack renders shrinking items correctly 1`] = `
-<div
-  className=
-      ms-VerticalStack
-      {
-        -moz-osx-font-smoothing: grayscale;
-        -webkit-font-smoothing: antialiased;
-        box-sizing: border-box;
-        display: flex;
-        flex-direction: column;
-        flex-wrap: nowrap;
-        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-        font-size: 14px;
-        font-weight: 400;
-        height: auto;
-        width: auto;
-      }
-      & > * {
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-      & > *:not(:first-child) {
-        margin-top: 0px;
-      }
-      & > *:not(.ms-StackItem) {
-        flex-shrink: 1;
-      }
->
-  <span
-    className=
-        ms-StackItem
-        {
-          -moz-osx-font-smoothing: grayscale;
-          -webkit-font-smoothing: antialiased;
-          flex-shrink: 1;
-          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-          font-size: 14px;
-          font-weight: 400;
-          height: auto;
-          width: auto;
-        }
-  >
-    Item 1
-  </span>
-  <span
-    className=
-        ms-StackItem
-        {
-          -moz-osx-font-smoothing: grayscale;
-          -webkit-font-smoothing: antialiased;
-          flex-shrink: 0;
-          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-          font-size: 14px;
-          font-weight: 400;
-          height: auto;
-          width: auto;
-        }
-  >
-    Item 2
-  </span>
-</div>
-`;
diff --git a/packages/experiments/src/components/Stack/VerticalStack/examples/VerticalStack.Basic.Example.tsx b/packages/experiments/src/components/Stack/VerticalStack/examples/VerticalStack.Basic.Example.tsx
deleted file mode 100644
index d9a6361b85412..0000000000000
--- a/packages/experiments/src/components/Stack/VerticalStack/examples/VerticalStack.Basic.Example.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import * as React from 'react';
-import { VerticalStack } from '@uifabric/experiments/lib/Stack';
-import { Text } from '@uifabric/experiments/lib/Text';
-import { mergeStyleSets, DefaultPalette } from 'office-ui-fabric-react/lib/Styling';
-
-export class VerticalStackBasicExample extends React.Component<{}, {}> {
-  public render(): JSX.Element {
-    const styles = mergeStyleSets({
-      root: {
-        background: DefaultPalette.themeTertiary
-      },
-
-      item: {
-        color: DefaultPalette.white,
-        background: DefaultPalette.themePrimary,
-        padding: 5
-      }
-    });
-
-    return (
-      <VerticalStack gap={5}>
-        <Text>Default vertical stack</Text>
-        <VerticalStack className={styles.root}>
-          <Text>Item One</Text>
-          <Text>Item Two</Text>
-          <Text>Item Three</Text>
-        </VerticalStack>
-
-        <Text>Vertical gap between items</Text>
-        <VerticalStack gap={10} padding={10} className={styles.root}>
-          <Text>Item One</Text>
-          <Text>Item Two</Text>
-          <Text>Item Three</Text>
-        </VerticalStack>
-
-        <Text>Item alignments</Text>
-        <VerticalStack gap={5} padding={10} className={styles.root}>
-          <VerticalStack.Item align="auto" className={styles.item}>
-            <Text>Auto-aligned item</Text>
-          </VerticalStack.Item>
-          <VerticalStack.Item align="stretch" className={styles.item}>
-            <Text>Stretch-aligned item</Text>
-          </VerticalStack.Item>
-          <VerticalStack.Item align="baseline" className={styles.item}>
-            <Text>Baseline-aligned item</Text>
-          </VerticalStack.Item>
-          <VerticalStack.Item align="start" className={styles.item}>
-            <Text>Start-aligned item</Text>
-          </VerticalStack.Item>
-          <VerticalStack.Item align="center" className={styles.item}>
-            <Text>Center-aligned item</Text>
-          </VerticalStack.Item>
-          <VerticalStack.Item align="end" className={styles.item}>
-            <Text>End-aligned item</Text>
-          </VerticalStack.Item>
-        </VerticalStack>
-
-        <Text>Clickable stack</Text>
-        <VerticalStack onClick={this._onClick} padding={10} className={styles.root}>
-          <Text>Click inside this box</Text>
-        </VerticalStack>
-      </VerticalStack>
-    );
-  }
-
-  private _onClick = (): void => {
-    alert('Clicked VerticalStack');
-  };
-}
diff --git a/packages/experiments/src/components/Stack/VerticalStack/examples/VerticalStack.HorizontalAlign.Example.tsx b/packages/experiments/src/components/Stack/VerticalStack/examples/VerticalStack.HorizontalAlign.Example.tsx
deleted file mode 100644
index 322881117fae1..0000000000000
--- a/packages/experiments/src/components/Stack/VerticalStack/examples/VerticalStack.HorizontalAlign.Example.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import * as React from 'react';
-import { VerticalStack } from '@uifabric/experiments/lib/Stack';
-import { Text } from '@uifabric/experiments/lib/Text';
-import { mergeStyleSets, DefaultPalette } from 'office-ui-fabric-react/lib/Styling';
-
-export class VerticalStackHorizontalAlignExample extends React.Component<{}, {}> {
-  public render(): JSX.Element {
-    const styles = mergeStyleSets({
-      root: {
-        background: DefaultPalette.themeTertiary,
-        selectors: {
-          '> *': {
-            width: 50,
-            height: 50,
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            background: DefaultPalette.themePrimary,
-            color: DefaultPalette.white
-          }
-        }
-      }
-    });
-
-    return (
-      <VerticalStack gap={5}>
-        <Text>Left-aligned</Text>
-        <VerticalStack horizontalAlign="left" className={styles.root}>
-          <Text>1</Text>
-          <Text>2</Text>
-        </VerticalStack>
-
-        <Text>Horizontally centered</Text>
-        <VerticalStack horizontalAlign="center" className={styles.root}>
-          <Text>1</Text>
-          <Text>2</Text>
-        </VerticalStack>
-
-        <Text>Right-aligned</Text>
-        <VerticalStack horizontalAlign="right" className={styles.root}>
-          <Text>1</Text>
-          <Text>2</Text>
-        </VerticalStack>
-      </VerticalStack>
-    );
-  }
-}
diff --git a/packages/experiments/src/components/Stack/VerticalStack/examples/VerticalStack.Spacing.Example.tsx b/packages/experiments/src/components/Stack/VerticalStack/examples/VerticalStack.Spacing.Example.tsx
deleted file mode 100644
index 4fe4cb92b0d31..0000000000000
--- a/packages/experiments/src/components/Stack/VerticalStack/examples/VerticalStack.Spacing.Example.tsx
+++ /dev/null
@@ -1,95 +0,0 @@
-import * as React from 'react';
-import { VerticalStack, HorizontalStack } from '@uifabric/experiments/lib/Stack';
-import { Text } from '@uifabric/experiments/lib/Text';
-import { mergeStyleSets, DefaultPalette } from 'office-ui-fabric-react/lib/Styling';
-
-export class VerticalStackSpacingExample extends React.Component<{}, {}> {
-  public render(): JSX.Element {
-    const styles = mergeStyleSets({
-      root: {
-        background: DefaultPalette.themeTertiary
-      },
-
-      item: {
-        width: 50,
-        height: 50,
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        background: DefaultPalette.themePrimary,
-        color: DefaultPalette.white
-      }
-    });
-
-    return (
-      <VerticalStack gap={10}>
-        <HorizontalStack gap={50}>
-          <VerticalStack>
-            <Text>Numerical spacing</Text>
-            <VerticalStack className={styles.root} gap={10} padding={10}>
-              <Text className={styles.item}>1</Text>
-              <Text className={styles.item}>2</Text>
-              <Text className={styles.item}>3</Text>
-            </VerticalStack>
-          </VerticalStack>
-
-          <VerticalStack>
-            <Text>Custom spacing</Text>
-            <VerticalStack className={styles.root} gap="20%" padding="m 40px">
-              <Text className={styles.item}>1</Text>
-              <Text className={styles.item}>2</Text>
-              <Text className={styles.item}>3</Text>
-            </VerticalStack>
-          </VerticalStack>
-        </HorizontalStack>
-
-        <HorizontalStack horizontalAlign="space-between">
-          <VerticalStack>
-            <Text>Themed spacing (extra small)</Text>
-            <VerticalStack className={styles.root} gap="s2" padding="s2">
-              <Text className={styles.item}>1</Text>
-              <Text className={styles.item}>2</Text>
-              <Text className={styles.item}>3</Text>
-            </VerticalStack>
-          </VerticalStack>
-
-          <VerticalStack>
-            <Text>Themed spacing (small)</Text>
-            <VerticalStack className={styles.root} gap="s1" padding="s2">
-              <Text className={styles.item}>1</Text>
-              <Text className={styles.item}>2</Text>
-              <Text className={styles.item}>3</Text>
-            </VerticalStack>
-          </VerticalStack>
-
-          <VerticalStack>
-            <Text>Themed spacing (medium)</Text>
-            <VerticalStack className={styles.root} gap="m" padding="m">
-              <Text className={styles.item}>1</Text>
-              <Text className={styles.item}>2</Text>
-              <Text className={styles.item}>3</Text>
-            </VerticalStack>
-          </VerticalStack>
-
-          <VerticalStack>
-            <Text>Themed spacing (large)</Text>
-            <VerticalStack className={styles.root} gap="l1" padding="l1">
-              <Text className={styles.item}>1</Text>
-              <Text className={styles.item}>2</Text>
-              <Text className={styles.item}>3</Text>
-            </VerticalStack>
-          </VerticalStack>
-
-          <VerticalStack>
-            <Text>Themed spacing (extra large)</Text>
-            <VerticalStack className={styles.root} gap="l2" padding="l2">
-              <Text className={styles.item}>1</Text>
-              <Text className={styles.item}>2</Text>
-              <Text className={styles.item}>3</Text>
-            </VerticalStack>
-          </VerticalStack>
-        </HorizontalStack>
-      </VerticalStack>
-    );
-  }
-}
diff --git a/packages/experiments/src/components/Stack/VerticalStack/examples/VerticalStack.VerticalAlign.Example.tsx b/packages/experiments/src/components/Stack/VerticalStack/examples/VerticalStack.VerticalAlign.Example.tsx
deleted file mode 100644
index ef6036e922f78..0000000000000
--- a/packages/experiments/src/components/Stack/VerticalStack/examples/VerticalStack.VerticalAlign.Example.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-import * as React from 'react';
-import { VerticalStack, HorizontalStack } from '@uifabric/experiments/lib/Stack';
-import { Text } from '@uifabric/experiments/lib/Text';
-import { mergeStyleSets, DefaultPalette } from 'office-ui-fabric-react/lib/Styling';
-
-export class VerticalStackVerticalAlignExample extends React.Component<{}, {}> {
-  public render(): JSX.Element {
-    const styles = mergeStyleSets({
-      root: {
-        background: DefaultPalette.themeTertiary,
-        height: 250,
-        selectors: {
-          '> *': {
-            width: 50,
-            height: 50,
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            background: DefaultPalette.themePrimary,
-            color: DefaultPalette.white
-          }
-        }
-      }
-    });
-
-    return (
-      <VerticalStack gap={10}>
-        <HorizontalStack gap={30} horizontalAlign="space-between">
-          <VerticalStack grow>
-            <Text>Top-aligned</Text>
-            <VerticalStack verticalAlign="top" className={styles.root}>
-              <Text>1</Text>
-              <Text>2</Text>
-              <Text>3</Text>
-            </VerticalStack>
-          </VerticalStack>
-
-          <VerticalStack grow>
-            <Text>Vertically centered</Text>
-            <VerticalStack verticalAlign="center" className={styles.root}>
-              <Text>1</Text>
-              <Text>2</Text>
-              <Text>3</Text>
-            </VerticalStack>
-          </VerticalStack>
-
-          <VerticalStack grow>
-            <Text>Bottom-aligned</Text>
-            <VerticalStack verticalAlign="bottom" className={styles.root}>
-              <Text>1</Text>
-              <Text>2</Text>
-              <Text>3</Text>
-            </VerticalStack>
-          </VerticalStack>
-        </HorizontalStack>
-
-        <HorizontalStack gap={30} horizontalAlign="space-between">
-          <VerticalStack grow>
-            <Text>Vertical space around items</Text>
-            <VerticalStack verticalAlign="space-around" className={styles.root}>
-              <Text>1</Text>
-              <Text>2</Text>
-              <Text>3</Text>
-            </VerticalStack>
-          </VerticalStack>
-
-          <VerticalStack grow>
-            <Text>Vertical space between items</Text>
-            <VerticalStack verticalAlign="space-between" className={styles.root}>
-              <Text>1</Text>
-              <Text>2</Text>
-              <Text>3</Text>
-            </VerticalStack>
-          </VerticalStack>
-
-          <VerticalStack grow>
-            <Text>Items vertically evenly spaced</Text>
-            <VerticalStack verticalAlign="space-evenly" className={styles.root}>
-              <Text>1</Text>
-              <Text>2</Text>
-              <Text>3</Text>
-            </VerticalStack>
-          </VerticalStack>
-        </HorizontalStack>
-      </VerticalStack>
-    );
-  }
-}
diff --git a/packages/experiments/src/components/Stack/__snapshots__/Stack.test.tsx.snap b/packages/experiments/src/components/Stack/__snapshots__/Stack.test.tsx.snap
deleted file mode 100644
index a3fb5f5e6824d..0000000000000
--- a/packages/experiments/src/components/Stack/__snapshots__/Stack.test.tsx.snap
+++ /dev/null
@@ -1,521 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Stack accepts custom className on child items 1`] = `
-<div
-  className=
-
-      {
-        -moz-osx-font-smoothing: grayscale;
-        -webkit-font-smoothing: antialiased;
-        box-sizing: border-box;
-        display: flex;
-        flex-direction: column;
-        flex-wrap: nowrap;
-        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-        font-size: 14px;
-        font-weight: 400;
-        height: auto;
-        width: auto;
-      }
-      & > * {
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-      & > *:not(:first-child) {
-        margin-top: 0px;
-      }
-      & > *:not(.ms-StackItem) {
-        flex-shrink: 0;
-      }
->
-  <span
-    className=
-        ms-StackItem
-        {
-          -moz-osx-font-smoothing: grayscale;
-          -webkit-font-smoothing: antialiased;
-          background: red;
-          flex-shrink: 0;
-          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-          font-size: 14px;
-          font-weight: 400;
-          height: auto;
-          width: auto;
-        }
-  >
-    Item 1
-  </span>
-  <div
-    className=
-
-        {
-          background: red;
-        }
-  >
-    Item 2
-  </div>
-</div>
-`;
-
-exports[`Stack renders Stack with StackItems correctly 1`] = `
-<div
-  className=
-
-      {
-        -moz-osx-font-smoothing: grayscale;
-        -webkit-font-smoothing: antialiased;
-        box-sizing: border-box;
-        display: flex;
-        flex-direction: column;
-        flex-wrap: nowrap;
-        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-        font-size: 14px;
-        font-weight: 400;
-        height: auto;
-        width: auto;
-      }
-      & > * {
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-      & > *:not(:first-child) {
-        margin-top: 0px;
-      }
-      & > *:not(.ms-StackItem) {
-        flex-shrink: 0;
-      }
->
-  <span
-    className=
-        ms-StackItem
-        {
-          -moz-osx-font-smoothing: grayscale;
-          -webkit-font-smoothing: antialiased;
-          flex-shrink: 0;
-          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-          font-size: 14px;
-          font-weight: 400;
-          height: auto;
-          width: auto;
-        }
-  >
-    Item 1
-  </span>
-  <span
-    className=
-        ms-StackItem
-        {
-          -moz-osx-font-smoothing: grayscale;
-          -webkit-font-smoothing: antialiased;
-          flex-shrink: 0;
-          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-          font-size: 14px;
-          font-weight: 400;
-          height: auto;
-          width: auto;
-        }
-  >
-    Item 2
-  </span>
-</div>
-`;
-
-exports[`Stack renders Stack with a gap correctly 1`] = `
-<div
-  className=
-
-      {
-        -moz-osx-font-smoothing: grayscale;
-        -webkit-font-smoothing: antialiased;
-        box-sizing: border-box;
-        display: flex;
-        flex-direction: column;
-        flex-wrap: nowrap;
-        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-        font-size: 14px;
-        font-weight: 400;
-        height: auto;
-        width: auto;
-      }
-      & > * {
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-      & > *:not(:first-child) {
-        margin-top: 0px;
-      }
-      & > *:not(.ms-StackItem) {
-        flex-shrink: 0;
-      }
->
-  <span
-    className=
-        ms-StackItem
-        {
-          -moz-osx-font-smoothing: grayscale;
-          -webkit-font-smoothing: antialiased;
-          flex-shrink: 0;
-          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-          font-size: 14px;
-          font-weight: 400;
-          height: auto;
-          width: auto;
-        }
-  >
-    Item 1
-  </span>
-  <span
-    className=
-        ms-StackItem
-        {
-          -moz-osx-font-smoothing: grayscale;
-          -webkit-font-smoothing: antialiased;
-          flex-shrink: 0;
-          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-          font-size: 14px;
-          font-weight: 400;
-          height: auto;
-          width: auto;
-        }
-  >
-    Item 2
-  </span>
-</div>
-`;
-
-exports[`Stack renders Stack with grow correctly 1`] = `
-<div
-  className=
-
-      {
-        -moz-osx-font-smoothing: grayscale;
-        -webkit-font-smoothing: antialiased;
-        box-sizing: border-box;
-        display: flex;
-        flex-direction: column;
-        flex-wrap: nowrap;
-        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-        font-size: 14px;
-        font-weight: 400;
-        height: auto;
-        width: auto;
-      }
-      & > * {
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-      & > *:not(:first-child) {
-        margin-top: 0px;
-      }
-      & > *:not(.ms-StackItem) {
-        flex-shrink: 0;
-      }
->
-  <div
-    className=
-
-        {
-          -moz-osx-font-smoothing: grayscale;
-          -webkit-font-smoothing: antialiased;
-          box-sizing: border-box;
-          display: flex;
-          flex-direction: column;
-          flex-grow: 5;
-          flex-wrap: nowrap;
-          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-          font-size: 14px;
-          font-weight: 400;
-          height: auto;
-          overflow: hidden;
-          width: auto;
-        }
-        & > * {
-          text-overflow: ellipsis;
-          white-space: nowrap;
-        }
-        & > *:not(:first-child) {
-          margin-top: 0px;
-        }
-        & > *:not(.ms-StackItem) {
-          flex-shrink: 0;
-        }
-  >
-    Item 1
-  </div>
-  <div
-    className=
-
-        {
-          -moz-osx-font-smoothing: grayscale;
-          -webkit-font-smoothing: antialiased;
-          box-sizing: border-box;
-          display: flex;
-          flex-direction: column;
-          flex-grow: 2;
-          flex-wrap: nowrap;
-          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-          font-size: 14px;
-          font-weight: 400;
-          height: auto;
-          overflow: hidden;
-          width: auto;
-        }
-        & > * {
-          text-overflow: ellipsis;
-          white-space: nowrap;
-        }
-        & > *:not(:first-child) {
-          margin-top: 0px;
-        }
-        & > *:not(.ms-StackItem) {
-          flex-shrink: 0;
-        }
-  >
-    Item 2
-  </div>
-  <div
-    className=
-
-        {
-          -moz-osx-font-smoothing: grayscale;
-          -webkit-font-smoothing: antialiased;
-          box-sizing: border-box;
-          display: flex;
-          flex-direction: column;
-          flex-grow: 1;
-          flex-wrap: nowrap;
-          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-          font-size: 14px;
-          font-weight: 400;
-          height: auto;
-          overflow: hidden;
-          width: auto;
-        }
-        & > * {
-          text-overflow: ellipsis;
-          white-space: nowrap;
-        }
-        & > *:not(:first-child) {
-          margin-top: 0px;
-        }
-        & > *:not(.ms-StackItem) {
-          flex-shrink: 0;
-        }
-  >
-    Item 3
-  </div>
-</div>
-`;
-
-exports[`Stack renders Stack with shrinking StackItems correctly 1`] = `
-<div
-  className=
-
-      {
-        -moz-osx-font-smoothing: grayscale;
-        -webkit-font-smoothing: antialiased;
-        box-sizing: border-box;
-        display: flex;
-        flex-direction: column;
-        flex-wrap: nowrap;
-        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-        font-size: 14px;
-        font-weight: 400;
-        height: auto;
-        width: auto;
-      }
-      & > * {
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-      & > *:not(:first-child) {
-        margin-top: 0px;
-      }
-      & > *:not(.ms-StackItem) {
-        flex-shrink: 1;
-      }
->
-  <span
-    className=
-        ms-StackItem
-        {
-          -moz-osx-font-smoothing: grayscale;
-          -webkit-font-smoothing: antialiased;
-          flex-shrink: 1;
-          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-          font-size: 14px;
-          font-weight: 400;
-          height: auto;
-          width: auto;
-        }
-  >
-    Item 1
-  </span>
-  <span
-    className=
-        ms-StackItem
-        {
-          -moz-osx-font-smoothing: grayscale;
-          -webkit-font-smoothing: antialiased;
-          flex-shrink: 1;
-          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-          font-size: 14px;
-          font-weight: 400;
-          height: auto;
-          width: auto;
-        }
-  >
-    Item 2
-  </span>
-</div>
-`;
-
-exports[`Stack renders Stack with vertical and horizontal alignment correctly 1`] = `
-<div
-  className=
-
-      {
-        -moz-osx-font-smoothing: grayscale;
-        -webkit-font-smoothing: antialiased;
-        align-items: flex-start;
-        box-sizing: border-box;
-        display: flex;
-        flex-direction: column;
-        flex-wrap: nowrap;
-        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-        font-size: 14px;
-        font-weight: 400;
-        height: auto;
-        justify-content: flex-end;
-        width: auto;
-      }
-      & > * {
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-      & > *:not(:first-child) {
-        margin-top: 0px;
-      }
-      & > *:not(.ms-StackItem) {
-        flex-shrink: 0;
-      }
->
-  <div>
-    Item 1
-  </div>
-  <div>
-    Item 2
-  </div>
-</div>
-`;
-
-exports[`Stack renders Stack with vertical and horizontal fill correctly 1`] = `
-<div
-  className=
-
-      {
-        -moz-osx-font-smoothing: grayscale;
-        -webkit-font-smoothing: antialiased;
-        box-sizing: border-box;
-        display: flex;
-        flex-direction: column;
-        flex-wrap: nowrap;
-        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-        font-size: 14px;
-        font-weight: 400;
-        height: 100%;
-        width: 100%;
-      }
-      & > * {
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-      & > *:not(:first-child) {
-        margin-top: 0px;
-      }
-      & > *:not(.ms-StackItem) {
-        flex-shrink: 0;
-      }
->
-  <div>
-    Item 1
-  </div>
-  <div>
-    Item 2
-  </div>
-</div>
-`;
-
-exports[`Stack renders horizontal Stack correctly 1`] = `
-<div
-  className=
-
-      {
-        -moz-osx-font-smoothing: grayscale;
-        -webkit-font-smoothing: antialiased;
-        box-sizing: border-box;
-        display: flex;
-        flex-direction: row;
-        flex-wrap: nowrap;
-        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-        font-size: 14px;
-        font-weight: 400;
-        height: auto;
-        width: auto;
-      }
-      & > * {
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-      & > *:not(:first-child) {
-        margin-left: 0px;
-      }
-      & > *:not(.ms-StackItem) {
-        flex-shrink: 0;
-      }
->
-  <div>
-    Item 1
-  </div>
-  <div>
-    Item 2
-  </div>
-</div>
-`;
-
-exports[`Stack renders vertical Stack correctly 1`] = `
-<div
-  className=
-
-      {
-        -moz-osx-font-smoothing: grayscale;
-        -webkit-font-smoothing: antialiased;
-        box-sizing: border-box;
-        display: flex;
-        flex-direction: column;
-        flex-wrap: nowrap;
-        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-        font-size: 14px;
-        font-weight: 400;
-        height: auto;
-        width: auto;
-      }
-      & > * {
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-      & > *:not(:first-child) {
-        margin-top: 0px;
-      }
-      & > *:not(.ms-StackItem) {
-        flex-shrink: 0;
-      }
->
-  <div>
-    Item 1
-  </div>
-  <div>
-    Item 2
-  </div>
-</div>
-`;
diff --git a/packages/experiments/src/components/Stack/index.ts b/packages/experiments/src/components/Stack/index.ts
deleted file mode 100644
index bdf42aaabb67d..0000000000000
--- a/packages/experiments/src/components/Stack/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export * from './StackItem/StackItem';
-export * from './VerticalStack/VerticalStack';
-export * from './VerticalStack/VerticalStack.types';
-export * from './HorizontalStack/HorizontalStack';
-export * from './HorizontalStack/HorizontalStack.types';
diff --git a/packages/experiments/src/components/Text/examples/Text.Ramp.Example.tsx b/packages/experiments/src/components/Text/examples/Text.Ramp.Example.tsx
index e471d859b99df..ddfe354404085 100644
--- a/packages/experiments/src/components/Text/examples/Text.Ramp.Example.tsx
+++ b/packages/experiments/src/components/Text/examples/Text.Ramp.Example.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { Text, VerticalStack } from '@uifabric/experiments';
+import { Stack } from 'office-ui-fabric-react';
+import { Text } from '@uifabric/experiments';
 import { IFontVariants, IFontSizes, IFontWeights, IFontFamilies, IStyle } from '@uifabric/experiments/lib/Styling';
 import { ISemanticTextColors, IPalette } from '@uifabric/experiments/lib/Styling';
 import { createStatelessComponent, IStyleableComponentProps, IStatelessComponent } from '@uifabric/experiments/lib/Foundation';
@@ -70,7 +71,7 @@ interface ITableProps extends IStyleableComponentProps<ITableProps, ITableStyles
 type ITableComponent = IStatelessComponent<ITableProps, ITableStyles>;
 
 const TableView: ITableComponent['view'] = props => (
-  <VerticalStack className={props.className} gap={20}>
+  <Stack className={props.className} gap={20}>
     <Text variant="h3">{props.title}</Text>
     <table className={props.classNames.table}>
       <thead>
@@ -84,7 +85,7 @@ const TableView: ITableComponent['view'] = props => (
       </thead>
       <tbody>{props.children}</tbody>
     </table>
-  </VerticalStack>
+  </Stack>
 );
 
 const Table = createStatelessComponent<ITableProps, ITableStyles>({
@@ -115,7 +116,7 @@ const TableRow: React.StatelessComponent<ITableRowProps> = (props: ITableRowProp
 );
 
 export const TextRampExample = () => (
-  <VerticalStack gap={40}>
+  <Stack gap={40}>
     <Text>Default text should render using the "default" variant.</Text>
 
     <Table title="Variants" headers={['Variant', 'Example', 'Usage']}>
@@ -191,5 +192,5 @@ export const TextRampExample = () => (
         />
       ))}
     </Table>
-  </VerticalStack>
+  </Stack>
 );
diff --git a/packages/experiments/src/demo/AppDefinition.tsx b/packages/experiments/src/demo/AppDefinition.tsx
index 587d1c80c5df6..d872f4772c778 100644
--- a/packages/experiments/src/demo/AppDefinition.tsx
+++ b/packages/experiments/src/demo/AppDefinition.tsx
@@ -52,12 +52,6 @@ export const AppDefinition: IAppDefinition = {
           name: 'FileTypeIcon',
           url: '#/examples/filetypeicon'
         },
-        {
-          component: require<any>('../components/Stack/HorizontalStack/HorizontalStackPage').HorizontalStackPage,
-          key: 'HorizontalStack',
-          name: 'HorizontalStack',
-          url: '#/examples/horizontalstack'
-        },
         {
           component: require<any>('../components/LayoutGroup/LayoutGroupPage').LayoutGroupPage,
           key: 'LayoutGroup',
@@ -118,12 +112,6 @@ export const AppDefinition: IAppDefinition = {
           name: 'Shimmer',
           url: '#/examples/shimmer'
         },
-        {
-          component: require<any>('../components/Stack/VerticalStack/VerticalStackPage').VerticalStackPage,
-          key: 'VerticalStack',
-          name: 'VerticalStack',
-          url: '#/examples/verticalstack'
-        },
         {
           component: require<any>('../components/VirtualizedList/VirtualizedListPage').VirtualizedListPage,
           key: 'VirtualizedList',
diff --git a/packages/experiments/src/index.ts b/packages/experiments/src/index.ts
index 232412250d646..0877b7f7d516b 100644
--- a/packages/experiments/src/index.ts
+++ b/packages/experiments/src/index.ts
@@ -7,7 +7,6 @@ export * from './LayoutGroup';
 export * from './Shimmer';
 export * from './Sidebar';
 export * from './Signals';
-export * from './Stack';
 export * from './StaticList';
 export * from './Text';
 export * from './Tile';
diff --git a/packages/experiments/src/theming/examples/Themes.tsx b/packages/experiments/src/theming/examples/Themes.tsx
index 734434efa2bdd..f2f5e56c37705 100644
--- a/packages/experiments/src/theming/examples/Themes.tsx
+++ b/packages/experiments/src/theming/examples/Themes.tsx
@@ -1,9 +1,9 @@
 import { getNeutralVariant, getSoftVariant, getStrongVariant } from '@uifabric/variants';
-import { IHorizontalStackComponent } from '@uifabric/experiments/lib/Stack';
+import { IStackComponent } from 'office-ui-fabric-react';
 
 import { createTheme, IPalette, ITheme, getTheme } from 'office-ui-fabric-react/lib/Styling';
 
-export const regionStyles: IHorizontalStackComponent['styles'] = props => ({
+export const regionStyles: IStackComponent['styles'] = props => ({
   root: {
     backgroundColor: props.theme.semanticColors.bodyBackground,
     color: props.theme.semanticColors.bodyText
diff --git a/packages/experiments/src/theming/examples/Theming.Schemes.Example.tsx b/packages/experiments/src/theming/examples/Theming.Schemes.Example.tsx
index 6eb142ded4889..59480d1aac843 100644
--- a/packages/experiments/src/theming/examples/Theming.Schemes.Example.tsx
+++ b/packages/experiments/src/theming/examples/Theming.Schemes.Example.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
 
-import { CommandBar, Customizer, Toggle } from 'office-ui-fabric-react';
+import { CommandBar, Customizer, Stack, Toggle } from 'office-ui-fabric-react';
 import { farItems, items, overflowItems } from 'office-ui-fabric-react/lib/components/CommandBar/examples/data';
-import { HorizontalStack, Text, VerticalStack } from '@uifabric/experiments';
+import { Text } from '@uifabric/experiments';
 
 // tslint:disable:max-line-length
 import { CollapsibleSectionRecursiveExample } from '@uifabric/experiments/lib/components/CollapsibleSection/examples/CollapsibleSection.Recursive.Example';
@@ -42,54 +42,54 @@ export class ThemingExample extends React.Component<{}, IThemingExampleState> {
     // TODO: Even though this styles function is the same for all regions, it has to be provided whenever the scheme
     //        is changed to apply the new semanticColors. Is this the best way we can do this?
     return (
-      <HorizontalStack gap={10}>
-        <HorizontalStack.Item grow={true} styles={{ root: { width: '33%', maxWidth: '33%' } }}>
+      <Stack horizontal gap={10}>
+        <Stack.Item grow={true} styles={{ root: { width: '33%', maxWidth: '33%' } }}>
           <ThemeProvider scheme={sideScheme}>
-            <VerticalStack styles={regionStyles} gap={10} padding={5}>
+            <Stack styles={regionStyles} gap={10} padding={5}>
               <Text weight="bold">{sideCaption}</Text>
               <Toggle offText={sideCaption} onText={sideCaption} onChange={this.toggleSide} />
               <CollapsibleSectionRecursiveExample />
-            </VerticalStack>
+            </Stack>
           </ThemeProvider>
-        </HorizontalStack.Item>
-        <HorizontalStack.Item grow={true} styles={{ root: { height: 'auto' } }}>
-          <VerticalStack grow={true} fillVertical={true}>
+        </Stack.Item>
+        <Stack.Item grow={true} styles={{ root: { height: 'auto' } }}>
+          <Stack grow={true} fillVertical={true}>
             <ThemeProvider scheme={topScheme}>
-              <VerticalStack styles={regionStyles} gap={10} padding={5}>
-                <HorizontalStack horizontalAlign="space-between">
+              <Stack styles={regionStyles} gap={10} padding={5}>
+                <Stack horizontal horizontalAlignment="space-between">
                   <Text weight="bold">{topCaption}</Text>
                   <Toggle offText={topCaption} onText={topCaption} onChange={this.toggleTop} />
-                </HorizontalStack>
+                </Stack>
                 <CommandBar items={items} overflowItems={overflowItems} farItems={farItems} />
-              </VerticalStack>
+              </Stack>
             </ThemeProvider>
             <ThemeProvider scheme={bodyScheme}>
-              <VerticalStack styles={regionStyles} fillVertical={true} padding={5}>
-                <HorizontalStack horizontalAlign="space-between">
+              <Stack styles={regionStyles} fillVertical={true} padding={5}>
+                <Stack horizontal horizontalAlignment="space-between">
                   <Text weight="bold">{bodyCaption}</Text>
                   <Toggle offText={bodyCaption} onText={bodyCaption} onChange={this.toggleBody} />
-                </HorizontalStack>
+                </Stack>
                 <ThemeProvider scheme="default">
-                  <VerticalStack.Item>
+                  <Stack.Item>
                     <DialogExample buttonText="Default Theme" />
-                  </VerticalStack.Item>
+                  </Stack.Item>
                 </ThemeProvider>
                 <ThemeProvider scheme="strong">
-                  <VerticalStack.Item>
+                  <Stack.Item>
                     <DialogExample buttonText="Strong Scheme" />
-                  </VerticalStack.Item>
+                  </Stack.Item>
                 </ThemeProvider>
                 <ThemeProvider scheme="soft">
-                  <VerticalStack.Item>
+                  <Stack.Item>
                     <DialogExample buttonText="Soft Scheme" />
-                  </VerticalStack.Item>
+                  </Stack.Item>
                 </ThemeProvider>
                 <DialogExample buttonText="Inherited Scheme" />
-              </VerticalStack>
+              </Stack>
             </ThemeProvider>
-          </VerticalStack>
-        </HorizontalStack.Item>
-      </HorizontalStack>
+          </Stack>
+        </Stack.Item>
+      </Stack>
     );
   }
 
diff --git a/packages/office-ui-fabric-react/etc/office-ui-fabric-react.api.ts b/packages/office-ui-fabric-react/etc/office-ui-fabric-react.api.ts
index c6a87fc3ae3aa..6f9095878d777 100644
--- a/packages/office-ui-fabric-react/etc/office-ui-fabric-react.api.ts
+++ b/packages/office-ui-fabric-react/etc/office-ui-fabric-react.api.ts
@@ -10365,6 +10365,33 @@ interface ISpinnerStyles {
 // @public (undocumented)
 export function isRelativeUrl(url: string): boolean;
 
+// @public (undocumented)
+interface IStackProps extends IStyleableComponentProps<IStackProps, IStackStyles>, React.HTMLAttributes<HTMLElement> {
+  as?: string | React.ReactType<IStackProps>;
+  className?: string;
+  fillHorizontal?: boolean;
+  fillVertical?: boolean;
+  gap?: number | string;
+  grow?: boolean | number | 'inherit' | 'initial' | 'unset';
+  horizontal?: boolean;
+  horizontalAlignment?: Alignment;
+  maxHeight?: number | string;
+  maxWidth?: number | string;
+  padding?: number | string;
+  shrinkItems?: boolean;
+  style?: React.CSSProperties;
+  styles?: IStylesProp<IStackProps, IStackStyles>;
+  verticalAlignment?: 'top' | 'bottom' | Alignment;
+  verticalGap?: number | string;
+  wrap?: boolean;
+}
+
+// @public (undocumented)
+interface IStackStyles {
+  inner: IStyle;
+  root: IStyle;
+}
+
 // @public (undocumented)
 interface IStickyContext {
   // (undocumented)
@@ -12620,6 +12647,10 @@ module ZIndexes {
 // WARNING: Unsupported export: ISliderStyleProps
 // WARNING: Unsupported export: Spinner
 // WARNING: Unsupported export: SpinnerLabelPosition
+// WARNING: Unsupported export: StackItem
+// WARNING: Unsupported export: Stack
+// WARNING: Unsupported export: Alignment
+// WARNING: Unsupported export: IStackComponent
 // WARNING: Unsupported export: AnimationClassNames
 // WARNING: Unsupported export: FontClassNames
 // WARNING: Unsupported export: ColorClassNames
diff --git a/packages/office-ui-fabric-react/package.json b/packages/office-ui-fabric-react/package.json
index 91b9b701baf67..74c40131f78c1 100644
--- a/packages/office-ui-fabric-react/package.json
+++ b/packages/office-ui-fabric-react/package.json
@@ -62,6 +62,7 @@
   },
   "dependencies": {
     "@microsoft/load-themed-styles": "^1.7.13",
+    "@uifabric/foundation": ">=0.5.7 <1.0.0",
     "@uifabric/icons": ">=6.3.0 <7.0.0",
     "@uifabric/merge-styles": ">=6.15.0 <7.0.0",
     "@uifabric/set-version": ">=1.1.3 <2.0.0",
diff --git a/packages/office-ui-fabric-react/src/Foundation.ts b/packages/office-ui-fabric-react/src/Foundation.ts
new file mode 100644
index 0000000000000..ecf9a04a5503a
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/Foundation.ts
@@ -0,0 +1,147 @@
+import {
+  createComponent as foundationCreateComponent,
+  createStatelessComponent as foundationCreateStatelessComponent,
+  IComponent,
+  IStateComponentType,
+  IStatelessComponent,
+  IStyleableComponentProps,
+  IStylesFunction,
+  IStylesProp,
+  IComponentProviders,
+  IThemeProviderProps,
+  IThemeProviders,
+  IViewComponent,
+  themeProvider
+} from '@uifabric/foundation';
+export { IStateComponentProps } from '@uifabric/foundation';
+import { getThemedContext, IProcessedStyleSet, ISchemeNames, IStyleSet, ITheme, mergeStyleSets } from './Styling';
+import { Customizations, Customizer, CustomizerContext, ICustomizerContext, ICustomizerProps } from './Utilities';
+
+// This module centralizes Foundation interaction for use throughout this package. These convenience types automatically
+//  inject types that are global for all of OUFR, such as ITheme and IProcessedStyleSet.
+
+/**
+ * Helper extension for declaring common props for styleable components.
+ * If these props are present, they will automatically be used by Foundation when applying theming and styling.
+ */
+export type IStyleableComponentProps<TViewProps, TStyleSet> = IStyleableComponentProps<TViewProps, TStyleSet, ITheme, ISchemeNames>;
+
+/**
+ * Styles functions that take in view props and foundation supplied properties for processing.
+ * This type should rarely need to be used directly. In most cases using IComponent and lookup types should suffice.
+ */
+export type IStylesFunction<TViewProps, TStyleSet> = IStylesFunction<TViewProps, TStyleSet, ITheme>;
+
+/**
+ * Styles can be a function or an object taking in TViewProps for processing.
+ * This type should rarely need to be used directly. In most cases using IComponent and lookup types should suffice.
+ */
+export type IStylesProp<TViewProps, TStyleSet> = IStylesProp<TViewProps, TStyleSet, ITheme>;
+
+/**
+ * Enforce props contract on state components, including the view prop and its shape.
+ * Required properties for state components.
+ */
+export type IStateComponentType<TComponentProps, TViewProps, TStyleSet extends IStyleSet<TStyleSet>> = IStateComponentType<
+  TComponentProps,
+  TViewProps
+>;
+
+/**
+ * A helper type for defining view components, including its properties.
+ * This type should rarely need to be used directly. In most cases using IComponent and lookup types should suffice.
+ */
+export type IViewComponent<TViewProps, TStyleSet extends IStyleSet<TStyleSet>> = IViewComponent<TViewProps, IProcessedStyleSet<TStyleSet>>;
+
+/**
+ * Primary type for defining stateful components.
+ */
+export type IComponent<TComponentProps, TViewProps, TStyleSet extends IStyleSet<TStyleSet>, TStatics = {}> = IComponent<
+  TComponentProps,
+  TViewProps,
+  TStyleSet,
+  IProcessedStyleSet<TStyleSet>,
+  ITheme,
+  TStatics
+>;
+
+/**
+ * Primary type for defining stateless components.
+ */
+export type IStatelessComponent<TComponentProps, TStyleSet extends IStyleSet<TStyleSet>, TStatics = {}> = IStatelessComponent<
+  TComponentProps,
+  TStyleSet,
+  IProcessedStyleSet<TStyleSet>,
+  ITheme,
+  TStatics
+>;
+
+// tslint:disable-next-line:no-any
+const providers: IComponentProviders<any, any, any, ICustomizerContext, ITheme, ISchemeNames> = {
+  mergeStyleSets,
+  getCustomizations,
+  CustomizerContext
+};
+
+const themeProviders: IThemeProviders<ICustomizerContext, ITheme, ISchemeNames, ICustomizerProps> = {
+  getThemedContext,
+  CustomizerComponent: Customizer
+};
+
+/**
+ * A helper for Foundation's createComponent that automatically passes in constant types.
+ * See Foundation's createComponent for more detail.
+ * @param {IComponent} component
+ */
+export function createStatelessComponent<TComponentProps, TStyleSet extends IStyleSet<TStyleSet>, TStatics = {}>(
+  component: IStatelessComponent<TComponentProps, TStyleSet, IProcessedStyleSet<TStyleSet>, ITheme, TStatics>
+): React.StatelessComponent<TComponentProps> & TStatics {
+  return foundationCreateStatelessComponent<
+    TComponentProps,
+    TStyleSet,
+    IProcessedStyleSet<TStyleSet>,
+    ICustomizerContext,
+    ITheme,
+    ISchemeNames,
+    TStatics
+  >(component, providers);
+}
+
+/**
+ * A helper for Foundation's createComponent that automatically passes in constant types.
+ * See Foundation's createComponent for more detail.
+ * @param {IComponent} component
+ * @param {IStateComponent} state
+ */
+export function createComponent<TComponentProps, TViewProps, TStyleSet extends IStyleSet<TStyleSet>, TStatics = {}>(
+  component: IComponent<TComponentProps, TViewProps, TStyleSet, IProcessedStyleSet<TStyleSet>, ITheme, TStatics>
+): React.StatelessComponent<TComponentProps> & TStatics {
+  return foundationCreateComponent<
+    TComponentProps,
+    TViewProps,
+    TStyleSet,
+    IProcessedStyleSet<TStyleSet>,
+    ICustomizerContext,
+    ITheme,
+    ISchemeNames,
+    TStatics
+  >(component, providers);
+}
+
+export const ThemeProvider: React.StatelessComponent<IThemeProviderProps<ISchemeNames, ITheme>> = themeProvider<
+  ICustomizerContext,
+  ITheme,
+  ISchemeNames,
+  ICustomizerProps
+>(themeProviders);
+
+function getCustomizations<TViewProps, TStyleSet>(
+  displayName: string,
+  context: ICustomizerContext,
+  fields?: string[]
+): IStyleableComponentProps<TViewProps, TStyleSet, ITheme, ISchemeNames> {
+  // TODO: do we want field props? should fields be part of IComponent and used here?
+  // TODO: should we centrally define DefaultFields? (not exported from styling)
+  const DefaultFields = ['theme', 'styles', 'styleVariables'];
+  return Customizations.getSettings(fields || DefaultFields, displayName, context.customizations);
+}
diff --git a/packages/experiments/src/Stack.ts b/packages/office-ui-fabric-react/src/Stack.ts
similarity index 100%
rename from packages/experiments/src/Stack.ts
rename to packages/office-ui-fabric-react/src/Stack.ts
diff --git a/packages/office-ui-fabric-react/src/components/ComponentConformance.test.tsx b/packages/office-ui-fabric-react/src/components/ComponentConformance.test.tsx
index 3710dc3388847..fa81a1606a0be 100644
--- a/packages/office-ui-fabric-react/src/components/ComponentConformance.test.tsx
+++ b/packages/office-ui-fabric-react/src/components/ComponentConformance.test.tsx
@@ -70,6 +70,9 @@ const requiredProps: { [key: string]: any } = {
     onRenderItem: () => <div key="TestItem" />,
     selectedItems: ['TestItem']
   },
+  StackItem: {
+    children: ['TestChild']
+  },
   Suggestions: {
     suggestions: []
   },
diff --git a/packages/office-ui-fabric-react/src/components/Stack/Stack.checklist.ts b/packages/office-ui-fabric-react/src/components/Stack/Stack.checklist.ts
new file mode 100644
index 0000000000000..f2f06b6fd185b
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Stack/Stack.checklist.ts
@@ -0,0 +1,9 @@
+import { ChecklistStatus } from '../../common/DocPage.types';
+
+export const StackStatus = {
+  keyboardAccessibilitySupport: ChecklistStatus.unknown,
+  markupSupport: ChecklistStatus.unknown,
+  highContrastSupport: ChecklistStatus.unknown,
+  rtlSupport: ChecklistStatus.unknown,
+  testCoverage: ChecklistStatus.good
+};
diff --git a/packages/office-ui-fabric-react/src/components/Stack/Stack.doc.tsx b/packages/office-ui-fabric-react/src/components/Stack/Stack.doc.tsx
new file mode 100644
index 0000000000000..8946033fcc8f4
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Stack/Stack.doc.tsx
@@ -0,0 +1,224 @@
+import * as React from 'react';
+import { IDocPageProps } from '../../common/DocPage.types';
+import { StackStatus } from './Stack.checklist';
+
+// Vertical stack examples
+import { VerticalStackBasicExample } from './examples/Stack.Vertical.Basic.Example';
+const VerticalStackBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Stack/examples/Stack.Vertical.Basic.Example.tsx') as string;
+const VerticalStackBasicExampleCodepen = require('!raw-loader!office-ui-fabric-react/lib/codepen/components/Stack/Stack.Vertical.Basic.Example.Codepen.txt') as string;
+
+import { VerticalStackSpacingExample } from './examples/Stack.Vertical.Spacing.Example';
+const VerticalStackSpacingExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Stack/examples/Stack.Vertical.Spacing.Example.tsx') as string;
+const VerticalStackSpacingExampleCodepen = require('!raw-loader!office-ui-fabric-react/lib/codepen/components/Stack/Stack.Vertical.Spacing.Example.Codepen.txt') as string;
+
+import { VerticalStackGrowExample } from './examples/Stack.Vertical.Grow.Example';
+const VerticalStackGrowExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Stack/examples/Stack.Vertical.Grow.Example.tsx') as string;
+const VerticalStackGrowExampleCodepen = require('!raw-loader!office-ui-fabric-react/lib/codepen/components/Stack/Stack.Vertical.Grow.Example.Codepen.txt') as string;
+
+import { VerticalStackShrinkExample } from './examples/Stack.Vertical.Shrink.Example';
+const VerticalStackShrinkExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Stack/examples/Stack.Vertical.Shrink.Example.tsx') as string;
+const VerticalStackShrinkExampleCodepen = require('!raw-loader!office-ui-fabric-react/lib/codepen/components/Stack/Stack.Vertical.Shrink.Example.Codepen.txt') as string;
+
+import { VerticalStackWrapExample } from './examples/Stack.Vertical.Wrap.Example';
+const VerticalStackWrapExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Stack/examples/Stack.Vertical.Wrap.Example.tsx') as string;
+const VerticalStackWrapExampleCodepen = require('!raw-loader!office-ui-fabric-react/lib/codepen/components/Stack/Stack.Vertical.Wrap.Example.Codepen.txt') as string;
+
+import { VerticalStackWrapAdvancedExample } from './examples/Stack.Vertical.WrapAdvanced.Example';
+const VerticalStackWrapAdvancedExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Stack/examples/Stack.Vertical.WrapAdvanced.Example.tsx') as string;
+const VerticalStackWrapAdvancedExampleCodepen = require('!raw-loader!office-ui-fabric-react/lib/codepen/components/Stack/Stack.Vertical.WrapAdvanced.Example.Codepen.txt') as string;
+
+import { VerticalStackWrapNestedExample } from './examples/Stack.Vertical.WrapNested.Example';
+const VerticalStackWrapNestedExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Stack/examples/Stack.Vertical.WrapNested.Example.tsx') as string;
+const VerticalStackWrapNestedExampleCodepen = require('!raw-loader!office-ui-fabric-react/lib/codepen/components/Stack/Stack.Vertical.WrapNested.Example.Codepen.txt') as string;
+
+import { VerticalStackVerticalAlignExample } from './examples/Stack.Vertical.VerticalAlign.Example';
+const VerticalStackVerticalAlignExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Stack/examples/Stack.Vertical.VerticalAlign.Example.tsx') as string;
+const VerticalStackVerticalAlignExampleCodepen = require('!raw-loader!office-ui-fabric-react/lib/codepen/components/Stack/Stack.Vertical.VerticalAlign.Example.Codepen.txt') as string;
+
+import { VerticalStackHorizontalAlignExample } from './examples/Stack.Vertical.HorizontalAlign.Example';
+const VerticalStackHorizontalAlignExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Stack/examples/Stack.Vertical.HorizontalAlign.Example.tsx') as string;
+const VerticalStackHorizontalAlignExampleCodepen = require('!raw-loader!office-ui-fabric-react/lib/codepen/components/Stack/Stack.Vertical.HorizontalAlign.Example.Codepen.txt') as string;
+
+import { VerticalStackConfigureExample } from './examples/Stack.Vertical.Configure.Example';
+const VerticalStackConfigureExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Stack/examples/Stack.Vertical.Configure.Example.tsx') as string;
+const VerticalStackConfigureExampleCodepen = require('!raw-loader!office-ui-fabric-react/lib/codepen/components/Stack/Stack.Vertical.Configure.Example.Codepen.txt') as string;
+
+// Horizontal stack examples
+import { HorizontalStackBasicExample } from './examples/Stack.Horizontal.Basic.Example';
+const HorizontalStackBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Stack/examples/Stack.Horizontal.Basic.Example.tsx') as string;
+const HorizontalStackBasicExampleCodepen = require('!raw-loader!office-ui-fabric-react/lib/codepen/components/Stack/Stack.Horizontal.Basic.Example.Codepen.txt') as string;
+
+import { HorizontalStackSpacingExample } from './examples/Stack.Horizontal.Spacing.Example';
+const HorizontalStackSpacingExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Stack/examples/Stack.Horizontal.Spacing.Example.tsx') as string;
+const HorizontalStackSpacingExampleCodepen = require('!raw-loader!office-ui-fabric-react/lib/codepen/components/Stack/Stack.Horizontal.Spacing.Example.Codepen.txt') as string;
+
+import { HorizontalStackGrowExample } from './examples/Stack.Horizontal.Grow.Example';
+const HorizontalStackGrowExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Stack/examples/Stack.Horizontal.Grow.Example.tsx') as string;
+const HorizontalStackGrowExampleCodepen = require('!raw-loader!office-ui-fabric-react/lib/codepen/components/Stack/Stack.Horizontal.Grow.Example.Codepen.txt') as string;
+
+import { HorizontalStackShrinkExample } from './examples/Stack.Horizontal.Shrink.Example';
+const HorizontalStackShrinkExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Stack/examples/Stack.Horizontal.Shrink.Example.tsx') as string;
+const HorizontalStackShrinkExampleCodepen = require('!raw-loader!office-ui-fabric-react/lib/codepen/components/Stack/Stack.Horizontal.Shrink.Example.Codepen.txt') as string;
+
+import { HorizontalStackWrapExample } from './examples/Stack.Horizontal.Wrap.Example';
+const HorizontalStackWrapExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Stack/examples/Stack.Horizontal.Wrap.Example.tsx') as string;
+const HorizontalStackWrapExampleCodepen = require('!raw-loader!office-ui-fabric-react/lib/codepen/components/Stack/Stack.Horizontal.Wrap.Example.Codepen.txt') as string;
+
+import { HorizontalStackWrapAdvancedExample } from './examples/Stack.Horizontal.WrapAdvanced.Example';
+const HorizontalStackWrapAdvancedExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Stack/examples/Stack.Horizontal.WrapAdvanced.Example.tsx') as string;
+const HorizontalStackWrapAdvancedExampleCodepen = require('!raw-loader!office-ui-fabric-react/lib/codepen/components/Stack/Stack.Horizontal.WrapAdvanced.Example.Codepen.txt') as string;
+
+import { HorizontalStackWrapNestedExample } from './examples/Stack.Horizontal.WrapNested.Example';
+const HorizontalStackWrapNestedExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Stack/examples/Stack.Horizontal.WrapNested.Example.tsx') as string;
+const HorizontalStackWrapNestedExampleCodepen = require('!raw-loader!office-ui-fabric-react/lib/codepen/components/Stack/Stack.Horizontal.WrapNested.Example.Codepen.txt') as string;
+
+import { HorizontalStackHorizontalAlignExample } from './examples/Stack.Horizontal.HorizontalAlign.Example';
+const HorizontalStackHorizontalAlignExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Stack/examples/Stack.Horizontal.HorizontalAlign.Example.tsx') as string;
+const HorizontalStackHorizontalAlignExampleCodepen = require('!raw-loader!office-ui-fabric-react/lib/codepen/components/Stack/Stack.Horizontal.HorizontalAlign.Example.Codepen.txt') as string;
+
+import { HorizontalStackVerticalAlignExample } from './examples/Stack.Horizontal.VerticalAlign.Example';
+const HorizontalStackVerticalAlignExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Stack/examples/Stack.Horizontal.VerticalAlign.Example.tsx') as string;
+const HorizontalStackVerticalAlignExampleCodepen = require('!raw-loader!office-ui-fabric-react/lib/codepen/components/Stack/Stack.Horizontal.VerticalAlign.Example.Codepen.txt') as string;
+
+import { HorizontalStackConfigureExample } from './examples/Stack.Horizontal.Configure.Example';
+const HorizontalStackConfigureExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Stack/examples/Stack.Horizontal.Configure.Example.tsx') as string;
+const HorizontalStackConfigureExampleCodepen = require('!raw-loader!office-ui-fabric-react/lib/codepen/components/Stack/Stack.Horizontal.Configure.Example.Codepen.txt') as string;
+
+export const StackPageProps: IDocPageProps = {
+  title: 'Stack',
+  componentName: 'StackPageProps',
+  componentUrl: 'https://github.com/OfficeDev/office-ui-fabric-react/tree/master/packages/office-ui-fabric-react/src/components/Stack',
+  componentStatus: StackStatus,
+  examples: [
+    {
+      title: 'Basic Vertical Stack',
+      code: VerticalStackBasicExampleCode,
+      view: <VerticalStackBasicExample />,
+      codepenJS: VerticalStackBasicExampleCodepen
+    },
+    {
+      title: 'Vertical Stack - Gap and Padding Sizes',
+      code: VerticalStackSpacingExampleCode,
+      view: <VerticalStackSpacingExample />,
+      codepenJS: VerticalStackSpacingExampleCodepen
+    },
+    {
+      title: 'Vertical Stack - Growing Items',
+      code: VerticalStackGrowExampleCode,
+      view: <VerticalStackGrowExample />,
+      codepenJS: VerticalStackGrowExampleCodepen
+    },
+    {
+      title: 'Vertical Stack - Shrinking Items',
+      code: VerticalStackShrinkExampleCode,
+      view: <VerticalStackShrinkExample />,
+      codepenJS: VerticalStackShrinkExampleCodepen
+    },
+    {
+      title: 'Vertical Stack - Wrapping - Basic',
+      code: VerticalStackWrapExampleCode,
+      view: <VerticalStackWrapExample />,
+      codepenJS: VerticalStackWrapExampleCodepen
+    },
+    {
+      title: 'Vertical Stack - Wrapping - Advanced',
+      code: VerticalStackWrapAdvancedExampleCode,
+      view: <VerticalStackWrapAdvancedExample />,
+      codepenJS: VerticalStackWrapAdvancedExampleCodepen
+    },
+    {
+      title: 'Vertical Stack - Wrapping - Nested',
+      code: VerticalStackWrapNestedExampleCode,
+      view: <VerticalStackWrapNestedExample />,
+      codepenJS: VerticalStackWrapNestedExampleCodepen
+    },
+    {
+      title: 'Vertical Stack - Vertical Alignments',
+      code: VerticalStackVerticalAlignExampleCode,
+      view: <VerticalStackVerticalAlignExample />,
+      codepenJS: VerticalStackVerticalAlignExampleCodepen
+    },
+    {
+      title: 'Vertical Stack - Horizontal Alignments',
+      code: VerticalStackHorizontalAlignExampleCode,
+      view: <VerticalStackHorizontalAlignExample />,
+      codepenJS: VerticalStackHorizontalAlignExampleCodepen
+    },
+    {
+      title: 'Vertical Stack - Configure Properties',
+      code: VerticalStackConfigureExampleCode,
+      view: <VerticalStackConfigureExample />,
+      codepenJS: VerticalStackConfigureExampleCodepen
+    },
+    {
+      title: 'Basic Horizontal Stack',
+      code: HorizontalStackBasicExampleCode,
+      view: <HorizontalStackBasicExample />,
+      codepenJS: HorizontalStackBasicExampleCodepen
+    },
+    {
+      title: 'Horizontal Stack - Gap and Padding Sizes',
+      code: HorizontalStackSpacingExampleCode,
+      view: <HorizontalStackSpacingExample />,
+      codepenJS: HorizontalStackSpacingExampleCodepen
+    },
+    {
+      title: 'Horizontal Stack - Growing Items',
+      code: HorizontalStackGrowExampleCode,
+      view: <HorizontalStackGrowExample />,
+      codepenJS: HorizontalStackGrowExampleCodepen
+    },
+    {
+      title: 'Horizontal Stack - Shrinking Items',
+      code: HorizontalStackShrinkExampleCode,
+      view: <HorizontalStackShrinkExample />,
+      codepenJS: HorizontalStackShrinkExampleCodepen
+    },
+    {
+      title: 'Horizontal Stack - Wrapping - Basic',
+      code: HorizontalStackWrapExampleCode,
+      view: <HorizontalStackWrapExample />,
+      codepenJS: HorizontalStackWrapExampleCodepen
+    },
+    {
+      title: 'Horizontal Stack - Wrapping - Advanced',
+      code: HorizontalStackWrapAdvancedExampleCode,
+      view: <HorizontalStackWrapAdvancedExample />,
+      codepenJS: HorizontalStackWrapAdvancedExampleCodepen
+    },
+    {
+      title: 'Horizontal Stack - Wrapping - Nested',
+      code: HorizontalStackWrapNestedExampleCode,
+      view: <HorizontalStackWrapNestedExample />,
+      codepenJS: HorizontalStackWrapNestedExampleCodepen
+    },
+    {
+      title: 'Horizontal Stack - Horizontal Alignments',
+      code: HorizontalStackHorizontalAlignExampleCode,
+      view: <HorizontalStackHorizontalAlignExample />,
+      codepenJS: HorizontalStackHorizontalAlignExampleCodepen
+    },
+    {
+      title: 'Horizontal Stack - Vertical Alignments',
+      code: HorizontalStackVerticalAlignExampleCode,
+      view: <HorizontalStackVerticalAlignExample />,
+      codepenJS: HorizontalStackVerticalAlignExampleCodepen
+    },
+    {
+      title: 'Horizontal Stack - Configure Properties',
+      code: HorizontalStackConfigureExampleCode,
+      view: <HorizontalStackConfigureExample />,
+      codepenJS: HorizontalStackConfigureExampleCodepen
+    }
+  ],
+  propertiesTablesSources: [
+    require<string>('!raw-loader!office-ui-fabric-react/src/components/Stack/Stack.types.ts'),
+    require<string>('!raw-loader!office-ui-fabric-react/src/components/Stack/StackItem/StackItem.types.ts')
+  ],
+  overview: '',
+  bestPractices: '',
+  dos: '',
+  donts: '',
+  isHeaderVisible: true,
+  isFeedbackVisible: true
+};
diff --git a/packages/office-ui-fabric-react/src/components/Stack/Stack.styles.ts b/packages/office-ui-fabric-react/src/components/Stack/Stack.styles.ts
new file mode 100644
index 0000000000000..4ec49939b971f
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Stack/Stack.styles.ts
@@ -0,0 +1,209 @@
+import { IStackComponent, IStackStyles, IStackProps } from './Stack.types';
+import { getVerticalAlignment, parseGap, parsePadding } from './StackUtils';
+import { getGlobalClassNames } from '../../Styling';
+
+const nameMap: { [key: string]: string } = {
+  start: 'flex-start',
+  end: 'flex-end'
+};
+
+const GlobalClassNames = {
+  root: 'ms-Stack',
+  inner: 'ms-Stack-inner'
+};
+
+export const styles: IStackComponent['styles'] = props => {
+  const {
+    fillHorizontal,
+    fillVertical,
+    maxWidth,
+    maxHeight,
+    horizontal,
+    gap,
+    verticalGap,
+    grow,
+    wrap,
+    padding,
+    horizontalAlignment,
+    verticalAlignment,
+    shrinkItems,
+    theme,
+    className
+  } = props;
+
+  const classNames = getGlobalClassNames(GlobalClassNames, theme);
+
+  const vertAlignment = getVerticalAlignment(verticalAlignment);
+
+  let horiGap: IStackProps['gap'];
+  let vertGap: IStackProps['gap'];
+
+  horiGap = gap;
+  vertGap = verticalGap !== undefined ? verticalGap : gap;
+
+  const hGap = parseGap(horiGap, theme);
+  const vGap = parseGap(vertGap, theme);
+
+  const horizontalMargin = `${-0.5 * hGap.value}${hGap.unit}`;
+  const verticalMargin = `${-0.5 * vGap.value}${vGap.unit}`;
+
+  // styles to be applied to all direct children regardless of wrap or direction
+  const childStyles = {
+    whiteSpace: 'nowrap',
+    textOverflow: 'ellipsis'
+  };
+
+  // selectors to be applied regardless of wrap or direction
+  const commonSelectors = {
+    // flexShrink styles are applied by the StackItem
+    '> *:not(.ms-StackItem)': {
+      flexShrink: shrinkItems ? 1 : 0
+    }
+  };
+
+  if (wrap) {
+    return {
+      root: [
+        classNames.root,
+        {
+          maxWidth,
+          maxHeight,
+          width: fillHorizontal ? '100%' : 'auto',
+          overflow: 'visible'
+        },
+        horizontal && {
+          height: fillVertical ? '100%' : 'auto',
+          width: 'auto'
+        },
+        !horizontal && {
+          height: '100%'
+        },
+        className,
+        {
+          // not allowed to be overridden by className
+          // since this is necessary in order to prevent collapsing margins
+          display: 'inline-block'
+        }
+      ],
+
+      inner: [
+        classNames.inner,
+        {
+          display: 'flex',
+          flexWrap: 'wrap',
+          marginLeft: horizontalMargin,
+          marginRight: horizontalMargin,
+          marginTop: verticalMargin,
+          marginBottom: verticalMargin,
+          overflow: 'visible',
+          boxSizing: 'border-box',
+
+          selectors: {
+            '> *': {
+              margin: `${0.5 * vGap.value}${vGap.unit} ${0.5 * hGap.value}${hGap.unit}`,
+
+              ...childStyles
+            },
+            ...commonSelectors
+          }
+        },
+        horizontalAlignment && {
+          [horizontal ? 'justifyContent' : 'alignItems']: nameMap[horizontalAlignment] || horizontalAlignment
+        },
+        vertAlignment && {
+          [horizontal ? 'alignItems' : 'justifyContent']: nameMap[vertAlignment] || vertAlignment
+        },
+        horizontal && {
+          flexDirection: 'row',
+          width: fillHorizontal ? '100%' : 'auto',
+          maxWidth: '100vw',
+
+          // avoid unnecessary calc() calls if vertical gap is 0
+          height: fillVertical ? (vGap.value === 0 ? '100%' : `calc(100% + ${vGap.value}${vGap.unit})`) : 'auto',
+
+          selectors: {
+            '> *': {
+              maxWidth: hGap.value === 0 ? '100%' : `calc(100% - ${hGap.value}${hGap.unit})`
+            }
+          }
+        },
+        !horizontal && {
+          height: `calc(100% + ${vGap.value}${vGap.unit})`,
+          flexDirection: 'column',
+          justifyContent: 'start',
+          alignContent: 'end',
+          alignItems: 'start',
+          selectors: {
+            '> *': {
+              maxHeight: vGap.value === 0 ? '100%' : `calc(100% - ${vGap.value}${vGap.unit})`
+            }
+          }
+        }
+      ]
+    } as IStackStyles;
+  }
+
+  return {
+    root: [
+      classNames.root,
+      {
+        display: 'flex',
+        flexDirection: horizontal ? 'row' : 'column',
+        flexWrap: 'nowrap',
+        width: fillHorizontal && !wrap ? '100%' : 'auto',
+        height: fillVertical && !wrap ? '100%' : 'auto',
+        maxWidth,
+        maxHeight,
+        padding: parsePadding(padding, theme),
+        boxSizing: 'border-box'
+      },
+      grow && {
+        flexGrow: grow === true ? 1 : grow,
+        overflow: 'hidden'
+      },
+      horizontalAlignment && {
+        [horizontal ? 'justifyContent' : 'alignItems']: nameMap[horizontalAlignment] || horizontalAlignment
+      },
+      vertAlignment && {
+        [horizontal ? 'alignItems' : 'justifyContent']: nameMap[vertAlignment] || vertAlignment
+      },
+      wrap && {
+        maxWidth,
+        maxHeight,
+        width: fillHorizontal ? '100%' : 'auto',
+        height: fillVertical ? '100%' : 'auto',
+        overflow: 'visible',
+        selectors: {
+          '> *': {
+            margin: `${0.5 * vGap.value}${vGap.unit} ${0.5 * hGap.value}${hGap.unit}`,
+
+            // avoid unnecessary calc() calls if horizontal gap is 0
+            maxWidth: hGap.value === 0 ? '100%' : `calc(100% - ${hGap.value}${hGap.unit})`,
+
+            ...childStyles
+          },
+          ...commonSelectors
+        }
+      },
+      !wrap && {
+        selectors: {
+          '> *': childStyles,
+
+          // apply gap margin to every direct child except the first direct child
+          '> *:not(:first-child)': [
+            horizontal && {
+              marginLeft: `${hGap.value}${hGap.unit}`
+            },
+            !horizontal && {
+              marginTop: `${vGap.value}${vGap.unit}`
+            }
+          ],
+          ...commonSelectors
+        }
+      },
+      className
+    ]
+    // TODO: this cast may be hiding some potential issues with styling and name
+    //        lookups and should be removed
+  } as IStackStyles;
+};
diff --git a/packages/office-ui-fabric-react/src/components/Stack/Stack.test.tsx b/packages/office-ui-fabric-react/src/components/Stack/Stack.test.tsx
new file mode 100644
index 0000000000000..df79b3f9a44cb
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Stack/Stack.test.tsx
@@ -0,0 +1,265 @@
+import * as React from 'react';
+import { mount } from 'enzyme';
+import * as renderer from 'react-test-renderer';
+import { mergeStyles } from '@uifabric/merge-styles';
+
+import { Stack } from './Stack';
+
+const sampleClass = mergeStyles({
+  background: 'red'
+});
+
+describe('Stack', () => {
+  it('can handle having no children in vertical Stack', () => {
+    const createEmptyStack = () => {
+      mount(<Stack />);
+    };
+
+    expect(createEmptyStack).not.toThrow();
+  });
+
+  it('can handle having no children in horizontal Stack', () => {
+    const createEmptyStack = () => {
+      mount(<Stack horizontal />);
+    };
+
+    expect(createEmptyStack).not.toThrow();
+  });
+
+  it('renders default vertical Stack correctly', () => {
+    const component = renderer.create(
+      <Stack>
+        <div>Item 1</div>
+        <div>Item 2</div>
+      </Stack>
+    );
+    const tree = component.toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('renders default horizontal Stack correctly', () => {
+    const component = renderer.create(
+      <Stack horizontal>
+        <div>Item 1</div>
+        <div>Item 2</div>
+      </Stack>
+    );
+    const tree = component.toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('renders vertical Stack with vertical and horizontal alignment correctly', () => {
+    const component = renderer.create(
+      <Stack horizontalAlignment="start" verticalAlignment="end">
+        <div>Item 1</div>
+        <div>Item 2</div>
+      </Stack>
+    );
+    const tree = component.toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('renders horizontal Stack with vertical and horizontal alignment correctly', () => {
+    const component = renderer.create(
+      <Stack horizontal horizontalAlignment="start" verticalAlignment="end">
+        <div>Item 1</div>
+        <div>Item 2</div>
+      </Stack>
+    );
+    const tree = component.toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('renders vertical Stack with vertical and horizontal fill correctly', () => {
+    const component = renderer.create(
+      <Stack fillHorizontal fillVertical>
+        <div>Item 1</div>
+        <div>Item 2</div>
+      </Stack>
+    );
+    const tree = component.toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('renders horizontal Stack with vertical and horizontal fill correctly', () => {
+    const component = renderer.create(
+      <Stack horizontal fillHorizontal fillVertical>
+        <div>Item 1</div>
+        <div>Item 2</div>
+      </Stack>
+    );
+    const tree = component.toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('renders vertical Stack with grow correctly', () => {
+    const component = renderer.create(
+      <Stack>
+        <Stack grow={5}>Item 1</Stack>
+        <Stack grow={2}>Item 2</Stack>
+        <Stack grow>Item 3</Stack>
+      </Stack>
+    );
+    const tree = component.toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('renders horizontal Stack with grow correctly', () => {
+    const component = renderer.create(
+      <Stack horizontal>
+        <Stack horizontal grow={5}>
+          Item 1
+        </Stack>
+        <Stack horizontal grow={2}>
+          Item 2
+        </Stack>
+        <Stack horizontal grow>
+          Item 3
+        </Stack>
+      </Stack>
+    );
+    const tree = component.toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('renders vertical Stack with StackItems correctly', () => {
+    const component = renderer.create(
+      <Stack>
+        <Stack.Item>Item 1</Stack.Item>
+        <Stack.Item>Item 2</Stack.Item>
+      </Stack>
+    );
+    const tree = component.toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('renders horizontal Stack with StackItems correctly', () => {
+    const component = renderer.create(
+      <Stack horizontal>
+        <Stack.Item>Item 1</Stack.Item>
+        <Stack.Item>Item 2</Stack.Item>
+      </Stack>
+    );
+    const tree = component.toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('renders vertical Stack with a gap correctly', () => {
+    const component = renderer.create(
+      <Stack gap={10}>
+        <Stack.Item>Item 1</Stack.Item>
+        <Stack.Item>Item 2</Stack.Item>
+      </Stack>
+    );
+    const tree = component.toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('renders horizontal Stack with a gap correctly', () => {
+    const component = renderer.create(
+      <Stack horizontal gap={10}>
+        <Stack.Item>Item 1</Stack.Item>
+        <Stack.Item>Item 2</Stack.Item>
+      </Stack>
+    );
+    const tree = component.toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('renders vertical Stack with shrinking StackItems correctly', () => {
+    const component = renderer.create(
+      <Stack shrinkItems>
+        <Stack.Item>Item 1</Stack.Item>
+        <Stack.Item>Item 2</Stack.Item>
+      </Stack>
+    );
+    const tree = component.toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('renders horizontal Stack with shrinking StackItems correctly', () => {
+    const component = renderer.create(
+      <Stack horizontal shrinkItems>
+        <Stack.Item>Item 1</Stack.Item>
+        <Stack.Item>Item 2</Stack.Item>
+      </Stack>
+    );
+    const tree = component.toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('renders vertical Stack with shrinking StackItems correctly', () => {
+    const component = renderer.create(
+      <Stack shrinkItems>
+        <Stack.Item>Item 1</Stack.Item>
+        <Stack.Item preventShrink>Item 2</Stack.Item>
+      </Stack>
+    );
+    const tree = component.toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('renders horizontal Stack with shrinking StackItems correctly', () => {
+    const component = renderer.create(
+      <Stack horizontal shrinkItems>
+        <Stack.Item>Item 1</Stack.Item>
+        <Stack.Item preventShrink>Item 2</Stack.Item>
+      </Stack>
+    );
+    const tree = component.toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('renders vertical Stack with item alignments correctly', () => {
+    const component = renderer.create(
+      <Stack>
+        <Stack.Item align="auto">Auto</Stack.Item>
+        <Stack.Item align="stretch">Stretch</Stack.Item>
+        <Stack.Item align="baseline">Baseline</Stack.Item>
+        <Stack.Item align="start">Start</Stack.Item>
+        <Stack.Item align="center">Center</Stack.Item>
+        <Stack.Item align="end">End</Stack.Item>
+      </Stack>
+    );
+    const tree = component.toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('renders horizontal Stack item alignments correctly', () => {
+    const component = renderer.create(
+      <Stack horizontal>
+        <Stack.Item align="auto">Auto</Stack.Item>
+        <Stack.Item align="stretch">Stretch</Stack.Item>
+        <Stack.Item align="baseline">Baseline</Stack.Item>
+        <Stack.Item align="start">Start</Stack.Item>
+        <Stack.Item align="center">Center</Stack.Item>
+        <Stack.Item align="end">End</Stack.Item>
+      </Stack>
+    );
+    const tree = component.toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('renders wrapped horizontal Stack correctly', () => {
+    const component = renderer.create(
+      <Stack horizontal wrap>
+        <Stack.Item>1</Stack.Item>
+        <Stack.Item>2</Stack.Item>
+        <Stack.Item>3</Stack.Item>
+      </Stack>
+    );
+    const tree = component.toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('accepts custom className on child items', () => {
+    const component = renderer.create(
+      <Stack>
+        <Stack.Item className={sampleClass}>Item 1</Stack.Item>
+        <div className={sampleClass}>Item 2</div>
+      </Stack>
+    );
+    const tree = component.toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});
diff --git a/packages/experiments/src/components/Stack/Stack.tsx b/packages/office-ui-fabric-react/src/components/Stack/Stack.tsx
similarity index 93%
rename from packages/experiments/src/components/Stack/Stack.tsx
rename to packages/office-ui-fabric-react/src/components/Stack/Stack.tsx
index 1242402f073a6..2cb6222c9b804 100644
--- a/packages/experiments/src/components/Stack/Stack.tsx
+++ b/packages/office-ui-fabric-react/src/components/Stack/Stack.tsx
@@ -50,6 +50,16 @@ const view: IStackComponent['view'] = props => {
 
   const nativeProps = getNativeProps(rest, htmlElementProperties);
 
+  if (wrap) {
+    return (
+      <div className={classNames.root}>
+        <RootType {...nativeProps} className={classNames.inner}>
+          {stackChildren}
+        </RootType>
+      </div>
+    );
+  }
+
   return (
     <RootType {...nativeProps} className={classNames.root}>
       {stackChildren}
diff --git a/packages/experiments/src/components/Stack/Stack.types.ts b/packages/office-ui-fabric-react/src/components/Stack/Stack.types.ts
similarity index 76%
rename from packages/experiments/src/components/Stack/Stack.types.ts
rename to packages/office-ui-fabric-react/src/components/Stack/Stack.types.ts
index d777204a1622f..4ceb054d2a9c1 100644
--- a/packages/experiments/src/components/Stack/Stack.types.ts
+++ b/packages/office-ui-fabric-react/src/components/Stack/Stack.types.ts
@@ -1,23 +1,15 @@
 import { IStyle } from '../../Styling';
-import { IStatelessComponent, IStyleableComponentProps } from '../../Foundation';
+import { IStatelessComponent, IStyleableComponentProps, IStylesProp } from '../../Foundation';
 
 export type Alignment = 'start' | 'end' | 'center' | 'space-between' | 'space-around' | 'space-evenly' | 'baseline' | 'stretch';
 
-export type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
-
 export type IStackComponent = IStatelessComponent<IStackProps, IStackStyles>;
 
-// contains the members of IStackProps that are common to both VerticalStack and HorizontalStack
-export type IPartialStackProps = Omit<
-  IStackProps,
-  'verticalAlignment' | 'horizontalAlignment' | 'horizontal' | 'verticalGap' | 'horizontalGap' | 'wrap' | 'styles'
->;
-
 export interface IStackProps extends IStyleableComponentProps<IStackProps, IStackStyles>, React.HTMLAttributes<HTMLElement> {
   /**
    * How to render the Stack.
    */
-  as?: string | React.ReactType<IPartialStackProps>;
+  as?: string | React.ReactType<IStackProps>;
 
   /**
    * CSS class name used to style the Stack.
@@ -31,6 +23,7 @@ export interface IStackProps extends IStyleableComponentProps<IStackProps, IStac
 
   /**
    * Whether to render Stack child elements horizontally.
+   * @defaultvalue false
    */
   horizontal?: boolean;
 
@@ -42,7 +35,7 @@ export interface IStackProps extends IStyleableComponentProps<IStackProps, IStac
   /**
    * How to align Stack child elements vertically (along the y-axis).
    */
-  verticalAlignment?: Alignment;
+  verticalAlignment?: 'top' | 'bottom' | Alignment;
 
   /**
    * Whether the Stack should take up 100% of the width of its parent.
@@ -69,6 +62,11 @@ export interface IStackProps extends IStyleableComponentProps<IStackProps, IStac
    */
   gap?: number | string;
 
+  /**
+   * Vertical gap between Stack child elements.
+   */
+  verticalGap?: number | string;
+
   /**
    * Maximum width of the Stack.
    */
@@ -86,18 +84,14 @@ export interface IStackProps extends IStyleableComponentProps<IStackProps, IStac
 
   /**
    * Whether Stack children should wrap onto multiple rows (HorizontalStacks only).
+   * @defaultvalue false
    */
   wrap?: boolean;
 
   /**
-   * Horizontal gap between Stack child elements.
+   * Custom styles to apply to the Stack.
    */
-  horizontalGap?: number | string;
-
-  /**
-   * Vertical gap between Stack child elements.
-   */
-  verticalGap?: number | string;
+  styles?: IStylesProp<IStackProps, IStackStyles>;
 }
 
 export interface IStackStyles {
@@ -105,4 +99,9 @@ export interface IStackStyles {
    * Style set for the root element.
    */
   root: IStyle;
+
+  /**
+   * Style set for the inner element (only when the wrap property is true).
+   */
+  inner: IStyle;
 }
diff --git a/packages/experiments/src/components/Stack/StackItem/StackItem.styles.ts b/packages/office-ui-fabric-react/src/components/Stack/StackItem/StackItem.styles.ts
similarity index 100%
rename from packages/experiments/src/components/Stack/StackItem/StackItem.styles.ts
rename to packages/office-ui-fabric-react/src/components/Stack/StackItem/StackItem.styles.ts
diff --git a/packages/experiments/src/components/Stack/StackItem/StackItem.test.tsx b/packages/office-ui-fabric-react/src/components/Stack/StackItem/StackItem.test.tsx
similarity index 100%
rename from packages/experiments/src/components/Stack/StackItem/StackItem.test.tsx
rename to packages/office-ui-fabric-react/src/components/Stack/StackItem/StackItem.test.tsx
diff --git a/packages/experiments/src/components/Stack/StackItem/StackItem.tsx b/packages/office-ui-fabric-react/src/components/Stack/StackItem/StackItem.tsx
similarity index 100%
rename from packages/experiments/src/components/Stack/StackItem/StackItem.tsx
rename to packages/office-ui-fabric-react/src/components/Stack/StackItem/StackItem.tsx
diff --git a/packages/experiments/src/components/Stack/StackItem/StackItem.types.ts b/packages/office-ui-fabric-react/src/components/Stack/StackItem/StackItem.types.ts
similarity index 100%
rename from packages/experiments/src/components/Stack/StackItem/StackItem.types.ts
rename to packages/office-ui-fabric-react/src/components/Stack/StackItem/StackItem.types.ts
diff --git a/packages/experiments/src/components/Stack/StackUtils.test.ts b/packages/office-ui-fabric-react/src/components/Stack/StackUtils.test.ts
similarity index 85%
rename from packages/experiments/src/components/Stack/StackUtils.test.ts
rename to packages/office-ui-fabric-react/src/components/Stack/StackUtils.test.ts
index 88d402bcd6161..34506e3d3cfc4 100644
--- a/packages/experiments/src/components/Stack/StackUtils.test.ts
+++ b/packages/office-ui-fabric-react/src/components/Stack/StackUtils.test.ts
@@ -1,24 +1,7 @@
-import { getHorizontalAlignment, getVerticalAlignment, parseGap, parsePadding } from './StackUtils';
+import { getVerticalAlignment, parseGap, parsePadding } from './StackUtils';
 import { loadTheme, getTheme } from 'office-ui-fabric-react/lib/Styling';
 
 describe('StackUtils', () => {
-  describe('getHorizontalAlignment', () => {
-    it('returns start when given left', () => {
-      expect(getHorizontalAlignment('left')).toEqual('start');
-    });
-
-    it('returns end when given right', () => {
-      expect(getHorizontalAlignment('right')).toEqual('end');
-    });
-
-    it('returns its argument when given a value other than left and right', () => {
-      const args = ['center', 'space-around', 'space-between', 'space-evenly'];
-      args.forEach((arg: string) => {
-        expect(getHorizontalAlignment(arg)).toEqual(arg);
-      });
-    });
-  });
-
   describe('getVerticalAlignment', () => {
     it('returns start when given top', () => {
       expect(getVerticalAlignment('top')).toEqual('start');
diff --git a/packages/experiments/src/components/Stack/StackUtils.ts b/packages/office-ui-fabric-react/src/components/Stack/StackUtils.ts
similarity index 87%
rename from packages/experiments/src/components/Stack/StackUtils.ts
rename to packages/office-ui-fabric-react/src/components/Stack/StackUtils.ts
index e2db70f95213b..244940cd378d2 100644
--- a/packages/experiments/src/components/Stack/StackUtils.ts
+++ b/packages/office-ui-fabric-react/src/components/Stack/StackUtils.ts
@@ -5,21 +5,11 @@
 import { Alignment } from './Stack.types';
 import { ITheme } from '../../Styling';
 
-const horizontalAlignmentMap: { [key: string]: string } = {
-  left: 'start',
-  right: 'end'
-};
-
 const verticalAlignmentMap: { [key: string]: string } = {
   top: 'start',
   bottom: 'end'
 };
 
-// Converts the alignment expected by a HorizontalStack to an alignment expected by a Stack.
-export const getHorizontalAlignment = (alignment: string | undefined): Alignment => {
-  return (horizontalAlignmentMap[alignment!] || alignment) as Alignment;
-};
-
 // Converts the alignment expected by a VerticalStack to an alignment expected by a Stack.
 export const getVerticalAlignment = (alignment: string | undefined): Alignment => {
   return (verticalAlignmentMap[alignment!] || alignment) as Alignment;
diff --git a/packages/office-ui-fabric-react/src/components/Stack/__snapshots__/Stack.test.tsx.snap b/packages/office-ui-fabric-react/src/components/Stack/__snapshots__/Stack.test.tsx.snap
new file mode 100644
index 0000000000000..6dc67b73705c7
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Stack/__snapshots__/Stack.test.tsx.snap
@@ -0,0 +1,1270 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Stack accepts custom className on child items 1`] = `
+<div
+  className=
+      ms-Stack
+      {
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        flex-wrap: nowrap;
+        height: auto;
+        width: auto;
+      }
+      & > * {
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      & > *:not(:first-child) {
+        margin-top: 0px;
+      }
+      & > *:not(.ms-StackItem) {
+        flex-shrink: 0;
+      }
+>
+  <span
+    className=
+        ms-StackItem
+        {
+          -moz-osx-font-smoothing: grayscale;
+          -webkit-font-smoothing: antialiased;
+          background: red;
+          flex-shrink: 0;
+          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+          font-size: 14px;
+          font-weight: 400;
+          height: auto;
+          width: auto;
+        }
+  >
+    Item 1
+  </span>
+  <div
+    className=
+
+        {
+          background: red;
+        }
+  >
+    Item 2
+  </div>
+</div>
+`;
+
+exports[`Stack renders default horizontal Stack correctly 1`] = `
+<div
+  className=
+      ms-Stack
+      {
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        height: auto;
+        width: auto;
+      }
+      & > * {
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      & > *:not(:first-child) {
+        margin-left: 0px;
+      }
+      & > *:not(.ms-StackItem) {
+        flex-shrink: 0;
+      }
+>
+  <div>
+    Item 1
+  </div>
+  <div>
+    Item 2
+  </div>
+</div>
+`;
+
+exports[`Stack renders default vertical Stack correctly 1`] = `
+<div
+  className=
+      ms-Stack
+      {
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        flex-wrap: nowrap;
+        height: auto;
+        width: auto;
+      }
+      & > * {
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      & > *:not(:first-child) {
+        margin-top: 0px;
+      }
+      & > *:not(.ms-StackItem) {
+        flex-shrink: 0;
+      }
+>
+  <div>
+    Item 1
+  </div>
+  <div>
+    Item 2
+  </div>
+</div>
+`;
+
+exports[`Stack renders horizontal Stack item alignments correctly 1`] = `
+<div
+  className=
+      ms-Stack
+      {
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        height: auto;
+        width: auto;
+      }
+      & > * {
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      & > *:not(:first-child) {
+        margin-left: 0px;
+      }
+      & > *:not(.ms-StackItem) {
+        flex-shrink: 0;
+      }
+>
+  <span
+    className=
+        ms-StackItem
+        {
+          -moz-osx-font-smoothing: grayscale;
+          -webkit-font-smoothing: antialiased;
+          align-self: auto;
+          flex-shrink: 0;
+          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+          font-size: 14px;
+          font-weight: 400;
+          height: auto;
+          width: auto;
+        }
+  >
+    Auto
+  </span>
+  <span
+    className=
+        ms-StackItem
+        {
+          -moz-osx-font-smoothing: grayscale;
+          -webkit-font-smoothing: antialiased;
+          align-self: stretch;
+          flex-shrink: 0;
+          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+          font-size: 14px;
+          font-weight: 400;
+          height: auto;
+          width: auto;
+        }
+  >
+    Stretch
+  </span>
+  <span
+    className=
+        ms-StackItem
+        {
+          -moz-osx-font-smoothing: grayscale;
+          -webkit-font-smoothing: antialiased;
+          align-self: baseline;
+          flex-shrink: 0;
+          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+          font-size: 14px;
+          font-weight: 400;
+          height: auto;
+          width: auto;
+        }
+  >
+    Baseline
+  </span>
+  <span
+    className=
+        ms-StackItem
+        {
+          -moz-osx-font-smoothing: grayscale;
+          -webkit-font-smoothing: antialiased;
+          align-self: flex-start;
+          flex-shrink: 0;
+          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+          font-size: 14px;
+          font-weight: 400;
+          height: auto;
+          width: auto;
+        }
+  >
+    Start
+  </span>
+  <span
+    className=
+        ms-StackItem
+        {
+          -moz-osx-font-smoothing: grayscale;
+          -webkit-font-smoothing: antialiased;
+          align-self: center;
+          flex-shrink: 0;
+          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+          font-size: 14px;
+          font-weight: 400;
+          height: auto;
+          width: auto;
+        }
+  >
+    Center
+  </span>
+  <span
+    className=
+        ms-StackItem
+        {
+          -moz-osx-font-smoothing: grayscale;
+          -webkit-font-smoothing: antialiased;
+          align-self: flex-end;
+          flex-shrink: 0;
+          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+          font-size: 14px;
+          font-weight: 400;
+          height: auto;
+          width: auto;
+        }
+  >
+    End
+  </span>
+</div>
+`;
+
+exports[`Stack renders horizontal Stack with StackItems correctly 1`] = `
+<div
+  className=
+      ms-Stack
+      {
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        height: auto;
+        width: auto;
+      }
+      & > * {
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      & > *:not(:first-child) {
+        margin-left: 0px;
+      }
+      & > *:not(.ms-StackItem) {
+        flex-shrink: 0;
+      }
+>
+  <span
+    className=
+        ms-StackItem
+        {
+          -moz-osx-font-smoothing: grayscale;
+          -webkit-font-smoothing: antialiased;
+          flex-shrink: 0;
+          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+          font-size: 14px;
+          font-weight: 400;
+          height: auto;
+          width: auto;
+        }
+  >
+    Item 1
+  </span>
+  <span
+    className=
+        ms-StackItem
+        {
+          -moz-osx-font-smoothing: grayscale;
+          -webkit-font-smoothing: antialiased;
+          flex-shrink: 0;
+          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+          font-size: 14px;
+          font-weight: 400;
+          height: auto;
+          width: auto;
+        }
+  >
+    Item 2
+  </span>
+</div>
+`;
+
+exports[`Stack renders horizontal Stack with a gap correctly 1`] = `
+<div
+  className=
+      ms-Stack
+      {
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        height: auto;
+        width: auto;
+      }
+      & > * {
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      & > *:not(:first-child) {
+        margin-left: 10px;
+      }
+      & > *:not(.ms-StackItem) {
+        flex-shrink: 0;
+      }
+>
+  <span
+    className=
+        ms-StackItem
+        {
+          -moz-osx-font-smoothing: grayscale;
+          -webkit-font-smoothing: antialiased;
+          flex-shrink: 0;
+          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+          font-size: 14px;
+          font-weight: 400;
+          height: auto;
+          width: auto;
+        }
+  >
+    Item 1
+  </span>
+  <span
+    className=
+        ms-StackItem
+        {
+          -moz-osx-font-smoothing: grayscale;
+          -webkit-font-smoothing: antialiased;
+          flex-shrink: 0;
+          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+          font-size: 14px;
+          font-weight: 400;
+          height: auto;
+          width: auto;
+        }
+  >
+    Item 2
+  </span>
+</div>
+`;
+
+exports[`Stack renders horizontal Stack with grow correctly 1`] = `
+<div
+  className=
+      ms-Stack
+      {
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        height: auto;
+        width: auto;
+      }
+      & > * {
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      & > *:not(:first-child) {
+        margin-left: 0px;
+      }
+      & > *:not(.ms-StackItem) {
+        flex-shrink: 0;
+      }
+>
+  <div
+    className=
+        ms-Stack
+        {
+          box-sizing: border-box;
+          display: flex;
+          flex-direction: row;
+          flex-grow: 5;
+          flex-wrap: nowrap;
+          height: auto;
+          overflow: hidden;
+          width: auto;
+        }
+        & > * {
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+        & > *:not(:first-child) {
+          margin-left: 0px;
+        }
+        & > *:not(.ms-StackItem) {
+          flex-shrink: 0;
+        }
+  >
+    Item 1
+  </div>
+  <div
+    className=
+        ms-Stack
+        {
+          box-sizing: border-box;
+          display: flex;
+          flex-direction: row;
+          flex-grow: 2;
+          flex-wrap: nowrap;
+          height: auto;
+          overflow: hidden;
+          width: auto;
+        }
+        & > * {
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+        & > *:not(:first-child) {
+          margin-left: 0px;
+        }
+        & > *:not(.ms-StackItem) {
+          flex-shrink: 0;
+        }
+  >
+    Item 2
+  </div>
+  <div
+    className=
+        ms-Stack
+        {
+          box-sizing: border-box;
+          display: flex;
+          flex-direction: row;
+          flex-grow: 1;
+          flex-wrap: nowrap;
+          height: auto;
+          overflow: hidden;
+          width: auto;
+        }
+        & > * {
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+        & > *:not(:first-child) {
+          margin-left: 0px;
+        }
+        & > *:not(.ms-StackItem) {
+          flex-shrink: 0;
+        }
+  >
+    Item 3
+  </div>
+</div>
+`;
+
+exports[`Stack renders horizontal Stack with shrinking StackItems correctly 1`] = `
+<div
+  className=
+      ms-Stack
+      {
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        height: auto;
+        width: auto;
+      }
+      & > * {
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      & > *:not(:first-child) {
+        margin-left: 0px;
+      }
+      & > *:not(.ms-StackItem) {
+        flex-shrink: 1;
+      }
+>
+  <span
+    className=
+        ms-StackItem
+        {
+          -moz-osx-font-smoothing: grayscale;
+          -webkit-font-smoothing: antialiased;
+          flex-shrink: 1;
+          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+          font-size: 14px;
+          font-weight: 400;
+          height: auto;
+          width: auto;
+        }
+  >
+    Item 1
+  </span>
+  <span
+    className=
+        ms-StackItem
+        {
+          -moz-osx-font-smoothing: grayscale;
+          -webkit-font-smoothing: antialiased;
+          flex-shrink: 1;
+          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+          font-size: 14px;
+          font-weight: 400;
+          height: auto;
+          width: auto;
+        }
+  >
+    Item 2
+  </span>
+</div>
+`;
+
+exports[`Stack renders horizontal Stack with shrinking StackItems correctly 2`] = `
+<div
+  className=
+      ms-Stack
+      {
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        height: auto;
+        width: auto;
+      }
+      & > * {
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      & > *:not(:first-child) {
+        margin-left: 0px;
+      }
+      & > *:not(.ms-StackItem) {
+        flex-shrink: 1;
+      }
+>
+  <span
+    className=
+        ms-StackItem
+        {
+          -moz-osx-font-smoothing: grayscale;
+          -webkit-font-smoothing: antialiased;
+          flex-shrink: 1;
+          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+          font-size: 14px;
+          font-weight: 400;
+          height: auto;
+          width: auto;
+        }
+  >
+    Item 1
+  </span>
+  <span
+    className=
+        ms-StackItem
+        {
+          -moz-osx-font-smoothing: grayscale;
+          -webkit-font-smoothing: antialiased;
+          flex-shrink: 0;
+          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+          font-size: 14px;
+          font-weight: 400;
+          height: auto;
+          width: auto;
+        }
+  >
+    Item 2
+  </span>
+</div>
+`;
+
+exports[`Stack renders horizontal Stack with vertical and horizontal alignment correctly 1`] = `
+<div
+  className=
+      ms-Stack
+      {
+        align-items: flex-end;
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        height: auto;
+        justify-content: flex-start;
+        width: auto;
+      }
+      & > * {
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      & > *:not(:first-child) {
+        margin-left: 0px;
+      }
+      & > *:not(.ms-StackItem) {
+        flex-shrink: 0;
+      }
+>
+  <div>
+    Item 1
+  </div>
+  <div>
+    Item 2
+  </div>
+</div>
+`;
+
+exports[`Stack renders horizontal Stack with vertical and horizontal fill correctly 1`] = `
+<div
+  className=
+      ms-Stack
+      {
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        height: 100%;
+        width: 100%;
+      }
+      & > * {
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      & > *:not(:first-child) {
+        margin-left: 0px;
+      }
+      & > *:not(.ms-StackItem) {
+        flex-shrink: 0;
+      }
+>
+  <div>
+    Item 1
+  </div>
+  <div>
+    Item 2
+  </div>
+</div>
+`;
+
+exports[`Stack renders vertical Stack with StackItems correctly 1`] = `
+<div
+  className=
+      ms-Stack
+      {
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        flex-wrap: nowrap;
+        height: auto;
+        width: auto;
+      }
+      & > * {
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      & > *:not(:first-child) {
+        margin-top: 0px;
+      }
+      & > *:not(.ms-StackItem) {
+        flex-shrink: 0;
+      }
+>
+  <span
+    className=
+        ms-StackItem
+        {
+          -moz-osx-font-smoothing: grayscale;
+          -webkit-font-smoothing: antialiased;
+          flex-shrink: 0;
+          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+          font-size: 14px;
+          font-weight: 400;
+          height: auto;
+          width: auto;
+        }
+  >
+    Item 1
+  </span>
+  <span
+    className=
+        ms-StackItem
+        {
+          -moz-osx-font-smoothing: grayscale;
+          -webkit-font-smoothing: antialiased;
+          flex-shrink: 0;
+          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+          font-size: 14px;
+          font-weight: 400;
+          height: auto;
+          width: auto;
+        }
+  >
+    Item 2
+  </span>
+</div>
+`;
+
+exports[`Stack renders vertical Stack with a gap correctly 1`] = `
+<div
+  className=
+      ms-Stack
+      {
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        flex-wrap: nowrap;
+        height: auto;
+        width: auto;
+      }
+      & > * {
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      & > *:not(:first-child) {
+        margin-top: 10px;
+      }
+      & > *:not(.ms-StackItem) {
+        flex-shrink: 0;
+      }
+>
+  <span
+    className=
+        ms-StackItem
+        {
+          -moz-osx-font-smoothing: grayscale;
+          -webkit-font-smoothing: antialiased;
+          flex-shrink: 0;
+          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+          font-size: 14px;
+          font-weight: 400;
+          height: auto;
+          width: auto;
+        }
+  >
+    Item 1
+  </span>
+  <span
+    className=
+        ms-StackItem
+        {
+          -moz-osx-font-smoothing: grayscale;
+          -webkit-font-smoothing: antialiased;
+          flex-shrink: 0;
+          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+          font-size: 14px;
+          font-weight: 400;
+          height: auto;
+          width: auto;
+        }
+  >
+    Item 2
+  </span>
+</div>
+`;
+
+exports[`Stack renders vertical Stack with grow correctly 1`] = `
+<div
+  className=
+      ms-Stack
+      {
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        flex-wrap: nowrap;
+        height: auto;
+        width: auto;
+      }
+      & > * {
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      & > *:not(:first-child) {
+        margin-top: 0px;
+      }
+      & > *:not(.ms-StackItem) {
+        flex-shrink: 0;
+      }
+>
+  <div
+    className=
+        ms-Stack
+        {
+          box-sizing: border-box;
+          display: flex;
+          flex-direction: column;
+          flex-grow: 5;
+          flex-wrap: nowrap;
+          height: auto;
+          overflow: hidden;
+          width: auto;
+        }
+        & > * {
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+        & > *:not(:first-child) {
+          margin-top: 0px;
+        }
+        & > *:not(.ms-StackItem) {
+          flex-shrink: 0;
+        }
+  >
+    Item 1
+  </div>
+  <div
+    className=
+        ms-Stack
+        {
+          box-sizing: border-box;
+          display: flex;
+          flex-direction: column;
+          flex-grow: 2;
+          flex-wrap: nowrap;
+          height: auto;
+          overflow: hidden;
+          width: auto;
+        }
+        & > * {
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+        & > *:not(:first-child) {
+          margin-top: 0px;
+        }
+        & > *:not(.ms-StackItem) {
+          flex-shrink: 0;
+        }
+  >
+    Item 2
+  </div>
+  <div
+    className=
+        ms-Stack
+        {
+          box-sizing: border-box;
+          display: flex;
+          flex-direction: column;
+          flex-grow: 1;
+          flex-wrap: nowrap;
+          height: auto;
+          overflow: hidden;
+          width: auto;
+        }
+        & > * {
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+        & > *:not(:first-child) {
+          margin-top: 0px;
+        }
+        & > *:not(.ms-StackItem) {
+          flex-shrink: 0;
+        }
+  >
+    Item 3
+  </div>
+</div>
+`;
+
+exports[`Stack renders vertical Stack with item alignments correctly 1`] = `
+<div
+  className=
+      ms-Stack
+      {
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        flex-wrap: nowrap;
+        height: auto;
+        width: auto;
+      }
+      & > * {
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      & > *:not(:first-child) {
+        margin-top: 0px;
+      }
+      & > *:not(.ms-StackItem) {
+        flex-shrink: 0;
+      }
+>
+  <span
+    className=
+        ms-StackItem
+        {
+          -moz-osx-font-smoothing: grayscale;
+          -webkit-font-smoothing: antialiased;
+          align-self: auto;
+          flex-shrink: 0;
+          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+          font-size: 14px;
+          font-weight: 400;
+          height: auto;
+          width: auto;
+        }
+  >
+    Auto
+  </span>
+  <span
+    className=
+        ms-StackItem
+        {
+          -moz-osx-font-smoothing: grayscale;
+          -webkit-font-smoothing: antialiased;
+          align-self: stretch;
+          flex-shrink: 0;
+          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+          font-size: 14px;
+          font-weight: 400;
+          height: auto;
+          width: auto;
+        }
+  >
+    Stretch
+  </span>
+  <span
+    className=
+        ms-StackItem
+        {
+          -moz-osx-font-smoothing: grayscale;
+          -webkit-font-smoothing: antialiased;
+          align-self: baseline;
+          flex-shrink: 0;
+          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+          font-size: 14px;
+          font-weight: 400;
+          height: auto;
+          width: auto;
+        }
+  >
+    Baseline
+  </span>
+  <span
+    className=
+        ms-StackItem
+        {
+          -moz-osx-font-smoothing: grayscale;
+          -webkit-font-smoothing: antialiased;
+          align-self: flex-start;
+          flex-shrink: 0;
+          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+          font-size: 14px;
+          font-weight: 400;
+          height: auto;
+          width: auto;
+        }
+  >
+    Start
+  </span>
+  <span
+    className=
+        ms-StackItem
+        {
+          -moz-osx-font-smoothing: grayscale;
+          -webkit-font-smoothing: antialiased;
+          align-self: center;
+          flex-shrink: 0;
+          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+          font-size: 14px;
+          font-weight: 400;
+          height: auto;
+          width: auto;
+        }
+  >
+    Center
+  </span>
+  <span
+    className=
+        ms-StackItem
+        {
+          -moz-osx-font-smoothing: grayscale;
+          -webkit-font-smoothing: antialiased;
+          align-self: flex-end;
+          flex-shrink: 0;
+          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+          font-size: 14px;
+          font-weight: 400;
+          height: auto;
+          width: auto;
+        }
+  >
+    End
+  </span>
+</div>
+`;
+
+exports[`Stack renders vertical Stack with shrinking StackItems correctly 1`] = `
+<div
+  className=
+      ms-Stack
+      {
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        flex-wrap: nowrap;
+        height: auto;
+        width: auto;
+      }
+      & > * {
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      & > *:not(:first-child) {
+        margin-top: 0px;
+      }
+      & > *:not(.ms-StackItem) {
+        flex-shrink: 1;
+      }
+>
+  <span
+    className=
+        ms-StackItem
+        {
+          -moz-osx-font-smoothing: grayscale;
+          -webkit-font-smoothing: antialiased;
+          flex-shrink: 1;
+          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+          font-size: 14px;
+          font-weight: 400;
+          height: auto;
+          width: auto;
+        }
+  >
+    Item 1
+  </span>
+  <span
+    className=
+        ms-StackItem
+        {
+          -moz-osx-font-smoothing: grayscale;
+          -webkit-font-smoothing: antialiased;
+          flex-shrink: 1;
+          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+          font-size: 14px;
+          font-weight: 400;
+          height: auto;
+          width: auto;
+        }
+  >
+    Item 2
+  </span>
+</div>
+`;
+
+exports[`Stack renders vertical Stack with shrinking StackItems correctly 2`] = `
+<div
+  className=
+      ms-Stack
+      {
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        flex-wrap: nowrap;
+        height: auto;
+        width: auto;
+      }
+      & > * {
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      & > *:not(:first-child) {
+        margin-top: 0px;
+      }
+      & > *:not(.ms-StackItem) {
+        flex-shrink: 1;
+      }
+>
+  <span
+    className=
+        ms-StackItem
+        {
+          -moz-osx-font-smoothing: grayscale;
+          -webkit-font-smoothing: antialiased;
+          flex-shrink: 1;
+          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+          font-size: 14px;
+          font-weight: 400;
+          height: auto;
+          width: auto;
+        }
+  >
+    Item 1
+  </span>
+  <span
+    className=
+        ms-StackItem
+        {
+          -moz-osx-font-smoothing: grayscale;
+          -webkit-font-smoothing: antialiased;
+          flex-shrink: 0;
+          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+          font-size: 14px;
+          font-weight: 400;
+          height: auto;
+          width: auto;
+        }
+  >
+    Item 2
+  </span>
+</div>
+`;
+
+exports[`Stack renders vertical Stack with vertical and horizontal alignment correctly 1`] = `
+<div
+  className=
+      ms-Stack
+      {
+        align-items: flex-start;
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        flex-wrap: nowrap;
+        height: auto;
+        justify-content: flex-end;
+        width: auto;
+      }
+      & > * {
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      & > *:not(:first-child) {
+        margin-top: 0px;
+      }
+      & > *:not(.ms-StackItem) {
+        flex-shrink: 0;
+      }
+>
+  <div>
+    Item 1
+  </div>
+  <div>
+    Item 2
+  </div>
+</div>
+`;
+
+exports[`Stack renders vertical Stack with vertical and horizontal fill correctly 1`] = `
+<div
+  className=
+      ms-Stack
+      {
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        flex-wrap: nowrap;
+        height: 100%;
+        width: 100%;
+      }
+      & > * {
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      & > *:not(:first-child) {
+        margin-top: 0px;
+      }
+      & > *:not(.ms-StackItem) {
+        flex-shrink: 0;
+      }
+>
+  <div>
+    Item 1
+  </div>
+  <div>
+    Item 2
+  </div>
+</div>
+`;
+
+exports[`Stack renders wrapped horizontal Stack correctly 1`] = `
+<div
+  className=
+      ms-Stack
+      {
+        display: inline-block;
+        height: auto;
+        overflow: visible;
+        width: auto;
+      }
+>
+  <div
+    className=
+        ms-Stack-inner
+        {
+          box-sizing: border-box;
+          display: flex;
+          flex-direction: row;
+          flex-wrap: wrap;
+          height: auto;
+          margin-bottom: 0px;
+          margin-left: 0px;
+          margin-right: 0px;
+          margin-top: 0px;
+          max-width: 100vw;
+          overflow: visible;
+          width: auto;
+        }
+        & > * {
+          margin-bottom: 0px;
+          margin-left: 0px;
+          margin-right: 0px;
+          margin-top: 0px;
+          max-width: 100%;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+        & > *:not(.ms-StackItem) {
+          flex-shrink: 0;
+        }
+  >
+    <span
+      className=
+          ms-StackItem
+          {
+            -moz-osx-font-smoothing: grayscale;
+            -webkit-font-smoothing: antialiased;
+            flex-shrink: 0;
+            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+            font-size: 14px;
+            font-weight: 400;
+            height: auto;
+            width: auto;
+          }
+    >
+      1
+    </span>
+    <span
+      className=
+          ms-StackItem
+          {
+            -moz-osx-font-smoothing: grayscale;
+            -webkit-font-smoothing: antialiased;
+            flex-shrink: 0;
+            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+            font-size: 14px;
+            font-weight: 400;
+            height: auto;
+            width: auto;
+          }
+    >
+      2
+    </span>
+    <span
+      className=
+          ms-StackItem
+          {
+            -moz-osx-font-smoothing: grayscale;
+            -webkit-font-smoothing: antialiased;
+            flex-shrink: 0;
+            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+            font-size: 14px;
+            font-weight: 400;
+            height: auto;
+            width: auto;
+          }
+    >
+      3
+    </span>
+  </div>
+</div>
+`;
diff --git a/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Horizontal.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Horizontal.Basic.Example.tsx
new file mode 100644
index 0000000000000..57f1bb1961ca0
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Horizontal.Basic.Example.tsx
@@ -0,0 +1,69 @@
+// @codepen
+import * as React from 'react';
+import { Stack } from 'office-ui-fabric-react/lib/Stack';
+import { mergeStyleSets, DefaultPalette } from 'office-ui-fabric-react/lib/Styling';
+
+export class HorizontalStackBasicExample extends React.Component<{}, {}> {
+  public render(): JSX.Element {
+    const styles = mergeStyleSets({
+      root: {
+        background: DefaultPalette.themeTertiary
+      },
+
+      item: {
+        color: DefaultPalette.white,
+        background: DefaultPalette.themePrimary,
+        padding: 5
+      }
+    });
+
+    return (
+      <Stack gap={5}>
+        <span>Default horizontal stack</span>
+        <Stack horizontal className={styles.root}>
+          <span>Item One</span>
+          <span>Item Two</span>
+          <span>Item Three</span>
+        </Stack>
+
+        <span>Horizontal gap between items</span>
+        <Stack horizontal gap={10} padding={10} className={styles.root}>
+          <span>Item One</span>
+          <span>Item Two</span>
+          <span>Item Three</span>
+        </Stack>
+
+        <span>Item alignments</span>
+        <Stack horizontal gap={5} padding={10} className={styles.root} styles={{ root: { height: 100 } }}>
+          <Stack.Item align="auto" className={styles.item}>
+            <span>Auto-aligned item</span>
+          </Stack.Item>
+          <Stack.Item align="stretch" className={styles.item}>
+            <span>Stretch-aligned item</span>
+          </Stack.Item>
+          <Stack.Item align="baseline" className={styles.item}>
+            <span>Baseline-aligned item</span>
+          </Stack.Item>
+          <Stack.Item align="start" className={styles.item}>
+            <span>Start-aligned item</span>
+          </Stack.Item>
+          <Stack.Item align="center" className={styles.item}>
+            <span>Center-aligned item</span>
+          </Stack.Item>
+          <Stack.Item align="end" className={styles.item}>
+            <span>End-aligned item</span>
+          </Stack.Item>
+        </Stack>
+
+        <span>Clickable stack</span>
+        <Stack horizontal onClick={this._onClick} padding={10} className={styles.root}>
+          <span>Click inside this box</span>
+        </Stack>
+      </Stack>
+    );
+  }
+
+  private _onClick = (): void => {
+    alert('Clicked Stack');
+  };
+}
diff --git a/packages/experiments/src/components/Stack/HorizontalStack/examples/HorizontalStack.Configure.Example.tsx b/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Horizontal.Configure.Example.tsx
similarity index 79%
rename from packages/experiments/src/components/Stack/HorizontalStack/examples/HorizontalStack.Configure.Example.tsx
rename to packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Horizontal.Configure.Example.tsx
index 861b77e3280f6..444871a0bbb4c 100644
--- a/packages/experiments/src/components/Stack/HorizontalStack/examples/HorizontalStack.Configure.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Horizontal.Configure.Example.tsx
@@ -1,10 +1,13 @@
+// @codepen
 import * as React from 'react';
-import { VerticalStack, HorizontalStack } from '@uifabric/experiments/lib/Stack';
-import { Text } from '@uifabric/experiments/lib/Text';
-import { Slider, Checkbox, Dropdown, IDropdownOption, TextField } from 'office-ui-fabric-react';
+import { Checkbox } from 'office-ui-fabric-react/lib/Checkbox';
+import { Dropdown, IDropdownOption } from 'office-ui-fabric-react/lib/Dropdown';
+import { Slider } from 'office-ui-fabric-react/lib/Slider';
+import { Stack } from 'office-ui-fabric-react/lib/Stack';
 import { mergeStyleSets, DefaultPalette } from 'office-ui-fabric-react/lib/Styling';
+import { TextField } from 'office-ui-fabric-react/lib/TextField';
 
-export type HorizontalAlignment = 'left' | 'center' | 'right' | 'space-around' | 'space-between' | 'space-evenly';
+export type HorizontalAlignment = 'start' | 'center' | 'end' | 'space-around' | 'space-between' | 'space-evenly';
 export type VerticalAlignment = 'top' | 'center' | 'bottom';
 
 export interface IExampleState {
@@ -42,7 +45,7 @@ export class HorizontalStackConfigureExample extends React.Component<{}, IExampl
       paddingRight: 0,
       paddingTop: 0,
       paddingBottom: 0,
-      horizontalAlignment: 'left',
+      horizontalAlignment: 'start',
       verticalAlignment: 'top',
       hideEmptyChildren: false,
       emptyChildren: []
@@ -102,10 +105,10 @@ export class HorizontalStackConfigureExample extends React.Component<{}, IExampl
     };
 
     return (
-      <VerticalStack gap={10}>
-        <HorizontalStack>
-          <HorizontalStack.Item grow>
-            <VerticalStack>
+      <Stack gap={10}>
+        <Stack horizontal>
+          <Stack.Item grow>
+            <Stack>
               <Slider
                 label="Number of items:"
                 min={1}
@@ -115,19 +118,19 @@ export class HorizontalStackConfigureExample extends React.Component<{}, IExampl
                 showValue={true}
                 onChange={this._onNumItemsChange}
               />
-              <HorizontalStack>
+              <Stack horizontal>
                 <Checkbox label="Shadow around items" onChange={this._onBoxShadowChange} styles={{ root: { marginRight: 10 } }} />
                 <Checkbox label="Prevent item overflow" onChange={this._onPreventOverflowChange} />
-              </HorizontalStack>
-            </VerticalStack>
-          </HorizontalStack.Item>
-          <HorizontalStack.Item grow>
-            <HorizontalStack gap={20}>
-              <VerticalStack>
+              </Stack>
+            </Stack>
+          </Stack.Item>
+          <Stack.Item grow>
+            <Stack horizontal gap={20}>
+              <Stack>
                 <Checkbox label="Wrap items" onChange={this._onWrapChange} styles={{ root: { marginBottom: 10 } }} />
                 <Checkbox label="Shrink items" onChange={this._onShrinkChange} />
-              </VerticalStack>
-              <HorizontalStack.Item grow>
+              </Stack>
+              <Stack.Item grow>
                 <Slider
                   label="Container width:"
                   min={1}
@@ -137,14 +140,14 @@ export class HorizontalStackConfigureExample extends React.Component<{}, IExampl
                   showValue={true}
                   onChange={this._onWrapperWidthChange}
                 />
-              </HorizontalStack.Item>
-            </HorizontalStack>
-          </HorizontalStack.Item>
-        </HorizontalStack>
+              </Stack.Item>
+            </Stack>
+          </Stack.Item>
+        </Stack>
 
-        <HorizontalStack gap={20}>
-          <HorizontalStack.Item grow>
-            <VerticalStack>
+        <Stack horizontal gap={20}>
+          <Stack.Item grow>
+            <Stack>
               <Slider
                 label="Horizontal gap between items:"
                 min={0}
@@ -163,10 +166,10 @@ export class HorizontalStackConfigureExample extends React.Component<{}, IExampl
                 showValue={true}
                 onChange={this._onVerticalGapChange}
               />
-            </VerticalStack>
-          </HorizontalStack.Item>
-          <HorizontalStack.Item grow>
-            <VerticalStack>
+            </Stack>
+          </Stack.Item>
+          <Stack.Item grow>
+            <Stack>
               <Slider
                 label="Left padding:"
                 min={0}
@@ -185,10 +188,10 @@ export class HorizontalStackConfigureExample extends React.Component<{}, IExampl
                 showValue={true}
                 onChange={this._onPaddingRightChange}
               />
-            </VerticalStack>
-          </HorizontalStack.Item>
-          <HorizontalStack.Item grow>
-            <VerticalStack>
+            </Stack>
+          </Stack.Item>
+          <Stack.Item grow>
+            <Stack>
               <Slider
                 label="Top padding:"
                 min={0}
@@ -207,28 +210,28 @@ export class HorizontalStackConfigureExample extends React.Component<{}, IExampl
                 showValue={true}
                 onChange={this._onPaddingBottomChange}
               />
-            </VerticalStack>
-          </HorizontalStack.Item>
-        </HorizontalStack>
+            </Stack>
+          </Stack.Item>
+        </Stack>
 
-        <HorizontalStack gap={20} verticalAlign="bottom">
-          <HorizontalStack.Item grow>
+        <Stack horizontal gap={20} verticalAlignment="bottom">
+          <Stack.Item grow>
             <Dropdown
               selectedKey={horizontalAlignment}
               placeholder="Select Horizontal Alignment"
               label="Horizontal alignment:"
               options={[
-                { key: 'left', text: 'Left' },
+                { key: 'start', text: 'Left' },
                 { key: 'center', text: 'Center' },
-                { key: 'right', text: 'Right' },
+                { key: 'end', text: 'Right' },
                 { key: 'space-around', text: 'Space around' },
                 { key: 'space-between', text: 'Space between' },
                 { key: 'space-evenly', text: 'Space evenly' }
               ]}
               onChange={this._onHorizontalAlignChange}
             />
-          </HorizontalStack.Item>
-          <HorizontalStack.Item grow>
+          </Stack.Item>
+          <Stack.Item grow>
             <Dropdown
               selectedKey={verticalAlignment}
               placeholder="Select Vertical Alignment"
@@ -236,43 +239,40 @@ export class HorizontalStackConfigureExample extends React.Component<{}, IExampl
               options={[{ key: 'top', text: 'Top' }, { key: 'center', text: 'Center' }, { key: 'bottom', text: 'Bottom' }]}
               onChange={this._onVerticalAlignChange}
             />
-          </HorizontalStack.Item>
-          <HorizontalStack.Item>
+          </Stack.Item>
+          <Stack.Item>
             <Checkbox label="Hide empty children" onChange={this._onHideEmptyChildrenChange} />
-          </HorizontalStack.Item>
-          <HorizontalStack.Item grow>
+          </Stack.Item>
+          <Stack.Item grow>
             <TextField label="Enter a space-separated list of empty children (e.g. 1 2 3):" onChange={this._onEmptyChildrenChange} />
-          </HorizontalStack.Item>
-        </HorizontalStack>
+          </Stack.Item>
+        </Stack>
 
-        <HorizontalStack
+        <Stack
+          horizontal
           wrap={wrap}
           shrinkItems={shrink}
           gap={gap}
           verticalGap={verticalGap}
           padding={`${paddingTop}px ${paddingRight}px ${paddingBottom}px ${paddingLeft}px`}
-          horizontalAlign={horizontalAlignment}
-          verticalAlign={verticalAlignment}
+          horizontalAlignment={horizontalAlignment}
+          verticalAlignment={verticalAlignment}
           className={styles.root}
           styles={stackStyles}
         >
           {this._range(1, numItems).map((value: number, index: number) => {
             if (emptyChildren.indexOf(value.toString()) !== -1) {
-              return hideEmptyChildren ? (
-                <HorizontalStack.Item key={index} className={styles.item} />
-              ) : (
-                <Text key={index} className={styles.item} />
-              );
+              return hideEmptyChildren ? <Stack.Item key={index} className={styles.item} /> : <span key={index} className={styles.item} />;
             }
 
             return (
-              <Text key={index} className={styles.item}>
+              <span key={index} className={styles.item}>
                 {value}
-              </Text>
+              </span>
             );
           })}
-        </HorizontalStack>
-      </VerticalStack>
+        </Stack>
+      </Stack>
     );
   }
 
diff --git a/packages/experiments/src/components/Stack/HorizontalStack/examples/HorizontalStack.Grow.Example.tsx b/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Horizontal.Grow.Example.tsx
similarity index 59%
rename from packages/experiments/src/components/Stack/HorizontalStack/examples/HorizontalStack.Grow.Example.tsx
rename to packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Horizontal.Grow.Example.tsx
index 7f803f204050c..77bfb9e5f0761 100644
--- a/packages/experiments/src/components/Stack/HorizontalStack/examples/HorizontalStack.Grow.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Horizontal.Grow.Example.tsx
@@ -1,5 +1,6 @@
+// @codepen
 import * as React from 'react';
-import { HorizontalStack } from '@uifabric/experiments/lib/Stack';
+import { Stack } from 'office-ui-fabric-react/lib/Stack';
 import { mergeStyleSets, DefaultPalette } from 'office-ui-fabric-react/lib/Styling';
 
 export class HorizontalStackGrowExample extends React.Component<{}, {}> {
@@ -20,17 +21,17 @@ export class HorizontalStackGrowExample extends React.Component<{}, {}> {
     });
 
     return (
-      <HorizontalStack gap={5} padding={10} className={styles.root}>
-        <HorizontalStack.Item grow={3} className={styles.item}>
+      <Stack horizontal gap={5} padding={10} className={styles.root}>
+        <Stack.Item grow={3} className={styles.item}>
           Grow is 3
-        </HorizontalStack.Item>
-        <HorizontalStack.Item grow={2} className={styles.item}>
+        </Stack.Item>
+        <Stack.Item grow={2} className={styles.item}>
           Grow is 2
-        </HorizontalStack.Item>
-        <HorizontalStack.Item grow className={styles.item}>
+        </Stack.Item>
+        <Stack.Item grow className={styles.item}>
           Grow is 1
-        </HorizontalStack.Item>
-      </HorizontalStack>
+        </Stack.Item>
+      </Stack>
     );
   }
 }
diff --git a/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Horizontal.HorizontalAlign.Example.tsx b/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Horizontal.HorizontalAlign.Example.tsx
new file mode 100644
index 0000000000000..2f2f3807e0482
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Horizontal.HorizontalAlign.Example.tsx
@@ -0,0 +1,71 @@
+// @codepen
+import * as React from 'react';
+import { Stack } from 'office-ui-fabric-react/lib/Stack';
+import { mergeStyleSets, DefaultPalette } from 'office-ui-fabric-react/lib/Styling';
+
+export class HorizontalStackHorizontalAlignExample extends React.Component<{}, {}> {
+  public render(): JSX.Element {
+    const styles = mergeStyleSets({
+      root: {
+        background: DefaultPalette.themeTertiary,
+        selectors: {
+          '> *': {
+            width: 50,
+            height: 50,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            background: DefaultPalette.themePrimary,
+            color: DefaultPalette.white
+          }
+        }
+      }
+    });
+
+    return (
+      <Stack gap={5}>
+        <span>Left-aligned</span>
+        <Stack horizontal horizontalAlignment="start" className={styles.root}>
+          <span>1</span>
+          <span>2</span>
+          <span>3</span>
+        </Stack>
+
+        <span>Horizontally centered</span>
+        <Stack horizontal horizontalAlignment="center" className={styles.root}>
+          <span>1</span>
+          <span>2</span>
+          <span>3</span>
+        </Stack>
+
+        <span>Right-aligned</span>
+        <Stack horizontal horizontalAlignment="end" className={styles.root}>
+          <span>1</span>
+          <span>2</span>
+          <span>3</span>
+        </Stack>
+
+        <span>Horizontal space around items</span>
+        <Stack horizontal horizontalAlignment="space-around" className={styles.root}>
+          <span>1</span>
+          <span>2</span>
+          <span>3</span>
+        </Stack>
+
+        <span>Horizontal space between items</span>
+        <Stack horizontal horizontalAlignment="space-between" className={styles.root}>
+          <span>1</span>
+          <span>2</span>
+          <span>3</span>
+        </Stack>
+
+        <span>Items horizontally evenly spaced</span>
+        <Stack horizontal horizontalAlignment="space-evenly" className={styles.root}>
+          <span>1</span>
+          <span>2</span>
+          <span>3</span>
+        </Stack>
+      </Stack>
+    );
+  }
+}
diff --git a/packages/experiments/src/components/Stack/HorizontalStack/examples/HorizontalStack.Shrink.Example.tsx b/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Horizontal.Shrink.Example.tsx
similarity index 64%
rename from packages/experiments/src/components/Stack/HorizontalStack/examples/HorizontalStack.Shrink.Example.tsx
rename to packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Horizontal.Shrink.Example.tsx
index 7b4a885dec99b..bcd36e46f3b5c 100644
--- a/packages/experiments/src/components/Stack/HorizontalStack/examples/HorizontalStack.Shrink.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Horizontal.Shrink.Example.tsx
@@ -1,6 +1,7 @@
+// @codepen
 import * as React from 'react';
-import { VerticalStack, HorizontalStack } from '@uifabric/experiments/lib/Stack';
-import { Slider } from 'office-ui-fabric-react';
+import { Slider } from 'office-ui-fabric-react/lib/Slider';
+import { Stack } from 'office-ui-fabric-react/lib/Stack';
 import { mergeStyleSets, DefaultPalette } from 'office-ui-fabric-react/lib/Styling';
 
 export interface IExampleState {
@@ -35,7 +36,7 @@ export class HorizontalStackShrinkExample extends React.Component<{}, IExampleSt
     });
 
     return (
-      <VerticalStack gap={5}>
+      <Stack gap={5}>
         <Slider
           label="Change the stack width to see how child items shrink:"
           min={1}
@@ -45,21 +46,21 @@ export class HorizontalStackShrinkExample extends React.Component<{}, IExampleSt
           showValue={true}
           onChange={this._onWidthChange}
         />
-        <HorizontalStack gap={5} shrinkItems padding={10} className={styles.root}>
-          <HorizontalStack.Item grow className={styles.item}>
+        <Stack horizontal gap={5} shrinkItems padding={10} className={styles.root}>
+          <Stack.Item grow className={styles.item}>
             I shrink
-          </HorizontalStack.Item>
-          <HorizontalStack.Item grow className={styles.item}>
+          </Stack.Item>
+          <Stack.Item grow className={styles.item}>
             I shrink
-          </HorizontalStack.Item>
-          <HorizontalStack.Item grow preventShrink className={styles.item} styles={{ root: { width: 500 } }}>
+          </Stack.Item>
+          <Stack.Item grow preventShrink className={styles.item} styles={{ root: { width: 500 } }}>
             I don't shrink
-          </HorizontalStack.Item>
-          <HorizontalStack.Item grow className={styles.item}>
+          </Stack.Item>
+          <Stack.Item grow className={styles.item}>
             I shrink
-          </HorizontalStack.Item>
-        </HorizontalStack>
-      </VerticalStack>
+          </Stack.Item>
+        </Stack>
+      </Stack>
     );
   }
 
diff --git a/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Horizontal.Spacing.Example.tsx b/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Horizontal.Spacing.Example.tsx
new file mode 100644
index 0000000000000..009094b950521
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Horizontal.Spacing.Example.tsx
@@ -0,0 +1,105 @@
+// @codepen
+import * as React from 'react';
+import { Stack } from 'office-ui-fabric-react/lib/Stack';
+import { mergeStyleSets, DefaultPalette } from 'office-ui-fabric-react/lib/Styling';
+
+export class HorizontalStackSpacingExample extends React.Component<{}, {}> {
+  public render(): JSX.Element {
+    const styles = mergeStyleSets({
+      root: {
+        background: DefaultPalette.themeTertiary,
+        width: 300,
+        selectors: {
+          '> *': {
+            width: 50,
+            height: 50,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            background: DefaultPalette.themePrimary,
+            color: DefaultPalette.white
+          }
+        }
+      },
+
+      item: {
+        width: 50,
+        height: 50,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        background: DefaultPalette.themePrimary,
+        color: DefaultPalette.white
+      }
+    });
+
+    return (
+      <Stack gap={10}>
+        <Stack horizontal horizontalAlignment="space-between">
+          <Stack>
+            <span>Numerical spacing</span>
+            <Stack horizontal className={styles.root} gap={10} padding={10}>
+              <span>1</span>
+              <span>2</span>
+              <span>3</span>
+            </Stack>
+          </Stack>
+          <Stack>
+            <span>Custom spacing</span>
+            <Stack horizontal className={styles.root} gap="10%" padding="s1 15%">
+              <span>1</span>
+              <span>2</span>
+              <span>3</span>
+            </Stack>
+          </Stack>
+        </Stack>
+
+        <Stack horizontal horizontalAlignment="space-between">
+          <Stack>
+            <span>Themed spacing (extra small)</span>
+            <Stack horizontal className={styles.root} gap="s2" padding="s2">
+              <span>1</span>
+              <span>2</span>
+              <span>3</span>
+            </Stack>
+          </Stack>
+          <Stack>
+            <span>Themed spacing (small)</span>
+            <Stack horizontal className={styles.root} gap="s1" padding="s1">
+              <span>1</span>
+              <span>2</span>
+              <span>3</span>
+            </Stack>
+          </Stack>
+          <Stack>
+            <span>Themed spacing (medium)</span>
+            <Stack horizontal className={styles.root} gap="m" padding="m">
+              <span>1</span>
+              <span>2</span>
+              <span>3</span>
+            </Stack>
+          </Stack>
+        </Stack>
+
+        <Stack horizontal horizontalAlignment="space-between">
+          <Stack>
+            <span>Themed spacing (large)</span>
+            <Stack horizontal className={styles.root} gap="l1" padding="l1">
+              <span>1</span>
+              <span>2</span>
+              <span>3</span>
+            </Stack>
+          </Stack>
+          <Stack>
+            <span>Themed spacing (extra large)</span>
+            <Stack horizontal className={styles.root} gap="l2" padding="l2">
+              <span>1</span>
+              <span>2</span>
+              <span>3</span>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Stack>
+    );
+  }
+}
diff --git a/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Horizontal.VerticalAlign.Example.tsx b/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Horizontal.VerticalAlign.Example.tsx
new file mode 100644
index 0000000000000..1826fe128a286
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Horizontal.VerticalAlign.Example.tsx
@@ -0,0 +1,51 @@
+// @codepen
+import * as React from 'react';
+import { Stack } from 'office-ui-fabric-react/lib/Stack';
+import { mergeStyleSets, DefaultPalette } from 'office-ui-fabric-react/lib/Styling';
+
+export class HorizontalStackVerticalAlignExample extends React.Component<{}, {}> {
+  public render(): JSX.Element {
+    const styles = mergeStyleSets({
+      root: {
+        background: DefaultPalette.themeTertiary,
+        height: 100,
+        selectors: {
+          '> *': {
+            width: 50,
+            height: 50,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            background: DefaultPalette.themePrimary,
+            color: DefaultPalette.white
+          }
+        }
+      }
+    });
+
+    return (
+      <Stack gap={5}>
+        <span>Top-aligned</span>
+        <Stack horizontal verticalAlignment="top" className={styles.root}>
+          <span>1</span>
+          <span>2</span>
+          <span>3</span>
+        </Stack>
+
+        <span>Vertically centered</span>
+        <Stack horizontal verticalAlignment="center" className={styles.root}>
+          <span>1</span>
+          <span>2</span>
+          <span>3</span>
+        </Stack>
+
+        <span>Bottom-aligned</span>
+        <Stack horizontal verticalAlignment="bottom" className={styles.root}>
+          <span>1</span>
+          <span>2</span>
+          <span>3</span>
+        </Stack>
+      </Stack>
+    );
+  }
+}
diff --git a/packages/experiments/src/components/Stack/HorizontalStack/examples/HorizontalStack.Wrap.Example.tsx b/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Horizontal.Wrap.Example.tsx
similarity index 68%
rename from packages/experiments/src/components/Stack/HorizontalStack/examples/HorizontalStack.Wrap.Example.tsx
rename to packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Horizontal.Wrap.Example.tsx
index d5c7e547b37a6..dec6d289108bf 100644
--- a/packages/experiments/src/components/Stack/HorizontalStack/examples/HorizontalStack.Wrap.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Horizontal.Wrap.Example.tsx
@@ -1,7 +1,7 @@
+// @codepen
 import * as React from 'react';
-import { VerticalStack, HorizontalStack } from '@uifabric/experiments/lib/Stack';
-import { Text } from '@uifabric/experiments/lib/Text';
-import { Slider } from 'office-ui-fabric-react';
+import { Slider } from 'office-ui-fabric-react/lib/Slider';
+import { Stack } from 'office-ui-fabric-react/lib/Stack';
 import { mergeStyleSets, DefaultPalette } from 'office-ui-fabric-react/lib/Styling';
 
 export interface IExampleState {
@@ -36,7 +36,7 @@ export class HorizontalStackWrapExample extends React.Component<{}, IExampleStat
     });
 
     return (
-      <VerticalStack gap={10}>
+      <Stack gap={10}>
         <Slider
           label="Change the stack width to see how child items wrap onto multiple rows:"
           min={1}
@@ -47,19 +47,19 @@ export class HorizontalStackWrapExample extends React.Component<{}, IExampleStat
           onChange={this._onWidthChange}
         />
 
-        <HorizontalStack wrap gap={30} className={styles.root}>
-          <Text>1</Text>
-          <Text>2</Text>
-          <Text>3</Text>
-          <Text>4</Text>
-          <Text>5</Text>
-          <Text>6</Text>
-          <Text>7</Text>
-          <Text>8</Text>
-          <Text>9</Text>
-          <Text>10</Text>
-        </HorizontalStack>
-      </VerticalStack>
+        <Stack horizontal wrap gap={30} className={styles.root}>
+          <span>1</span>
+          <span>2</span>
+          <span>3</span>
+          <span>4</span>
+          <span>5</span>
+          <span>6</span>
+          <span>7</span>
+          <span>8</span>
+          <span>9</span>
+          <span>10</span>
+        </Stack>
+      </Stack>
     );
   }
 
diff --git a/packages/experiments/src/components/Stack/HorizontalStack/examples/HorizontalStack.WrapAdvanced.Example.tsx b/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Horizontal.WrapAdvanced.Example.tsx
similarity index 73%
rename from packages/experiments/src/components/Stack/HorizontalStack/examples/HorizontalStack.WrapAdvanced.Example.tsx
rename to packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Horizontal.WrapAdvanced.Example.tsx
index 38afbd362800a..5d4079e8a5b3f 100644
--- a/packages/experiments/src/components/Stack/HorizontalStack/examples/HorizontalStack.WrapAdvanced.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Horizontal.WrapAdvanced.Example.tsx
@@ -1,10 +1,11 @@
+// @codepen
 import * as React from 'react';
-import { VerticalStack, HorizontalStack } from '@uifabric/experiments/lib/Stack';
-import { Text } from '@uifabric/experiments/lib/Text';
-import { Slider, Dropdown, IDropdownOption } from 'office-ui-fabric-react';
+import { Dropdown, IDropdownOption } from 'office-ui-fabric-react/lib/Dropdown';
+import { Slider } from 'office-ui-fabric-react/lib/Slider';
+import { Stack } from 'office-ui-fabric-react/lib/Stack';
 import { mergeStyleSets, DefaultPalette } from 'office-ui-fabric-react/lib/Styling';
 
-export type HorizontalAlignment = 'left' | 'center' | 'right' | 'space-around' | 'space-between' | 'space-evenly';
+export type HorizontalAlignment = 'start' | 'center' | 'end' | 'space-around' | 'space-between' | 'space-evenly';
 export type VerticalAlignment = 'top' | 'center' | 'bottom';
 export type Overflow = 'visible' | 'auto' | 'hidden';
 
@@ -22,7 +23,7 @@ export class HorizontalStackWrapAdvancedExample extends React.Component<{}, IExa
     this.state = {
       stackWidth: 100,
       containerHeight: 150,
-      horizontalAlignment: 'left',
+      horizontalAlignment: 'start',
       verticalAlignment: 'top',
       overflow: 'visible'
     };
@@ -55,12 +56,12 @@ export class HorizontalStackWrapAdvancedExample extends React.Component<{}, IExa
     });
 
     return (
-      <VerticalStack gap={10}>
-        <HorizontalStack>
-          <HorizontalStack.Item grow>
+      <Stack gap={10}>
+        <Stack horizontal>
+          <Stack.Item grow>
             <Slider label="Stack width:" min={1} max={100} step={1} defaultValue={100} showValue={true} onChange={this._onWidthChange} />
-          </HorizontalStack.Item>
-          <HorizontalStack.Item grow>
+          </Stack.Item>
+          <Stack.Item grow>
             <Slider
               label="Container height:"
               min={1}
@@ -70,27 +71,27 @@ export class HorizontalStackWrapAdvancedExample extends React.Component<{}, IExa
               showValue={true}
               onChange={this._onHeightChange}
             />
-          </HorizontalStack.Item>
-        </HorizontalStack>
+          </Stack.Item>
+        </Stack>
 
-        <HorizontalStack gap={20}>
-          <HorizontalStack.Item grow>
+        <Stack horizontal gap={20}>
+          <Stack.Item grow>
             <Dropdown
               selectedKey={horizontalAlignment}
               placeholder="Select Horizontal Alignment"
               label="Horizontal alignment:"
               options={[
-                { key: 'left', text: 'Left' },
+                { key: 'start', text: 'Left' },
                 { key: 'center', text: 'Center' },
-                { key: 'right', text: 'Right' },
+                { key: 'end', text: 'Right' },
                 { key: 'space-around', text: 'Space around' },
                 { key: 'space-between', text: 'Space between' },
                 { key: 'space-evenly', text: 'Space evenly' }
               ]}
               onChange={this._onHorizontalAlignChange}
             />
-          </HorizontalStack.Item>
-          <HorizontalStack.Item grow>
+          </Stack.Item>
+          <Stack.Item grow>
             <Dropdown
               selectedKey={verticalAlignment}
               placeholder="Select Vertical Alignment"
@@ -98,8 +99,8 @@ export class HorizontalStackWrapAdvancedExample extends React.Component<{}, IExa
               options={[{ key: 'top', text: 'Top' }, { key: 'center', text: 'Center' }, { key: 'bottom', text: 'Bottom' }]}
               onChange={this._onVerticalAlignChange}
             />
-          </HorizontalStack.Item>
-          <HorizontalStack.Item grow>
+          </Stack.Item>
+          <Stack.Item grow>
             <Dropdown
               selectedKey={overflow}
               placeholder="Select Overflow"
@@ -107,31 +108,32 @@ export class HorizontalStackWrapAdvancedExample extends React.Component<{}, IExa
               options={[{ key: 'visible', text: 'Visible' }, { key: 'auto', text: 'Auto' }, { key: 'hidden', text: 'Hidden' }]}
               onChange={this._onOverflowChange}
             />
-          </HorizontalStack.Item>
-        </HorizontalStack>
+          </Stack.Item>
+        </Stack>
 
         <div className={styles.container}>
-          <HorizontalStack
+          <Stack
+            horizontal
             fillVertical
             wrap
             gap={30}
-            horizontalAlign={horizontalAlignment}
-            verticalAlign={verticalAlignment}
+            horizontalAlignment={horizontalAlignment}
+            verticalAlignment={verticalAlignment}
             className={styles.root}
           >
-            <Text>1</Text>
-            <Text>2</Text>
-            <Text>3</Text>
-            <Text>4</Text>
-            <Text>5</Text>
-            <Text>6</Text>
-            <Text>7</Text>
-            <Text>8</Text>
-            <Text>9</Text>
-            <Text>10</Text>
-          </HorizontalStack>
+            <span>1</span>
+            <span>2</span>
+            <span>3</span>
+            <span>4</span>
+            <span>5</span>
+            <span>6</span>
+            <span>7</span>
+            <span>8</span>
+            <span>9</span>
+            <span>10</span>
+          </Stack>
         </div>
-      </VerticalStack>
+      </Stack>
     );
   }
 
diff --git a/packages/experiments/src/components/Stack/HorizontalStack/examples/HorizontalStack.WrapNested.Example.tsx b/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Horizontal.WrapNested.Example.tsx
similarity index 60%
rename from packages/experiments/src/components/Stack/HorizontalStack/examples/HorizontalStack.WrapNested.Example.tsx
rename to packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Horizontal.WrapNested.Example.tsx
index 06e1186e7d5dd..a24b4d092866e 100644
--- a/packages/experiments/src/components/Stack/HorizontalStack/examples/HorizontalStack.WrapNested.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Horizontal.WrapNested.Example.tsx
@@ -1,7 +1,7 @@
+// @codepen
 import * as React from 'react';
-import { VerticalStack, HorizontalStack } from '@uifabric/experiments/lib/Stack';
-import { Text } from '@uifabric/experiments/lib/Text';
-import { Slider } from 'office-ui-fabric-react';
+import { Slider } from 'office-ui-fabric-react/lib/Slider';
+import { Stack } from 'office-ui-fabric-react/lib/Stack';
 import { mergeStyleSets, IStyleSet, DefaultPalette } from 'office-ui-fabric-react/lib/Styling';
 
 export interface IExampleState {
@@ -64,7 +64,7 @@ export class HorizontalStackWrapNestedExample extends React.Component<{}, IExamp
     });
 
     return (
-      <VerticalStack gap={10}>
+      <Stack gap={10}>
         <Slider
           label="Change the stack width to see how child items wrap onto multiple rows:"
           min={1}
@@ -75,37 +75,37 @@ export class HorizontalStackWrapNestedExample extends React.Component<{}, IExamp
           onChange={this._onWidthChange}
         />
 
-        <HorizontalStack wrap gap={40} verticalGap={30} className={styles.root}>
-          <HorizontalStack wrap gap={30} verticalGap={10} className={styles.stackOne}>
-            <Text>1</Text>
-            <Text>2</Text>
-            <Text>3</Text>
-            <Text>4</Text>
-            <Text>5</Text>
-            <Text>6</Text>
-            <Text>7</Text>
-          </HorizontalStack>
+        <Stack horizontal wrap gap={40} verticalGap={30} className={styles.root}>
+          <Stack horizontal wrap gap={30} verticalGap={10} className={styles.stackOne}>
+            <span>1</span>
+            <span>2</span>
+            <span>3</span>
+            <span>4</span>
+            <span>5</span>
+            <span>6</span>
+            <span>7</span>
+          </Stack>
 
-          <HorizontalStack wrap gap={50} verticalGap={20} className={styles.stackTwo}>
-            <Text>1</Text>
-            <Text>2</Text>
-            <Text>3</Text>
-          </HorizontalStack>
+          <Stack horizontal wrap gap={50} verticalGap={20} className={styles.stackTwo}>
+            <span>1</span>
+            <span>2</span>
+            <span>3</span>
+          </Stack>
 
-          <HorizontalStack wrap className={styles.stackThree}>
-            <Text>1</Text>
-            <Text>2</Text>
-            <Text>3</Text>
-            <Text>4</Text>
-            <Text>5</Text>
-            <Text>6</Text>
-            <Text>7</Text>
-            <Text>8</Text>
-            <Text>9</Text>
-            <Text>10</Text>
-          </HorizontalStack>
-        </HorizontalStack>
-      </VerticalStack>
+          <Stack horizontal wrap className={styles.stackThree}>
+            <span>1</span>
+            <span>2</span>
+            <span>3</span>
+            <span>4</span>
+            <span>5</span>
+            <span>6</span>
+            <span>7</span>
+            <span>8</span>
+            <span>9</span>
+            <span>10</span>
+          </Stack>
+        </Stack>
+      </Stack>
     );
   }
 
diff --git a/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Vertical.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Vertical.Basic.Example.tsx
new file mode 100644
index 0000000000000..719998d60701f
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Vertical.Basic.Example.tsx
@@ -0,0 +1,69 @@
+// @codepen
+import * as React from 'react';
+import { Stack } from 'office-ui-fabric-react/lib/Stack';
+import { mergeStyleSets, DefaultPalette } from 'office-ui-fabric-react/lib/Styling';
+
+export class VerticalStackBasicExample extends React.Component<{}, {}> {
+  public render(): JSX.Element {
+    const styles = mergeStyleSets({
+      root: {
+        background: DefaultPalette.themeTertiary
+      },
+
+      item: {
+        color: DefaultPalette.white,
+        background: DefaultPalette.themePrimary,
+        padding: 5
+      }
+    });
+
+    return (
+      <Stack gap={5}>
+        <span>Default vertical stack</span>
+        <Stack className={styles.root}>
+          <span>Item One</span>
+          <span>Item Two</span>
+          <span>Item Three</span>
+        </Stack>
+
+        <span>Vertical gap between items</span>
+        <Stack gap={10} padding={10} className={styles.root}>
+          <span>Item One</span>
+          <span>Item Two</span>
+          <span>Item Three</span>
+        </Stack>
+
+        <span>Item alignments</span>
+        <Stack gap={5} padding={10} className={styles.root}>
+          <Stack.Item align="auto" className={styles.item}>
+            <span>Auto-aligned item</span>
+          </Stack.Item>
+          <Stack.Item align="stretch" className={styles.item}>
+            <span>Stretch-aligned item</span>
+          </Stack.Item>
+          <Stack.Item align="baseline" className={styles.item}>
+            <span>Baseline-aligned item</span>
+          </Stack.Item>
+          <Stack.Item align="start" className={styles.item}>
+            <span>Start-aligned item</span>
+          </Stack.Item>
+          <Stack.Item align="center" className={styles.item}>
+            <span>Center-aligned item</span>
+          </Stack.Item>
+          <Stack.Item align="end" className={styles.item}>
+            <span>End-aligned item</span>
+          </Stack.Item>
+        </Stack>
+
+        <span>Clickable vertical stack</span>
+        <Stack onClick={this._onClick} padding={10} className={styles.root}>
+          <span>Click inside this box</span>
+        </Stack>
+      </Stack>
+    );
+  }
+
+  private _onClick = (): void => {
+    alert('Clicked VerticalStack');
+  };
+}
diff --git a/packages/experiments/src/components/Stack/VerticalStack/examples/VerticalStack.Configure.Example.tsx b/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Vertical.Configure.Example.tsx
similarity index 79%
rename from packages/experiments/src/components/Stack/VerticalStack/examples/VerticalStack.Configure.Example.tsx
rename to packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Vertical.Configure.Example.tsx
index 2df1e3746d763..5b38b6abb8b7a 100644
--- a/packages/experiments/src/components/Stack/VerticalStack/examples/VerticalStack.Configure.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Vertical.Configure.Example.tsx
@@ -1,11 +1,14 @@
+// @codepen
 import * as React from 'react';
-import { VerticalStack, HorizontalStack } from '@uifabric/experiments/lib/Stack';
-import { Text } from '@uifabric/experiments/lib/Text';
-import { Slider, Checkbox, Dropdown, IDropdownOption, TextField } from 'office-ui-fabric-react';
+import { Checkbox } from 'office-ui-fabric-react/lib/Checkbox';
+import { Dropdown, IDropdownOption } from 'office-ui-fabric-react/lib/Dropdown';
+import { Slider } from 'office-ui-fabric-react/lib/Slider';
+import { Stack } from 'office-ui-fabric-react/lib/Stack';
 import { mergeStyleSets, DefaultPalette } from 'office-ui-fabric-react/lib/Styling';
+import { TextField } from 'office-ui-fabric-react/lib/TextField';
 
 export type VerticalAlignment = 'top' | 'center' | 'bottom' | 'space-around' | 'space-between' | 'space-evenly';
-export type HorizontalAlignment = 'left' | 'center' | 'right';
+export type HorizontalAlignment = 'start' | 'center' | 'end';
 
 export interface IExampleState {
   numItems: number;
@@ -41,7 +44,7 @@ export class VerticalStackConfigureExample extends React.Component<{}, IExampleS
       paddingTop: 0,
       paddingBottom: 0,
       verticalAlignment: 'top',
-      horizontalAlignment: 'left',
+      horizontalAlignment: 'start',
       hideEmptyChildren: false,
       emptyChildren: []
     };
@@ -92,10 +95,10 @@ export class VerticalStackConfigureExample extends React.Component<{}, IExampleS
     });
 
     return (
-      <VerticalStack gap={10}>
-        <HorizontalStack gap={20}>
-          <HorizontalStack.Item grow>
-            <VerticalStack>
+      <Stack gap={10}>
+        <Stack horizontal gap={20}>
+          <Stack.Item grow>
+            <Stack>
               <Slider
                 label="Number of items:"
                 min={1}
@@ -105,15 +108,15 @@ export class VerticalStackConfigureExample extends React.Component<{}, IExampleS
                 showValue={true}
                 onChange={this._onNumItemsChange}
               />
-              <HorizontalStack>
+              <Stack horizontal>
                 <Checkbox label="Shadow around items" onChange={this._onBoxShadowChange} styles={{ root: { marginRight: 10 } }} />
                 <Checkbox label="Prevent item overflow" onChange={this._onPreventOverflowChange} styles={{ root: { marginRight: 10 } }} />
                 <Checkbox label="Shrink items" onChange={this._onShrinkItemsChange} />
-              </HorizontalStack>
-            </VerticalStack>
-          </HorizontalStack.Item>
-          <HorizontalStack.Item grow>
-            <VerticalStack>
+              </Stack>
+            </Stack>
+          </Stack.Item>
+          <Stack.Item grow>
+            <Stack>
               <Slider
                 label="Container height:"
                 min={1}
@@ -125,13 +128,13 @@ export class VerticalStackConfigureExample extends React.Component<{}, IExampleS
                 disabled={autoHeight}
               />
               <Checkbox label="Automatic height (based on items)" defaultChecked={true} onChange={this._onAutoHeightChange} />
-            </VerticalStack>
-          </HorizontalStack.Item>
-        </HorizontalStack>
+            </Stack>
+          </Stack.Item>
+        </Stack>
 
-        <HorizontalStack gap={20}>
-          <HorizontalStack.Item grow>
-            <VerticalStack>
+        <Stack horizontal gap={20}>
+          <Stack.Item grow>
+            <Stack>
               <Slider
                 label="Vertical gap between items:"
                 min={0}
@@ -141,8 +144,8 @@ export class VerticalStackConfigureExample extends React.Component<{}, IExampleS
                 showValue={true}
                 onChange={this._onGapChange}
               />
-              <HorizontalStack gap={20} verticalAlign="bottom">
-                <HorizontalStack.Item grow>
+              <Stack horizontal gap={20} verticalAlignment="bottom">
+                <Stack.Item grow>
                   <Dropdown
                     selectedKey={verticalAlignment}
                     placeholder="Select Vertical Alignment"
@@ -157,27 +160,27 @@ export class VerticalStackConfigureExample extends React.Component<{}, IExampleS
                     ]}
                     onChange={this._onVerticalAlignChange}
                   />
-                </HorizontalStack.Item>
-                <HorizontalStack.Item grow>
+                </Stack.Item>
+                <Stack.Item grow>
                   <Dropdown
                     selectedKey={horizontalAlignment}
                     placeholder="Select Horizontal Alignment"
                     label="Horizontal alignment:"
-                    options={[{ key: 'left', text: 'Left' }, { key: 'center', text: 'Center' }, { key: 'right', text: 'Right' }]}
+                    options={[{ key: 'start', text: 'Left' }, { key: 'center', text: 'Center' }, { key: 'end', text: 'Right' }]}
                     onChange={this._onHorizontalAlignChange}
                   />
-                </HorizontalStack.Item>
-                <HorizontalStack.Item>
+                </Stack.Item>
+                <Stack.Item>
                   <Checkbox label="Hide empty children" onChange={this._onHideEmptyChildrenChange} />
-                </HorizontalStack.Item>
-                <HorizontalStack.Item grow>
+                </Stack.Item>
+                <Stack.Item grow>
                   <TextField label="List of empty children (e.g. 1 2 3):" onChange={this._onEmptyChildrenChange} />
-                </HorizontalStack.Item>
-              </HorizontalStack>
-            </VerticalStack>
-          </HorizontalStack.Item>
-          <HorizontalStack.Item grow>
-            <VerticalStack>
+                </Stack.Item>
+              </Stack>
+            </Stack>
+          </Stack.Item>
+          <Stack.Item grow>
+            <Stack>
               <Slider
                 label="Left padding:"
                 min={0}
@@ -196,10 +199,10 @@ export class VerticalStackConfigureExample extends React.Component<{}, IExampleS
                 showValue={true}
                 onChange={this._onPaddingRightChange}
               />
-            </VerticalStack>
-          </HorizontalStack.Item>
-          <HorizontalStack.Item grow>
-            <VerticalStack>
+            </Stack>
+          </Stack.Item>
+          <Stack.Item grow>
+            <Stack>
               <Slider
                 label="Top padding:"
                 min={0}
@@ -218,35 +221,31 @@ export class VerticalStackConfigureExample extends React.Component<{}, IExampleS
                 showValue={true}
                 onChange={this._onPaddingBottomChange}
               />
-            </VerticalStack>
-          </HorizontalStack.Item>
-        </HorizontalStack>
+            </Stack>
+          </Stack.Item>
+        </Stack>
 
-        <VerticalStack
+        <Stack
           shrinkItems={shrinkItems}
           gap={gap}
           padding={`${paddingTop}px ${paddingRight}px ${paddingBottom}px ${paddingLeft}px`}
-          verticalAlign={verticalAlignment}
-          horizontalAlign={horizontalAlignment}
+          verticalAlignment={verticalAlignment}
+          horizontalAlignment={horizontalAlignment}
           className={styles.root}
         >
           {this._range(1, numItems).map((value: number, index: number) => {
             if (emptyChildren.indexOf(value.toString()) !== -1) {
-              return hideEmptyChildren ? (
-                <VerticalStack.Item key={index} className={styles.item} />
-              ) : (
-                <Text key={index} className={styles.item} />
-              );
+              return hideEmptyChildren ? <Stack.Item key={index} className={styles.item} /> : <span key={index} className={styles.item} />;
             }
 
             return (
-              <Text key={index} className={styles.item}>
+              <span key={index} className={styles.item}>
                 {value}
-              </Text>
+              </span>
             );
           })}
-        </VerticalStack>
-      </VerticalStack>
+        </Stack>
+      </Stack>
     );
   }
 
diff --git a/packages/experiments/src/components/Stack/VerticalStack/examples/VerticalStack.Grow.Example.tsx b/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Vertical.Grow.Example.tsx
similarity index 56%
rename from packages/experiments/src/components/Stack/VerticalStack/examples/VerticalStack.Grow.Example.tsx
rename to packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Vertical.Grow.Example.tsx
index de31d18cf24e3..35ff8858263b9 100644
--- a/packages/experiments/src/components/Stack/VerticalStack/examples/VerticalStack.Grow.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Vertical.Grow.Example.tsx
@@ -1,5 +1,6 @@
+// @codepen
 import * as React from 'react';
-import { VerticalStack } from '@uifabric/experiments/lib/Stack';
+import { Stack } from 'office-ui-fabric-react/lib/Stack';
 import { mergeStyleSets, DefaultPalette } from 'office-ui-fabric-react/lib/Styling';
 
 export class VerticalStackGrowExample extends React.Component<{}, {}> {
@@ -20,19 +21,19 @@ export class VerticalStackGrowExample extends React.Component<{}, {}> {
     });
 
     return (
-      <VerticalStack gap={5}>
-        <VerticalStack gap={5} padding={10} className={styles.root}>
-          <VerticalStack.Item grow={3} className={styles.item}>
+      <Stack gap={5}>
+        <Stack gap={5} padding={10} className={styles.root}>
+          <Stack.Item grow={3} className={styles.item}>
             Grow is 3
-          </VerticalStack.Item>
-          <VerticalStack.Item grow={2} className={styles.item}>
+          </Stack.Item>
+          <Stack.Item grow={2} className={styles.item}>
             Grow is 2
-          </VerticalStack.Item>
-          <VerticalStack.Item grow className={styles.item}>
+          </Stack.Item>
+          <Stack.Item grow className={styles.item}>
             Grow is 1
-          </VerticalStack.Item>
-        </VerticalStack>
-      </VerticalStack>
+          </Stack.Item>
+        </Stack>
+      </Stack>
     );
   }
 }
diff --git a/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Vertical.HorizontalAlign.Example.tsx b/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Vertical.HorizontalAlign.Example.tsx
new file mode 100644
index 0000000000000..dc4be56bea87a
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Vertical.HorizontalAlign.Example.tsx
@@ -0,0 +1,47 @@
+// @codepen
+import * as React from 'react';
+import { Stack } from 'office-ui-fabric-react/lib/Stack';
+import { mergeStyleSets, DefaultPalette } from 'office-ui-fabric-react/lib/Styling';
+
+export class VerticalStackHorizontalAlignExample extends React.Component<{}, {}> {
+  public render(): JSX.Element {
+    const styles = mergeStyleSets({
+      root: {
+        background: DefaultPalette.themeTertiary,
+        selectors: {
+          '> *': {
+            width: 50,
+            height: 50,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            background: DefaultPalette.themePrimary,
+            color: DefaultPalette.white
+          }
+        }
+      }
+    });
+
+    return (
+      <Stack gap={5}>
+        <span>Left-aligned</span>
+        <Stack horizontalAlignment="start" className={styles.root}>
+          <span>1</span>
+          <span>2</span>
+        </Stack>
+
+        <span>Horizontally centered</span>
+        <Stack horizontalAlignment="center" className={styles.root}>
+          <span>1</span>
+          <span>2</span>
+        </Stack>
+
+        <span>Right-aligned</span>
+        <Stack horizontalAlignment="end" className={styles.root}>
+          <span>1</span>
+          <span>2</span>
+        </Stack>
+      </Stack>
+    );
+  }
+}
diff --git a/packages/experiments/src/components/Stack/VerticalStack/examples/VerticalStack.Shrink.Example.tsx b/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Vertical.Shrink.Example.tsx
similarity index 66%
rename from packages/experiments/src/components/Stack/VerticalStack/examples/VerticalStack.Shrink.Example.tsx
rename to packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Vertical.Shrink.Example.tsx
index 3bfe7ebb9c383..cee36594f957c 100644
--- a/packages/experiments/src/components/Stack/VerticalStack/examples/VerticalStack.Shrink.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Vertical.Shrink.Example.tsx
@@ -1,6 +1,7 @@
+// @codepen
 import * as React from 'react';
-import { VerticalStack } from '@uifabric/experiments/lib/Stack';
-import { Slider } from 'office-ui-fabric-react';
+import { Slider } from 'office-ui-fabric-react/lib/Slider';
+import { Stack } from 'office-ui-fabric-react/lib/Stack';
 import { mergeStyleSets, DefaultPalette } from 'office-ui-fabric-react/lib/Styling';
 
 export interface IExampleState {
@@ -38,7 +39,7 @@ export class VerticalStackShrinkExample extends React.Component<{}, IExampleStat
     });
 
     return (
-      <VerticalStack gap={5}>
+      <Stack gap={5}>
         <Slider
           label="Change the stack height to see how child items shrink:"
           min={1}
@@ -49,22 +50,22 @@ export class VerticalStackShrinkExample extends React.Component<{}, IExampleStat
           onChange={this._onHeightChange}
         />
         <div className={styles.container}>
-          <VerticalStack shrinkItems gap={5} padding={10} className={styles.root}>
-            <VerticalStack.Item grow className={styles.item}>
+          <Stack shrinkItems gap={5} padding={10} className={styles.root}>
+            <Stack.Item grow className={styles.item}>
               I shrink
-            </VerticalStack.Item>
-            <VerticalStack.Item grow className={styles.item}>
+            </Stack.Item>
+            <Stack.Item grow className={styles.item}>
               I shrink
-            </VerticalStack.Item>
-            <VerticalStack.Item grow preventShrink className={styles.item} styles={{ root: { height: 50 } }}>
+            </Stack.Item>
+            <Stack.Item grow preventShrink className={styles.item} styles={{ root: { height: 50 } }}>
               I don't shrink
-            </VerticalStack.Item>
-            <VerticalStack.Item grow className={styles.item}>
+            </Stack.Item>
+            <Stack.Item grow className={styles.item}>
               I shrink
-            </VerticalStack.Item>
-          </VerticalStack>
+            </Stack.Item>
+          </Stack>
         </div>
-      </VerticalStack>
+      </Stack>
     );
   }
 
diff --git a/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Vertical.Spacing.Example.tsx b/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Vertical.Spacing.Example.tsx
new file mode 100644
index 0000000000000..15b50d3016a36
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Vertical.Spacing.Example.tsx
@@ -0,0 +1,95 @@
+// @codepen
+import * as React from 'react';
+import { Stack } from 'office-ui-fabric-react/lib/Stack';
+import { mergeStyleSets, DefaultPalette } from 'office-ui-fabric-react/lib/Styling';
+
+export class VerticalStackSpacingExample extends React.Component<{}, {}> {
+  public render(): JSX.Element {
+    const styles = mergeStyleSets({
+      root: {
+        background: DefaultPalette.themeTertiary
+      },
+
+      item: {
+        width: 50,
+        height: 50,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        background: DefaultPalette.themePrimary,
+        color: DefaultPalette.white
+      }
+    });
+
+    return (
+      <Stack gap={10}>
+        <Stack horizontal gap={50}>
+          <Stack>
+            <span>Numerical spacing</span>
+            <Stack className={styles.root} gap={10} padding={10}>
+              <span className={styles.item}>1</span>
+              <span className={styles.item}>2</span>
+              <span className={styles.item}>3</span>
+            </Stack>
+          </Stack>
+
+          <Stack>
+            <span>Custom spacing</span>
+            <Stack className={styles.root} gap="20%" padding="m 40px">
+              <span className={styles.item}>1</span>
+              <span className={styles.item}>2</span>
+              <span className={styles.item}>3</span>
+            </Stack>
+          </Stack>
+        </Stack>
+
+        <Stack horizontal horizontalAlignment="space-between">
+          <Stack>
+            <span>Themed spacing (extra small)</span>
+            <Stack className={styles.root} gap="s2" padding="s2">
+              <span className={styles.item}>1</span>
+              <span className={styles.item}>2</span>
+              <span className={styles.item}>3</span>
+            </Stack>
+          </Stack>
+
+          <Stack>
+            <span>Themed spacing (small)</span>
+            <Stack className={styles.root} gap="s1" padding="s2">
+              <span className={styles.item}>1</span>
+              <span className={styles.item}>2</span>
+              <span className={styles.item}>3</span>
+            </Stack>
+          </Stack>
+
+          <Stack>
+            <span>Themed spacing (medium)</span>
+            <Stack className={styles.root} gap="m" padding="m">
+              <span className={styles.item}>1</span>
+              <span className={styles.item}>2</span>
+              <span className={styles.item}>3</span>
+            </Stack>
+          </Stack>
+
+          <Stack>
+            <span>Themed spacing (large)</span>
+            <Stack className={styles.root} gap="l1" padding="l1">
+              <span className={styles.item}>1</span>
+              <span className={styles.item}>2</span>
+              <span className={styles.item}>3</span>
+            </Stack>
+          </Stack>
+
+          <Stack>
+            <span>Themed spacing (extra large)</span>
+            <Stack className={styles.root} gap="l2" padding="l2">
+              <span className={styles.item}>1</span>
+              <span className={styles.item}>2</span>
+              <span className={styles.item}>3</span>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Stack>
+    );
+  }
+}
diff --git a/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Vertical.VerticalAlign.Example.tsx b/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Vertical.VerticalAlign.Example.tsx
new file mode 100644
index 0000000000000..590c17afa04cf
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Vertical.VerticalAlign.Example.tsx
@@ -0,0 +1,88 @@
+// @codepen
+import * as React from 'react';
+import { Stack } from 'office-ui-fabric-react/lib/Stack';
+import { mergeStyleSets, DefaultPalette } from 'office-ui-fabric-react/lib/Styling';
+
+export class VerticalStackVerticalAlignExample extends React.Component<{}, {}> {
+  public render(): JSX.Element {
+    const styles = mergeStyleSets({
+      root: {
+        background: DefaultPalette.themeTertiary,
+        height: 250,
+        selectors: {
+          '> *': {
+            width: 50,
+            height: 50,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            background: DefaultPalette.themePrimary,
+            color: DefaultPalette.white
+          }
+        }
+      }
+    });
+
+    return (
+      <Stack gap={10}>
+        <Stack horizontal gap={30} horizontalAlignment="space-between">
+          <Stack grow>
+            <span>Top-aligned</span>
+            <Stack verticalAlignment="top" className={styles.root}>
+              <span>1</span>
+              <span>2</span>
+              <span>3</span>
+            </Stack>
+          </Stack>
+
+          <Stack grow>
+            <span>Vertically centered</span>
+            <Stack verticalAlignment="center" className={styles.root}>
+              <span>1</span>
+              <span>2</span>
+              <span>3</span>
+            </Stack>
+          </Stack>
+
+          <Stack grow>
+            <span>Bottom-aligned</span>
+            <Stack verticalAlignment="bottom" className={styles.root}>
+              <span>1</span>
+              <span>2</span>
+              <span>3</span>
+            </Stack>
+          </Stack>
+        </Stack>
+
+        <Stack horizontal gap={30} horizontalAlignment="space-between">
+          <Stack grow>
+            <span>Vertical space around items</span>
+            <Stack verticalAlignment="space-around" className={styles.root}>
+              <span>1</span>
+              <span>2</span>
+              <span>3</span>
+            </Stack>
+          </Stack>
+
+          <Stack grow>
+            <span>Vertical space between items</span>
+            <Stack verticalAlignment="space-between" className={styles.root}>
+              <span>1</span>
+              <span>2</span>
+              <span>3</span>
+            </Stack>
+          </Stack>
+
+          <Stack grow>
+            <span>Items vertically evenly spaced</span>
+            <Stack verticalAlignment="space-evenly" className={styles.root}>
+              <span>1</span>
+              <span>2</span>
+              <span>3</span>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Stack>
+    );
+  }
+}
diff --git a/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Vertical.Wrap.Example.tsx b/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Vertical.Wrap.Example.tsx
new file mode 100644
index 0000000000000..aa71d06e5afcd
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Vertical.Wrap.Example.tsx
@@ -0,0 +1,67 @@
+// @codepen
+import * as React from 'react';
+import { Slider } from 'office-ui-fabric-react/lib/Slider';
+import { Stack } from 'office-ui-fabric-react/lib/Stack';
+import { mergeStyleSets, DefaultPalette } from 'office-ui-fabric-react/lib/Styling';
+
+export interface IExampleState {
+  stackHeight: number;
+}
+
+export class VerticalStackWrapExample extends React.Component<{}, IExampleState> {
+  constructor(props: {}) {
+    super(props);
+    this.state = {
+      stackHeight: 420
+    };
+  }
+
+  public render(): JSX.Element {
+    const { stackHeight } = this.state;
+
+    const styles = mergeStyleSets({
+      root: {
+        background: DefaultPalette.themeTertiary,
+        height: stackHeight,
+        selectors: {
+          '& span': {
+            width: 50,
+            height: 50,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            background: DefaultPalette.themePrimary,
+            color: DefaultPalette.white
+          }
+        }
+      }
+    });
+
+    return (
+      <Stack gap={10}>
+        <Slider
+          label="Change the stack height to see how child items wrap onto multiple columns:"
+          min={1}
+          max={420}
+          step={1}
+          defaultValue={420}
+          showValue={true}
+          onChange={this._onHeightChange}
+        />
+
+        <Stack wrap gap={20} className={styles.root}>
+          <span>1</span>
+          <span>2</span>
+          <span>3</span>
+          <span>4</span>
+          <span>5</span>
+          <span>6</span>
+        </Stack>
+      </Stack>
+    );
+  }
+
+  private _onHeightChange = (value: number): void => {
+    this.setState({ stackHeight: value });
+  };
+}
diff --git a/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Vertical.WrapAdvanced.Example.tsx b/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Vertical.WrapAdvanced.Example.tsx
new file mode 100644
index 0000000000000..04c93018ba779
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Vertical.WrapAdvanced.Example.tsx
@@ -0,0 +1,154 @@
+// @codepen
+import * as React from 'react';
+import { Dropdown, IDropdownOption } from 'office-ui-fabric-react/lib/Dropdown';
+import { Slider } from 'office-ui-fabric-react/lib/Slider';
+import { Stack } from 'office-ui-fabric-react/lib/Stack';
+import { mergeStyleSets, DefaultPalette } from 'office-ui-fabric-react/lib/Styling';
+
+export type HorizontalAlignment = 'start' | 'center' | 'end' | 'space-around' | 'space-between' | 'space-evenly';
+export type VerticalAlignment = 'top' | 'center' | 'bottom';
+export type Overflow = 'visible' | 'auto' | 'hidden';
+
+export interface IExampleState {
+  stackWidth: number;
+  containerHeight: number;
+  horizontalAlignment: HorizontalAlignment;
+  verticalAlignment: VerticalAlignment;
+  overflow: Overflow;
+}
+
+export class VerticalStackWrapAdvancedExample extends React.Component<{}, IExampleState> {
+  constructor(props: {}) {
+    super(props);
+    this.state = {
+      stackWidth: 100,
+      containerHeight: 420,
+      horizontalAlignment: 'start',
+      verticalAlignment: 'top',
+      overflow: 'visible'
+    };
+  }
+
+  public render(): JSX.Element {
+    const { stackWidth, containerHeight, overflow, horizontalAlignment, verticalAlignment } = this.state;
+
+    const styles = mergeStyleSets({
+      root: {
+        background: DefaultPalette.themeTertiary,
+        width: `${stackWidth}%`,
+        overflow,
+        selectors: {
+          '& span': {
+            width: 50,
+            height: 50,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            background: DefaultPalette.themePrimary,
+            color: DefaultPalette.white
+          }
+        }
+      },
+
+      container: {
+        height: containerHeight
+      }
+    });
+
+    return (
+      <Stack gap={10}>
+        <Stack horizontal>
+          <Stack.Item grow>
+            <Slider label="Stack height:" min={1} max={420} step={1} defaultValue={420} showValue={true} onChange={this._onHeightChange} />
+          </Stack.Item>
+          <Stack.Item grow>
+            <Slider
+              label="Container width:"
+              min={1}
+              max={100}
+              step={1}
+              defaultValue={100}
+              showValue={true}
+              onChange={this._onWidthChange}
+            />
+          </Stack.Item>
+        </Stack>
+
+        <Stack horizontal gap={20}>
+          <Stack.Item grow>
+            <Dropdown
+              selectedKey={horizontalAlignment}
+              placeholder="Select Horizontal Alignment"
+              label="Horizontal alignment:"
+              options={[{ key: 'start', text: 'Left' }, { key: 'center', text: 'Center' }, { key: 'end', text: 'Right' }]}
+              onChange={this._onHorizontalAlignChange}
+            />
+          </Stack.Item>
+          <Stack.Item grow>
+            <Dropdown
+              selectedKey={verticalAlignment}
+              placeholder="Select Vertical Alignment"
+              label="Vertical alignment:"
+              options={[
+                { key: 'top', text: 'Top' },
+                { key: 'center', text: 'Center' },
+                { key: 'bottom', text: 'Bottom' },
+                { key: 'space-around', text: 'Space around' },
+                { key: 'space-between', text: 'Space between' },
+                { key: 'space-evenly', text: 'Space evenly' }
+              ]}
+              onChange={this._onVerticalAlignChange}
+            />
+          </Stack.Item>
+          <Stack.Item grow>
+            <Dropdown
+              selectedKey={overflow}
+              placeholder="Select Overflow"
+              label="Overflow:"
+              options={[{ key: 'visible', text: 'Visible' }, { key: 'auto', text: 'Auto' }, { key: 'hidden', text: 'Hidden' }]}
+              onChange={this._onOverflowChange}
+            />
+          </Stack.Item>
+        </Stack>
+
+        <div className={styles.container}>
+          <Stack
+            fillVertical
+            wrap
+            gap={20}
+            horizontalAlignment={horizontalAlignment}
+            verticalAlignment={verticalAlignment}
+            className={styles.root}
+          >
+            <span>1</span>
+            <span>2</span>
+            <span>3</span>
+            <span>4</span>
+            <span>5</span>
+            <span>6</span>
+          </Stack>
+        </div>
+      </Stack>
+    );
+  }
+
+  private _onWidthChange = (value: number): void => {
+    this.setState({ stackWidth: value });
+  };
+
+  private _onHeightChange = (value: number): void => {
+    this.setState({ containerHeight: value });
+  };
+
+  private _onHorizontalAlignChange = (ev: React.FormEvent<HTMLDivElement>, option: IDropdownOption): void => {
+    this.setState({ horizontalAlignment: option.key as HorizontalAlignment });
+  };
+
+  private _onVerticalAlignChange = (ev: React.FormEvent<HTMLDivElement>, option: IDropdownOption): void => {
+    this.setState({ verticalAlignment: option.key as VerticalAlignment });
+  };
+
+  private _onOverflowChange = (ev: React.FormEvent<HTMLDivElement>, option: IDropdownOption): void => {
+    this.setState({ overflow: option.key as Overflow });
+  };
+}
diff --git a/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Vertical.WrapNested.Example.tsx b/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Vertical.WrapNested.Example.tsx
new file mode 100644
index 0000000000000..c1b10eed7fa37
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Vertical.WrapNested.Example.tsx
@@ -0,0 +1,117 @@
+// @codepen
+import * as React from 'react';
+import { Slider } from 'office-ui-fabric-react/lib/Slider';
+import { Stack } from 'office-ui-fabric-react/lib/Stack';
+import { mergeStyleSets, IStyleSet, DefaultPalette } from 'office-ui-fabric-react/lib/Styling';
+
+export interface IExampleState {
+  stackHeight: number;
+}
+
+export class VerticalStackWrapNestedExample extends React.Component<{}, IExampleState> {
+  constructor(props: {}) {
+    super(props);
+    this.state = {
+      stackHeight: 420
+    };
+  }
+
+  public render(): JSX.Element {
+    const textStyles = {
+      width: 50,
+      height: 50,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      color: DefaultPalette.white
+    } as IStyleSet<{}>;
+
+    const { stackHeight } = this.state;
+
+    const styles = mergeStyleSets({
+      root: {
+        background: DefaultPalette.themeTertiary,
+        height: stackHeight
+      },
+
+      stackOne: {
+        background: DefaultPalette.neutralTertiary,
+        selectors: {
+          '& span': {
+            ...textStyles,
+            background: DefaultPalette.themePrimary
+          }
+        }
+      },
+
+      stackTwo: {
+        background: DefaultPalette.neutralSecondary,
+        selectors: {
+          '& span': {
+            ...textStyles,
+            background: DefaultPalette.themeDark
+          }
+        }
+      },
+
+      stackThree: {
+        background: DefaultPalette.neutralPrimary,
+        selectors: {
+          '& span': {
+            ...textStyles,
+            background: DefaultPalette.themeDarker
+          }
+        }
+      }
+    });
+
+    return (
+      <Stack gap={10}>
+        <Slider
+          label="Change the stack height to see how child items wrap onto multiple columns:"
+          min={1}
+          max={420}
+          step={1}
+          defaultValue={420}
+          showValue={true}
+          onChange={this._onHeightChange}
+        />
+
+        <Stack wrap gap={40} verticalGap={30} className={styles.root}>
+          <Stack wrap gap={30} verticalGap={10} className={styles.stackOne}>
+            <span>1</span>
+            <span>2</span>
+            <span>3</span>
+            <span>4</span>
+            <span>5</span>
+            <span>6</span>
+            <span>7</span>
+          </Stack>
+
+          <Stack wrap gap={50} verticalGap={20} className={styles.stackTwo}>
+            <span>1</span>
+            <span>2</span>
+            <span>3</span>
+          </Stack>
+
+          <Stack wrap className={styles.stackThree}>
+            <span>1</span>
+            <span>2</span>
+            <span>3</span>
+            <span>4</span>
+            <span>5</span>
+            <span>6</span>
+            <span>7</span>
+            <span>8</span>
+            <span>9</span>
+            <span>10</span>
+          </Stack>
+        </Stack>
+      </Stack>
+    );
+  }
+
+  private _onHeightChange = (value: number): void => {
+    this.setState({ stackHeight: value });
+  };
+}
diff --git a/packages/office-ui-fabric-react/src/components/Stack/index.ts b/packages/office-ui-fabric-react/src/components/Stack/index.ts
new file mode 100644
index 0000000000000..8ccdc2c7462e3
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Stack/index.ts
@@ -0,0 +1,3 @@
+export * from './StackItem/StackItem';
+export * from './Stack';
+export * from './Stack.types';
diff --git a/packages/office-ui-fabric-react/src/components/__snapshots__/Stack.Horizontal.Basic.Example.tsx.shot b/packages/office-ui-fabric-react/src/components/__snapshots__/Stack.Horizontal.Basic.Example.tsx.shot
new file mode 100644
index 0000000000000..492780cbc8384
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/__snapshots__/Stack.Horizontal.Basic.Example.tsx.shot
@@ -0,0 +1,319 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Component Examples renders Stack.Horizontal.Basic.Example.tsx correctly 1`] = `
+<div
+  className=
+      ms-Stack
+      {
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        flex-wrap: nowrap;
+        height: auto;
+        width: auto;
+      }
+      & > * {
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      & > *:not(:first-child) {
+        margin-top: 5px;
+      }
+      & > *:not(.ms-StackItem) {
+        flex-shrink: 0;
+      }
+>
+  <span>
+    Default horizontal stack
+  </span>
+  <div
+    className=
+        ms-Stack
+        {
+          background: #71afe5;
+          box-sizing: border-box;
+          display: flex;
+          flex-direction: row;
+          flex-wrap: nowrap;
+          height: auto;
+          width: auto;
+        }
+        & > * {
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+        & > *:not(:first-child) {
+          margin-left: 0px;
+        }
+        & > *:not(.ms-StackItem) {
+          flex-shrink: 0;
+        }
+  >
+    <span>
+      Item One
+    </span>
+    <span>
+      Item Two
+    </span>
+    <span>
+      Item Three
+    </span>
+  </div>
+  <span>
+    Horizontal gap between items
+  </span>
+  <div
+    className=
+        ms-Stack
+        {
+          background: #71afe5;
+          box-sizing: border-box;
+          display: flex;
+          flex-direction: row;
+          flex-wrap: nowrap;
+          height: auto;
+          padding-bottom: 10px;
+          padding-left: 10px;
+          padding-right: 10px;
+          padding-top: 10px;
+          width: auto;
+        }
+        & > * {
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+        & > *:not(:first-child) {
+          margin-left: 10px;
+        }
+        & > *:not(.ms-StackItem) {
+          flex-shrink: 0;
+        }
+  >
+    <span>
+      Item One
+    </span>
+    <span>
+      Item Two
+    </span>
+    <span>
+      Item Three
+    </span>
+  </div>
+  <span>
+    Item alignments
+  </span>
+  <div
+    className=
+        ms-Stack
+        {
+          background: #71afe5;
+          box-sizing: border-box;
+          display: flex;
+          flex-direction: row;
+          flex-wrap: nowrap;
+          height: 100px;
+          padding-bottom: 10px;
+          padding-left: 10px;
+          padding-right: 10px;
+          padding-top: 10px;
+          width: auto;
+        }
+        & > * {
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+        & > *:not(:first-child) {
+          margin-left: 5px;
+        }
+        & > *:not(.ms-StackItem) {
+          flex-shrink: 0;
+        }
+  >
+    <span
+      className=
+          ms-StackItem
+          {
+            -moz-osx-font-smoothing: grayscale;
+            -webkit-font-smoothing: antialiased;
+            align-self: auto;
+            background: #0078d4;
+            color: #ffffff;
+            flex-shrink: 0;
+            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+            font-size: 14px;
+            font-weight: 400;
+            height: auto;
+            padding-bottom: 5px;
+            padding-left: 5px;
+            padding-right: 5px;
+            padding-top: 5px;
+            width: auto;
+          }
+    >
+      <span>
+        Auto-aligned item
+      </span>
+    </span>
+    <span
+      className=
+          ms-StackItem
+          {
+            -moz-osx-font-smoothing: grayscale;
+            -webkit-font-smoothing: antialiased;
+            align-self: stretch;
+            background: #0078d4;
+            color: #ffffff;
+            flex-shrink: 0;
+            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+            font-size: 14px;
+            font-weight: 400;
+            height: auto;
+            padding-bottom: 5px;
+            padding-left: 5px;
+            padding-right: 5px;
+            padding-top: 5px;
+            width: auto;
+          }
+    >
+      <span>
+        Stretch-aligned item
+      </span>
+    </span>
+    <span
+      className=
+          ms-StackItem
+          {
+            -moz-osx-font-smoothing: grayscale;
+            -webkit-font-smoothing: antialiased;
+            align-self: baseline;
+            background: #0078d4;
+            color: #ffffff;
+            flex-shrink: 0;
+            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+            font-size: 14px;
+            font-weight: 400;
+            height: auto;
+            padding-bottom: 5px;
+            padding-left: 5px;
+            padding-right: 5px;
+            padding-top: 5px;
+            width: auto;
+          }
+    >
+      <span>
+        Baseline-aligned item
+      </span>
+    </span>
+    <span
+      className=
+          ms-StackItem
+          {
+            -moz-osx-font-smoothing: grayscale;
+            -webkit-font-smoothing: antialiased;
+            align-self: flex-start;
+            background: #0078d4;
+            color: #ffffff;
+            flex-shrink: 0;
+            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+            font-size: 14px;
+            font-weight: 400;
+            height: auto;
+            padding-bottom: 5px;
+            padding-left: 5px;
+            padding-right: 5px;
+            padding-top: 5px;
+            width: auto;
+          }
+    >
+      <span>
+        Start-aligned item
+      </span>
+    </span>
+    <span
+      className=
+          ms-StackItem
+          {
+            -moz-osx-font-smoothing: grayscale;
+            -webkit-font-smoothing: antialiased;
+            align-self: center;
+            background: #0078d4;
+            color: #ffffff;
+            flex-shrink: 0;
+            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+            font-size: 14px;
+            font-weight: 400;
+            height: auto;
+            padding-bottom: 5px;
+            padding-left: 5px;
+            padding-right: 5px;
+            padding-top: 5px;
+            width: auto;
+          }
+    >
+      <span>
+        Center-aligned item
+      </span>
+    </span>
+    <span
+      className=
+          ms-StackItem
+          {
+            -moz-osx-font-smoothing: grayscale;
+            -webkit-font-smoothing: antialiased;
+            align-self: flex-end;
+            background: #0078d4;
+            color: #ffffff;
+            flex-shrink: 0;
+            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+            font-size: 14px;
+            font-weight: 400;
+            height: auto;
+            padding-bottom: 5px;
+            padding-left: 5px;
+            padding-right: 5px;
+            padding-top: 5px;
+            width: auto;
+          }
+    >
+      <span>
+        End-aligned item
+      </span>
+    </span>
+  </div>
+  <span>
+    Clickable stack
+  </span>
+  <div
+    className=
+        ms-Stack
+        {
+          background: #71afe5;
+          box-sizing: border-box;
+          display: flex;
+          flex-direction: row;
+          flex-wrap: nowrap;
+          height: auto;
+          padding-bottom: 10px;
+          padding-left: 10px;
+          padding-right: 10px;
+          padding-top: 10px;
+          width: auto;
+        }
+        & > * {
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+        & > *:not(:first-child) {
+          margin-left: 0px;
+        }
+        & > *:not(.ms-StackItem) {
+          flex-shrink: 0;
+        }
+    onClick={[Function]}
+  >
+    <span>
+      Click inside this box
+    </span>
+  </div>
+</div>
+`;
diff --git a/packages/office-ui-fabric-react/src/components/__snapshots__/Stack.Horizontal.Configure.Example.tsx.shot b/packages/office-ui-fabric-react/src/components/__snapshots__/Stack.Horizontal.Configure.Example.tsx.shot
new file mode 100644
index 0000000000000..6b81523a8c5fd
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/__snapshots__/Stack.Horizontal.Configure.Example.tsx.shot
@@ -0,0 +1,3798 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Component Examples renders Stack.Horizontal.Configure.Example.tsx correctly 1`] = `
+<div
+  className=
+      ms-Stack
+      {
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        flex-wrap: nowrap;
+        height: auto;
+        width: auto;
+      }
+      & > * {
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      & > *:not(:first-child) {
+        margin-top: 10px;
+      }
+      & > *:not(.ms-StackItem) {
+        flex-shrink: 0;
+      }
+>
+  <div
+    className=
+        ms-Stack
+        {
+          box-sizing: border-box;
+          display: flex;
+          flex-direction: row;
+          flex-wrap: nowrap;
+          height: auto;
+          width: auto;
+        }
+        & > * {
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+        & > *:not(:first-child) {
+          margin-left: 0px;
+        }
+        & > *:not(.ms-StackItem) {
+          flex-shrink: 0;
+        }
+  >
+    <span
+      className=
+          ms-StackItem
+          {
+            -moz-osx-font-smoothing: grayscale;
+            -webkit-font-smoothing: antialiased;
+            flex-grow: 1;
+            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+            font-size: 14px;
+            font-weight: 400;
+            height: auto;
+            width: auto;
+          }
+    >
+      <div
+        className=
+            ms-Stack
+            {
+              box-sizing: border-box;
+              display: flex;
+              flex-direction: column;
+              flex-wrap: nowrap;
+              height: auto;
+              width: auto;
+            }
+            & > * {
+              text-overflow: ellipsis;
+              white-space: nowrap;
+            }
+            & > *:not(:first-child) {
+              margin-top: 0px;
+            }
+            & > *:not(.ms-StackItem) {
+              flex-shrink: 0;
+            }
+      >
+        <div
+          className=
+              ms-Slider
+              ms-Slider-enabled
+              ms-Slider-row
+              {
+                -moz-osx-font-smoothing: grayscale;
+                -webkit-font-smoothing: antialiased;
+                font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                font-size: 14px;
+                font-weight: 400;
+                user-select: none;
+              }
+        >
+          <label
+            className=
+                ms-Label
+                {
+                  -moz-osx-font-smoothing: grayscale;
+                  -webkit-font-smoothing: antialiased;
+                  box-shadow: none;
+                  box-sizing: border-box;
+                  color: #333333;
+                  display: block;
+                  font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                  font-size: 14px;
+                  font-weight: 400;
+                  margin-bottom: 0px;
+                  margin-left: 0px;
+                  margin-right: 0px;
+                  margin-top: 0px;
+                  overflow-wrap: break-word;
+                  padding-bottom: 0px;
+                  padding-left: 0px;
+                  padding-right: 0px;
+                  padding-top: 0px;
+                  word-wrap: break-word;
+                }
+            htmlFor="Slider0"
+          >
+            Number of items:
+          </label>
+          <div
+            className=
+                ms-Slider-container
+                {
+                  align-items: center;
+                  display: flex;
+                  flex-wrap: nowrap;
+                }
+          >
+            <div
+              aria-disabled={false}
+              aria-label="Number of items:"
+              aria-valuemax={30}
+              aria-valuemin={1}
+              aria-valuenow={5}
+              className=
+                  ms-Slider-slideBox
+                  ms-Slider-showValue
+                  ms-Slider-showTransitions
+                  {
+                    align-items: center;
+                    background: transparent;
+                    border: none;
+                    display: flex;
+                    flex-grow: 1;
+                    height: 28px;
+                    line-height: 28px;
+                    outline: transparent;
+                    padding-bottom: 0;
+                    padding-left: 8px;
+                    padding-right: 8px;
+                    padding-top: 0;
+                    position: relative;
+                    width: auto;
+                  }
+                  &::-moz-focus-inner {
+                    border: 0;
+                  }
+                  .ms-Fabric--isFocusVisible &:focus:after {
+                    border: 1px solid #ffffff;
+                    bottom: 1px;
+                    content: "";
+                    left: 1px;
+                    outline: 1px solid #666666;
+                    position: absolute;
+                    right: 1px;
+                    top: 1px;
+                    z-index: 1;
+                  }
+                  &:active $activeSection {
+                    background-color: #0078d4;
+                  }
+                  @media screen and (-ms-high-contrast: active){&:active $activeSection {
+                    background-color: Highlight;
+                  }
+                  &:hover $activeSection {
+                    background-color: #0078d4;
+                  }
+                  @media screen and (-ms-high-contrast: active){&:hover $activeSection {
+                    background-color: Highlight;
+                  }
+                  &:active $inactiveSection {
+                    background-color: #c7e0f4;
+                  }
+                  @media screen and (-ms-high-contrast: active){&:active $inactiveSection {
+                    border-color: Highlight;
+                  }
+                  &:hover $inactiveSection {
+                    background-color: #c7e0f4;
+                  }
+                  @media screen and (-ms-high-contrast: active){&:hover $inactiveSection {
+                    border-color: Highlight;
+                  }
+                  &:active $thumb {
+                    border: 2px solid #0078d4;
+                  }
+                  @media screen and (-ms-high-contrast: active){&:active $thumb {
+                    border-color: Highlight;
+                  }
+                  &:hover $thumb {
+                    border: 2px solid #0078d4;
+                  }
+                  @media screen and (-ms-high-contrast: active){&:hover $thumb {
+                    border-color: Highlight;
+                  }
+                  & $thumb {
+                    background: #ffffff;
+                    border-color: #666666;
+                    border-radius: 10px;
+                    border-style: solid;
+                    border-width: 2px;
+                    box-sizing: border-box;
+                    display: block;
+                    height: 16px;
+                    position: absolute;
+                    top: -6px;
+                    transform: translateX(-50%);
+                    transition: left 0.367s cubic-bezier(.1,.9,.2,1);
+                    width: 16px;
+                  }
+              data-is-focusable={true}
+              id="Slider0"
+              onKeyDown={[Function]}
+              onMouseDown={[Function]}
+              onTouchStart={[Function]}
+              role="slider"
+              tabIndex={0}
+            >
+              <div
+                className=
+                    ms-Slider-line
+                    {
+                      display: flex;
+                      position: relative;
+                      width: 100%;
+                    }
+                    & $lineContainer {
+                      border-radius: 4px;
+                      box-sizing: border-box;
+                      height: 4px;
+                      width: 100%;
+                    }
+              >
+                <span
+                  className=
+                      ms-Slider-thumb
+
+                  style={
+                    Object {
+                      "left": "13.793103448275861%",
+                    }
+                  }
+                />
+                <span
+                  className=
+                      ms-Slider-active
+
+                      {
+                        background: #666666;
+                        transition: width 0.367s cubic-bezier(.1,.9,.2,1);
+                      }
+                      @media screen and (-ms-high-contrast: active){& {
+                        background-color: WindowText;
+                      }
+                  style={
+                    Object {
+                      "width": "13.793103448275861%",
+                    }
+                  }
+                />
+                <span
+                  className=
+                      ms-Slider-inactive
+
+                      {
+                        background: #c8c8c8;
+                        transition: width 0.367s cubic-bezier(.1,.9,.2,1);
+                      }
+                      @media screen and (-ms-high-contrast: active){& {
+                        border: 1px solid WindowText;
+                      }
+                  style={
+                    Object {
+                      "width": "86.20689655172414%",
+                    }
+                  }
+                />
+              </div>
+            </div>
+            <label
+              className=
+                  ms-Label
+                  ms-Slider-value
+                  {
+                    -moz-osx-font-smoothing: grayscale;
+                    -webkit-font-smoothing: antialiased;
+                    box-shadow: none;
+                    box-sizing: border-box;
+                    color: #333333;
+                    display: block;
+                    flex-shrink: 1;
+                    font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                    font-size: 14px;
+                    font-weight: 400;
+                    line-height: 1;
+                    margin-bottom: 0;
+                    margin-left: 8px;
+                    margin-right: 8px;
+                    margin-top: 0;
+                    overflow-wrap: break-word;
+                    padding-bottom: 5px;
+                    padding-left: 0;
+                    padding-right: 0;
+                    padding-top: 5px;
+                    white-space: nowrap;
+                    width: 40px;
+                    word-wrap: break-word;
+                  }
+            >
+              5
+            </label>
+          </div>
+        </div>
+        <div
+          className=
+              ms-Stack
+              {
+                box-sizing: border-box;
+                display: flex;
+                flex-direction: row;
+                flex-wrap: nowrap;
+                height: auto;
+                width: auto;
+              }
+              & > * {
+                text-overflow: ellipsis;
+                white-space: nowrap;
+              }
+              & > *:not(:first-child) {
+                margin-left: 0px;
+              }
+              & > *:not(.ms-StackItem) {
+                flex-shrink: 0;
+              }
+        >
+          <button
+            aria-checked={false}
+            className=
+                ms-Checkbox
+                is-enabled
+                {
+                  -moz-osx-font-smoothing: grayscale;
+                  -webkit-font-smoothing: antialiased;
+                  background: none;
+                  border: none;
+                  cursor: pointer;
+                  display: block;
+                  font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                  font-size: 14px;
+                  font-weight: 400;
+                  margin-bottom: 0;
+                  margin-left: 0;
+                  margin-right: 10px;
+                  margin-top: 0;
+                  outline: none;
+                  padding-bottom: 0;
+                  padding-left: 0;
+                  padding-right: 0;
+                  padding-top: 0;
+                  position: relative;
+                }
+                &::-moz-focus-inner {
+                  border: 0;
+                }
+                .ms-Fabric--isFocusVisible &:focus:after {
+                  border: 1px solid #ffffff;
+                  bottom: -2px;
+                  content: "";
+                  left: -2px;
+                  outline: 1px solid #666666;
+                  position: absolute;
+                  right: -2px;
+                  top: -2px;
+                  z-index: 1;
+                }
+                &:hover .ms-Checkbox-checkbox {
+                  border-color: #333333;
+                }
+                @media screen and (-ms-high-contrast: active){&:hover .ms-Checkbox-checkbox {
+                  border-color: Highlight;
+                }
+                &:focus .ms-Checkbox-checkbox {
+                  border-color: #333333;
+                }
+                &:hover .ms-Checkbox-checkmark {
+                  color: #a6a6a6;
+                  opacity: 1;
+                }
+                @media screen and (-ms-high-contrast: active){&:hover .ms-Checkbox-checkmark {
+                  color: Highlight;
+                }
+                &:hover .ms-Checkbox-text {
+                  color: #333333;
+                }
+                &:focus .ms-Checkbox-text {
+                  color: #333333;
+                }
+            id="checkbox-1"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            role="checkbox"
+            type="button"
+          >
+            <label
+              className=
+                  ms-Checkbox-label
+                  {
+                    align-items: flex-start;
+                    cursor: pointer;
+                    display: flex;
+                    margin-bottom: 0;
+                    margin-left: -4px;
+                    margin-right: -4px;
+                    margin-top: 0;
+                    position: relative;
+                    text-align: left;
+                    user-select: none;
+                  }
+              htmlFor="checkbox-1"
+            >
+              <div
+                className=
+                    ms-Checkbox-checkbox
+                    {
+                      align-items: center;
+                      border-color: #666666;
+                      border-style: solid;
+                      border-width: 1px;
+                      box-sizing: border-box;
+                      display: flex;
+                      flex-shrink: 0;
+                      height: 20px;
+                      justify-content: center;
+                      margin-bottom: 0;
+                      margin-left: 4px;
+                      margin-right: 4px;
+                      margin-top: 0;
+                      overflow: hidden;
+                      transition-duration: 200ms;
+                      transition-property: background, border, border-color;
+                      transition-timing-function: cubic-bezier(.4, 0, .23, 1);
+                      width: 20px;
+                    }
+              >
+                <i
+                  aria-hidden={true}
+                  className=
+                      ms-Checkbox-checkmark
+                      {
+                        -moz-osx-font-smoothing: grayscale;
+                        -webkit-font-smoothing: antialiased;
+                        color: #ffffff;
+                        display: inline-block;
+                        font-family: "FabricMDL2Icons";
+                        font-style: normal;
+                        font-weight: normal;
+                        opacity: 0;
+                        speak: none;
+                      }
+                      @media screen and (-ms-high-contrast: active){& {
+                        -ms-high-contrast-adjust: none;
+                        color: Window;
+                      }
+                  data-icon-name="CheckMark"
+                  role="presentation"
+                >
+                  
+                </i>
+              </div>
+              <span
+                className=
+                    ms-Checkbox-text
+                    {
+                      color: #333333;
+                      font-size: 14px;
+                      line-height: 20px;
+                      margin-bottom: 0;
+                      margin-left: 4px;
+                      margin-right: 4px;
+                      margin-top: 0;
+                    }
+              >
+                Shadow around items
+              </span>
+            </label>
+          </button>
+          <button
+            aria-checked={false}
+            className=
+                ms-Checkbox
+                is-enabled
+                {
+                  -moz-osx-font-smoothing: grayscale;
+                  -webkit-font-smoothing: antialiased;
+                  background: none;
+                  border: none;
+                  cursor: pointer;
+                  display: block;
+                  font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                  font-size: 14px;
+                  font-weight: 400;
+                  margin-bottom: 0;
+                  margin-left: 0;
+                  margin-right: 0;
+                  margin-top: 0;
+                  outline: none;
+                  padding-bottom: 0;
+                  padding-left: 0;
+                  padding-right: 0;
+                  padding-top: 0;
+                  position: relative;
+                }
+                &::-moz-focus-inner {
+                  border: 0;
+                }
+                .ms-Fabric--isFocusVisible &:focus:after {
+                  border: 1px solid #ffffff;
+                  bottom: -2px;
+                  content: "";
+                  left: -2px;
+                  outline: 1px solid #666666;
+                  position: absolute;
+                  right: -2px;
+                  top: -2px;
+                  z-index: 1;
+                }
+                &:hover .ms-Checkbox-checkbox {
+                  border-color: #333333;
+                }
+                @media screen and (-ms-high-contrast: active){&:hover .ms-Checkbox-checkbox {
+                  border-color: Highlight;
+                }
+                &:focus .ms-Checkbox-checkbox {
+                  border-color: #333333;
+                }
+                &:hover .ms-Checkbox-checkmark {
+                  color: #a6a6a6;
+                  opacity: 1;
+                }
+                @media screen and (-ms-high-contrast: active){&:hover .ms-Checkbox-checkmark {
+                  color: Highlight;
+                }
+                &:hover .ms-Checkbox-text {
+                  color: #333333;
+                }
+                &:focus .ms-Checkbox-text {
+                  color: #333333;
+                }
+            id="checkbox-2"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            role="checkbox"
+            type="button"
+          >
+            <label
+              className=
+                  ms-Checkbox-label
+                  {
+                    align-items: flex-start;
+                    cursor: pointer;
+                    display: flex;
+                    margin-bottom: 0;
+                    margin-left: -4px;
+                    margin-right: -4px;
+                    margin-top: 0;
+                    position: relative;
+                    text-align: left;
+                    user-select: none;
+                  }
+              htmlFor="checkbox-2"
+            >
+              <div
+                className=
+                    ms-Checkbox-checkbox
+                    {
+                      align-items: center;
+                      border-color: #666666;
+                      border-style: solid;
+                      border-width: 1px;
+                      box-sizing: border-box;
+                      display: flex;
+                      flex-shrink: 0;
+                      height: 20px;
+                      justify-content: center;
+                      margin-bottom: 0;
+                      margin-left: 4px;
+                      margin-right: 4px;
+                      margin-top: 0;
+                      overflow: hidden;
+                      transition-duration: 200ms;
+                      transition-property: background, border, border-color;
+                      transition-timing-function: cubic-bezier(.4, 0, .23, 1);
+                      width: 20px;
+                    }
+              >
+                <i
+                  aria-hidden={true}
+                  className=
+                      ms-Checkbox-checkmark
+                      {
+                        -moz-osx-font-smoothing: grayscale;
+                        -webkit-font-smoothing: antialiased;
+                        color: #ffffff;
+                        display: inline-block;
+                        font-family: "FabricMDL2Icons";
+                        font-style: normal;
+                        font-weight: normal;
+                        opacity: 0;
+                        speak: none;
+                      }
+                      @media screen and (-ms-high-contrast: active){& {
+                        -ms-high-contrast-adjust: none;
+                        color: Window;
+                      }
+                  data-icon-name="CheckMark"
+                  role="presentation"
+                >
+                  
+                </i>
+              </div>
+              <span
+                className=
+                    ms-Checkbox-text
+                    {
+                      color: #333333;
+                      font-size: 14px;
+                      line-height: 20px;
+                      margin-bottom: 0;
+                      margin-left: 4px;
+                      margin-right: 4px;
+                      margin-top: 0;
+                    }
+              >
+                Prevent item overflow
+              </span>
+            </label>
+          </button>
+        </div>
+      </div>
+    </span>
+    <span
+      className=
+          ms-StackItem
+          {
+            -moz-osx-font-smoothing: grayscale;
+            -webkit-font-smoothing: antialiased;
+            flex-grow: 1;
+            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+            font-size: 14px;
+            font-weight: 400;
+            height: auto;
+            width: auto;
+          }
+    >
+      <div
+        className=
+            ms-Stack
+            {
+              box-sizing: border-box;
+              display: flex;
+              flex-direction: row;
+              flex-wrap: nowrap;
+              height: auto;
+              width: auto;
+            }
+            & > * {
+              text-overflow: ellipsis;
+              white-space: nowrap;
+            }
+            & > *:not(:first-child) {
+              margin-left: 20px;
+            }
+            & > *:not(.ms-StackItem) {
+              flex-shrink: 0;
+            }
+      >
+        <div
+          className=
+              ms-Stack
+              {
+                box-sizing: border-box;
+                display: flex;
+                flex-direction: column;
+                flex-wrap: nowrap;
+                height: auto;
+                width: auto;
+              }
+              & > * {
+                text-overflow: ellipsis;
+                white-space: nowrap;
+              }
+              & > *:not(:first-child) {
+                margin-top: 0px;
+              }
+              & > *:not(.ms-StackItem) {
+                flex-shrink: 0;
+              }
+        >
+          <button
+            aria-checked={false}
+            className=
+                ms-Checkbox
+                is-enabled
+                {
+                  -moz-osx-font-smoothing: grayscale;
+                  -webkit-font-smoothing: antialiased;
+                  background: none;
+                  border: none;
+                  cursor: pointer;
+                  display: block;
+                  font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                  font-size: 14px;
+                  font-weight: 400;
+                  margin-bottom: 10px;
+                  margin-left: 0;
+                  margin-right: 0;
+                  margin-top: 0;
+                  outline: none;
+                  padding-bottom: 0;
+                  padding-left: 0;
+                  padding-right: 0;
+                  padding-top: 0;
+                  position: relative;
+                }
+                &::-moz-focus-inner {
+                  border: 0;
+                }
+                .ms-Fabric--isFocusVisible &:focus:after {
+                  border: 1px solid #ffffff;
+                  bottom: -2px;
+                  content: "";
+                  left: -2px;
+                  outline: 1px solid #666666;
+                  position: absolute;
+                  right: -2px;
+                  top: -2px;
+                  z-index: 1;
+                }
+                &:hover .ms-Checkbox-checkbox {
+                  border-color: #333333;
+                }
+                @media screen and (-ms-high-contrast: active){&:hover .ms-Checkbox-checkbox {
+                  border-color: Highlight;
+                }
+                &:focus .ms-Checkbox-checkbox {
+                  border-color: #333333;
+                }
+                &:hover .ms-Checkbox-checkmark {
+                  color: #a6a6a6;
+                  opacity: 1;
+                }
+                @media screen and (-ms-high-contrast: active){&:hover .ms-Checkbox-checkmark {
+                  color: Highlight;
+                }
+                &:hover .ms-Checkbox-text {
+                  color: #333333;
+                }
+                &:focus .ms-Checkbox-text {
+                  color: #333333;
+                }
+            id="checkbox-3"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            role="checkbox"
+            type="button"
+          >
+            <label
+              className=
+                  ms-Checkbox-label
+                  {
+                    align-items: flex-start;
+                    cursor: pointer;
+                    display: flex;
+                    margin-bottom: 0;
+                    margin-left: -4px;
+                    margin-right: -4px;
+                    margin-top: 0;
+                    position: relative;
+                    text-align: left;
+                    user-select: none;
+                  }
+              htmlFor="checkbox-3"
+            >
+              <div
+                className=
+                    ms-Checkbox-checkbox
+                    {
+                      align-items: center;
+                      border-color: #666666;
+                      border-style: solid;
+                      border-width: 1px;
+                      box-sizing: border-box;
+                      display: flex;
+                      flex-shrink: 0;
+                      height: 20px;
+                      justify-content: center;
+                      margin-bottom: 0;
+                      margin-left: 4px;
+                      margin-right: 4px;
+                      margin-top: 0;
+                      overflow: hidden;
+                      transition-duration: 200ms;
+                      transition-property: background, border, border-color;
+                      transition-timing-function: cubic-bezier(.4, 0, .23, 1);
+                      width: 20px;
+                    }
+              >
+                <i
+                  aria-hidden={true}
+                  className=
+                      ms-Checkbox-checkmark
+                      {
+                        -moz-osx-font-smoothing: grayscale;
+                        -webkit-font-smoothing: antialiased;
+                        color: #ffffff;
+                        display: inline-block;
+                        font-family: "FabricMDL2Icons";
+                        font-style: normal;
+                        font-weight: normal;
+                        opacity: 0;
+                        speak: none;
+                      }
+                      @media screen and (-ms-high-contrast: active){& {
+                        -ms-high-contrast-adjust: none;
+                        color: Window;
+                      }
+                  data-icon-name="CheckMark"
+                  role="presentation"
+                >
+                  
+                </i>
+              </div>
+              <span
+                className=
+                    ms-Checkbox-text
+                    {
+                      color: #333333;
+                      font-size: 14px;
+                      line-height: 20px;
+                      margin-bottom: 0;
+                      margin-left: 4px;
+                      margin-right: 4px;
+                      margin-top: 0;
+                    }
+              >
+                Wrap items
+              </span>
+            </label>
+          </button>
+          <button
+            aria-checked={false}
+            className=
+                ms-Checkbox
+                is-enabled
+                {
+                  -moz-osx-font-smoothing: grayscale;
+                  -webkit-font-smoothing: antialiased;
+                  background: none;
+                  border: none;
+                  cursor: pointer;
+                  display: block;
+                  font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                  font-size: 14px;
+                  font-weight: 400;
+                  margin-bottom: 0;
+                  margin-left: 0;
+                  margin-right: 0;
+                  margin-top: 0;
+                  outline: none;
+                  padding-bottom: 0;
+                  padding-left: 0;
+                  padding-right: 0;
+                  padding-top: 0;
+                  position: relative;
+                }
+                &::-moz-focus-inner {
+                  border: 0;
+                }
+                .ms-Fabric--isFocusVisible &:focus:after {
+                  border: 1px solid #ffffff;
+                  bottom: -2px;
+                  content: "";
+                  left: -2px;
+                  outline: 1px solid #666666;
+                  position: absolute;
+                  right: -2px;
+                  top: -2px;
+                  z-index: 1;
+                }
+                &:hover .ms-Checkbox-checkbox {
+                  border-color: #333333;
+                }
+                @media screen and (-ms-high-contrast: active){&:hover .ms-Checkbox-checkbox {
+                  border-color: Highlight;
+                }
+                &:focus .ms-Checkbox-checkbox {
+                  border-color: #333333;
+                }
+                &:hover .ms-Checkbox-checkmark {
+                  color: #a6a6a6;
+                  opacity: 1;
+                }
+                @media screen and (-ms-high-contrast: active){&:hover .ms-Checkbox-checkmark {
+                  color: Highlight;
+                }
+                &:hover .ms-Checkbox-text {
+                  color: #333333;
+                }
+                &:focus .ms-Checkbox-text {
+                  color: #333333;
+                }
+            id="checkbox-4"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            role="checkbox"
+            type="button"
+          >
+            <label
+              className=
+                  ms-Checkbox-label
+                  {
+                    align-items: flex-start;
+                    cursor: pointer;
+                    display: flex;
+                    margin-bottom: 0;
+                    margin-left: -4px;
+                    margin-right: -4px;
+                    margin-top: 0;
+                    position: relative;
+                    text-align: left;
+                    user-select: none;
+                  }
+              htmlFor="checkbox-4"
+            >
+              <div
+                className=
+                    ms-Checkbox-checkbox
+                    {
+                      align-items: center;
+                      border-color: #666666;
+                      border-style: solid;
+                      border-width: 1px;
+                      box-sizing: border-box;
+                      display: flex;
+                      flex-shrink: 0;
+                      height: 20px;
+                      justify-content: center;
+                      margin-bottom: 0;
+                      margin-left: 4px;
+                      margin-right: 4px;
+                      margin-top: 0;
+                      overflow: hidden;
+                      transition-duration: 200ms;
+                      transition-property: background, border, border-color;
+                      transition-timing-function: cubic-bezier(.4, 0, .23, 1);
+                      width: 20px;
+                    }
+              >
+                <i
+                  aria-hidden={true}
+                  className=
+                      ms-Checkbox-checkmark
+                      {
+                        -moz-osx-font-smoothing: grayscale;
+                        -webkit-font-smoothing: antialiased;
+                        color: #ffffff;
+                        display: inline-block;
+                        font-family: "FabricMDL2Icons";
+                        font-style: normal;
+                        font-weight: normal;
+                        opacity: 0;
+                        speak: none;
+                      }
+                      @media screen and (-ms-high-contrast: active){& {
+                        -ms-high-contrast-adjust: none;
+                        color: Window;
+                      }
+                  data-icon-name="CheckMark"
+                  role="presentation"
+                >
+                  
+                </i>
+              </div>
+              <span
+                className=
+                    ms-Checkbox-text
+                    {
+                      color: #333333;
+                      font-size: 14px;
+                      line-height: 20px;
+                      margin-bottom: 0;
+                      margin-left: 4px;
+                      margin-right: 4px;
+                      margin-top: 0;
+                    }
+              >
+                Shrink items
+              </span>
+            </label>
+          </button>
+        </div>
+        <span
+          className=
+              ms-StackItem
+              {
+                -moz-osx-font-smoothing: grayscale;
+                -webkit-font-smoothing: antialiased;
+                flex-grow: 1;
+                font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                font-size: 14px;
+                font-weight: 400;
+                height: auto;
+                width: auto;
+              }
+        >
+          <div
+            className=
+                ms-Slider
+                ms-Slider-enabled
+                ms-Slider-row
+                {
+                  -moz-osx-font-smoothing: grayscale;
+                  -webkit-font-smoothing: antialiased;
+                  font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                  font-size: 14px;
+                  font-weight: 400;
+                  user-select: none;
+                }
+          >
+            <label
+              className=
+                  ms-Label
+                  {
+                    -moz-osx-font-smoothing: grayscale;
+                    -webkit-font-smoothing: antialiased;
+                    box-shadow: none;
+                    box-sizing: border-box;
+                    color: #333333;
+                    display: block;
+                    font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                    font-size: 14px;
+                    font-weight: 400;
+                    margin-bottom: 0px;
+                    margin-left: 0px;
+                    margin-right: 0px;
+                    margin-top: 0px;
+                    overflow-wrap: break-word;
+                    padding-bottom: 0px;
+                    padding-left: 0px;
+                    padding-right: 0px;
+                    padding-top: 0px;
+                    word-wrap: break-word;
+                  }
+              htmlFor="Slider5"
+            >
+              Container width:
+            </label>
+            <div
+              className=
+                  ms-Slider-container
+                  {
+                    align-items: center;
+                    display: flex;
+                    flex-wrap: nowrap;
+                  }
+            >
+              <div
+                aria-disabled={false}
+                aria-label="Container width:"
+                aria-valuemax={100}
+                aria-valuemin={1}
+                aria-valuenow={100}
+                className=
+                    ms-Slider-slideBox
+                    ms-Slider-showValue
+                    ms-Slider-showTransitions
+                    {
+                      align-items: center;
+                      background: transparent;
+                      border: none;
+                      display: flex;
+                      flex-grow: 1;
+                      height: 28px;
+                      line-height: 28px;
+                      outline: transparent;
+                      padding-bottom: 0;
+                      padding-left: 8px;
+                      padding-right: 8px;
+                      padding-top: 0;
+                      position: relative;
+                      width: auto;
+                    }
+                    &::-moz-focus-inner {
+                      border: 0;
+                    }
+                    .ms-Fabric--isFocusVisible &:focus:after {
+                      border: 1px solid #ffffff;
+                      bottom: 1px;
+                      content: "";
+                      left: 1px;
+                      outline: 1px solid #666666;
+                      position: absolute;
+                      right: 1px;
+                      top: 1px;
+                      z-index: 1;
+                    }
+                    &:active $activeSection {
+                      background-color: #0078d4;
+                    }
+                    @media screen and (-ms-high-contrast: active){&:active $activeSection {
+                      background-color: Highlight;
+                    }
+                    &:hover $activeSection {
+                      background-color: #0078d4;
+                    }
+                    @media screen and (-ms-high-contrast: active){&:hover $activeSection {
+                      background-color: Highlight;
+                    }
+                    &:active $inactiveSection {
+                      background-color: #c7e0f4;
+                    }
+                    @media screen and (-ms-high-contrast: active){&:active $inactiveSection {
+                      border-color: Highlight;
+                    }
+                    &:hover $inactiveSection {
+                      background-color: #c7e0f4;
+                    }
+                    @media screen and (-ms-high-contrast: active){&:hover $inactiveSection {
+                      border-color: Highlight;
+                    }
+                    &:active $thumb {
+                      border: 2px solid #0078d4;
+                    }
+                    @media screen and (-ms-high-contrast: active){&:active $thumb {
+                      border-color: Highlight;
+                    }
+                    &:hover $thumb {
+                      border: 2px solid #0078d4;
+                    }
+                    @media screen and (-ms-high-contrast: active){&:hover $thumb {
+                      border-color: Highlight;
+                    }
+                    & $thumb {
+                      background: #ffffff;
+                      border-color: #666666;
+                      border-radius: 10px;
+                      border-style: solid;
+                      border-width: 2px;
+                      box-sizing: border-box;
+                      display: block;
+                      height: 16px;
+                      position: absolute;
+                      top: -6px;
+                      transform: translateX(-50%);
+                      transition: left 0.367s cubic-bezier(.1,.9,.2,1);
+                      width: 16px;
+                    }
+                data-is-focusable={true}
+                id="Slider5"
+                onKeyDown={[Function]}
+                onMouseDown={[Function]}
+                onTouchStart={[Function]}
+                role="slider"
+                tabIndex={0}
+              >
+                <div
+                  className=
+                      ms-Slider-line
+                      {
+                        display: flex;
+                        position: relative;
+                        width: 100%;
+                      }
+                      & $lineContainer {
+                        border-radius: 4px;
+                        box-sizing: border-box;
+                        height: 4px;
+                        width: 100%;
+                      }
+                >
+                  <span
+                    className=
+                        ms-Slider-thumb
+
+                    style={
+                      Object {
+                        "left": "100%",
+                      }
+                    }
+                  />
+                  <span
+                    className=
+                        ms-Slider-active
+
+                        {
+                          background: #666666;
+                          transition: width 0.367s cubic-bezier(.1,.9,.2,1);
+                        }
+                        @media screen and (-ms-high-contrast: active){& {
+                          background-color: WindowText;
+                        }
+                    style={
+                      Object {
+                        "width": "100%",
+                      }
+                    }
+                  />
+                  <span
+                    className=
+                        ms-Slider-inactive
+
+                        {
+                          background: #c8c8c8;
+                          transition: width 0.367s cubic-bezier(.1,.9,.2,1);
+                        }
+                        @media screen and (-ms-high-contrast: active){& {
+                          border: 1px solid WindowText;
+                        }
+                    style={
+                      Object {
+                        "width": "0%",
+                      }
+                    }
+                  />
+                </div>
+              </div>
+              <label
+                className=
+                    ms-Label
+                    ms-Slider-value
+                    {
+                      -moz-osx-font-smoothing: grayscale;
+                      -webkit-font-smoothing: antialiased;
+                      box-shadow: none;
+                      box-sizing: border-box;
+                      color: #333333;
+                      display: block;
+                      flex-shrink: 1;
+                      font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                      font-size: 14px;
+                      font-weight: 400;
+                      line-height: 1;
+                      margin-bottom: 0;
+                      margin-left: 8px;
+                      margin-right: 8px;
+                      margin-top: 0;
+                      overflow-wrap: break-word;
+                      padding-bottom: 5px;
+                      padding-left: 0;
+                      padding-right: 0;
+                      padding-top: 5px;
+                      white-space: nowrap;
+                      width: 40px;
+                      word-wrap: break-word;
+                    }
+              >
+                100
+              </label>
+            </div>
+          </div>
+        </span>
+      </div>
+    </span>
+  </div>
+  <div
+    className=
+        ms-Stack
+        {
+          box-sizing: border-box;
+          display: flex;
+          flex-direction: row;
+          flex-wrap: nowrap;
+          height: auto;
+          width: auto;
+        }
+        & > * {
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+        & > *:not(:first-child) {
+          margin-left: 20px;
+        }
+        & > *:not(.ms-StackItem) {
+          flex-shrink: 0;
+        }
+  >
+    <span
+      className=
+          ms-StackItem
+          {
+            -moz-osx-font-smoothing: grayscale;
+            -webkit-font-smoothing: antialiased;
+            flex-grow: 1;
+            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+            font-size: 14px;
+            font-weight: 400;
+            height: auto;
+            width: auto;
+          }
+    >
+      <div
+        className=
+            ms-Stack
+            {
+              box-sizing: border-box;
+              display: flex;
+              flex-direction: column;
+              flex-wrap: nowrap;
+              height: auto;
+              width: auto;
+            }
+            & > * {
+              text-overflow: ellipsis;
+              white-space: nowrap;
+            }
+            & > *:not(:first-child) {
+              margin-top: 0px;
+            }
+            & > *:not(.ms-StackItem) {
+              flex-shrink: 0;
+            }
+      >
+        <div
+          className=
+              ms-Slider
+              ms-Slider-enabled
+              ms-Slider-row
+              {
+                -moz-osx-font-smoothing: grayscale;
+                -webkit-font-smoothing: antialiased;
+                font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                font-size: 14px;
+                font-weight: 400;
+                user-select: none;
+              }
+        >
+          <label
+            className=
+                ms-Label
+                {
+                  -moz-osx-font-smoothing: grayscale;
+                  -webkit-font-smoothing: antialiased;
+                  box-shadow: none;
+                  box-sizing: border-box;
+                  color: #333333;
+                  display: block;
+                  font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                  font-size: 14px;
+                  font-weight: 400;
+                  margin-bottom: 0px;
+                  margin-left: 0px;
+                  margin-right: 0px;
+                  margin-top: 0px;
+                  overflow-wrap: break-word;
+                  padding-bottom: 0px;
+                  padding-left: 0px;
+                  padding-right: 0px;
+                  padding-top: 0px;
+                  word-wrap: break-word;
+                }
+            htmlFor="Slider6"
+          >
+            Horizontal gap between items:
+          </label>
+          <div
+            className=
+                ms-Slider-container
+                {
+                  align-items: center;
+                  display: flex;
+                  flex-wrap: nowrap;
+                }
+          >
+            <div
+              aria-disabled={false}
+              aria-label="Horizontal gap between items:"
+              aria-valuemax={50}
+              aria-valuemin={0}
+              aria-valuenow={0}
+              className=
+                  ms-Slider-slideBox
+                  ms-Slider-showValue
+                  ms-Slider-showTransitions
+                  {
+                    align-items: center;
+                    background: transparent;
+                    border: none;
+                    display: flex;
+                    flex-grow: 1;
+                    height: 28px;
+                    line-height: 28px;
+                    outline: transparent;
+                    padding-bottom: 0;
+                    padding-left: 8px;
+                    padding-right: 8px;
+                    padding-top: 0;
+                    position: relative;
+                    width: auto;
+                  }
+                  &::-moz-focus-inner {
+                    border: 0;
+                  }
+                  .ms-Fabric--isFocusVisible &:focus:after {
+                    border: 1px solid #ffffff;
+                    bottom: 1px;
+                    content: "";
+                    left: 1px;
+                    outline: 1px solid #666666;
+                    position: absolute;
+                    right: 1px;
+                    top: 1px;
+                    z-index: 1;
+                  }
+                  &:active $activeSection {
+                    background-color: #0078d4;
+                  }
+                  @media screen and (-ms-high-contrast: active){&:active $activeSection {
+                    background-color: Highlight;
+                  }
+                  &:hover $activeSection {
+                    background-color: #0078d4;
+                  }
+                  @media screen and (-ms-high-contrast: active){&:hover $activeSection {
+                    background-color: Highlight;
+                  }
+                  &:active $inactiveSection {
+                    background-color: #c7e0f4;
+                  }
+                  @media screen and (-ms-high-contrast: active){&:active $inactiveSection {
+                    border-color: Highlight;
+                  }
+                  &:hover $inactiveSection {
+                    background-color: #c7e0f4;
+                  }
+                  @media screen and (-ms-high-contrast: active){&:hover $inactiveSection {
+                    border-color: Highlight;
+                  }
+                  &:active $thumb {
+                    border: 2px solid #0078d4;
+                  }
+                  @media screen and (-ms-high-contrast: active){&:active $thumb {
+                    border-color: Highlight;
+                  }
+                  &:hover $thumb {
+                    border: 2px solid #0078d4;
+                  }
+                  @media screen and (-ms-high-contrast: active){&:hover $thumb {
+                    border-color: Highlight;
+                  }
+                  & $thumb {
+                    background: #ffffff;
+                    border-color: #666666;
+                    border-radius: 10px;
+                    border-style: solid;
+                    border-width: 2px;
+                    box-sizing: border-box;
+                    display: block;
+                    height: 16px;
+                    position: absolute;
+                    top: -6px;
+                    transform: translateX(-50%);
+                    transition: left 0.367s cubic-bezier(.1,.9,.2,1);
+                    width: 16px;
+                  }
+              data-is-focusable={true}
+              id="Slider6"
+              onKeyDown={[Function]}
+              onMouseDown={[Function]}
+              onTouchStart={[Function]}
+              role="slider"
+              tabIndex={0}
+            >
+              <div
+                className=
+                    ms-Slider-line
+                    {
+                      display: flex;
+                      position: relative;
+                      width: 100%;
+                    }
+                    & $lineContainer {
+                      border-radius: 4px;
+                      box-sizing: border-box;
+                      height: 4px;
+                      width: 100%;
+                    }
+              >
+                <span
+                  className=
+                      ms-Slider-thumb
+
+                  style={
+                    Object {
+                      "left": "0%",
+                    }
+                  }
+                />
+                <span
+                  className=
+                      ms-Slider-active
+
+                      {
+                        background: #666666;
+                        transition: width 0.367s cubic-bezier(.1,.9,.2,1);
+                      }
+                      @media screen and (-ms-high-contrast: active){& {
+                        background-color: WindowText;
+                      }
+                  style={
+                    Object {
+                      "width": "0%",
+                    }
+                  }
+                />
+                <span
+                  className=
+                      ms-Slider-inactive
+
+                      {
+                        background: #c8c8c8;
+                        transition: width 0.367s cubic-bezier(.1,.9,.2,1);
+                      }
+                      @media screen and (-ms-high-contrast: active){& {
+                        border: 1px solid WindowText;
+                      }
+                  style={
+                    Object {
+                      "width": "100%",
+                    }
+                  }
+                />
+              </div>
+            </div>
+            <label
+              className=
+                  ms-Label
+                  ms-Slider-value
+                  {
+                    -moz-osx-font-smoothing: grayscale;
+                    -webkit-font-smoothing: antialiased;
+                    box-shadow: none;
+                    box-sizing: border-box;
+                    color: #333333;
+                    display: block;
+                    flex-shrink: 1;
+                    font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                    font-size: 14px;
+                    font-weight: 400;
+                    line-height: 1;
+                    margin-bottom: 0;
+                    margin-left: 8px;
+                    margin-right: 8px;
+                    margin-top: 0;
+                    overflow-wrap: break-word;
+                    padding-bottom: 5px;
+                    padding-left: 0;
+                    padding-right: 0;
+                    padding-top: 5px;
+                    white-space: nowrap;
+                    width: 40px;
+                    word-wrap: break-word;
+                  }
+            >
+              0
+            </label>
+          </div>
+        </div>
+        <div
+          className=
+              ms-Slider
+              ms-Slider-enabled
+              ms-Slider-row
+              {
+                -moz-osx-font-smoothing: grayscale;
+                -webkit-font-smoothing: antialiased;
+                font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                font-size: 14px;
+                font-weight: 400;
+                user-select: none;
+              }
+        >
+          <label
+            className=
+                ms-Label
+                {
+                  -moz-osx-font-smoothing: grayscale;
+                  -webkit-font-smoothing: antialiased;
+                  box-shadow: none;
+                  box-sizing: border-box;
+                  color: #333333;
+                  display: block;
+                  font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                  font-size: 14px;
+                  font-weight: 400;
+                  margin-bottom: 0px;
+                  margin-left: 0px;
+                  margin-right: 0px;
+                  margin-top: 0px;
+                  overflow-wrap: break-word;
+                  padding-bottom: 0px;
+                  padding-left: 0px;
+                  padding-right: 0px;
+                  padding-top: 0px;
+                  word-wrap: break-word;
+                }
+            htmlFor="Slider7"
+          >
+            Vertical gap between items:
+          </label>
+          <div
+            className=
+                ms-Slider-container
+                {
+                  align-items: center;
+                  display: flex;
+                  flex-wrap: nowrap;
+                }
+          >
+            <div
+              aria-disabled={false}
+              aria-label="Vertical gap between items:"
+              aria-valuemax={50}
+              aria-valuemin={0}
+              aria-valuenow={0}
+              className=
+                  ms-Slider-slideBox
+                  ms-Slider-showValue
+                  ms-Slider-showTransitions
+                  {
+                    align-items: center;
+                    background: transparent;
+                    border: none;
+                    display: flex;
+                    flex-grow: 1;
+                    height: 28px;
+                    line-height: 28px;
+                    outline: transparent;
+                    padding-bottom: 0;
+                    padding-left: 8px;
+                    padding-right: 8px;
+                    padding-top: 0;
+                    position: relative;
+                    width: auto;
+                  }
+                  &::-moz-focus-inner {
+                    border: 0;
+                  }
+                  .ms-Fabric--isFocusVisible &:focus:after {
+                    border: 1px solid #ffffff;
+                    bottom: 1px;
+                    content: "";
+                    left: 1px;
+                    outline: 1px solid #666666;
+                    position: absolute;
+                    right: 1px;
+                    top: 1px;
+                    z-index: 1;
+                  }
+                  &:active $activeSection {
+                    background-color: #0078d4;
+                  }
+                  @media screen and (-ms-high-contrast: active){&:active $activeSection {
+                    background-color: Highlight;
+                  }
+                  &:hover $activeSection {
+                    background-color: #0078d4;
+                  }
+                  @media screen and (-ms-high-contrast: active){&:hover $activeSection {
+                    background-color: Highlight;
+                  }
+                  &:active $inactiveSection {
+                    background-color: #c7e0f4;
+                  }
+                  @media screen and (-ms-high-contrast: active){&:active $inactiveSection {
+                    border-color: Highlight;
+                  }
+                  &:hover $inactiveSection {
+                    background-color: #c7e0f4;
+                  }
+                  @media screen and (-ms-high-contrast: active){&:hover $inactiveSection {
+                    border-color: Highlight;
+                  }
+                  &:active $thumb {
+                    border: 2px solid #0078d4;
+                  }
+                  @media screen and (-ms-high-contrast: active){&:active $thumb {
+                    border-color: Highlight;
+                  }
+                  &:hover $thumb {
+                    border: 2px solid #0078d4;
+                  }
+                  @media screen and (-ms-high-contrast: active){&:hover $thumb {
+                    border-color: Highlight;
+                  }
+                  & $thumb {
+                    background: #ffffff;
+                    border-color: #666666;
+                    border-radius: 10px;
+                    border-style: solid;
+                    border-width: 2px;
+                    box-sizing: border-box;
+                    display: block;
+                    height: 16px;
+                    position: absolute;
+                    top: -6px;
+                    transform: translateX(-50%);
+                    transition: left 0.367s cubic-bezier(.1,.9,.2,1);
+                    width: 16px;
+                  }
+              data-is-focusable={true}
+              id="Slider7"
+              onKeyDown={[Function]}
+              onMouseDown={[Function]}
+              onTouchStart={[Function]}
+              role="slider"
+              tabIndex={0}
+            >
+              <div
+                className=
+                    ms-Slider-line
+                    {
+                      display: flex;
+                      position: relative;
+                      width: 100%;
+                    }
+                    & $lineContainer {
+                      border-radius: 4px;
+                      box-sizing: border-box;
+                      height: 4px;
+                      width: 100%;
+                    }
+              >
+                <span
+                  className=
+                      ms-Slider-thumb
+
+                  style={
+                    Object {
+                      "left": "0%",
+                    }
+                  }
+                />
+                <span
+                  className=
+                      ms-Slider-active
+
+                      {
+                        background: #666666;
+                        transition: width 0.367s cubic-bezier(.1,.9,.2,1);
+                      }
+                      @media screen and (-ms-high-contrast: active){& {
+                        background-color: WindowText;
+                      }
+                  style={
+                    Object {
+                      "width": "0%",
+                    }
+                  }
+                />
+                <span
+                  className=
+                      ms-Slider-inactive
+
+                      {
+                        background: #c8c8c8;
+                        transition: width 0.367s cubic-bezier(.1,.9,.2,1);
+                      }
+                      @media screen and (-ms-high-contrast: active){& {
+                        border: 1px solid WindowText;
+                      }
+                  style={
+                    Object {
+                      "width": "100%",
+                    }
+                  }
+                />
+              </div>
+            </div>
+            <label
+              className=
+                  ms-Label
+                  ms-Slider-value
+                  {
+                    -moz-osx-font-smoothing: grayscale;
+                    -webkit-font-smoothing: antialiased;
+                    box-shadow: none;
+                    box-sizing: border-box;
+                    color: #333333;
+                    display: block;
+                    flex-shrink: 1;
+                    font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                    font-size: 14px;
+                    font-weight: 400;
+                    line-height: 1;
+                    margin-bottom: 0;
+                    margin-left: 8px;
+                    margin-right: 8px;
+                    margin-top: 0;
+                    overflow-wrap: break-word;
+                    padding-bottom: 5px;
+                    padding-left: 0;
+                    padding-right: 0;
+                    padding-top: 5px;
+                    white-space: nowrap;
+                    width: 40px;
+                    word-wrap: break-word;
+                  }
+            >
+              0
+            </label>
+          </div>
+        </div>
+      </div>
+    </span>
+    <span
+      className=
+          ms-StackItem
+          {
+            -moz-osx-font-smoothing: grayscale;
+            -webkit-font-smoothing: antialiased;
+            flex-grow: 1;
+            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+            font-size: 14px;
+            font-weight: 400;
+            height: auto;
+            width: auto;
+          }
+    >
+      <div
+        className=
+            ms-Stack
+            {
+              box-sizing: border-box;
+              display: flex;
+              flex-direction: column;
+              flex-wrap: nowrap;
+              height: auto;
+              width: auto;
+            }
+            & > * {
+              text-overflow: ellipsis;
+              white-space: nowrap;
+            }
+            & > *:not(:first-child) {
+              margin-top: 0px;
+            }
+            & > *:not(.ms-StackItem) {
+              flex-shrink: 0;
+            }
+      >
+        <div
+          className=
+              ms-Slider
+              ms-Slider-enabled
+              ms-Slider-row
+              {
+                -moz-osx-font-smoothing: grayscale;
+                -webkit-font-smoothing: antialiased;
+                font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                font-size: 14px;
+                font-weight: 400;
+                user-select: none;
+              }
+        >
+          <label
+            className=
+                ms-Label
+                {
+                  -moz-osx-font-smoothing: grayscale;
+                  -webkit-font-smoothing: antialiased;
+                  box-shadow: none;
+                  box-sizing: border-box;
+                  color: #333333;
+                  display: block;
+                  font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                  font-size: 14px;
+                  font-weight: 400;
+                  margin-bottom: 0px;
+                  margin-left: 0px;
+                  margin-right: 0px;
+                  margin-top: 0px;
+                  overflow-wrap: break-word;
+                  padding-bottom: 0px;
+                  padding-left: 0px;
+                  padding-right: 0px;
+                  padding-top: 0px;
+                  word-wrap: break-word;
+                }
+            htmlFor="Slider8"
+          >
+            Left padding:
+          </label>
+          <div
+            className=
+                ms-Slider-container
+                {
+                  align-items: center;
+                  display: flex;
+                  flex-wrap: nowrap;
+                }
+          >
+            <div
+              aria-disabled={false}
+              aria-label="Left padding:"
+              aria-valuemax={50}
+              aria-valuemin={0}
+              aria-valuenow={0}
+              className=
+                  ms-Slider-slideBox
+                  ms-Slider-showValue
+                  ms-Slider-showTransitions
+                  {
+                    align-items: center;
+                    background: transparent;
+                    border: none;
+                    display: flex;
+                    flex-grow: 1;
+                    height: 28px;
+                    line-height: 28px;
+                    outline: transparent;
+                    padding-bottom: 0;
+                    padding-left: 8px;
+                    padding-right: 8px;
+                    padding-top: 0;
+                    position: relative;
+                    width: auto;
+                  }
+                  &::-moz-focus-inner {
+                    border: 0;
+                  }
+                  .ms-Fabric--isFocusVisible &:focus:after {
+                    border: 1px solid #ffffff;
+                    bottom: 1px;
+                    content: "";
+                    left: 1px;
+                    outline: 1px solid #666666;
+                    position: absolute;
+                    right: 1px;
+                    top: 1px;
+                    z-index: 1;
+                  }
+                  &:active $activeSection {
+                    background-color: #0078d4;
+                  }
+                  @media screen and (-ms-high-contrast: active){&:active $activeSection {
+                    background-color: Highlight;
+                  }
+                  &:hover $activeSection {
+                    background-color: #0078d4;
+                  }
+                  @media screen and (-ms-high-contrast: active){&:hover $activeSection {
+                    background-color: Highlight;
+                  }
+                  &:active $inactiveSection {
+                    background-color: #c7e0f4;
+                  }
+                  @media screen and (-ms-high-contrast: active){&:active $inactiveSection {
+                    border-color: Highlight;
+                  }
+                  &:hover $inactiveSection {
+                    background-color: #c7e0f4;
+                  }
+                  @media screen and (-ms-high-contrast: active){&:hover $inactiveSection {
+                    border-color: Highlight;
+                  }
+                  &:active $thumb {
+                    border: 2px solid #0078d4;
+                  }
+                  @media screen and (-ms-high-contrast: active){&:active $thumb {
+                    border-color: Highlight;
+                  }
+                  &:hover $thumb {
+                    border: 2px solid #0078d4;
+                  }
+                  @media screen and (-ms-high-contrast: active){&:hover $thumb {
+                    border-color: Highlight;
+                  }
+                  & $thumb {
+                    background: #ffffff;
+                    border-color: #666666;
+                    border-radius: 10px;
+                    border-style: solid;
+                    border-width: 2px;
+                    box-sizing: border-box;
+                    display: block;
+                    height: 16px;
+                    position: absolute;
+                    top: -6px;
+                    transform: translateX(-50%);
+                    transition: left 0.367s cubic-bezier(.1,.9,.2,1);
+                    width: 16px;
+                  }
+              data-is-focusable={true}
+              id="Slider8"
+              onKeyDown={[Function]}
+              onMouseDown={[Function]}
+              onTouchStart={[Function]}
+              role="slider"
+              tabIndex={0}
+            >
+              <div
+                className=
+                    ms-Slider-line
+                    {
+                      display: flex;
+                      position: relative;
+                      width: 100%;
+                    }
+                    & $lineContainer {
+                      border-radius: 4px;
+                      box-sizing: border-box;
+                      height: 4px;
+                      width: 100%;
+                    }
+              >
+                <span
+                  className=
+                      ms-Slider-thumb
+
+                  style={
+                    Object {
+                      "left": "0%",
+                    }
+                  }
+                />
+                <span
+                  className=
+                      ms-Slider-active
+
+                      {
+                        background: #666666;
+                        transition: width 0.367s cubic-bezier(.1,.9,.2,1);
+                      }
+                      @media screen and (-ms-high-contrast: active){& {
+                        background-color: WindowText;
+                      }
+                  style={
+                    Object {
+                      "width": "0%",
+                    }
+                  }
+                />
+                <span
+                  className=
+                      ms-Slider-inactive
+
+                      {
+                        background: #c8c8c8;
+                        transition: width 0.367s cubic-bezier(.1,.9,.2,1);
+                      }
+                      @media screen and (-ms-high-contrast: active){& {
+                        border: 1px solid WindowText;
+                      }
+                  style={
+                    Object {
+                      "width": "100%",
+                    }
+                  }
+                />
+              </div>
+            </div>
+            <label
+              className=
+                  ms-Label
+                  ms-Slider-value
+                  {
+                    -moz-osx-font-smoothing: grayscale;
+                    -webkit-font-smoothing: antialiased;
+                    box-shadow: none;
+                    box-sizing: border-box;
+                    color: #333333;
+                    display: block;
+                    flex-shrink: 1;
+                    font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                    font-size: 14px;
+                    font-weight: 400;
+                    line-height: 1;
+                    margin-bottom: 0;
+                    margin-left: 8px;
+                    margin-right: 8px;
+                    margin-top: 0;
+                    overflow-wrap: break-word;
+                    padding-bottom: 5px;
+                    padding-left: 0;
+                    padding-right: 0;
+                    padding-top: 5px;
+                    white-space: nowrap;
+                    width: 40px;
+                    word-wrap: break-word;
+                  }
+            >
+              0
+            </label>
+          </div>
+        </div>
+        <div
+          className=
+              ms-Slider
+              ms-Slider-enabled
+              ms-Slider-row
+              {
+                -moz-osx-font-smoothing: grayscale;
+                -webkit-font-smoothing: antialiased;
+                font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                font-size: 14px;
+                font-weight: 400;
+                user-select: none;
+              }
+        >
+          <label
+            className=
+                ms-Label
+                {
+                  -moz-osx-font-smoothing: grayscale;
+                  -webkit-font-smoothing: antialiased;
+                  box-shadow: none;
+                  box-sizing: border-box;
+                  color: #333333;
+                  display: block;
+                  font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                  font-size: 14px;
+                  font-weight: 400;
+                  margin-bottom: 0px;
+                  margin-left: 0px;
+                  margin-right: 0px;
+                  margin-top: 0px;
+                  overflow-wrap: break-word;
+                  padding-bottom: 0px;
+                  padding-left: 0px;
+                  padding-right: 0px;
+                  padding-top: 0px;
+                  word-wrap: break-word;
+                }
+            htmlFor="Slider9"
+          >
+            Right padding:
+          </label>
+          <div
+            className=
+                ms-Slider-container
+                {
+                  align-items: center;
+                  display: flex;
+                  flex-wrap: nowrap;
+                }
+          >
+            <div
+              aria-disabled={false}
+              aria-label="Right padding:"
+              aria-valuemax={50}
+              aria-valuemin={0}
+              aria-valuenow={0}
+              className=
+                  ms-Slider-slideBox
+                  ms-Slider-showValue
+                  ms-Slider-showTransitions
+                  {
+                    align-items: center;
+                    background: transparent;
+                    border: none;
+                    display: flex;
+                    flex-grow: 1;
+                    height: 28px;
+                    line-height: 28px;
+                    outline: transparent;
+                    padding-bottom: 0;
+                    padding-left: 8px;
+                    padding-right: 8px;
+                    padding-top: 0;
+                    position: relative;
+                    width: auto;
+                  }
+                  &::-moz-focus-inner {
+                    border: 0;
+                  }
+                  .ms-Fabric--isFocusVisible &:focus:after {
+                    border: 1px solid #ffffff;
+                    bottom: 1px;
+                    content: "";
+                    left: 1px;
+                    outline: 1px solid #666666;
+                    position: absolute;
+                    right: 1px;
+                    top: 1px;
+                    z-index: 1;
+                  }
+                  &:active $activeSection {
+                    background-color: #0078d4;
+                  }
+                  @media screen and (-ms-high-contrast: active){&:active $activeSection {
+                    background-color: Highlight;
+                  }
+                  &:hover $activeSection {
+                    background-color: #0078d4;
+                  }
+                  @media screen and (-ms-high-contrast: active){&:hover $activeSection {
+                    background-color: Highlight;
+                  }
+                  &:active $inactiveSection {
+                    background-color: #c7e0f4;
+                  }
+                  @media screen and (-ms-high-contrast: active){&:active $inactiveSection {
+                    border-color: Highlight;
+                  }
+                  &:hover $inactiveSection {
+                    background-color: #c7e0f4;
+                  }
+                  @media screen and (-ms-high-contrast: active){&:hover $inactiveSection {
+                    border-color: Highlight;
+                  }
+                  &:active $thumb {
+                    border: 2px solid #0078d4;
+                  }
+                  @media screen and (-ms-high-contrast: active){&:active $thumb {
+                    border-color: Highlight;
+                  }
+                  &:hover $thumb {
+                    border: 2px solid #0078d4;
+                  }
+                  @media screen and (-ms-high-contrast: active){&:hover $thumb {
+                    border-color: Highlight;
+                  }
+                  & $thumb {
+                    background: #ffffff;
+                    border-color: #666666;
+                    border-radius: 10px;
+                    border-style: solid;
+                    border-width: 2px;
+                    box-sizing: border-box;
+                    display: block;
+                    height: 16px;
+                    position: absolute;
+                    top: -6px;
+                    transform: translateX(-50%);
+                    transition: left 0.367s cubic-bezier(.1,.9,.2,1);
+                    width: 16px;
+                  }
+              data-is-focusable={true}
+              id="Slider9"
+              onKeyDown={[Function]}
+              onMouseDown={[Function]}
+              onTouchStart={[Function]}
+              role="slider"
+              tabIndex={0}
+            >
+              <div
+                className=
+                    ms-Slider-line
+                    {
+                      display: flex;
+                      position: relative;
+                      width: 100%;
+                    }
+                    & $lineContainer {
+                      border-radius: 4px;
+                      box-sizing: border-box;
+                      height: 4px;
+                      width: 100%;
+                    }
+              >
+                <span
+                  className=
+                      ms-Slider-thumb
+
+                  style={
+                    Object {
+                      "left": "0%",
+                    }
+                  }
+                />
+                <span
+                  className=
+                      ms-Slider-active
+
+                      {
+                        background: #666666;
+                        transition: width 0.367s cubic-bezier(.1,.9,.2,1);
+                      }
+                      @media screen and (-ms-high-contrast: active){& {
+                        background-color: WindowText;
+                      }
+                  style={
+                    Object {
+                      "width": "0%",
+                    }
+                  }
+                />
+                <span
+                  className=
+                      ms-Slider-inactive
+
+                      {
+                        background: #c8c8c8;
+                        transition: width 0.367s cubic-bezier(.1,.9,.2,1);
+                      }
+                      @media screen and (-ms-high-contrast: active){& {
+                        border: 1px solid WindowText;
+                      }
+                  style={
+                    Object {
+                      "width": "100%",
+                    }
+                  }
+                />
+              </div>
+            </div>
+            <label
+              className=
+                  ms-Label
+                  ms-Slider-value
+                  {
+                    -moz-osx-font-smoothing: grayscale;
+                    -webkit-font-smoothing: antialiased;
+                    box-shadow: none;
+                    box-sizing: border-box;
+                    color: #333333;
+                    display: block;
+                    flex-shrink: 1;
+                    font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                    font-size: 14px;
+                    font-weight: 400;
+                    line-height: 1;
+                    margin-bottom: 0;
+                    margin-left: 8px;
+                    margin-right: 8px;
+                    margin-top: 0;
+                    overflow-wrap: break-word;
+                    padding-bottom: 5px;
+                    padding-left: 0;
+                    padding-right: 0;
+                    padding-top: 5px;
+                    white-space: nowrap;
+                    width: 40px;
+                    word-wrap: break-word;
+                  }
+            >
+              0
+            </label>
+          </div>
+        </div>
+      </div>
+    </span>
+    <span
+      className=
+          ms-StackItem
+          {
+            -moz-osx-font-smoothing: grayscale;
+            -webkit-font-smoothing: antialiased;
+            flex-grow: 1;
+            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+            font-size: 14px;
+            font-weight: 400;
+            height: auto;
+            width: auto;
+          }
+    >
+      <div
+        className=
+            ms-Stack
+            {
+              box-sizing: border-box;
+              display: flex;
+              flex-direction: column;
+              flex-wrap: nowrap;
+              height: auto;
+              width: auto;
+            }
+            & > * {
+              text-overflow: ellipsis;
+              white-space: nowrap;
+            }
+            & > *:not(:first-child) {
+              margin-top: 0px;
+            }
+            & > *:not(.ms-StackItem) {
+              flex-shrink: 0;
+            }
+      >
+        <div
+          className=
+              ms-Slider
+              ms-Slider-enabled
+              ms-Slider-row
+              {
+                -moz-osx-font-smoothing: grayscale;
+                -webkit-font-smoothing: antialiased;
+                font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                font-size: 14px;
+                font-weight: 400;
+                user-select: none;
+              }
+        >
+          <label
+            className=
+                ms-Label
+                {
+                  -moz-osx-font-smoothing: grayscale;
+                  -webkit-font-smoothing: antialiased;
+                  box-shadow: none;
+                  box-sizing: border-box;
+                  color: #333333;
+                  display: block;
+                  font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                  font-size: 14px;
+                  font-weight: 400;
+                  margin-bottom: 0px;
+                  margin-left: 0px;
+                  margin-right: 0px;
+                  margin-top: 0px;
+                  overflow-wrap: break-word;
+                  padding-bottom: 0px;
+                  padding-left: 0px;
+                  padding-right: 0px;
+                  padding-top: 0px;
+                  word-wrap: break-word;
+                }
+            htmlFor="Slider10"
+          >
+            Top padding:
+          </label>
+          <div
+            className=
+                ms-Slider-container
+                {
+                  align-items: center;
+                  display: flex;
+                  flex-wrap: nowrap;
+                }
+          >
+            <div
+              aria-disabled={false}
+              aria-label="Top padding:"
+              aria-valuemax={50}
+              aria-valuemin={0}
+              aria-valuenow={0}
+              className=
+                  ms-Slider-slideBox
+                  ms-Slider-showValue
+                  ms-Slider-showTransitions
+                  {
+                    align-items: center;
+                    background: transparent;
+                    border: none;
+                    display: flex;
+                    flex-grow: 1;
+                    height: 28px;
+                    line-height: 28px;
+                    outline: transparent;
+                    padding-bottom: 0;
+                    padding-left: 8px;
+                    padding-right: 8px;
+                    padding-top: 0;
+                    position: relative;
+                    width: auto;
+                  }
+                  &::-moz-focus-inner {
+                    border: 0;
+                  }
+                  .ms-Fabric--isFocusVisible &:focus:after {
+                    border: 1px solid #ffffff;
+                    bottom: 1px;
+                    content: "";
+                    left: 1px;
+                    outline: 1px solid #666666;
+                    position: absolute;
+                    right: 1px;
+                    top: 1px;
+                    z-index: 1;
+                  }
+                  &:active $activeSection {
+                    background-color: #0078d4;
+                  }
+                  @media screen and (-ms-high-contrast: active){&:active $activeSection {
+                    background-color: Highlight;
+                  }
+                  &:hover $activeSection {
+                    background-color: #0078d4;
+                  }
+                  @media screen and (-ms-high-contrast: active){&:hover $activeSection {
+                    background-color: Highlight;
+                  }
+                  &:active $inactiveSection {
+                    background-color: #c7e0f4;
+                  }
+                  @media screen and (-ms-high-contrast: active){&:active $inactiveSection {
+                    border-color: Highlight;
+                  }
+                  &:hover $inactiveSection {
+                    background-color: #c7e0f4;
+                  }
+                  @media screen and (-ms-high-contrast: active){&:hover $inactiveSection {
+                    border-color: Highlight;
+                  }
+                  &:active $thumb {
+                    border: 2px solid #0078d4;
+                  }
+                  @media screen and (-ms-high-contrast: active){&:active $thumb {
+                    border-color: Highlight;
+                  }
+                  &:hover $thumb {
+                    border: 2px solid #0078d4;
+                  }
+                  @media screen and (-ms-high-contrast: active){&:hover $thumb {
+                    border-color: Highlight;
+                  }
+                  & $thumb {
+                    background: #ffffff;
+                    border-color: #666666;
+                    border-radius: 10px;
+                    border-style: solid;
+                    border-width: 2px;
+                    box-sizing: border-box;
+                    display: block;
+                    height: 16px;
+                    position: absolute;
+                    top: -6px;
+                    transform: translateX(-50%);
+                    transition: left 0.367s cubic-bezier(.1,.9,.2,1);
+                    width: 16px;
+                  }
+              data-is-focusable={true}
+              id="Slider10"
+              onKeyDown={[Function]}
+              onMouseDown={[Function]}
+              onTouchStart={[Function]}
+              role="slider"
+              tabIndex={0}
+            >
+              <div
+                className=
+                    ms-Slider-line
+                    {
+                      display: flex;
+                      position: relative;
+                      width: 100%;
+                    }
+                    & $lineContainer {
+                      border-radius: 4px;
+                      box-sizing: border-box;
+                      height: 4px;
+                      width: 100%;
+                    }
+              >
+                <span
+                  className=
+                      ms-Slider-thumb
+
+                  style={
+                    Object {
+                      "left": "0%",
+                    }
+                  }
+                />
+                <span
+                  className=
+                      ms-Slider-active
+
+                      {
+                        background: #666666;
+                        transition: width 0.367s cubic-bezier(.1,.9,.2,1);
+                      }
+                      @media screen and (-ms-high-contrast: active){& {
+                        background-color: WindowText;
+                      }
+                  style={
+                    Object {
+                      "width": "0%",
+                    }
+                  }
+                />
+                <span
+                  className=
+                      ms-Slider-inactive
+
+                      {
+                        background: #c8c8c8;
+                        transition: width 0.367s cubic-bezier(.1,.9,.2,1);
+                      }
+                      @media screen and (-ms-high-contrast: active){& {
+                        border: 1px solid WindowText;
+                      }
+                  style={
+                    Object {
+                      "width": "100%",
+                    }
+                  }
+                />
+              </div>
+            </div>
+            <label
+              className=
+                  ms-Label
+                  ms-Slider-value
+                  {
+                    -moz-osx-font-smoothing: grayscale;
+                    -webkit-font-smoothing: antialiased;
+                    box-shadow: none;
+                    box-sizing: border-box;
+                    color: #333333;
+                    display: block;
+                    flex-shrink: 1;
+                    font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                    font-size: 14px;
+                    font-weight: 400;
+                    line-height: 1;
+                    margin-bottom: 0;
+                    margin-left: 8px;
+                    margin-right: 8px;
+                    margin-top: 0;
+                    overflow-wrap: break-word;
+                    padding-bottom: 5px;
+                    padding-left: 0;
+                    padding-right: 0;
+                    padding-top: 5px;
+                    white-space: nowrap;
+                    width: 40px;
+                    word-wrap: break-word;
+                  }
+            >
+              0
+            </label>
+          </div>
+        </div>
+        <div
+          className=
+              ms-Slider
+              ms-Slider-enabled
+              ms-Slider-row
+              {
+                -moz-osx-font-smoothing: grayscale;
+                -webkit-font-smoothing: antialiased;
+                font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                font-size: 14px;
+                font-weight: 400;
+                user-select: none;
+              }
+        >
+          <label
+            className=
+                ms-Label
+                {
+                  -moz-osx-font-smoothing: grayscale;
+                  -webkit-font-smoothing: antialiased;
+                  box-shadow: none;
+                  box-sizing: border-box;
+                  color: #333333;
+                  display: block;
+                  font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                  font-size: 14px;
+                  font-weight: 400;
+                  margin-bottom: 0px;
+                  margin-left: 0px;
+                  margin-right: 0px;
+                  margin-top: 0px;
+                  overflow-wrap: break-word;
+                  padding-bottom: 0px;
+                  padding-left: 0px;
+                  padding-right: 0px;
+                  padding-top: 0px;
+                  word-wrap: break-word;
+                }
+            htmlFor="Slider11"
+          >
+            Bottom padding:
+          </label>
+          <div
+            className=
+                ms-Slider-container
+                {
+                  align-items: center;
+                  display: flex;
+                  flex-wrap: nowrap;
+                }
+          >
+            <div
+              aria-disabled={false}
+              aria-label="Bottom padding:"
+              aria-valuemax={50}
+              aria-valuemin={0}
+              aria-valuenow={0}
+              className=
+                  ms-Slider-slideBox
+                  ms-Slider-showValue
+                  ms-Slider-showTransitions
+                  {
+                    align-items: center;
+                    background: transparent;
+                    border: none;
+                    display: flex;
+                    flex-grow: 1;
+                    height: 28px;
+                    line-height: 28px;
+                    outline: transparent;
+                    padding-bottom: 0;
+                    padding-left: 8px;
+                    padding-right: 8px;
+                    padding-top: 0;
+                    position: relative;
+                    width: auto;
+                  }
+                  &::-moz-focus-inner {
+                    border: 0;
+                  }
+                  .ms-Fabric--isFocusVisible &:focus:after {
+                    border: 1px solid #ffffff;
+                    bottom: 1px;
+                    content: "";
+                    left: 1px;
+                    outline: 1px solid #666666;
+                    position: absolute;
+                    right: 1px;
+                    top: 1px;
+                    z-index: 1;
+                  }
+                  &:active $activeSection {
+                    background-color: #0078d4;
+                  }
+                  @media screen and (-ms-high-contrast: active){&:active $activeSection {
+                    background-color: Highlight;
+                  }
+                  &:hover $activeSection {
+                    background-color: #0078d4;
+                  }
+                  @media screen and (-ms-high-contrast: active){&:hover $activeSection {
+                    background-color: Highlight;
+                  }
+                  &:active $inactiveSection {
+                    background-color: #c7e0f4;
+                  }
+                  @media screen and (-ms-high-contrast: active){&:active $inactiveSection {
+                    border-color: Highlight;
+                  }
+                  &:hover $inactiveSection {
+                    background-color: #c7e0f4;
+                  }
+                  @media screen and (-ms-high-contrast: active){&:hover $inactiveSection {
+                    border-color: Highlight;
+                  }
+                  &:active $thumb {
+                    border: 2px solid #0078d4;
+                  }
+                  @media screen and (-ms-high-contrast: active){&:active $thumb {
+                    border-color: Highlight;
+                  }
+                  &:hover $thumb {
+                    border: 2px solid #0078d4;
+                  }
+                  @media screen and (-ms-high-contrast: active){&:hover $thumb {
+                    border-color: Highlight;
+                  }
+                  & $thumb {
+                    background: #ffffff;
+                    border-color: #666666;
+                    border-radius: 10px;
+                    border-style: solid;
+                    border-width: 2px;
+                    box-sizing: border-box;
+                    display: block;
+                    height: 16px;
+                    position: absolute;
+                    top: -6px;
+                    transform: translateX(-50%);
+                    transition: left 0.367s cubic-bezier(.1,.9,.2,1);
+                    width: 16px;
+                  }
+              data-is-focusable={true}
+              id="Slider11"
+              onKeyDown={[Function]}
+              onMouseDown={[Function]}
+              onTouchStart={[Function]}
+              role="slider"
+              tabIndex={0}
+            >
+              <div
+                className=
+                    ms-Slider-line
+                    {
+                      display: flex;
+                      position: relative;
+                      width: 100%;
+                    }
+                    & $lineContainer {
+                      border-radius: 4px;
+                      box-sizing: border-box;
+                      height: 4px;
+                      width: 100%;
+                    }
+              >
+                <span
+                  className=
+                      ms-Slider-thumb
+
+                  style={
+                    Object {
+                      "left": "0%",
+                    }
+                  }
+                />
+                <span
+                  className=
+                      ms-Slider-active
+
+                      {
+                        background: #666666;
+                        transition: width 0.367s cubic-bezier(.1,.9,.2,1);
+                      }
+                      @media screen and (-ms-high-contrast: active){& {
+                        background-color: WindowText;
+                      }
+                  style={
+                    Object {
+                      "width": "0%",
+                    }
+                  }
+                />
+                <span
+                  className=
+                      ms-Slider-inactive
+
+                      {
+                        background: #c8c8c8;
+                        transition: width 0.367s cubic-bezier(.1,.9,.2,1);
+                      }
+                      @media screen and (-ms-high-contrast: active){& {
+                        border: 1px solid WindowText;
+                      }
+                  style={
+                    Object {
+                      "width": "100%",
+                    }
+                  }
+                />
+              </div>
+            </div>
+            <label
+              className=
+                  ms-Label
+                  ms-Slider-value
+                  {
+                    -moz-osx-font-smoothing: grayscale;
+                    -webkit-font-smoothing: antialiased;
+                    box-shadow: none;
+                    box-sizing: border-box;
+                    color: #333333;
+                    display: block;
+                    flex-shrink: 1;
+                    font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                    font-size: 14px;
+                    font-weight: 400;
+                    line-height: 1;
+                    margin-bottom: 0;
+                    margin-left: 8px;
+                    margin-right: 8px;
+                    margin-top: 0;
+                    overflow-wrap: break-word;
+                    padding-bottom: 5px;
+                    padding-left: 0;
+                    padding-right: 0;
+                    padding-top: 5px;
+                    white-space: nowrap;
+                    width: 40px;
+                    word-wrap: break-word;
+                  }
+            >
+              0
+            </label>
+          </div>
+        </div>
+      </div>
+    </span>
+  </div>
+  <div
+    className=
+        ms-Stack
+        {
+          align-items: flex-end;
+          box-sizing: border-box;
+          display: flex;
+          flex-direction: row;
+          flex-wrap: nowrap;
+          height: auto;
+          width: auto;
+        }
+        & > * {
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+        & > *:not(:first-child) {
+          margin-left: 20px;
+        }
+        & > *:not(.ms-StackItem) {
+          flex-shrink: 0;
+        }
+  >
+    <span
+      className=
+          ms-StackItem
+          {
+            -moz-osx-font-smoothing: grayscale;
+            -webkit-font-smoothing: antialiased;
+            flex-grow: 1;
+            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+            font-size: 14px;
+            font-weight: 400;
+            height: auto;
+            width: auto;
+          }
+    >
+      <div
+        className=
+            ms-Dropdown-container
+
+      >
+        <label
+          className=
+              ms-Label
+              ms-Dropdown-label
+              {
+                -moz-osx-font-smoothing: grayscale;
+                -webkit-font-smoothing: antialiased;
+                box-shadow: none;
+                box-sizing: border-box;
+                color: #333333;
+                display: inline-block;
+                font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                font-size: 14px;
+                font-weight: 400;
+                margin-bottom: 0px;
+                margin-left: 0px;
+                margin-right: 0px;
+                margin-top: 0px;
+                overflow-wrap: break-word;
+                padding-bottom: 5px;
+                padding-left: 0;
+                padding-right: 0;
+                padding-top: 5px;
+                word-wrap: break-word;
+              }
+          htmlFor="Dropdown12"
+          id="Dropdown12-label"
+        >
+          Horizontal alignment:
+        </label>
+        <div
+          aria-activedescendant="Dropdown12-option"
+          aria-describedby="Dropdown12-option"
+          aria-expanded="false"
+          aria-labelledby="Dropdown12-label"
+          className=
+              ms-Dropdown
+              {
+                -moz-osx-font-smoothing: grayscale;
+                -webkit-font-smoothing: antialiased;
+                box-shadow: none;
+                box-sizing: border-box;
+                color: #333333;
+                font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                font-size: 14px;
+                font-weight: 400;
+                margin-bottom: 0px;
+                margin-left: 0px;
+                margin-right: 0px;
+                margin-top: 0px;
+                outline: 0px;
+                padding-bottom: 0px;
+                padding-left: 0px;
+                padding-right: 0px;
+                padding-top: 0px;
+                position: relative;
+                user-select: none;
+              }
+              &:hover .ms-Dropdown-title {
+                border-color: #212121;
+                color: #212121;
+              }
+              @media screen and (-ms-high-contrast: active){&:hover .ms-Dropdown-title {
+                border-color: Highlight;
+              }
+              &:focus .ms-Dropdown-title {
+                border-color: #0078d4;
+                color: #212121;
+              }
+              @media screen and (-ms-high-contrast: active){&:focus .ms-Dropdown-title {
+                background-color: Highlight;
+                border-color: Highlight;
+                color: HighlightText;
+              }
+              @media screen and (-ms-high-contrast: active){&:focus .ms-Dropdown-title:hover {
+                color: HighlightText;
+              }
+              @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: black-on-white){&:focus .ms-Dropdown-title {
+                -ms-high-contrast-adjust: none;
+              }
+              &:active .ms-Dropdown-title {
+                border-color: #005a9e;
+                color: #212121;
+              }
+              @media screen and (-ms-high-contrast: active){&:active .ms-Dropdown-title {
+                border-color: Highlight;
+              }
+              &:hover .ms-Dropdown-caretDown {
+                color: #212121;
+              }
+              &:focus .ms-Dropdown-caretDown {
+                color: #212121;
+              }
+              @media screen and (-ms-high-contrast: active){&:focus .ms-Dropdown-caretDown {
+                color: HighlightText;
+              }
+              @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: black-on-white){&:focus .ms-Dropdown-caretDown {
+                -ms-high-contrast-adjust: none;
+              }
+              &:active .ms-Dropdown-caretDown {
+                color: #212121;
+              }
+              &:hover .ms-Dropdown-titleIsPlaceHolder {
+                color: #666666;
+              }
+              &:focus .ms-Dropdown-titleIsPlaceHolder {
+                color: #666666;
+              }
+              &:active .ms-Dropdown-titleIsPlaceHolder {
+                color: #666666;
+              }
+              &:hover .ms-Dropdown-title--hasError {
+                border-color: #a80000;
+              }
+              &:active .ms-Dropdown-title--hasError {
+                border-color: #a80000;
+              }
+              &:focus .ms-Dropdown-title--hasError {
+                border-color: #a80000;
+              }
+          data-is-focusable={true}
+          id="Dropdown12"
+          onBlur={[Function]}
+          onChange={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onKeyDown={[Function]}
+          onKeyUp={[Function]}
+          placeholder="Select Horizontal Alignment"
+          role="listbox"
+          tabIndex={0}
+        >
+          <span
+            aria-atomic={true}
+            aria-label="Left"
+            aria-live="off"
+            aria-posinset={1}
+            aria-selected={true}
+            aria-setsize={6}
+            className=
+                ms-Dropdown-title
+                {
+                  background-color: #ffffff;
+                  border-color: #a6a6a6;
+                  border-style: solid;
+                  border-width: 1px;
+                  box-shadow: none;
+                  box-sizing: border-box;
+                  cursor: pointer;
+                  display: block;
+                  height: 32px;
+                  line-height: 30px;
+                  margin-bottom: 0px;
+                  margin-left: 0px;
+                  margin-right: 0px;
+                  margin-top: 0px;
+                  overflow: hidden;
+                  padding-bottom: 0;
+                  padding-left: 12px;
+                  padding-right: 32px;
+                  padding-top: 0;
+                  position: relative;
+                  text-overflow: ellipsis;
+                  white-space: nowrap;
+                }
+            id="Dropdown12-option"
+            role="option"
+          >
+            <span>
+              Left
+            </span>
+          </span>
+          <span
+            className=
+                ms-Dropdown-caretDownWrapper
+                {
+                  height: 32px;
+                  line-height: 30px;
+                  position: absolute;
+                  right: 12px;
+                  top: 1px;
+                }
+          >
+            <i
+              aria-hidden={true}
+              className=
+                  ms-Dropdown-caretDown
+                  {
+                    -moz-osx-font-smoothing: grayscale;
+                    -webkit-font-smoothing: antialiased;
+                    color: #666666;
+                    display: inline-block;
+                    font-family: "FabricMDL2Icons";
+                    font-size: 12px;
+                    font-style: normal;
+                    font-weight: normal;
+                    pointer-events: none;
+                    speak: none;
+                  }
+              data-icon-name="ChevronDown"
+              role="presentation"
+            >
+              
+            </i>
+          </span>
+        </div>
+      </div>
+    </span>
+    <span
+      className=
+          ms-StackItem
+          {
+            -moz-osx-font-smoothing: grayscale;
+            -webkit-font-smoothing: antialiased;
+            flex-grow: 1;
+            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+            font-size: 14px;
+            font-weight: 400;
+            height: auto;
+            width: auto;
+          }
+    >
+      <div
+        className=
+            ms-Dropdown-container
+
+      >
+        <label
+          className=
+              ms-Label
+              ms-Dropdown-label
+              {
+                -moz-osx-font-smoothing: grayscale;
+                -webkit-font-smoothing: antialiased;
+                box-shadow: none;
+                box-sizing: border-box;
+                color: #333333;
+                display: inline-block;
+                font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                font-size: 14px;
+                font-weight: 400;
+                margin-bottom: 0px;
+                margin-left: 0px;
+                margin-right: 0px;
+                margin-top: 0px;
+                overflow-wrap: break-word;
+                padding-bottom: 5px;
+                padding-left: 0;
+                padding-right: 0;
+                padding-top: 5px;
+                word-wrap: break-word;
+              }
+          htmlFor="Dropdown13"
+          id="Dropdown13-label"
+        >
+          Vertical alignment:
+        </label>
+        <div
+          aria-activedescendant="Dropdown13-option"
+          aria-describedby="Dropdown13-option"
+          aria-expanded="false"
+          aria-labelledby="Dropdown13-label"
+          className=
+              ms-Dropdown
+              {
+                -moz-osx-font-smoothing: grayscale;
+                -webkit-font-smoothing: antialiased;
+                box-shadow: none;
+                box-sizing: border-box;
+                color: #333333;
+                font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                font-size: 14px;
+                font-weight: 400;
+                margin-bottom: 0px;
+                margin-left: 0px;
+                margin-right: 0px;
+                margin-top: 0px;
+                outline: 0px;
+                padding-bottom: 0px;
+                padding-left: 0px;
+                padding-right: 0px;
+                padding-top: 0px;
+                position: relative;
+                user-select: none;
+              }
+              &:hover .ms-Dropdown-title {
+                border-color: #212121;
+                color: #212121;
+              }
+              @media screen and (-ms-high-contrast: active){&:hover .ms-Dropdown-title {
+                border-color: Highlight;
+              }
+              &:focus .ms-Dropdown-title {
+                border-color: #0078d4;
+                color: #212121;
+              }
+              @media screen and (-ms-high-contrast: active){&:focus .ms-Dropdown-title {
+                background-color: Highlight;
+                border-color: Highlight;
+                color: HighlightText;
+              }
+              @media screen and (-ms-high-contrast: active){&:focus .ms-Dropdown-title:hover {
+                color: HighlightText;
+              }
+              @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: black-on-white){&:focus .ms-Dropdown-title {
+                -ms-high-contrast-adjust: none;
+              }
+              &:active .ms-Dropdown-title {
+                border-color: #005a9e;
+                color: #212121;
+              }
+              @media screen and (-ms-high-contrast: active){&:active .ms-Dropdown-title {
+                border-color: Highlight;
+              }
+              &:hover .ms-Dropdown-caretDown {
+                color: #212121;
+              }
+              &:focus .ms-Dropdown-caretDown {
+                color: #212121;
+              }
+              @media screen and (-ms-high-contrast: active){&:focus .ms-Dropdown-caretDown {
+                color: HighlightText;
+              }
+              @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: black-on-white){&:focus .ms-Dropdown-caretDown {
+                -ms-high-contrast-adjust: none;
+              }
+              &:active .ms-Dropdown-caretDown {
+                color: #212121;
+              }
+              &:hover .ms-Dropdown-titleIsPlaceHolder {
+                color: #666666;
+              }
+              &:focus .ms-Dropdown-titleIsPlaceHolder {
+                color: #666666;
+              }
+              &:active .ms-Dropdown-titleIsPlaceHolder {
+                color: #666666;
+              }
+              &:hover .ms-Dropdown-title--hasError {
+                border-color: #a80000;
+              }
+              &:active .ms-Dropdown-title--hasError {
+                border-color: #a80000;
+              }
+              &:focus .ms-Dropdown-title--hasError {
+                border-color: #a80000;
+              }
+          data-is-focusable={true}
+          id="Dropdown13"
+          onBlur={[Function]}
+          onChange={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onKeyDown={[Function]}
+          onKeyUp={[Function]}
+          placeholder="Select Vertical Alignment"
+          role="listbox"
+          tabIndex={0}
+        >
+          <span
+            aria-atomic={true}
+            aria-label="Top"
+            aria-live="off"
+            aria-posinset={1}
+            aria-selected={true}
+            aria-setsize={3}
+            className=
+                ms-Dropdown-title
+                {
+                  background-color: #ffffff;
+                  border-color: #a6a6a6;
+                  border-style: solid;
+                  border-width: 1px;
+                  box-shadow: none;
+                  box-sizing: border-box;
+                  cursor: pointer;
+                  display: block;
+                  height: 32px;
+                  line-height: 30px;
+                  margin-bottom: 0px;
+                  margin-left: 0px;
+                  margin-right: 0px;
+                  margin-top: 0px;
+                  overflow: hidden;
+                  padding-bottom: 0;
+                  padding-left: 12px;
+                  padding-right: 32px;
+                  padding-top: 0;
+                  position: relative;
+                  text-overflow: ellipsis;
+                  white-space: nowrap;
+                }
+            id="Dropdown13-option"
+            role="option"
+          >
+            <span>
+              Top
+            </span>
+          </span>
+          <span
+            className=
+                ms-Dropdown-caretDownWrapper
+                {
+                  height: 32px;
+                  line-height: 30px;
+                  position: absolute;
+                  right: 12px;
+                  top: 1px;
+                }
+          >
+            <i
+              aria-hidden={true}
+              className=
+                  ms-Dropdown-caretDown
+                  {
+                    -moz-osx-font-smoothing: grayscale;
+                    -webkit-font-smoothing: antialiased;
+                    color: #666666;
+                    display: inline-block;
+                    font-family: "FabricMDL2Icons";
+                    font-size: 12px;
+                    font-style: normal;
+                    font-weight: normal;
+                    pointer-events: none;
+                    speak: none;
+                  }
+              data-icon-name="ChevronDown"
+              role="presentation"
+            >
+              
+            </i>
+          </span>
+        </div>
+      </div>
+    </span>
+    <span
+      className=
+          ms-StackItem
+          {
+            -moz-osx-font-smoothing: grayscale;
+            -webkit-font-smoothing: antialiased;
+            flex-shrink: 0;
+            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+            font-size: 14px;
+            font-weight: 400;
+            height: auto;
+            width: auto;
+          }
+    >
+      <button
+        aria-checked={false}
+        className=
+            ms-Checkbox
+            is-enabled
+            {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              background: none;
+              border: none;
+              cursor: pointer;
+              display: block;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 14px;
+              font-weight: 400;
+              margin-bottom: 0;
+              margin-left: 0;
+              margin-right: 0;
+              margin-top: 0;
+              outline: none;
+              padding-bottom: 0;
+              padding-left: 0;
+              padding-right: 0;
+              padding-top: 0;
+              position: relative;
+            }
+            &::-moz-focus-inner {
+              border: 0;
+            }
+            .ms-Fabric--isFocusVisible &:focus:after {
+              border: 1px solid #ffffff;
+              bottom: -2px;
+              content: "";
+              left: -2px;
+              outline: 1px solid #666666;
+              position: absolute;
+              right: -2px;
+              top: -2px;
+              z-index: 1;
+            }
+            &:hover .ms-Checkbox-checkbox {
+              border-color: #333333;
+            }
+            @media screen and (-ms-high-contrast: active){&:hover .ms-Checkbox-checkbox {
+              border-color: Highlight;
+            }
+            &:focus .ms-Checkbox-checkbox {
+              border-color: #333333;
+            }
+            &:hover .ms-Checkbox-checkmark {
+              color: #a6a6a6;
+              opacity: 1;
+            }
+            @media screen and (-ms-high-contrast: active){&:hover .ms-Checkbox-checkmark {
+              color: Highlight;
+            }
+            &:hover .ms-Checkbox-text {
+              color: #333333;
+            }
+            &:focus .ms-Checkbox-text {
+              color: #333333;
+            }
+        id="checkbox-14"
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        role="checkbox"
+        type="button"
+      >
+        <label
+          className=
+              ms-Checkbox-label
+              {
+                align-items: flex-start;
+                cursor: pointer;
+                display: flex;
+                margin-bottom: 0;
+                margin-left: -4px;
+                margin-right: -4px;
+                margin-top: 0;
+                position: relative;
+                text-align: left;
+                user-select: none;
+              }
+          htmlFor="checkbox-14"
+        >
+          <div
+            className=
+                ms-Checkbox-checkbox
+                {
+                  align-items: center;
+                  border-color: #666666;
+                  border-style: solid;
+                  border-width: 1px;
+                  box-sizing: border-box;
+                  display: flex;
+                  flex-shrink: 0;
+                  height: 20px;
+                  justify-content: center;
+                  margin-bottom: 0;
+                  margin-left: 4px;
+                  margin-right: 4px;
+                  margin-top: 0;
+                  overflow: hidden;
+                  transition-duration: 200ms;
+                  transition-property: background, border, border-color;
+                  transition-timing-function: cubic-bezier(.4, 0, .23, 1);
+                  width: 20px;
+                }
+          >
+            <i
+              aria-hidden={true}
+              className=
+                  ms-Checkbox-checkmark
+                  {
+                    -moz-osx-font-smoothing: grayscale;
+                    -webkit-font-smoothing: antialiased;
+                    color: #ffffff;
+                    display: inline-block;
+                    font-family: "FabricMDL2Icons";
+                    font-style: normal;
+                    font-weight: normal;
+                    opacity: 0;
+                    speak: none;
+                  }
+                  @media screen and (-ms-high-contrast: active){& {
+                    -ms-high-contrast-adjust: none;
+                    color: Window;
+                  }
+              data-icon-name="CheckMark"
+              role="presentation"
+            >
+              
+            </i>
+          </div>
+          <span
+            className=
+                ms-Checkbox-text
+                {
+                  color: #333333;
+                  font-size: 14px;
+                  line-height: 20px;
+                  margin-bottom: 0;
+                  margin-left: 4px;
+                  margin-right: 4px;
+                  margin-top: 0;
+                }
+          >
+            Hide empty children
+          </span>
+        </label>
+      </button>
+    </span>
+    <span
+      className=
+          ms-StackItem
+          {
+            -moz-osx-font-smoothing: grayscale;
+            -webkit-font-smoothing: antialiased;
+            flex-grow: 1;
+            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+            font-size: 14px;
+            font-weight: 400;
+            height: auto;
+            width: auto;
+          }
+    >
+      <div
+        className=
+            ms-TextField
+            {
+              box-shadow: none;
+              box-sizing: border-box;
+              margin-bottom: 0px;
+              margin-left: 0px;
+              margin-right: 0px;
+              margin-top: 0px;
+              padding-bottom: 0px;
+              padding-left: 0px;
+              padding-right: 0px;
+              padding-top: 0px;
+              position: relative;
+            }
+            @media screen and (-ms-high-contrast: active){& {
+              border-width: 2px;
+            }
+      >
+        <div
+          className=
+              ms-TextField-wrapper
+
+        >
+          <label
+            className=
+                ms-Label
+                {
+                  -moz-osx-font-smoothing: grayscale;
+                  -webkit-font-smoothing: antialiased;
+                  box-shadow: none;
+                  box-sizing: border-box;
+                  color: #333333;
+                  display: block;
+                  font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                  font-size: 14px;
+                  font-weight: 400;
+                  margin-bottom: 0px;
+                  margin-left: 0px;
+                  margin-right: 0px;
+                  margin-top: 0px;
+                  overflow-wrap: break-word;
+                  padding-bottom: 5px;
+                  padding-left: 0;
+                  padding-right: 0;
+                  padding-top: 5px;
+                  word-wrap: break-word;
+                }
+            htmlFor="TextField15"
+          >
+            Enter a space-separated list of empty children (e.g. 1 2 3):
+          </label>
+          <div
+            className=
+                ms-TextField-fieldGroup
+                {
+                  align-items: stretch;
+                  background: #ffffff;
+                  border: 1px solid #a6a6a6;
+                  box-shadow: none;
+                  box-sizing: border-box;
+                  display: flex;
+                  flex-direction: row;
+                  height: 32px;
+                  margin-bottom: 0px;
+                  margin-left: 0px;
+                  margin-right: 0px;
+                  margin-top: 0px;
+                  padding-bottom: 0px;
+                  padding-left: 0px;
+                  padding-right: 0px;
+                  padding-top: 0px;
+                  position: relative;
+                }
+                &:hover {
+                  border-color: #333333;
+                }
+                @media screen and (-ms-high-contrast: active){&:hover {
+                  border-color: Highlight;
+                }
+          >
+            <input
+              aria-invalid={false}
+              className=
+                  ms-TextField-field
+                  {
+                    background-color: transparent;
+                    background: none;
+                    border-radius: 0px;
+                    border: none;
+                    box-shadow: none;
+                    box-sizing: border-box;
+                    color: #333333;
+                    font-size: 14px;
+                    margin-bottom: 0px;
+                    margin-left: 0px;
+                    margin-right: 0px;
+                    margin-top: 0px;
+                    min-width: 0px;
+                    outline: 0px;
+                    padding-bottom: 0;
+                    padding-left: 12px;
+                    padding-right: 12px;
+                    padding-top: 0;
+                    text-overflow: ellipsis;
+                    width: 100%;
+                  }
+                  &:active, &:focus, &:hover {
+                    outline: 0px;
+                  }
+                  &::-ms-clear {
+                    display: none;
+                  }
+                  &::placeholder {
+                    color: #666666;
+                    opacity: 1;
+                  }
+                  &:-ms-input-placeholder {
+                    color: #666666;
+                    opacity: 1;
+                  }
+              id="TextField15"
+              onBlur={[Function]}
+              onChange={[Function]}
+              onFocus={[Function]}
+              onInput={[Function]}
+              type="text"
+              value=""
+            />
+          </div>
+        </div>
+      </div>
+    </span>
+  </div>
+  <div
+    className=
+        ms-Stack
+        {
+          align-items: flex-start;
+          background: #71afe5;
+          box-sizing: border-box;
+          display: flex;
+          flex-direction: row;
+          flex-wrap: nowrap;
+          height: auto;
+          justify-content: flex-start;
+          margin-left: 10px;
+          margin-right: 10px;
+          min-height: 100px;
+          padding-bottom: 0px;
+          padding-left: 0px;
+          padding-right: 0px;
+          padding-top: 0px;
+          width: calc(100% - 20px);
+        }
+        & > * {
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+        & > *:not(:first-child) {
+          margin-left: 0px;
+        }
+        & > *:not(.ms-StackItem) {
+          flex-shrink: 0;
+        }
+  >
+    <span
+      className=
+
+          {
+            align-items: center;
+            background: #0078d4;
+            box-shadow: ;
+            color: #ffffff;
+            display: flex;
+            height: 50px;
+            justify-content: center;
+            width: 50px;
+          }
+    >
+      1
+    </span>
+    <span
+      className=
+
+          {
+            align-items: center;
+            background: #0078d4;
+            box-shadow: ;
+            color: #ffffff;
+            display: flex;
+            height: 50px;
+            justify-content: center;
+            width: 50px;
+          }
+    >
+      2
+    </span>
+    <span
+      className=
+
+          {
+            align-items: center;
+            background: #0078d4;
+            box-shadow: ;
+            color: #ffffff;
+            display: flex;
+            height: 50px;
+            justify-content: center;
+            width: 50px;
+          }
+    >
+      3
+    </span>
+    <span
+      className=
+
+          {
+            align-items: center;
+            background: #0078d4;
+            box-shadow: ;
+            color: #ffffff;
+            display: flex;
+            height: 50px;
+            justify-content: center;
+            width: 50px;
+          }
+    >
+      4
+    </span>
+    <span
+      className=
+
+          {
+            align-items: center;
+            background: #0078d4;
+            box-shadow: ;
+            color: #ffffff;
+            display: flex;
+            height: 50px;
+            justify-content: center;
+            width: 50px;
+          }
+    >
+      5
+    </span>
+  </div>
+</div>
+`;
diff --git a/packages/office-ui-fabric-react/src/components/__snapshots__/Stack.Horizontal.Grow.Example.tsx.shot b/packages/office-ui-fabric-react/src/components/__snapshots__/Stack.Horizontal.Grow.Example.tsx.shot
new file mode 100644
index 0000000000000..3394eefe1220c
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/__snapshots__/Stack.Horizontal.Grow.Example.tsx.shot
@@ -0,0 +1,95 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Component Examples renders Stack.Horizontal.Grow.Example.tsx correctly 1`] = `
+<div
+  className=
+      ms-Stack
+      {
+        background: #71afe5;
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        height: auto;
+        padding-bottom: 10px;
+        padding-left: 10px;
+        padding-right: 10px;
+        padding-top: 10px;
+        width: auto;
+      }
+      & > * {
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      & > *:not(:first-child) {
+        margin-left: 5px;
+      }
+      & > *:not(.ms-StackItem) {
+        flex-shrink: 0;
+      }
+>
+  <span
+    className=
+        ms-StackItem
+        {
+          -moz-osx-font-smoothing: grayscale;
+          -webkit-font-smoothing: antialiased;
+          align-items: center;
+          background: #0078d4;
+          color: #ffffff;
+          display: flex;
+          flex-grow: 3;
+          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+          font-size: 14px;
+          font-weight: 400;
+          height: 50px;
+          justify-content: center;
+          width: auto;
+        }
+  >
+    Grow is 3
+  </span>
+  <span
+    className=
+        ms-StackItem
+        {
+          -moz-osx-font-smoothing: grayscale;
+          -webkit-font-smoothing: antialiased;
+          align-items: center;
+          background: #0078d4;
+          color: #ffffff;
+          display: flex;
+          flex-grow: 2;
+          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+          font-size: 14px;
+          font-weight: 400;
+          height: 50px;
+          justify-content: center;
+          width: auto;
+        }
+  >
+    Grow is 2
+  </span>
+  <span
+    className=
+        ms-StackItem
+        {
+          -moz-osx-font-smoothing: grayscale;
+          -webkit-font-smoothing: antialiased;
+          align-items: center;
+          background: #0078d4;
+          color: #ffffff;
+          display: flex;
+          flex-grow: 1;
+          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+          font-size: 14px;
+          font-weight: 400;
+          height: 50px;
+          justify-content: center;
+          width: auto;
+        }
+  >
+    Grow is 1
+  </span>
+</div>
+`;
diff --git a/packages/office-ui-fabric-react/src/components/__snapshots__/Stack.Horizontal.HorizontalAlign.Example.tsx.shot b/packages/office-ui-fabric-react/src/components/__snapshots__/Stack.Horizontal.HorizontalAlign.Example.tsx.shot
new file mode 100644
index 0000000000000..351511a5bf786
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/__snapshots__/Stack.Horizontal.HorizontalAlign.Example.tsx.shot
@@ -0,0 +1,291 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Component Examples renders Stack.Horizontal.HorizontalAlign.Example.tsx correctly 1`] = `
+<div
+  className=
+      ms-Stack
+      {
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        flex-wrap: nowrap;
+        height: auto;
+        width: auto;
+      }
+      & > * {
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      & > *:not(:first-child) {
+        margin-top: 5px;
+      }
+      & > *:not(.ms-StackItem) {
+        flex-shrink: 0;
+      }
+>
+  <span>
+    Left-aligned
+  </span>
+  <div
+    className=
+        ms-Stack
+        {
+          background: #71afe5;
+          box-sizing: border-box;
+          display: flex;
+          flex-direction: row;
+          flex-wrap: nowrap;
+          height: auto;
+          justify-content: flex-start;
+          width: auto;
+        }
+        & > * {
+          align-items: center;
+          background: #0078d4;
+          color: #ffffff;
+          display: flex;
+          height: 50px;
+          justify-content: center;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          width: 50px;
+        }
+        & > *:not(:first-child) {
+          margin-left: 0px;
+        }
+        & > *:not(.ms-StackItem) {
+          flex-shrink: 0;
+        }
+  >
+    <span>
+      1
+    </span>
+    <span>
+      2
+    </span>
+    <span>
+      3
+    </span>
+  </div>
+  <span>
+    Horizontally centered
+  </span>
+  <div
+    className=
+        ms-Stack
+        {
+          background: #71afe5;
+          box-sizing: border-box;
+          display: flex;
+          flex-direction: row;
+          flex-wrap: nowrap;
+          height: auto;
+          justify-content: center;
+          width: auto;
+        }
+        & > * {
+          align-items: center;
+          background: #0078d4;
+          color: #ffffff;
+          display: flex;
+          height: 50px;
+          justify-content: center;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          width: 50px;
+        }
+        & > *:not(:first-child) {
+          margin-left: 0px;
+        }
+        & > *:not(.ms-StackItem) {
+          flex-shrink: 0;
+        }
+  >
+    <span>
+      1
+    </span>
+    <span>
+      2
+    </span>
+    <span>
+      3
+    </span>
+  </div>
+  <span>
+    Right-aligned
+  </span>
+  <div
+    className=
+        ms-Stack
+        {
+          background: #71afe5;
+          box-sizing: border-box;
+          display: flex;
+          flex-direction: row;
+          flex-wrap: nowrap;
+          height: auto;
+          justify-content: flex-end;
+          width: auto;
+        }
+        & > * {
+          align-items: center;
+          background: #0078d4;
+          color: #ffffff;
+          display: flex;
+          height: 50px;
+          justify-content: center;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          width: 50px;
+        }
+        & > *:not(:first-child) {
+          margin-left: 0px;
+        }
+        & > *:not(.ms-StackItem) {
+          flex-shrink: 0;
+        }
+  >
+    <span>
+      1
+    </span>
+    <span>
+      2
+    </span>
+    <span>
+      3
+    </span>
+  </div>
+  <span>
+    Horizontal space around items
+  </span>
+  <div
+    className=
+        ms-Stack
+        {
+          background: #71afe5;
+          box-sizing: border-box;
+          display: flex;
+          flex-direction: row;
+          flex-wrap: nowrap;
+          height: auto;
+          justify-content: space-around;
+          width: auto;
+        }
+        & > * {
+          align-items: center;
+          background: #0078d4;
+          color: #ffffff;
+          display: flex;
+          height: 50px;
+          justify-content: center;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          width: 50px;
+        }
+        & > *:not(:first-child) {
+          margin-left: 0px;
+        }
+        & > *:not(.ms-StackItem) {
+          flex-shrink: 0;
+        }
+  >
+    <span>
+      1
+    </span>
+    <span>
+      2
+    </span>
+    <span>
+      3
+    </span>
+  </div>
+  <span>
+    Horizontal space between items
+  </span>
+  <div
+    className=
+        ms-Stack
+        {
+          background: #71afe5;
+          box-sizing: border-box;
+          display: flex;
+          flex-direction: row;
+          flex-wrap: nowrap;
+          height: auto;
+          justify-content: space-between;
+          width: auto;
+        }
+        & > * {
+          align-items: center;
+          background: #0078d4;
+          color: #ffffff;
+          display: flex;
+          height: 50px;
+          justify-content: center;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          width: 50px;
+        }
+        & > *:not(:first-child) {
+          margin-left: 0px;
+        }
+        & > *:not(.ms-StackItem) {
+          flex-shrink: 0;
+        }
+  >
+    <span>
+      1
+    </span>
+    <span>
+      2
+    </span>
+    <span>
+      3
+    </span>
+  </div>
+  <span>
+    Items horizontally evenly spaced
+  </span>
+  <div
+    className=
+        ms-Stack
+        {
+          background: #71afe5;
+          box-sizing: border-box;
+          display: flex;
+          flex-direction: row;
+          flex-wrap: nowrap;
+          height: auto;
+          justify-content: space-evenly;
+          width: auto;
+        }
+        & > * {
+          align-items: center;
+          background: #0078d4;
+          color: #ffffff;
+          display: flex;
+          height: 50px;
+          justify-content: center;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          width: 50px;
+        }
+        & > *:not(:first-child) {
+          margin-left: 0px;
+        }
+        & > *:not(.ms-StackItem) {
+          flex-shrink: 0;
+        }
+  >
+    <span>
+      1
+    </span>
+    <span>
+      2
+    </span>
+    <span>
+      3
+    </span>
+  </div>
+</div>
+`;
diff --git a/packages/office-ui-fabric-react/src/components/__snapshots__/Stack.Horizontal.Shrink.Example.tsx.shot b/packages/office-ui-fabric-react/src/components/__snapshots__/Stack.Horizontal.Shrink.Example.tsx.shot
new file mode 100644
index 0000000000000..7285c82ccf565
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/__snapshots__/Stack.Horizontal.Shrink.Example.tsx.shot
@@ -0,0 +1,393 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Component Examples renders Stack.Horizontal.Shrink.Example.tsx correctly 1`] = `
+<div
+  className=
+      ms-Stack
+      {
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        flex-wrap: nowrap;
+        height: auto;
+        width: auto;
+      }
+      & > * {
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      & > *:not(:first-child) {
+        margin-top: 5px;
+      }
+      & > *:not(.ms-StackItem) {
+        flex-shrink: 0;
+      }
+>
+  <div
+    className=
+        ms-Slider
+        ms-Slider-enabled
+        ms-Slider-row
+        {
+          -moz-osx-font-smoothing: grayscale;
+          -webkit-font-smoothing: antialiased;
+          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+          font-size: 14px;
+          font-weight: 400;
+          user-select: none;
+        }
+  >
+    <label
+      className=
+          ms-Label
+          {
+            -moz-osx-font-smoothing: grayscale;
+            -webkit-font-smoothing: antialiased;
+            box-shadow: none;
+            box-sizing: border-box;
+            color: #333333;
+            display: block;
+            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+            font-size: 14px;
+            font-weight: 400;
+            margin-bottom: 0px;
+            margin-left: 0px;
+            margin-right: 0px;
+            margin-top: 0px;
+            overflow-wrap: break-word;
+            padding-bottom: 0px;
+            padding-left: 0px;
+            padding-right: 0px;
+            padding-top: 0px;
+            word-wrap: break-word;
+          }
+      htmlFor="Slider0"
+    >
+      Change the stack width to see how child items shrink:
+    </label>
+    <div
+      className=
+          ms-Slider-container
+          {
+            align-items: center;
+            display: flex;
+            flex-wrap: nowrap;
+          }
+    >
+      <div
+        aria-disabled={false}
+        aria-label="Change the stack width to see how child items shrink:"
+        aria-valuemax={100}
+        aria-valuemin={1}
+        aria-valuenow={100}
+        className=
+            ms-Slider-slideBox
+            ms-Slider-showValue
+            ms-Slider-showTransitions
+            {
+              align-items: center;
+              background: transparent;
+              border: none;
+              display: flex;
+              flex-grow: 1;
+              height: 28px;
+              line-height: 28px;
+              outline: transparent;
+              padding-bottom: 0;
+              padding-left: 8px;
+              padding-right: 8px;
+              padding-top: 0;
+              position: relative;
+              width: auto;
+            }
+            &::-moz-focus-inner {
+              border: 0;
+            }
+            .ms-Fabric--isFocusVisible &:focus:after {
+              border: 1px solid #ffffff;
+              bottom: 1px;
+              content: "";
+              left: 1px;
+              outline: 1px solid #666666;
+              position: absolute;
+              right: 1px;
+              top: 1px;
+              z-index: 1;
+            }
+            &:active $activeSection {
+              background-color: #0078d4;
+            }
+            @media screen and (-ms-high-contrast: active){&:active $activeSection {
+              background-color: Highlight;
+            }
+            &:hover $activeSection {
+              background-color: #0078d4;
+            }
+            @media screen and (-ms-high-contrast: active){&:hover $activeSection {
+              background-color: Highlight;
+            }
+            &:active $inactiveSection {
+              background-color: #c7e0f4;
+            }
+            @media screen and (-ms-high-contrast: active){&:active $inactiveSection {
+              border-color: Highlight;
+            }
+            &:hover $inactiveSection {
+              background-color: #c7e0f4;
+            }
+            @media screen and (-ms-high-contrast: active){&:hover $inactiveSection {
+              border-color: Highlight;
+            }
+            &:active $thumb {
+              border: 2px solid #0078d4;
+            }
+            @media screen and (-ms-high-contrast: active){&:active $thumb {
+              border-color: Highlight;
+            }
+            &:hover $thumb {
+              border: 2px solid #0078d4;
+            }
+            @media screen and (-ms-high-contrast: active){&:hover $thumb {
+              border-color: Highlight;
+            }
+            & $thumb {
+              background: #ffffff;
+              border-color: #666666;
+              border-radius: 10px;
+              border-style: solid;
+              border-width: 2px;
+              box-sizing: border-box;
+              display: block;
+              height: 16px;
+              position: absolute;
+              top: -6px;
+              transform: translateX(-50%);
+              transition: left 0.367s cubic-bezier(.1,.9,.2,1);
+              width: 16px;
+            }
+        data-is-focusable={true}
+        id="Slider0"
+        onKeyDown={[Function]}
+        onMouseDown={[Function]}
+        onTouchStart={[Function]}
+        role="slider"
+        tabIndex={0}
+      >
+        <div
+          className=
+              ms-Slider-line
+              {
+                display: flex;
+                position: relative;
+                width: 100%;
+              }
+              & $lineContainer {
+                border-radius: 4px;
+                box-sizing: border-box;
+                height: 4px;
+                width: 100%;
+              }
+        >
+          <span
+            className=
+                ms-Slider-thumb
+
+            style={
+              Object {
+                "left": "100%",
+              }
+            }
+          />
+          <span
+            className=
+                ms-Slider-active
+
+                {
+                  background: #666666;
+                  transition: width 0.367s cubic-bezier(.1,.9,.2,1);
+                }
+                @media screen and (-ms-high-contrast: active){& {
+                  background-color: WindowText;
+                }
+            style={
+              Object {
+                "width": "100%",
+              }
+            }
+          />
+          <span
+            className=
+                ms-Slider-inactive
+
+                {
+                  background: #c8c8c8;
+                  transition: width 0.367s cubic-bezier(.1,.9,.2,1);
+                }
+                @media screen and (-ms-high-contrast: active){& {
+                  border: 1px solid WindowText;
+                }
+            style={
+              Object {
+                "width": "0%",
+              }
+            }
+          />
+        </div>
+      </div>
+      <label
+        className=
+            ms-Label
+            ms-Slider-value
+            {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              box-shadow: none;
+              box-sizing: border-box;
+              color: #333333;
+              display: block;
+              flex-shrink: 1;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 14px;
+              font-weight: 400;
+              line-height: 1;
+              margin-bottom: 0;
+              margin-left: 8px;
+              margin-right: 8px;
+              margin-top: 0;
+              overflow-wrap: break-word;
+              padding-bottom: 5px;
+              padding-left: 0;
+              padding-right: 0;
+              padding-top: 5px;
+              white-space: nowrap;
+              width: 40px;
+              word-wrap: break-word;
+            }
+      >
+        100
+      </label>
+    </div>
+  </div>
+  <div
+    className=
+        ms-Stack
+        {
+          background: #71afe5;
+          box-sizing: border-box;
+          display: flex;
+          flex-direction: row;
+          flex-wrap: nowrap;
+          height: auto;
+          overflow: hidden;
+          padding-bottom: 10px;
+          padding-left: 10px;
+          padding-right: 10px;
+          padding-top: 10px;
+          width: 100%;
+        }
+        & > * {
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+        & > *:not(:first-child) {
+          margin-left: 5px;
+        }
+        & > *:not(.ms-StackItem) {
+          flex-shrink: 1;
+        }
+  >
+    <span
+      className=
+          ms-StackItem
+          {
+            -moz-osx-font-smoothing: grayscale;
+            -webkit-font-smoothing: antialiased;
+            align-items: center;
+            background: #0078d4;
+            color: #ffffff;
+            display: flex;
+            flex-grow: 1;
+            flex-shrink: 1;
+            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+            font-size: 14px;
+            font-weight: 400;
+            height: 50px;
+            justify-content: center;
+            overflow: hidden;
+            width: auto;
+          }
+    >
+      I shrink
+    </span>
+    <span
+      className=
+          ms-StackItem
+          {
+            -moz-osx-font-smoothing: grayscale;
+            -webkit-font-smoothing: antialiased;
+            align-items: center;
+            background: #0078d4;
+            color: #ffffff;
+            display: flex;
+            flex-grow: 1;
+            flex-shrink: 1;
+            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+            font-size: 14px;
+            font-weight: 400;
+            height: 50px;
+            justify-content: center;
+            overflow: hidden;
+            width: auto;
+          }
+    >
+      I shrink
+    </span>
+    <span
+      className=
+          ms-StackItem
+          {
+            -moz-osx-font-smoothing: grayscale;
+            -webkit-font-smoothing: antialiased;
+            align-items: center;
+            background: #0078d4;
+            color: #ffffff;
+            display: flex;
+            flex-grow: 1;
+            flex-shrink: 0;
+            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+            font-size: 14px;
+            font-weight: 400;
+            height: 50px;
+            justify-content: center;
+            overflow: hidden;
+            width: 500px;
+          }
+    >
+      I don't shrink
+    </span>
+    <span
+      className=
+          ms-StackItem
+          {
+            -moz-osx-font-smoothing: grayscale;
+            -webkit-font-smoothing: antialiased;
+            align-items: center;
+            background: #0078d4;
+            color: #ffffff;
+            display: flex;
+            flex-grow: 1;
+            flex-shrink: 1;
+            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+            font-size: 14px;
+            font-weight: 400;
+            height: 50px;
+            justify-content: center;
+            overflow: hidden;
+            width: auto;
+          }
+    >
+      I shrink
+    </span>
+  </div>
+</div>
+`;
diff --git a/packages/office-ui-fabric-react/src/components/__snapshots__/Stack.Horizontal.Spacing.Example.tsx.shot b/packages/office-ui-fabric-react/src/components/__snapshots__/Stack.Horizontal.Spacing.Example.tsx.shot
new file mode 100644
index 0000000000000..6eee09c2aad61
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/__snapshots__/Stack.Horizontal.Spacing.Example.tsx.shot
@@ -0,0 +1,589 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Component Examples renders Stack.Horizontal.Spacing.Example.tsx correctly 1`] = `
+<div
+  className=
+      ms-Stack
+      {
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        flex-wrap: nowrap;
+        height: auto;
+        width: auto;
+      }
+      & > * {
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      & > *:not(:first-child) {
+        margin-top: 10px;
+      }
+      & > *:not(.ms-StackItem) {
+        flex-shrink: 0;
+      }
+>
+  <div
+    className=
+        ms-Stack
+        {
+          box-sizing: border-box;
+          display: flex;
+          flex-direction: row;
+          flex-wrap: nowrap;
+          height: auto;
+          justify-content: space-between;
+          width: auto;
+        }
+        & > * {
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+        & > *:not(:first-child) {
+          margin-left: 0px;
+        }
+        & > *:not(.ms-StackItem) {
+          flex-shrink: 0;
+        }
+  >
+    <div
+      className=
+          ms-Stack
+          {
+            box-sizing: border-box;
+            display: flex;
+            flex-direction: column;
+            flex-wrap: nowrap;
+            height: auto;
+            width: auto;
+          }
+          & > * {
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+          & > *:not(:first-child) {
+            margin-top: 0px;
+          }
+          & > *:not(.ms-StackItem) {
+            flex-shrink: 0;
+          }
+    >
+      <span>
+        Numerical spacing
+      </span>
+      <div
+        className=
+            ms-Stack
+            {
+              background: #71afe5;
+              box-sizing: border-box;
+              display: flex;
+              flex-direction: row;
+              flex-wrap: nowrap;
+              height: auto;
+              padding-bottom: 10px;
+              padding-left: 10px;
+              padding-right: 10px;
+              padding-top: 10px;
+              width: 300px;
+            }
+            & > * {
+              align-items: center;
+              background: #0078d4;
+              color: #ffffff;
+              display: flex;
+              height: 50px;
+              justify-content: center;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+              width: 50px;
+            }
+            & > *:not(:first-child) {
+              margin-left: 10px;
+            }
+            & > *:not(.ms-StackItem) {
+              flex-shrink: 0;
+            }
+      >
+        <span>
+          1
+        </span>
+        <span>
+          2
+        </span>
+        <span>
+          3
+        </span>
+      </div>
+    </div>
+    <div
+      className=
+          ms-Stack
+          {
+            box-sizing: border-box;
+            display: flex;
+            flex-direction: column;
+            flex-wrap: nowrap;
+            height: auto;
+            width: auto;
+          }
+          & > * {
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+          & > *:not(:first-child) {
+            margin-top: 0px;
+          }
+          & > *:not(.ms-StackItem) {
+            flex-shrink: 0;
+          }
+    >
+      <span>
+        Custom spacing
+      </span>
+      <div
+        className=
+            ms-Stack
+            {
+              background: #71afe5;
+              box-sizing: border-box;
+              display: flex;
+              flex-direction: row;
+              flex-wrap: nowrap;
+              height: auto;
+              padding-bottom: 8px;
+              padding-left: 15%;
+              padding-right: 15%;
+              padding-top: 8px;
+              width: 300px;
+            }
+            & > * {
+              align-items: center;
+              background: #0078d4;
+              color: #ffffff;
+              display: flex;
+              height: 50px;
+              justify-content: center;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+              width: 50px;
+            }
+            & > *:not(:first-child) {
+              margin-left: 10%;
+            }
+            & > *:not(.ms-StackItem) {
+              flex-shrink: 0;
+            }
+      >
+        <span>
+          1
+        </span>
+        <span>
+          2
+        </span>
+        <span>
+          3
+        </span>
+      </div>
+    </div>
+  </div>
+  <div
+    className=
+        ms-Stack
+        {
+          box-sizing: border-box;
+          display: flex;
+          flex-direction: row;
+          flex-wrap: nowrap;
+          height: auto;
+          justify-content: space-between;
+          width: auto;
+        }
+        & > * {
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+        & > *:not(:first-child) {
+          margin-left: 0px;
+        }
+        & > *:not(.ms-StackItem) {
+          flex-shrink: 0;
+        }
+  >
+    <div
+      className=
+          ms-Stack
+          {
+            box-sizing: border-box;
+            display: flex;
+            flex-direction: column;
+            flex-wrap: nowrap;
+            height: auto;
+            width: auto;
+          }
+          & > * {
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+          & > *:not(:first-child) {
+            margin-top: 0px;
+          }
+          & > *:not(.ms-StackItem) {
+            flex-shrink: 0;
+          }
+    >
+      <span>
+        Themed spacing (extra small)
+      </span>
+      <div
+        className=
+            ms-Stack
+            {
+              background: #71afe5;
+              box-sizing: border-box;
+              display: flex;
+              flex-direction: row;
+              flex-wrap: nowrap;
+              height: auto;
+              padding-bottom: 4px;
+              padding-left: 4px;
+              padding-right: 4px;
+              padding-top: 4px;
+              width: 300px;
+            }
+            & > * {
+              align-items: center;
+              background: #0078d4;
+              color: #ffffff;
+              display: flex;
+              height: 50px;
+              justify-content: center;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+              width: 50px;
+            }
+            & > *:not(:first-child) {
+              margin-left: 4px;
+            }
+            & > *:not(.ms-StackItem) {
+              flex-shrink: 0;
+            }
+      >
+        <span>
+          1
+        </span>
+        <span>
+          2
+        </span>
+        <span>
+          3
+        </span>
+      </div>
+    </div>
+    <div
+      className=
+          ms-Stack
+          {
+            box-sizing: border-box;
+            display: flex;
+            flex-direction: column;
+            flex-wrap: nowrap;
+            height: auto;
+            width: auto;
+          }
+          & > * {
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+          & > *:not(:first-child) {
+            margin-top: 0px;
+          }
+          & > *:not(.ms-StackItem) {
+            flex-shrink: 0;
+          }
+    >
+      <span>
+        Themed spacing (small)
+      </span>
+      <div
+        className=
+            ms-Stack
+            {
+              background: #71afe5;
+              box-sizing: border-box;
+              display: flex;
+              flex-direction: row;
+              flex-wrap: nowrap;
+              height: auto;
+              padding-bottom: 8px;
+              padding-left: 8px;
+              padding-right: 8px;
+              padding-top: 8px;
+              width: 300px;
+            }
+            & > * {
+              align-items: center;
+              background: #0078d4;
+              color: #ffffff;
+              display: flex;
+              height: 50px;
+              justify-content: center;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+              width: 50px;
+            }
+            & > *:not(:first-child) {
+              margin-left: 8px;
+            }
+            & > *:not(.ms-StackItem) {
+              flex-shrink: 0;
+            }
+      >
+        <span>
+          1
+        </span>
+        <span>
+          2
+        </span>
+        <span>
+          3
+        </span>
+      </div>
+    </div>
+    <div
+      className=
+          ms-Stack
+          {
+            box-sizing: border-box;
+            display: flex;
+            flex-direction: column;
+            flex-wrap: nowrap;
+            height: auto;
+            width: auto;
+          }
+          & > * {
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+          & > *:not(:first-child) {
+            margin-top: 0px;
+          }
+          & > *:not(.ms-StackItem) {
+            flex-shrink: 0;
+          }
+    >
+      <span>
+        Themed spacing (medium)
+      </span>
+      <div
+        className=
+            ms-Stack
+            {
+              background: #71afe5;
+              box-sizing: border-box;
+              display: flex;
+              flex-direction: row;
+              flex-wrap: nowrap;
+              height: auto;
+              padding-bottom: 16px;
+              padding-left: 16px;
+              padding-right: 16px;
+              padding-top: 16px;
+              width: 300px;
+            }
+            & > * {
+              align-items: center;
+              background: #0078d4;
+              color: #ffffff;
+              display: flex;
+              height: 50px;
+              justify-content: center;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+              width: 50px;
+            }
+            & > *:not(:first-child) {
+              margin-left: 16px;
+            }
+            & > *:not(.ms-StackItem) {
+              flex-shrink: 0;
+            }
+      >
+        <span>
+          1
+        </span>
+        <span>
+          2
+        </span>
+        <span>
+          3
+        </span>
+      </div>
+    </div>
+  </div>
+  <div
+    className=
+        ms-Stack
+        {
+          box-sizing: border-box;
+          display: flex;
+          flex-direction: row;
+          flex-wrap: nowrap;
+          height: auto;
+          justify-content: space-between;
+          width: auto;
+        }
+        & > * {
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+        & > *:not(:first-child) {
+          margin-left: 0px;
+        }
+        & > *:not(.ms-StackItem) {
+          flex-shrink: 0;
+        }
+  >
+    <div
+      className=
+          ms-Stack
+          {
+            box-sizing: border-box;
+            display: flex;
+            flex-direction: column;
+            flex-wrap: nowrap;
+            height: auto;
+            width: auto;
+          }
+          & > * {
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+          & > *:not(:first-child) {
+            margin-top: 0px;
+          }
+          & > *:not(.ms-StackItem) {
+            flex-shrink: 0;
+          }
+    >
+      <span>
+        Themed spacing (large)
+      </span>
+      <div
+        className=
+            ms-Stack
+            {
+              background: #71afe5;
+              box-sizing: border-box;
+              display: flex;
+              flex-direction: row;
+              flex-wrap: nowrap;
+              height: auto;
+              padding-bottom: 20px;
+              padding-left: 20px;
+              padding-right: 20px;
+              padding-top: 20px;
+              width: 300px;
+            }
+            & > * {
+              align-items: center;
+              background: #0078d4;
+              color: #ffffff;
+              display: flex;
+              height: 50px;
+              justify-content: center;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+              width: 50px;
+            }
+            & > *:not(:first-child) {
+              margin-left: 20px;
+            }
+            & > *:not(.ms-StackItem) {
+              flex-shrink: 0;
+            }
+      >
+        <span>
+          1
+        </span>
+        <span>
+          2
+        </span>
+        <span>
+          3
+        </span>
+      </div>
+    </div>
+    <div
+      className=
+          ms-Stack
+          {
+            box-sizing: border-box;
+            display: flex;
+            flex-direction: column;
+            flex-wrap: nowrap;
+            height: auto;
+            width: auto;
+          }
+          & > * {
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+          & > *:not(:first-child) {
+            margin-top: 0px;
+          }
+          & > *:not(.ms-StackItem) {
+            flex-shrink: 0;
+          }
+    >
+      <span>
+        Themed spacing (extra large)
+      </span>
+      <div
+        className=
+            ms-Stack
+            {
+              background: #71afe5;
+              box-sizing: border-box;
+              display: flex;
+              flex-direction: row;
+              flex-wrap: nowrap;
+              height: auto;
+              padding-bottom: 32px;
+              padding-left: 32px;
+              padding-right: 32px;
+              padding-top: 32px;
+              width: 300px;
+            }
+            & > * {
+              align-items: center;
+              background: #0078d4;
+              color: #ffffff;
+              display: flex;
+              height: 50px;
+              justify-content: center;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+              width: 50px;
+            }
+            & > *:not(:first-child) {
+              margin-left: 32px;
+            }
+            & > *:not(.ms-StackItem) {
+              flex-shrink: 0;
+            }
+      >
+        <span>
+          1
+        </span>
+        <span>
+          2
+        </span>
+        <span>
+          3
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/packages/office-ui-fabric-react/src/components/__snapshots__/Stack.Horizontal.VerticalAlign.Example.tsx.shot b/packages/office-ui-fabric-react/src/components/__snapshots__/Stack.Horizontal.VerticalAlign.Example.tsx.shot
new file mode 100644
index 0000000000000..18e1b016623b1
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/__snapshots__/Stack.Horizontal.VerticalAlign.Example.tsx.shot
@@ -0,0 +1,159 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Component Examples renders Stack.Horizontal.VerticalAlign.Example.tsx correctly 1`] = `
+<div
+  className=
+      ms-Stack
+      {
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        flex-wrap: nowrap;
+        height: auto;
+        width: auto;
+      }
+      & > * {
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      & > *:not(:first-child) {
+        margin-top: 5px;
+      }
+      & > *:not(.ms-StackItem) {
+        flex-shrink: 0;
+      }
+>
+  <span>
+    Top-aligned
+  </span>
+  <div
+    className=
+        ms-Stack
+        {
+          align-items: flex-start;
+          background: #71afe5;
+          box-sizing: border-box;
+          display: flex;
+          flex-direction: row;
+          flex-wrap: nowrap;
+          height: 100px;
+          width: auto;
+        }
+        & > * {
+          align-items: center;
+          background: #0078d4;
+          color: #ffffff;
+          display: flex;
+          height: 50px;
+          justify-content: center;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          width: 50px;
+        }
+        & > *:not(:first-child) {
+          margin-left: 0px;
+        }
+        & > *:not(.ms-StackItem) {
+          flex-shrink: 0;
+        }
+  >
+    <span>
+      1
+    </span>
+    <span>
+      2
+    </span>
+    <span>
+      3
+    </span>
+  </div>
+  <span>
+    Vertically centered
+  </span>
+  <div
+    className=
+        ms-Stack
+        {
+          align-items: center;
+          background: #71afe5;
+          box-sizing: border-box;
+          display: flex;
+          flex-direction: row;
+          flex-wrap: nowrap;
+          height: 100px;
+          width: auto;
+        }
+        & > * {
+          align-items: center;
+          background: #0078d4;
+          color: #ffffff;
+          display: flex;
+          height: 50px;
+          justify-content: center;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          width: 50px;
+        }
+        & > *:not(:first-child) {
+          margin-left: 0px;
+        }
+        & > *:not(.ms-StackItem) {
+          flex-shrink: 0;
+        }
+  >
+    <span>
+      1
+    </span>
+    <span>
+      2
+    </span>
+    <span>
+      3
+    </span>
+  </div>
+  <span>
+    Bottom-aligned
+  </span>
+  <div
+    className=
+        ms-Stack
+        {
+          align-items: flex-end;
+          background: #71afe5;
+          box-sizing: border-box;
+          display: flex;
+          flex-direction: row;
+          flex-wrap: nowrap;
+          height: 100px;
+          width: auto;
+        }
+        & > * {
+          align-items: center;
+          background: #0078d4;
+          color: #ffffff;
+          display: flex;
+          height: 50px;
+          justify-content: center;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          width: 50px;
+        }
+        & > *:not(:first-child) {
+          margin-left: 0px;
+        }
+        & > *:not(.ms-StackItem) {
+          flex-shrink: 0;
+        }
+  >
+    <span>
+      1
+    </span>
+    <span>
+      2
+    </span>
+    <span>
+      3
+    </span>
+  </div>
+</div>
+`;
diff --git a/packages/office-ui-fabric-react/src/components/__snapshots__/Stack.Horizontal.Wrap.Example.tsx.shot b/packages/office-ui-fabric-react/src/components/__snapshots__/Stack.Horizontal.Wrap.Example.tsx.shot
new file mode 100644
index 0000000000000..64789d3334650
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/__snapshots__/Stack.Horizontal.Wrap.Example.tsx.shot
@@ -0,0 +1,354 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Component Examples renders Stack.Horizontal.Wrap.Example.tsx correctly 1`] = `
+<div
+  className=
+      ms-Stack
+      {
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        flex-wrap: nowrap;
+        height: auto;
+        width: auto;
+      }
+      & > * {
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      & > *:not(:first-child) {
+        margin-top: 10px;
+      }
+      & > *:not(.ms-StackItem) {
+        flex-shrink: 0;
+      }
+>
+  <div
+    className=
+        ms-Slider
+        ms-Slider-enabled
+        ms-Slider-row
+        {
+          -moz-osx-font-smoothing: grayscale;
+          -webkit-font-smoothing: antialiased;
+          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+          font-size: 14px;
+          font-weight: 400;
+          user-select: none;
+        }
+  >
+    <label
+      className=
+          ms-Label
+          {
+            -moz-osx-font-smoothing: grayscale;
+            -webkit-font-smoothing: antialiased;
+            box-shadow: none;
+            box-sizing: border-box;
+            color: #333333;
+            display: block;
+            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+            font-size: 14px;
+            font-weight: 400;
+            margin-bottom: 0px;
+            margin-left: 0px;
+            margin-right: 0px;
+            margin-top: 0px;
+            overflow-wrap: break-word;
+            padding-bottom: 0px;
+            padding-left: 0px;
+            padding-right: 0px;
+            padding-top: 0px;
+            word-wrap: break-word;
+          }
+      htmlFor="Slider0"
+    >
+      Change the stack width to see how child items wrap onto multiple rows:
+    </label>
+    <div
+      className=
+          ms-Slider-container
+          {
+            align-items: center;
+            display: flex;
+            flex-wrap: nowrap;
+          }
+    >
+      <div
+        aria-disabled={false}
+        aria-label="Change the stack width to see how child items wrap onto multiple rows:"
+        aria-valuemax={100}
+        aria-valuemin={1}
+        aria-valuenow={100}
+        className=
+            ms-Slider-slideBox
+            ms-Slider-showValue
+            ms-Slider-showTransitions
+            {
+              align-items: center;
+              background: transparent;
+              border: none;
+              display: flex;
+              flex-grow: 1;
+              height: 28px;
+              line-height: 28px;
+              outline: transparent;
+              padding-bottom: 0;
+              padding-left: 8px;
+              padding-right: 8px;
+              padding-top: 0;
+              position: relative;
+              width: auto;
+            }
+            &::-moz-focus-inner {
+              border: 0;
+            }
+            .ms-Fabric--isFocusVisible &:focus:after {
+              border: 1px solid #ffffff;
+              bottom: 1px;
+              content: "";
+              left: 1px;
+              outline: 1px solid #666666;
+              position: absolute;
+              right: 1px;
+              top: 1px;
+              z-index: 1;
+            }
+            &:active $activeSection {
+              background-color: #0078d4;
+            }
+            @media screen and (-ms-high-contrast: active){&:active $activeSection {
+              background-color: Highlight;
+            }
+            &:hover $activeSection {
+              background-color: #0078d4;
+            }
+            @media screen and (-ms-high-contrast: active){&:hover $activeSection {
+              background-color: Highlight;
+            }
+            &:active $inactiveSection {
+              background-color: #c7e0f4;
+            }
+            @media screen and (-ms-high-contrast: active){&:active $inactiveSection {
+              border-color: Highlight;
+            }
+            &:hover $inactiveSection {
+              background-color: #c7e0f4;
+            }
+            @media screen and (-ms-high-contrast: active){&:hover $inactiveSection {
+              border-color: Highlight;
+            }
+            &:active $thumb {
+              border: 2px solid #0078d4;
+            }
+            @media screen and (-ms-high-contrast: active){&:active $thumb {
+              border-color: Highlight;
+            }
+            &:hover $thumb {
+              border: 2px solid #0078d4;
+            }
+            @media screen and (-ms-high-contrast: active){&:hover $thumb {
+              border-color: Highlight;
+            }
+            & $thumb {
+              background: #ffffff;
+              border-color: #666666;
+              border-radius: 10px;
+              border-style: solid;
+              border-width: 2px;
+              box-sizing: border-box;
+              display: block;
+              height: 16px;
+              position: absolute;
+              top: -6px;
+              transform: translateX(-50%);
+              transition: left 0.367s cubic-bezier(.1,.9,.2,1);
+              width: 16px;
+            }
+        data-is-focusable={true}
+        id="Slider0"
+        onKeyDown={[Function]}
+        onMouseDown={[Function]}
+        onTouchStart={[Function]}
+        role="slider"
+        tabIndex={0}
+      >
+        <div
+          className=
+              ms-Slider-line
+              {
+                display: flex;
+                position: relative;
+                width: 100%;
+              }
+              & $lineContainer {
+                border-radius: 4px;
+                box-sizing: border-box;
+                height: 4px;
+                width: 100%;
+              }
+        >
+          <span
+            className=
+                ms-Slider-thumb
+
+            style={
+              Object {
+                "left": "100%",
+              }
+            }
+          />
+          <span
+            className=
+                ms-Slider-active
+
+                {
+                  background: #666666;
+                  transition: width 0.367s cubic-bezier(.1,.9,.2,1);
+                }
+                @media screen and (-ms-high-contrast: active){& {
+                  background-color: WindowText;
+                }
+            style={
+              Object {
+                "width": "100%",
+              }
+            }
+          />
+          <span
+            className=
+                ms-Slider-inactive
+
+                {
+                  background: #c8c8c8;
+                  transition: width 0.367s cubic-bezier(.1,.9,.2,1);
+                }
+                @media screen and (-ms-high-contrast: active){& {
+                  border: 1px solid WindowText;
+                }
+            style={
+              Object {
+                "width": "0%",
+              }
+            }
+          />
+        </div>
+      </div>
+      <label
+        className=
+            ms-Label
+            ms-Slider-value
+            {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              box-shadow: none;
+              box-sizing: border-box;
+              color: #333333;
+              display: block;
+              flex-shrink: 1;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 14px;
+              font-weight: 400;
+              line-height: 1;
+              margin-bottom: 0;
+              margin-left: 8px;
+              margin-right: 8px;
+              margin-top: 0;
+              overflow-wrap: break-word;
+              padding-bottom: 5px;
+              padding-left: 0;
+              padding-right: 0;
+              padding-top: 5px;
+              white-space: nowrap;
+              width: 40px;
+              word-wrap: break-word;
+            }
+      >
+        100
+      </label>
+    </div>
+  </div>
+  <div
+    className=
+        ms-Stack
+        {
+          background: #71afe5;
+          display: inline-block;
+          height: auto;
+          overflow: visible;
+          width: 100%;
+        }
+        & span {
+          align-items: center;
+          background: #0078d4;
+          color: #ffffff;
+          display: flex;
+          height: 50px;
+          justify-content: center;
+          width: 50px;
+        }
+  >
+    <div
+      className=
+          ms-Stack-inner
+          {
+            box-sizing: border-box;
+            display: flex;
+            flex-direction: row;
+            flex-wrap: wrap;
+            height: auto;
+            margin-bottom: -15px;
+            margin-left: -15px;
+            margin-right: -15px;
+            margin-top: -15px;
+            max-width: 100vw;
+            overflow: visible;
+            width: auto;
+          }
+          & > * {
+            margin-bottom: 15px;
+            margin-left: 15px;
+            margin-right: 15px;
+            margin-top: 15px;
+            max-width: calc(100% - 30px);
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+          & > *:not(.ms-StackItem) {
+            flex-shrink: 0;
+          }
+    >
+      <span>
+        1
+      </span>
+      <span>
+        2
+      </span>
+      <span>
+        3
+      </span>
+      <span>
+        4
+      </span>
+      <span>
+        5
+      </span>
+      <span>
+        6
+      </span>
+      <span>
+        7
+      </span>
+      <span>
+        8
+      </span>
+      <span>
+        9
+      </span>
+      <span>
+        10
+      </span>
+    </div>
+  </div>
+</div>
+`;
diff --git a/packages/office-ui-fabric-react/src/components/__snapshots__/Stack.Horizontal.WrapAdvanced.Example.tsx.shot b/packages/office-ui-fabric-react/src/components/__snapshots__/Stack.Horizontal.WrapAdvanced.Example.tsx.shot
new file mode 100644
index 0000000000000..14b8c2de65b83
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/__snapshots__/Stack.Horizontal.WrapAdvanced.Example.tsx.shot
@@ -0,0 +1,1366 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Component Examples renders Stack.Horizontal.WrapAdvanced.Example.tsx correctly 1`] = `
+<div
+  className=
+      ms-Stack
+      {
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        flex-wrap: nowrap;
+        height: auto;
+        width: auto;
+      }
+      & > * {
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      & > *:not(:first-child) {
+        margin-top: 10px;
+      }
+      & > *:not(.ms-StackItem) {
+        flex-shrink: 0;
+      }
+>
+  <div
+    className=
+        ms-Stack
+        {
+          box-sizing: border-box;
+          display: flex;
+          flex-direction: row;
+          flex-wrap: nowrap;
+          height: auto;
+          width: auto;
+        }
+        & > * {
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+        & > *:not(:first-child) {
+          margin-left: 0px;
+        }
+        & > *:not(.ms-StackItem) {
+          flex-shrink: 0;
+        }
+  >
+    <span
+      className=
+          ms-StackItem
+          {
+            -moz-osx-font-smoothing: grayscale;
+            -webkit-font-smoothing: antialiased;
+            flex-grow: 1;
+            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+            font-size: 14px;
+            font-weight: 400;
+            height: auto;
+            width: auto;
+          }
+    >
+      <div
+        className=
+            ms-Slider
+            ms-Slider-enabled
+            ms-Slider-row
+            {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 14px;
+              font-weight: 400;
+              user-select: none;
+            }
+      >
+        <label
+          className=
+              ms-Label
+              {
+                -moz-osx-font-smoothing: grayscale;
+                -webkit-font-smoothing: antialiased;
+                box-shadow: none;
+                box-sizing: border-box;
+                color: #333333;
+                display: block;
+                font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                font-size: 14px;
+                font-weight: 400;
+                margin-bottom: 0px;
+                margin-left: 0px;
+                margin-right: 0px;
+                margin-top: 0px;
+                overflow-wrap: break-word;
+                padding-bottom: 0px;
+                padding-left: 0px;
+                padding-right: 0px;
+                padding-top: 0px;
+                word-wrap: break-word;
+              }
+          htmlFor="Slider0"
+        >
+          Stack width:
+        </label>
+        <div
+          className=
+              ms-Slider-container
+              {
+                align-items: center;
+                display: flex;
+                flex-wrap: nowrap;
+              }
+        >
+          <div
+            aria-disabled={false}
+            aria-label="Stack width:"
+            aria-valuemax={100}
+            aria-valuemin={1}
+            aria-valuenow={100}
+            className=
+                ms-Slider-slideBox
+                ms-Slider-showValue
+                ms-Slider-showTransitions
+                {
+                  align-items: center;
+                  background: transparent;
+                  border: none;
+                  display: flex;
+                  flex-grow: 1;
+                  height: 28px;
+                  line-height: 28px;
+                  outline: transparent;
+                  padding-bottom: 0;
+                  padding-left: 8px;
+                  padding-right: 8px;
+                  padding-top: 0;
+                  position: relative;
+                  width: auto;
+                }
+                &::-moz-focus-inner {
+                  border: 0;
+                }
+                .ms-Fabric--isFocusVisible &:focus:after {
+                  border: 1px solid #ffffff;
+                  bottom: 1px;
+                  content: "";
+                  left: 1px;
+                  outline: 1px solid #666666;
+                  position: absolute;
+                  right: 1px;
+                  top: 1px;
+                  z-index: 1;
+                }
+                &:active $activeSection {
+                  background-color: #0078d4;
+                }
+                @media screen and (-ms-high-contrast: active){&:active $activeSection {
+                  background-color: Highlight;
+                }
+                &:hover $activeSection {
+                  background-color: #0078d4;
+                }
+                @media screen and (-ms-high-contrast: active){&:hover $activeSection {
+                  background-color: Highlight;
+                }
+                &:active $inactiveSection {
+                  background-color: #c7e0f4;
+                }
+                @media screen and (-ms-high-contrast: active){&:active $inactiveSection {
+                  border-color: Highlight;
+                }
+                &:hover $inactiveSection {
+                  background-color: #c7e0f4;
+                }
+                @media screen and (-ms-high-contrast: active){&:hover $inactiveSection {
+                  border-color: Highlight;
+                }
+                &:active $thumb {
+                  border: 2px solid #0078d4;
+                }
+                @media screen and (-ms-high-contrast: active){&:active $thumb {
+                  border-color: Highlight;
+                }
+                &:hover $thumb {
+                  border: 2px solid #0078d4;
+                }
+                @media screen and (-ms-high-contrast: active){&:hover $thumb {
+                  border-color: Highlight;
+                }
+                & $thumb {
+                  background: #ffffff;
+                  border-color: #666666;
+                  border-radius: 10px;
+                  border-style: solid;
+                  border-width: 2px;
+                  box-sizing: border-box;
+                  display: block;
+                  height: 16px;
+                  position: absolute;
+                  top: -6px;
+                  transform: translateX(-50%);
+                  transition: left 0.367s cubic-bezier(.1,.9,.2,1);
+                  width: 16px;
+                }
+            data-is-focusable={true}
+            id="Slider0"
+            onKeyDown={[Function]}
+            onMouseDown={[Function]}
+            onTouchStart={[Function]}
+            role="slider"
+            tabIndex={0}
+          >
+            <div
+              className=
+                  ms-Slider-line
+                  {
+                    display: flex;
+                    position: relative;
+                    width: 100%;
+                  }
+                  & $lineContainer {
+                    border-radius: 4px;
+                    box-sizing: border-box;
+                    height: 4px;
+                    width: 100%;
+                  }
+            >
+              <span
+                className=
+                    ms-Slider-thumb
+
+                style={
+                  Object {
+                    "left": "100%",
+                  }
+                }
+              />
+              <span
+                className=
+                    ms-Slider-active
+
+                    {
+                      background: #666666;
+                      transition: width 0.367s cubic-bezier(.1,.9,.2,1);
+                    }
+                    @media screen and (-ms-high-contrast: active){& {
+                      background-color: WindowText;
+                    }
+                style={
+                  Object {
+                    "width": "100%",
+                  }
+                }
+              />
+              <span
+                className=
+                    ms-Slider-inactive
+
+                    {
+                      background: #c8c8c8;
+                      transition: width 0.367s cubic-bezier(.1,.9,.2,1);
+                    }
+                    @media screen and (-ms-high-contrast: active){& {
+                      border: 1px solid WindowText;
+                    }
+                style={
+                  Object {
+                    "width": "0%",
+                  }
+                }
+              />
+            </div>
+          </div>
+          <label
+            className=
+                ms-Label
+                ms-Slider-value
+                {
+                  -moz-osx-font-smoothing: grayscale;
+                  -webkit-font-smoothing: antialiased;
+                  box-shadow: none;
+                  box-sizing: border-box;
+                  color: #333333;
+                  display: block;
+                  flex-shrink: 1;
+                  font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                  font-size: 14px;
+                  font-weight: 400;
+                  line-height: 1;
+                  margin-bottom: 0;
+                  margin-left: 8px;
+                  margin-right: 8px;
+                  margin-top: 0;
+                  overflow-wrap: break-word;
+                  padding-bottom: 5px;
+                  padding-left: 0;
+                  padding-right: 0;
+                  padding-top: 5px;
+                  white-space: nowrap;
+                  width: 40px;
+                  word-wrap: break-word;
+                }
+          >
+            100
+          </label>
+        </div>
+      </div>
+    </span>
+    <span
+      className=
+          ms-StackItem
+          {
+            -moz-osx-font-smoothing: grayscale;
+            -webkit-font-smoothing: antialiased;
+            flex-grow: 1;
+            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+            font-size: 14px;
+            font-weight: 400;
+            height: auto;
+            width: auto;
+          }
+    >
+      <div
+        className=
+            ms-Slider
+            ms-Slider-enabled
+            ms-Slider-row
+            {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 14px;
+              font-weight: 400;
+              user-select: none;
+            }
+      >
+        <label
+          className=
+              ms-Label
+              {
+                -moz-osx-font-smoothing: grayscale;
+                -webkit-font-smoothing: antialiased;
+                box-shadow: none;
+                box-sizing: border-box;
+                color: #333333;
+                display: block;
+                font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                font-size: 14px;
+                font-weight: 400;
+                margin-bottom: 0px;
+                margin-left: 0px;
+                margin-right: 0px;
+                margin-top: 0px;
+                overflow-wrap: break-word;
+                padding-bottom: 0px;
+                padding-left: 0px;
+                padding-right: 0px;
+                padding-top: 0px;
+                word-wrap: break-word;
+              }
+          htmlFor="Slider1"
+        >
+          Container height:
+        </label>
+        <div
+          className=
+              ms-Slider-container
+              {
+                align-items: center;
+                display: flex;
+                flex-wrap: nowrap;
+              }
+        >
+          <div
+            aria-disabled={false}
+            aria-label="Container height:"
+            aria-valuemax={200}
+            aria-valuemin={1}
+            aria-valuenow={150}
+            className=
+                ms-Slider-slideBox
+                ms-Slider-showValue
+                ms-Slider-showTransitions
+                {
+                  align-items: center;
+                  background: transparent;
+                  border: none;
+                  display: flex;
+                  flex-grow: 1;
+                  height: 28px;
+                  line-height: 28px;
+                  outline: transparent;
+                  padding-bottom: 0;
+                  padding-left: 8px;
+                  padding-right: 8px;
+                  padding-top: 0;
+                  position: relative;
+                  width: auto;
+                }
+                &::-moz-focus-inner {
+                  border: 0;
+                }
+                .ms-Fabric--isFocusVisible &:focus:after {
+                  border: 1px solid #ffffff;
+                  bottom: 1px;
+                  content: "";
+                  left: 1px;
+                  outline: 1px solid #666666;
+                  position: absolute;
+                  right: 1px;
+                  top: 1px;
+                  z-index: 1;
+                }
+                &:active $activeSection {
+                  background-color: #0078d4;
+                }
+                @media screen and (-ms-high-contrast: active){&:active $activeSection {
+                  background-color: Highlight;
+                }
+                &:hover $activeSection {
+                  background-color: #0078d4;
+                }
+                @media screen and (-ms-high-contrast: active){&:hover $activeSection {
+                  background-color: Highlight;
+                }
+                &:active $inactiveSection {
+                  background-color: #c7e0f4;
+                }
+                @media screen and (-ms-high-contrast: active){&:active $inactiveSection {
+                  border-color: Highlight;
+                }
+                &:hover $inactiveSection {
+                  background-color: #c7e0f4;
+                }
+                @media screen and (-ms-high-contrast: active){&:hover $inactiveSection {
+                  border-color: Highlight;
+                }
+                &:active $thumb {
+                  border: 2px solid #0078d4;
+                }
+                @media screen and (-ms-high-contrast: active){&:active $thumb {
+                  border-color: Highlight;
+                }
+                &:hover $thumb {
+                  border: 2px solid #0078d4;
+                }
+                @media screen and (-ms-high-contrast: active){&:hover $thumb {
+                  border-color: Highlight;
+                }
+                & $thumb {
+                  background: #ffffff;
+                  border-color: #666666;
+                  border-radius: 10px;
+                  border-style: solid;
+                  border-width: 2px;
+                  box-sizing: border-box;
+                  display: block;
+                  height: 16px;
+                  position: absolute;
+                  top: -6px;
+                  transform: translateX(-50%);
+                  transition: left 0.367s cubic-bezier(.1,.9,.2,1);
+                  width: 16px;
+                }
+            data-is-focusable={true}
+            id="Slider1"
+            onKeyDown={[Function]}
+            onMouseDown={[Function]}
+            onTouchStart={[Function]}
+            role="slider"
+            tabIndex={0}
+          >
+            <div
+              className=
+                  ms-Slider-line
+                  {
+                    display: flex;
+                    position: relative;
+                    width: 100%;
+                  }
+                  & $lineContainer {
+                    border-radius: 4px;
+                    box-sizing: border-box;
+                    height: 4px;
+                    width: 100%;
+                  }
+            >
+              <span
+                className=
+                    ms-Slider-thumb
+
+                style={
+                  Object {
+                    "left": "74.87437185929649%",
+                  }
+                }
+              />
+              <span
+                className=
+                    ms-Slider-active
+
+                    {
+                      background: #666666;
+                      transition: width 0.367s cubic-bezier(.1,.9,.2,1);
+                    }
+                    @media screen and (-ms-high-contrast: active){& {
+                      background-color: WindowText;
+                    }
+                style={
+                  Object {
+                    "width": "74.87437185929649%",
+                  }
+                }
+              />
+              <span
+                className=
+                    ms-Slider-inactive
+
+                    {
+                      background: #c8c8c8;
+                      transition: width 0.367s cubic-bezier(.1,.9,.2,1);
+                    }
+                    @media screen and (-ms-high-contrast: active){& {
+                      border: 1px solid WindowText;
+                    }
+                style={
+                  Object {
+                    "width": "25.125628140703512%",
+                  }
+                }
+              />
+            </div>
+          </div>
+          <label
+            className=
+                ms-Label
+                ms-Slider-value
+                {
+                  -moz-osx-font-smoothing: grayscale;
+                  -webkit-font-smoothing: antialiased;
+                  box-shadow: none;
+                  box-sizing: border-box;
+                  color: #333333;
+                  display: block;
+                  flex-shrink: 1;
+                  font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                  font-size: 14px;
+                  font-weight: 400;
+                  line-height: 1;
+                  margin-bottom: 0;
+                  margin-left: 8px;
+                  margin-right: 8px;
+                  margin-top: 0;
+                  overflow-wrap: break-word;
+                  padding-bottom: 5px;
+                  padding-left: 0;
+                  padding-right: 0;
+                  padding-top: 5px;
+                  white-space: nowrap;
+                  width: 40px;
+                  word-wrap: break-word;
+                }
+          >
+            150
+          </label>
+        </div>
+      </div>
+    </span>
+  </div>
+  <div
+    className=
+        ms-Stack
+        {
+          box-sizing: border-box;
+          display: flex;
+          flex-direction: row;
+          flex-wrap: nowrap;
+          height: auto;
+          width: auto;
+        }
+        & > * {
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+        & > *:not(:first-child) {
+          margin-left: 20px;
+        }
+        & > *:not(.ms-StackItem) {
+          flex-shrink: 0;
+        }
+  >
+    <span
+      className=
+          ms-StackItem
+          {
+            -moz-osx-font-smoothing: grayscale;
+            -webkit-font-smoothing: antialiased;
+            flex-grow: 1;
+            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+            font-size: 14px;
+            font-weight: 400;
+            height: auto;
+            width: auto;
+          }
+    >
+      <div
+        className=
+            ms-Dropdown-container
+
+      >
+        <label
+          className=
+              ms-Label
+              ms-Dropdown-label
+              {
+                -moz-osx-font-smoothing: grayscale;
+                -webkit-font-smoothing: antialiased;
+                box-shadow: none;
+                box-sizing: border-box;
+                color: #333333;
+                display: inline-block;
+                font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                font-size: 14px;
+                font-weight: 400;
+                margin-bottom: 0px;
+                margin-left: 0px;
+                margin-right: 0px;
+                margin-top: 0px;
+                overflow-wrap: break-word;
+                padding-bottom: 5px;
+                padding-left: 0;
+                padding-right: 0;
+                padding-top: 5px;
+                word-wrap: break-word;
+              }
+          htmlFor="Dropdown2"
+          id="Dropdown2-label"
+        >
+          Horizontal alignment:
+        </label>
+        <div
+          aria-activedescendant="Dropdown2-option"
+          aria-describedby="Dropdown2-option"
+          aria-expanded="false"
+          aria-labelledby="Dropdown2-label"
+          className=
+              ms-Dropdown
+              {
+                -moz-osx-font-smoothing: grayscale;
+                -webkit-font-smoothing: antialiased;
+                box-shadow: none;
+                box-sizing: border-box;
+                color: #333333;
+                font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                font-size: 14px;
+                font-weight: 400;
+                margin-bottom: 0px;
+                margin-left: 0px;
+                margin-right: 0px;
+                margin-top: 0px;
+                outline: 0px;
+                padding-bottom: 0px;
+                padding-left: 0px;
+                padding-right: 0px;
+                padding-top: 0px;
+                position: relative;
+                user-select: none;
+              }
+              &:hover .ms-Dropdown-title {
+                border-color: #212121;
+                color: #212121;
+              }
+              @media screen and (-ms-high-contrast: active){&:hover .ms-Dropdown-title {
+                border-color: Highlight;
+              }
+              &:focus .ms-Dropdown-title {
+                border-color: #0078d4;
+                color: #212121;
+              }
+              @media screen and (-ms-high-contrast: active){&:focus .ms-Dropdown-title {
+                background-color: Highlight;
+                border-color: Highlight;
+                color: HighlightText;
+              }
+              @media screen and (-ms-high-contrast: active){&:focus .ms-Dropdown-title:hover {
+                color: HighlightText;
+              }
+              @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: black-on-white){&:focus .ms-Dropdown-title {
+                -ms-high-contrast-adjust: none;
+              }
+              &:active .ms-Dropdown-title {
+                border-color: #005a9e;
+                color: #212121;
+              }
+              @media screen and (-ms-high-contrast: active){&:active .ms-Dropdown-title {
+                border-color: Highlight;
+              }
+              &:hover .ms-Dropdown-caretDown {
+                color: #212121;
+              }
+              &:focus .ms-Dropdown-caretDown {
+                color: #212121;
+              }
+              @media screen and (-ms-high-contrast: active){&:focus .ms-Dropdown-caretDown {
+                color: HighlightText;
+              }
+              @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: black-on-white){&:focus .ms-Dropdown-caretDown {
+                -ms-high-contrast-adjust: none;
+              }
+              &:active .ms-Dropdown-caretDown {
+                color: #212121;
+              }
+              &:hover .ms-Dropdown-titleIsPlaceHolder {
+                color: #666666;
+              }
+              &:focus .ms-Dropdown-titleIsPlaceHolder {
+                color: #666666;
+              }
+              &:active .ms-Dropdown-titleIsPlaceHolder {
+                color: #666666;
+              }
+              &:hover .ms-Dropdown-title--hasError {
+                border-color: #a80000;
+              }
+              &:active .ms-Dropdown-title--hasError {
+                border-color: #a80000;
+              }
+              &:focus .ms-Dropdown-title--hasError {
+                border-color: #a80000;
+              }
+          data-is-focusable={true}
+          id="Dropdown2"
+          onBlur={[Function]}
+          onChange={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onKeyDown={[Function]}
+          onKeyUp={[Function]}
+          placeholder="Select Horizontal Alignment"
+          role="listbox"
+          tabIndex={0}
+        >
+          <span
+            aria-atomic={true}
+            aria-label="Left"
+            aria-live="off"
+            aria-posinset={1}
+            aria-selected={true}
+            aria-setsize={6}
+            className=
+                ms-Dropdown-title
+                {
+                  background-color: #ffffff;
+                  border-color: #a6a6a6;
+                  border-style: solid;
+                  border-width: 1px;
+                  box-shadow: none;
+                  box-sizing: border-box;
+                  cursor: pointer;
+                  display: block;
+                  height: 32px;
+                  line-height: 30px;
+                  margin-bottom: 0px;
+                  margin-left: 0px;
+                  margin-right: 0px;
+                  margin-top: 0px;
+                  overflow: hidden;
+                  padding-bottom: 0;
+                  padding-left: 12px;
+                  padding-right: 32px;
+                  padding-top: 0;
+                  position: relative;
+                  text-overflow: ellipsis;
+                  white-space: nowrap;
+                }
+            id="Dropdown2-option"
+            role="option"
+          >
+            <span>
+              Left
+            </span>
+          </span>
+          <span
+            className=
+                ms-Dropdown-caretDownWrapper
+                {
+                  height: 32px;
+                  line-height: 30px;
+                  position: absolute;
+                  right: 12px;
+                  top: 1px;
+                }
+          >
+            <i
+              aria-hidden={true}
+              className=
+                  ms-Dropdown-caretDown
+                  {
+                    -moz-osx-font-smoothing: grayscale;
+                    -webkit-font-smoothing: antialiased;
+                    color: #666666;
+                    display: inline-block;
+                    font-family: "FabricMDL2Icons";
+                    font-size: 12px;
+                    font-style: normal;
+                    font-weight: normal;
+                    pointer-events: none;
+                    speak: none;
+                  }
+              data-icon-name="ChevronDown"
+              role="presentation"
+            >
+              
+            </i>
+          </span>
+        </div>
+      </div>
+    </span>
+    <span
+      className=
+          ms-StackItem
+          {
+            -moz-osx-font-smoothing: grayscale;
+            -webkit-font-smoothing: antialiased;
+            flex-grow: 1;
+            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+            font-size: 14px;
+            font-weight: 400;
+            height: auto;
+            width: auto;
+          }
+    >
+      <div
+        className=
+            ms-Dropdown-container
+
+      >
+        <label
+          className=
+              ms-Label
+              ms-Dropdown-label
+              {
+                -moz-osx-font-smoothing: grayscale;
+                -webkit-font-smoothing: antialiased;
+                box-shadow: none;
+                box-sizing: border-box;
+                color: #333333;
+                display: inline-block;
+                font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                font-size: 14px;
+                font-weight: 400;
+                margin-bottom: 0px;
+                margin-left: 0px;
+                margin-right: 0px;
+                margin-top: 0px;
+                overflow-wrap: break-word;
+                padding-bottom: 5px;
+                padding-left: 0;
+                padding-right: 0;
+                padding-top: 5px;
+                word-wrap: break-word;
+              }
+          htmlFor="Dropdown3"
+          id="Dropdown3-label"
+        >
+          Vertical alignment:
+        </label>
+        <div
+          aria-activedescendant="Dropdown3-option"
+          aria-describedby="Dropdown3-option"
+          aria-expanded="false"
+          aria-labelledby="Dropdown3-label"
+          className=
+              ms-Dropdown
+              {
+                -moz-osx-font-smoothing: grayscale;
+                -webkit-font-smoothing: antialiased;
+                box-shadow: none;
+                box-sizing: border-box;
+                color: #333333;
+                font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                font-size: 14px;
+                font-weight: 400;
+                margin-bottom: 0px;
+                margin-left: 0px;
+                margin-right: 0px;
+                margin-top: 0px;
+                outline: 0px;
+                padding-bottom: 0px;
+                padding-left: 0px;
+                padding-right: 0px;
+                padding-top: 0px;
+                position: relative;
+                user-select: none;
+              }
+              &:hover .ms-Dropdown-title {
+                border-color: #212121;
+                color: #212121;
+              }
+              @media screen and (-ms-high-contrast: active){&:hover .ms-Dropdown-title {
+                border-color: Highlight;
+              }
+              &:focus .ms-Dropdown-title {
+                border-color: #0078d4;
+                color: #212121;
+              }
+              @media screen and (-ms-high-contrast: active){&:focus .ms-Dropdown-title {
+                background-color: Highlight;
+                border-color: Highlight;
+                color: HighlightText;
+              }
+              @media screen and (-ms-high-contrast: active){&:focus .ms-Dropdown-title:hover {
+                color: HighlightText;
+              }
+              @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: black-on-white){&:focus .ms-Dropdown-title {
+                -ms-high-contrast-adjust: none;
+              }
+              &:active .ms-Dropdown-title {
+                border-color: #005a9e;
+                color: #212121;
+              }
+              @media screen and (-ms-high-contrast: active){&:active .ms-Dropdown-title {
+                border-color: Highlight;
+              }
+              &:hover .ms-Dropdown-caretDown {
+                color: #212121;
+              }
+              &:focus .ms-Dropdown-caretDown {
+                color: #212121;
+              }
+              @media screen and (-ms-high-contrast: active){&:focus .ms-Dropdown-caretDown {
+                color: HighlightText;
+              }
+              @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: black-on-white){&:focus .ms-Dropdown-caretDown {
+                -ms-high-contrast-adjust: none;
+              }
+              &:active .ms-Dropdown-caretDown {
+                color: #212121;
+              }
+              &:hover .ms-Dropdown-titleIsPlaceHolder {
+                color: #666666;
+              }
+              &:focus .ms-Dropdown-titleIsPlaceHolder {
+                color: #666666;
+              }
+              &:active .ms-Dropdown-titleIsPlaceHolder {
+                color: #666666;
+              }
+              &:hover .ms-Dropdown-title--hasError {
+                border-color: #a80000;
+              }
+              &:active .ms-Dropdown-title--hasError {
+                border-color: #a80000;
+              }
+              &:focus .ms-Dropdown-title--hasError {
+                border-color: #a80000;
+              }
+          data-is-focusable={true}
+          id="Dropdown3"
+          onBlur={[Function]}
+          onChange={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onKeyDown={[Function]}
+          onKeyUp={[Function]}
+          placeholder="Select Vertical Alignment"
+          role="listbox"
+          tabIndex={0}
+        >
+          <span
+            aria-atomic={true}
+            aria-label="Top"
+            aria-live="off"
+            aria-posinset={1}
+            aria-selected={true}
+            aria-setsize={3}
+            className=
+                ms-Dropdown-title
+                {
+                  background-color: #ffffff;
+                  border-color: #a6a6a6;
+                  border-style: solid;
+                  border-width: 1px;
+                  box-shadow: none;
+                  box-sizing: border-box;
+                  cursor: pointer;
+                  display: block;
+                  height: 32px;
+                  line-height: 30px;
+                  margin-bottom: 0px;
+                  margin-left: 0px;
+                  margin-right: 0px;
+                  margin-top: 0px;
+                  overflow: hidden;
+                  padding-bottom: 0;
+                  padding-left: 12px;
+                  padding-right: 32px;
+                  padding-top: 0;
+                  position: relative;
+                  text-overflow: ellipsis;
+                  white-space: nowrap;
+                }
+            id="Dropdown3-option"
+            role="option"
+          >
+            <span>
+              Top
+            </span>
+          </span>
+          <span
+            className=
+                ms-Dropdown-caretDownWrapper
+                {
+                  height: 32px;
+                  line-height: 30px;
+                  position: absolute;
+                  right: 12px;
+                  top: 1px;
+                }
+          >
+            <i
+              aria-hidden={true}
+              className=
+                  ms-Dropdown-caretDown
+                  {
+                    -moz-osx-font-smoothing: grayscale;
+                    -webkit-font-smoothing: antialiased;
+                    color: #666666;
+                    display: inline-block;
+                    font-family: "FabricMDL2Icons";
+                    font-size: 12px;
+                    font-style: normal;
+                    font-weight: normal;
+                    pointer-events: none;
+                    speak: none;
+                  }
+              data-icon-name="ChevronDown"
+              role="presentation"
+            >
+              
+            </i>
+          </span>
+        </div>
+      </div>
+    </span>
+    <span
+      className=
+          ms-StackItem
+          {
+            -moz-osx-font-smoothing: grayscale;
+            -webkit-font-smoothing: antialiased;
+            flex-grow: 1;
+            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+            font-size: 14px;
+            font-weight: 400;
+            height: auto;
+            width: auto;
+          }
+    >
+      <div
+        className=
+            ms-Dropdown-container
+
+      >
+        <label
+          className=
+              ms-Label
+              ms-Dropdown-label
+              {
+                -moz-osx-font-smoothing: grayscale;
+                -webkit-font-smoothing: antialiased;
+                box-shadow: none;
+                box-sizing: border-box;
+                color: #333333;
+                display: inline-block;
+                font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                font-size: 14px;
+                font-weight: 400;
+                margin-bottom: 0px;
+                margin-left: 0px;
+                margin-right: 0px;
+                margin-top: 0px;
+                overflow-wrap: break-word;
+                padding-bottom: 5px;
+                padding-left: 0;
+                padding-right: 0;
+                padding-top: 5px;
+                word-wrap: break-word;
+              }
+          htmlFor="Dropdown4"
+          id="Dropdown4-label"
+        >
+          Overflow:
+        </label>
+        <div
+          aria-activedescendant="Dropdown4-option"
+          aria-describedby="Dropdown4-option"
+          aria-expanded="false"
+          aria-labelledby="Dropdown4-label"
+          className=
+              ms-Dropdown
+              {
+                -moz-osx-font-smoothing: grayscale;
+                -webkit-font-smoothing: antialiased;
+                box-shadow: none;
+                box-sizing: border-box;
+                color: #333333;
+                font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                font-size: 14px;
+                font-weight: 400;
+                margin-bottom: 0px;
+                margin-left: 0px;
+                margin-right: 0px;
+                margin-top: 0px;
+                outline: 0px;
+                padding-bottom: 0px;
+                padding-left: 0px;
+                padding-right: 0px;
+                padding-top: 0px;
+                position: relative;
+                user-select: none;
+              }
+              &:hover .ms-Dropdown-title {
+                border-color: #212121;
+                color: #212121;
+              }
+              @media screen and (-ms-high-contrast: active){&:hover .ms-Dropdown-title {
+                border-color: Highlight;
+              }
+              &:focus .ms-Dropdown-title {
+                border-color: #0078d4;
+                color: #212121;
+              }
+              @media screen and (-ms-high-contrast: active){&:focus .ms-Dropdown-title {
+                background-color: Highlight;
+                border-color: Highlight;
+                color: HighlightText;
+              }
+              @media screen and (-ms-high-contrast: active){&:focus .ms-Dropdown-title:hover {
+                color: HighlightText;
+              }
+              @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: black-on-white){&:focus .ms-Dropdown-title {
+                -ms-high-contrast-adjust: none;
+              }
+              &:active .ms-Dropdown-title {
+                border-color: #005a9e;
+                color: #212121;
+              }
+              @media screen and (-ms-high-contrast: active){&:active .ms-Dropdown-title {
+                border-color: Highlight;
+              }
+              &:hover .ms-Dropdown-caretDown {
+                color: #212121;
+              }
+              &:focus .ms-Dropdown-caretDown {
+                color: #212121;
+              }
+              @media screen and (-ms-high-contrast: active){&:focus .ms-Dropdown-caretDown {
+                color: HighlightText;
+              }
+              @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: black-on-white){&:focus .ms-Dropdown-caretDown {
+                -ms-high-contrast-adjust: none;
+              }
+              &:active .ms-Dropdown-caretDown {
+                color: #212121;
+              }
+              &:hover .ms-Dropdown-titleIsPlaceHolder {
+                color: #666666;
+              }
+              &:focus .ms-Dropdown-titleIsPlaceHolder {
+                color: #666666;
+              }
+              &:active .ms-Dropdown-titleIsPlaceHolder {
+                color: #666666;
+              }
+              &:hover .ms-Dropdown-title--hasError {
+                border-color: #a80000;
+              }
+              &:active .ms-Dropdown-title--hasError {
+                border-color: #a80000;
+              }
+              &:focus .ms-Dropdown-title--hasError {
+                border-color: #a80000;
+              }
+          data-is-focusable={true}
+          id="Dropdown4"
+          onBlur={[Function]}
+          onChange={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onKeyDown={[Function]}
+          onKeyUp={[Function]}
+          placeholder="Select Overflow"
+          role="listbox"
+          tabIndex={0}
+        >
+          <span
+            aria-atomic={true}
+            aria-label="Visible"
+            aria-live="off"
+            aria-posinset={1}
+            aria-selected={true}
+            aria-setsize={3}
+            className=
+                ms-Dropdown-title
+                {
+                  background-color: #ffffff;
+                  border-color: #a6a6a6;
+                  border-style: solid;
+                  border-width: 1px;
+                  box-shadow: none;
+                  box-sizing: border-box;
+                  cursor: pointer;
+                  display: block;
+                  height: 32px;
+                  line-height: 30px;
+                  margin-bottom: 0px;
+                  margin-left: 0px;
+                  margin-right: 0px;
+                  margin-top: 0px;
+                  overflow: hidden;
+                  padding-bottom: 0;
+                  padding-left: 12px;
+                  padding-right: 32px;
+                  padding-top: 0;
+                  position: relative;
+                  text-overflow: ellipsis;
+                  white-space: nowrap;
+                }
+            id="Dropdown4-option"
+            role="option"
+          >
+            <span>
+              Visible
+            </span>
+          </span>
+          <span
+            className=
+                ms-Dropdown-caretDownWrapper
+                {
+                  height: 32px;
+                  line-height: 30px;
+                  position: absolute;
+                  right: 12px;
+                  top: 1px;
+                }
+          >
+            <i
+              aria-hidden={true}
+              className=
+                  ms-Dropdown-caretDown
+                  {
+                    -moz-osx-font-smoothing: grayscale;
+                    -webkit-font-smoothing: antialiased;
+                    color: #666666;
+                    display: inline-block;
+                    font-family: "FabricMDL2Icons";
+                    font-size: 12px;
+                    font-style: normal;
+                    font-weight: normal;
+                    pointer-events: none;
+                    speak: none;
+                  }
+              data-icon-name="ChevronDown"
+              role="presentation"
+            >
+              
+            </i>
+          </span>
+        </div>
+      </div>
+    </span>
+  </div>
+  <div
+    className=
+
+        {
+          height: 150px;
+        }
+  >
+    <div
+      className=
+          ms-Stack
+          {
+            background: #71afe5;
+            display: inline-block;
+            height: 100%;
+            overflow: visible;
+            width: 100%;
+          }
+          & span {
+            align-items: center;
+            background: #0078d4;
+            color: #ffffff;
+            display: flex;
+            height: 50px;
+            justify-content: center;
+            width: 50px;
+          }
+    >
+      <div
+        className=
+            ms-Stack-inner
+            {
+              align-items: flex-start;
+              box-sizing: border-box;
+              display: flex;
+              flex-direction: row;
+              flex-wrap: wrap;
+              height: calc(100% + 30px);
+              justify-content: flex-start;
+              margin-bottom: -15px;
+              margin-left: -15px;
+              margin-right: -15px;
+              margin-top: -15px;
+              max-width: 100vw;
+              overflow: visible;
+              width: auto;
+            }
+            & > * {
+              margin-bottom: 15px;
+              margin-left: 15px;
+              margin-right: 15px;
+              margin-top: 15px;
+              max-width: calc(100% - 30px);
+              text-overflow: ellipsis;
+              white-space: nowrap;
+            }
+            & > *:not(.ms-StackItem) {
+              flex-shrink: 0;
+            }
+      >
+        <span>
+          1
+        </span>
+        <span>
+          2
+        </span>
+        <span>
+          3
+        </span>
+        <span>
+          4
+        </span>
+        <span>
+          5
+        </span>
+        <span>
+          6
+        </span>
+        <span>
+          7
+        </span>
+        <span>
+          8
+        </span>
+        <span>
+          9
+        </span>
+        <span>
+          10
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/packages/office-ui-fabric-react/src/components/__snapshots__/Stack.Horizontal.WrapNested.Example.tsx.shot b/packages/office-ui-fabric-react/src/components/__snapshots__/Stack.Horizontal.WrapNested.Example.tsx.shot
new file mode 100644
index 0000000000000..e7d9b302cde55
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/__snapshots__/Stack.Horizontal.WrapNested.Example.tsx.shot
@@ -0,0 +1,531 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Component Examples renders Stack.Horizontal.WrapNested.Example.tsx correctly 1`] = `
+<div
+  className=
+      ms-Stack
+      {
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        flex-wrap: nowrap;
+        height: auto;
+        width: auto;
+      }
+      & > * {
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      & > *:not(:first-child) {
+        margin-top: 10px;
+      }
+      & > *:not(.ms-StackItem) {
+        flex-shrink: 0;
+      }
+>
+  <div
+    className=
+        ms-Slider
+        ms-Slider-enabled
+        ms-Slider-row
+        {
+          -moz-osx-font-smoothing: grayscale;
+          -webkit-font-smoothing: antialiased;
+          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+          font-size: 14px;
+          font-weight: 400;
+          user-select: none;
+        }
+  >
+    <label
+      className=
+          ms-Label
+          {
+            -moz-osx-font-smoothing: grayscale;
+            -webkit-font-smoothing: antialiased;
+            box-shadow: none;
+            box-sizing: border-box;
+            color: #333333;
+            display: block;
+            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+            font-size: 14px;
+            font-weight: 400;
+            margin-bottom: 0px;
+            margin-left: 0px;
+            margin-right: 0px;
+            margin-top: 0px;
+            overflow-wrap: break-word;
+            padding-bottom: 0px;
+            padding-left: 0px;
+            padding-right: 0px;
+            padding-top: 0px;
+            word-wrap: break-word;
+          }
+      htmlFor="Slider0"
+    >
+      Change the stack width to see how child items wrap onto multiple rows:
+    </label>
+    <div
+      className=
+          ms-Slider-container
+          {
+            align-items: center;
+            display: flex;
+            flex-wrap: nowrap;
+          }
+    >
+      <div
+        aria-disabled={false}
+        aria-label="Change the stack width to see how child items wrap onto multiple rows:"
+        aria-valuemax={100}
+        aria-valuemin={1}
+        aria-valuenow={100}
+        className=
+            ms-Slider-slideBox
+            ms-Slider-showValue
+            ms-Slider-showTransitions
+            {
+              align-items: center;
+              background: transparent;
+              border: none;
+              display: flex;
+              flex-grow: 1;
+              height: 28px;
+              line-height: 28px;
+              outline: transparent;
+              padding-bottom: 0;
+              padding-left: 8px;
+              padding-right: 8px;
+              padding-top: 0;
+              position: relative;
+              width: auto;
+            }
+            &::-moz-focus-inner {
+              border: 0;
+            }
+            .ms-Fabric--isFocusVisible &:focus:after {
+              border: 1px solid #ffffff;
+              bottom: 1px;
+              content: "";
+              left: 1px;
+              outline: 1px solid #666666;
+              position: absolute;
+              right: 1px;
+              top: 1px;
+              z-index: 1;
+            }
+            &:active $activeSection {
+              background-color: #0078d4;
+            }
+            @media screen and (-ms-high-contrast: active){&:active $activeSection {
+              background-color: Highlight;
+            }
+            &:hover $activeSection {
+              background-color: #0078d4;
+            }
+            @media screen and (-ms-high-contrast: active){&:hover $activeSection {
+              background-color: Highlight;
+            }
+            &:active $inactiveSection {
+              background-color: #c7e0f4;
+            }
+            @media screen and (-ms-high-contrast: active){&:active $inactiveSection {
+              border-color: Highlight;
+            }
+            &:hover $inactiveSection {
+              background-color: #c7e0f4;
+            }
+            @media screen and (-ms-high-contrast: active){&:hover $inactiveSection {
+              border-color: Highlight;
+            }
+            &:active $thumb {
+              border: 2px solid #0078d4;
+            }
+            @media screen and (-ms-high-contrast: active){&:active $thumb {
+              border-color: Highlight;
+            }
+            &:hover $thumb {
+              border: 2px solid #0078d4;
+            }
+            @media screen and (-ms-high-contrast: active){&:hover $thumb {
+              border-color: Highlight;
+            }
+            & $thumb {
+              background: #ffffff;
+              border-color: #666666;
+              border-radius: 10px;
+              border-style: solid;
+              border-width: 2px;
+              box-sizing: border-box;
+              display: block;
+              height: 16px;
+              position: absolute;
+              top: -6px;
+              transform: translateX(-50%);
+              transition: left 0.367s cubic-bezier(.1,.9,.2,1);
+              width: 16px;
+            }
+        data-is-focusable={true}
+        id="Slider0"
+        onKeyDown={[Function]}
+        onMouseDown={[Function]}
+        onTouchStart={[Function]}
+        role="slider"
+        tabIndex={0}
+      >
+        <div
+          className=
+              ms-Slider-line
+              {
+                display: flex;
+                position: relative;
+                width: 100%;
+              }
+              & $lineContainer {
+                border-radius: 4px;
+                box-sizing: border-box;
+                height: 4px;
+                width: 100%;
+              }
+        >
+          <span
+            className=
+                ms-Slider-thumb
+
+            style={
+              Object {
+                "left": "100%",
+              }
+            }
+          />
+          <span
+            className=
+                ms-Slider-active
+
+                {
+                  background: #666666;
+                  transition: width 0.367s cubic-bezier(.1,.9,.2,1);
+                }
+                @media screen and (-ms-high-contrast: active){& {
+                  background-color: WindowText;
+                }
+            style={
+              Object {
+                "width": "100%",
+              }
+            }
+          />
+          <span
+            className=
+                ms-Slider-inactive
+
+                {
+                  background: #c8c8c8;
+                  transition: width 0.367s cubic-bezier(.1,.9,.2,1);
+                }
+                @media screen and (-ms-high-contrast: active){& {
+                  border: 1px solid WindowText;
+                }
+            style={
+              Object {
+                "width": "0%",
+              }
+            }
+          />
+        </div>
+      </div>
+      <label
+        className=
+            ms-Label
+            ms-Slider-value
+            {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              box-shadow: none;
+              box-sizing: border-box;
+              color: #333333;
+              display: block;
+              flex-shrink: 1;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 14px;
+              font-weight: 400;
+              line-height: 1;
+              margin-bottom: 0;
+              margin-left: 8px;
+              margin-right: 8px;
+              margin-top: 0;
+              overflow-wrap: break-word;
+              padding-bottom: 5px;
+              padding-left: 0;
+              padding-right: 0;
+              padding-top: 5px;
+              white-space: nowrap;
+              width: 40px;
+              word-wrap: break-word;
+            }
+      >
+        100
+      </label>
+    </div>
+  </div>
+  <div
+    className=
+        ms-Stack
+        {
+          background: #71afe5;
+          display: inline-block;
+          height: auto;
+          overflow: visible;
+          width: 100%;
+        }
+  >
+    <div
+      className=
+          ms-Stack-inner
+          {
+            box-sizing: border-box;
+            display: flex;
+            flex-direction: row;
+            flex-wrap: wrap;
+            height: auto;
+            margin-bottom: -15px;
+            margin-left: -20px;
+            margin-right: -20px;
+            margin-top: -15px;
+            max-width: 100vw;
+            overflow: visible;
+            width: auto;
+          }
+          & > * {
+            margin-bottom: 15px;
+            margin-left: 20px;
+            margin-right: 20px;
+            margin-top: 15px;
+            max-width: calc(100% - 40px);
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+          & > *:not(.ms-StackItem) {
+            flex-shrink: 0;
+          }
+    >
+      <div
+        className=
+            ms-Stack
+            {
+              background: #a6a6a6;
+              display: inline-block;
+              height: auto;
+              overflow: visible;
+              width: auto;
+            }
+            & span {
+              align-items: center;
+              background: #0078d4;
+              color: #ffffff;
+              display: flex;
+              height: 50px;
+              justify-content: center;
+              width: 50px;
+            }
+      >
+        <div
+          className=
+              ms-Stack-inner
+              {
+                box-sizing: border-box;
+                display: flex;
+                flex-direction: row;
+                flex-wrap: wrap;
+                height: auto;
+                margin-bottom: -5px;
+                margin-left: -15px;
+                margin-right: -15px;
+                margin-top: -5px;
+                max-width: 100vw;
+                overflow: visible;
+                width: auto;
+              }
+              & > * {
+                margin-bottom: 5px;
+                margin-left: 15px;
+                margin-right: 15px;
+                margin-top: 5px;
+                max-width: calc(100% - 30px);
+                text-overflow: ellipsis;
+                white-space: nowrap;
+              }
+              & > *:not(.ms-StackItem) {
+                flex-shrink: 0;
+              }
+        >
+          <span>
+            1
+          </span>
+          <span>
+            2
+          </span>
+          <span>
+            3
+          </span>
+          <span>
+            4
+          </span>
+          <span>
+            5
+          </span>
+          <span>
+            6
+          </span>
+          <span>
+            7
+          </span>
+        </div>
+      </div>
+      <div
+        className=
+            ms-Stack
+            {
+              background: #666666;
+              display: inline-block;
+              height: auto;
+              overflow: visible;
+              width: auto;
+            }
+            & span {
+              align-items: center;
+              background: #005a9e;
+              color: #ffffff;
+              display: flex;
+              height: 50px;
+              justify-content: center;
+              width: 50px;
+            }
+      >
+        <div
+          className=
+              ms-Stack-inner
+              {
+                box-sizing: border-box;
+                display: flex;
+                flex-direction: row;
+                flex-wrap: wrap;
+                height: auto;
+                margin-bottom: -10px;
+                margin-left: -25px;
+                margin-right: -25px;
+                margin-top: -10px;
+                max-width: 100vw;
+                overflow: visible;
+                width: auto;
+              }
+              & > * {
+                margin-bottom: 10px;
+                margin-left: 25px;
+                margin-right: 25px;
+                margin-top: 10px;
+                max-width: calc(100% - 50px);
+                text-overflow: ellipsis;
+                white-space: nowrap;
+              }
+              & > *:not(.ms-StackItem) {
+                flex-shrink: 0;
+              }
+        >
+          <span>
+            1
+          </span>
+          <span>
+            2
+          </span>
+          <span>
+            3
+          </span>
+        </div>
+      </div>
+      <div
+        className=
+            ms-Stack
+            {
+              background: #333333;
+              display: inline-block;
+              height: auto;
+              overflow: visible;
+              width: auto;
+            }
+            & span {
+              align-items: center;
+              background: #004578;
+              color: #ffffff;
+              display: flex;
+              height: 50px;
+              justify-content: center;
+              width: 50px;
+            }
+      >
+        <div
+          className=
+              ms-Stack-inner
+              {
+                box-sizing: border-box;
+                display: flex;
+                flex-direction: row;
+                flex-wrap: wrap;
+                height: auto;
+                margin-bottom: 0px;
+                margin-left: 0px;
+                margin-right: 0px;
+                margin-top: 0px;
+                max-width: 100vw;
+                overflow: visible;
+                width: auto;
+              }
+              & > * {
+                margin-bottom: 0px;
+                margin-left: 0px;
+                margin-right: 0px;
+                margin-top: 0px;
+                max-width: 100%;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+              }
+              & > *:not(.ms-StackItem) {
+                flex-shrink: 0;
+              }
+        >
+          <span>
+            1
+          </span>
+          <span>
+            2
+          </span>
+          <span>
+            3
+          </span>
+          <span>
+            4
+          </span>
+          <span>
+            5
+          </span>
+          <span>
+            6
+          </span>
+          <span>
+            7
+          </span>
+          <span>
+            8
+          </span>
+          <span>
+            9
+          </span>
+          <span>
+            10
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/packages/office-ui-fabric-react/src/components/__snapshots__/Stack.Vertical.Basic.Example.tsx.shot b/packages/office-ui-fabric-react/src/components/__snapshots__/Stack.Vertical.Basic.Example.tsx.shot
new file mode 100644
index 0000000000000..50eb25eae1ca4
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/__snapshots__/Stack.Vertical.Basic.Example.tsx.shot
@@ -0,0 +1,319 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Component Examples renders Stack.Vertical.Basic.Example.tsx correctly 1`] = `
+<div
+  className=
+      ms-Stack
+      {
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        flex-wrap: nowrap;
+        height: auto;
+        width: auto;
+      }
+      & > * {
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      & > *:not(:first-child) {
+        margin-top: 5px;
+      }
+      & > *:not(.ms-StackItem) {
+        flex-shrink: 0;
+      }
+>
+  <span>
+    Default vertical stack
+  </span>
+  <div
+    className=
+        ms-Stack
+        {
+          background: #71afe5;
+          box-sizing: border-box;
+          display: flex;
+          flex-direction: column;
+          flex-wrap: nowrap;
+          height: auto;
+          width: auto;
+        }
+        & > * {
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+        & > *:not(:first-child) {
+          margin-top: 0px;
+        }
+        & > *:not(.ms-StackItem) {
+          flex-shrink: 0;
+        }
+  >
+    <span>
+      Item One
+    </span>
+    <span>
+      Item Two
+    </span>
+    <span>
+      Item Three
+    </span>
+  </div>
+  <span>
+    Vertical gap between items
+  </span>
+  <div
+    className=
+        ms-Stack
+        {
+          background: #71afe5;
+          box-sizing: border-box;
+          display: flex;
+          flex-direction: column;
+          flex-wrap: nowrap;
+          height: auto;
+          padding-bottom: 10px;
+          padding-left: 10px;
+          padding-right: 10px;
+          padding-top: 10px;
+          width: auto;
+        }
+        & > * {
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+        & > *:not(:first-child) {
+          margin-top: 10px;
+        }
+        & > *:not(.ms-StackItem) {
+          flex-shrink: 0;
+        }
+  >
+    <span>
+      Item One
+    </span>
+    <span>
+      Item Two
+    </span>
+    <span>
+      Item Three
+    </span>
+  </div>
+  <span>
+    Item alignments
+  </span>
+  <div
+    className=
+        ms-Stack
+        {
+          background: #71afe5;
+          box-sizing: border-box;
+          display: flex;
+          flex-direction: column;
+          flex-wrap: nowrap;
+          height: auto;
+          padding-bottom: 10px;
+          padding-left: 10px;
+          padding-right: 10px;
+          padding-top: 10px;
+          width: auto;
+        }
+        & > * {
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+        & > *:not(:first-child) {
+          margin-top: 5px;
+        }
+        & > *:not(.ms-StackItem) {
+          flex-shrink: 0;
+        }
+  >
+    <span
+      className=
+          ms-StackItem
+          {
+            -moz-osx-font-smoothing: grayscale;
+            -webkit-font-smoothing: antialiased;
+            align-self: auto;
+            background: #0078d4;
+            color: #ffffff;
+            flex-shrink: 0;
+            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+            font-size: 14px;
+            font-weight: 400;
+            height: auto;
+            padding-bottom: 5px;
+            padding-left: 5px;
+            padding-right: 5px;
+            padding-top: 5px;
+            width: auto;
+          }
+    >
+      <span>
+        Auto-aligned item
+      </span>
+    </span>
+    <span
+      className=
+          ms-StackItem
+          {
+            -moz-osx-font-smoothing: grayscale;
+            -webkit-font-smoothing: antialiased;
+            align-self: stretch;
+            background: #0078d4;
+            color: #ffffff;
+            flex-shrink: 0;
+            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+            font-size: 14px;
+            font-weight: 400;
+            height: auto;
+            padding-bottom: 5px;
+            padding-left: 5px;
+            padding-right: 5px;
+            padding-top: 5px;
+            width: auto;
+          }
+    >
+      <span>
+        Stretch-aligned item
+      </span>
+    </span>
+    <span
+      className=
+          ms-StackItem
+          {
+            -moz-osx-font-smoothing: grayscale;
+            -webkit-font-smoothing: antialiased;
+            align-self: baseline;
+            background: #0078d4;
+            color: #ffffff;
+            flex-shrink: 0;
+            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+            font-size: 14px;
+            font-weight: 400;
+            height: auto;
+            padding-bottom: 5px;
+            padding-left: 5px;
+            padding-right: 5px;
+            padding-top: 5px;
+            width: auto;
+          }
+    >
+      <span>
+        Baseline-aligned item
+      </span>
+    </span>
+    <span
+      className=
+          ms-StackItem
+          {
+            -moz-osx-font-smoothing: grayscale;
+            -webkit-font-smoothing: antialiased;
+            align-self: flex-start;
+            background: #0078d4;
+            color: #ffffff;
+            flex-shrink: 0;
+            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+            font-size: 14px;
+            font-weight: 400;
+            height: auto;
+            padding-bottom: 5px;
+            padding-left: 5px;
+            padding-right: 5px;
+            padding-top: 5px;
+            width: auto;
+          }
+    >
+      <span>
+        Start-aligned item
+      </span>
+    </span>
+    <span
+      className=
+          ms-StackItem
+          {
+            -moz-osx-font-smoothing: grayscale;
+            -webkit-font-smoothing: antialiased;
+            align-self: center;
+            background: #0078d4;
+            color: #ffffff;
+            flex-shrink: 0;
+            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+            font-size: 14px;
+            font-weight: 400;
+            height: auto;
+            padding-bottom: 5px;
+            padding-left: 5px;
+            padding-right: 5px;
+            padding-top: 5px;
+            width: auto;
+          }
+    >
+      <span>
+        Center-aligned item
+      </span>
+    </span>
+    <span
+      className=
+          ms-StackItem
+          {
+            -moz-osx-font-smoothing: grayscale;
+            -webkit-font-smoothing: antialiased;
+            align-self: flex-end;
+            background: #0078d4;
+            color: #ffffff;
+            flex-shrink: 0;
+            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+            font-size: 14px;
+            font-weight: 400;
+            height: auto;
+            padding-bottom: 5px;
+            padding-left: 5px;
+            padding-right: 5px;
+            padding-top: 5px;
+            width: auto;
+          }
+    >
+      <span>
+        End-aligned item
+      </span>
+    </span>
+  </div>
+  <span>
+    Clickable vertical stack
+  </span>
+  <div
+    className=
+        ms-Stack
+        {
+          background: #71afe5;
+          box-sizing: border-box;
+          display: flex;
+          flex-direction: column;
+          flex-wrap: nowrap;
+          height: auto;
+          padding-bottom: 10px;
+          padding-left: 10px;
+          padding-right: 10px;
+          padding-top: 10px;
+          width: auto;
+        }
+        & > * {
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+        & > *:not(:first-child) {
+          margin-top: 0px;
+        }
+        & > *:not(.ms-StackItem) {
+          flex-shrink: 0;
+        }
+    onClick={[Function]}
+  >
+    <span>
+      Click inside this box
+    </span>
+  </div>
+</div>
+`;
diff --git a/packages/office-ui-fabric-react/src/components/__snapshots__/Stack.Vertical.Configure.Example.tsx.shot b/packages/office-ui-fabric-react/src/components/__snapshots__/Stack.Vertical.Configure.Example.tsx.shot
new file mode 100644
index 0000000000000..1762967c4f277
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/__snapshots__/Stack.Vertical.Configure.Example.tsx.shot
@@ -0,0 +1,3495 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Component Examples renders Stack.Vertical.Configure.Example.tsx correctly 1`] = `
+<div
+  className=
+      ms-Stack
+      {
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        flex-wrap: nowrap;
+        height: auto;
+        width: auto;
+      }
+      & > * {
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      & > *:not(:first-child) {
+        margin-top: 10px;
+      }
+      & > *:not(.ms-StackItem) {
+        flex-shrink: 0;
+      }
+>
+  <div
+    className=
+        ms-Stack
+        {
+          box-sizing: border-box;
+          display: flex;
+          flex-direction: row;
+          flex-wrap: nowrap;
+          height: auto;
+          width: auto;
+        }
+        & > * {
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+        & > *:not(:first-child) {
+          margin-left: 20px;
+        }
+        & > *:not(.ms-StackItem) {
+          flex-shrink: 0;
+        }
+  >
+    <span
+      className=
+          ms-StackItem
+          {
+            -moz-osx-font-smoothing: grayscale;
+            -webkit-font-smoothing: antialiased;
+            flex-grow: 1;
+            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+            font-size: 14px;
+            font-weight: 400;
+            height: auto;
+            width: auto;
+          }
+    >
+      <div
+        className=
+            ms-Stack
+            {
+              box-sizing: border-box;
+              display: flex;
+              flex-direction: column;
+              flex-wrap: nowrap;
+              height: auto;
+              width: auto;
+            }
+            & > * {
+              text-overflow: ellipsis;
+              white-space: nowrap;
+            }
+            & > *:not(:first-child) {
+              margin-top: 0px;
+            }
+            & > *:not(.ms-StackItem) {
+              flex-shrink: 0;
+            }
+      >
+        <div
+          className=
+              ms-Slider
+              ms-Slider-enabled
+              ms-Slider-row
+              {
+                -moz-osx-font-smoothing: grayscale;
+                -webkit-font-smoothing: antialiased;
+                font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                font-size: 14px;
+                font-weight: 400;
+                user-select: none;
+              }
+        >
+          <label
+            className=
+                ms-Label
+                {
+                  -moz-osx-font-smoothing: grayscale;
+                  -webkit-font-smoothing: antialiased;
+                  box-shadow: none;
+                  box-sizing: border-box;
+                  color: #333333;
+                  display: block;
+                  font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                  font-size: 14px;
+                  font-weight: 400;
+                  margin-bottom: 0px;
+                  margin-left: 0px;
+                  margin-right: 0px;
+                  margin-top: 0px;
+                  overflow-wrap: break-word;
+                  padding-bottom: 0px;
+                  padding-left: 0px;
+                  padding-right: 0px;
+                  padding-top: 0px;
+                  word-wrap: break-word;
+                }
+            htmlFor="Slider0"
+          >
+            Number of items:
+          </label>
+          <div
+            className=
+                ms-Slider-container
+                {
+                  align-items: center;
+                  display: flex;
+                  flex-wrap: nowrap;
+                }
+          >
+            <div
+              aria-disabled={false}
+              aria-label="Number of items:"
+              aria-valuemax={10}
+              aria-valuemin={1}
+              aria-valuenow={5}
+              className=
+                  ms-Slider-slideBox
+                  ms-Slider-showValue
+                  ms-Slider-showTransitions
+                  {
+                    align-items: center;
+                    background: transparent;
+                    border: none;
+                    display: flex;
+                    flex-grow: 1;
+                    height: 28px;
+                    line-height: 28px;
+                    outline: transparent;
+                    padding-bottom: 0;
+                    padding-left: 8px;
+                    padding-right: 8px;
+                    padding-top: 0;
+                    position: relative;
+                    width: auto;
+                  }
+                  &::-moz-focus-inner {
+                    border: 0;
+                  }
+                  .ms-Fabric--isFocusVisible &:focus:after {
+                    border: 1px solid #ffffff;
+                    bottom: 1px;
+                    content: "";
+                    left: 1px;
+                    outline: 1px solid #666666;
+                    position: absolute;
+                    right: 1px;
+                    top: 1px;
+                    z-index: 1;
+                  }
+                  &:active $activeSection {
+                    background-color: #0078d4;
+                  }
+                  @media screen and (-ms-high-contrast: active){&:active $activeSection {
+                    background-color: Highlight;
+                  }
+                  &:hover $activeSection {
+                    background-color: #0078d4;
+                  }
+                  @media screen and (-ms-high-contrast: active){&:hover $activeSection {
+                    background-color: Highlight;
+                  }
+                  &:active $inactiveSection {
+                    background-color: #c7e0f4;
+                  }
+                  @media screen and (-ms-high-contrast: active){&:active $inactiveSection {
+                    border-color: Highlight;
+                  }
+                  &:hover $inactiveSection {
+                    background-color: #c7e0f4;
+                  }
+                  @media screen and (-ms-high-contrast: active){&:hover $inactiveSection {
+                    border-color: Highlight;
+                  }
+                  &:active $thumb {
+                    border: 2px solid #0078d4;
+                  }
+                  @media screen and (-ms-high-contrast: active){&:active $thumb {
+                    border-color: Highlight;
+                  }
+                  &:hover $thumb {
+                    border: 2px solid #0078d4;
+                  }
+                  @media screen and (-ms-high-contrast: active){&:hover $thumb {
+                    border-color: Highlight;
+                  }
+                  & $thumb {
+                    background: #ffffff;
+                    border-color: #666666;
+                    border-radius: 10px;
+                    border-style: solid;
+                    border-width: 2px;
+                    box-sizing: border-box;
+                    display: block;
+                    height: 16px;
+                    position: absolute;
+                    top: -6px;
+                    transform: translateX(-50%);
+                    transition: left 0.367s cubic-bezier(.1,.9,.2,1);
+                    width: 16px;
+                  }
+              data-is-focusable={true}
+              id="Slider0"
+              onKeyDown={[Function]}
+              onMouseDown={[Function]}
+              onTouchStart={[Function]}
+              role="slider"
+              tabIndex={0}
+            >
+              <div
+                className=
+                    ms-Slider-line
+                    {
+                      display: flex;
+                      position: relative;
+                      width: 100%;
+                    }
+                    & $lineContainer {
+                      border-radius: 4px;
+                      box-sizing: border-box;
+                      height: 4px;
+                      width: 100%;
+                    }
+              >
+                <span
+                  className=
+                      ms-Slider-thumb
+
+                  style={
+                    Object {
+                      "left": "44.44444444444444%",
+                    }
+                  }
+                />
+                <span
+                  className=
+                      ms-Slider-active
+
+                      {
+                        background: #666666;
+                        transition: width 0.367s cubic-bezier(.1,.9,.2,1);
+                      }
+                      @media screen and (-ms-high-contrast: active){& {
+                        background-color: WindowText;
+                      }
+                  style={
+                    Object {
+                      "width": "44.44444444444444%",
+                    }
+                  }
+                />
+                <span
+                  className=
+                      ms-Slider-inactive
+
+                      {
+                        background: #c8c8c8;
+                        transition: width 0.367s cubic-bezier(.1,.9,.2,1);
+                      }
+                      @media screen and (-ms-high-contrast: active){& {
+                        border: 1px solid WindowText;
+                      }
+                  style={
+                    Object {
+                      "width": "55.55555555555556%",
+                    }
+                  }
+                />
+              </div>
+            </div>
+            <label
+              className=
+                  ms-Label
+                  ms-Slider-value
+                  {
+                    -moz-osx-font-smoothing: grayscale;
+                    -webkit-font-smoothing: antialiased;
+                    box-shadow: none;
+                    box-sizing: border-box;
+                    color: #333333;
+                    display: block;
+                    flex-shrink: 1;
+                    font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                    font-size: 14px;
+                    font-weight: 400;
+                    line-height: 1;
+                    margin-bottom: 0;
+                    margin-left: 8px;
+                    margin-right: 8px;
+                    margin-top: 0;
+                    overflow-wrap: break-word;
+                    padding-bottom: 5px;
+                    padding-left: 0;
+                    padding-right: 0;
+                    padding-top: 5px;
+                    white-space: nowrap;
+                    width: 40px;
+                    word-wrap: break-word;
+                  }
+            >
+              5
+            </label>
+          </div>
+        </div>
+        <div
+          className=
+              ms-Stack
+              {
+                box-sizing: border-box;
+                display: flex;
+                flex-direction: row;
+                flex-wrap: nowrap;
+                height: auto;
+                width: auto;
+              }
+              & > * {
+                text-overflow: ellipsis;
+                white-space: nowrap;
+              }
+              & > *:not(:first-child) {
+                margin-left: 0px;
+              }
+              & > *:not(.ms-StackItem) {
+                flex-shrink: 0;
+              }
+        >
+          <button
+            aria-checked={false}
+            className=
+                ms-Checkbox
+                is-enabled
+                {
+                  -moz-osx-font-smoothing: grayscale;
+                  -webkit-font-smoothing: antialiased;
+                  background: none;
+                  border: none;
+                  cursor: pointer;
+                  display: block;
+                  font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                  font-size: 14px;
+                  font-weight: 400;
+                  margin-bottom: 0;
+                  margin-left: 0;
+                  margin-right: 10px;
+                  margin-top: 0;
+                  outline: none;
+                  padding-bottom: 0;
+                  padding-left: 0;
+                  padding-right: 0;
+                  padding-top: 0;
+                  position: relative;
+                }
+                &::-moz-focus-inner {
+                  border: 0;
+                }
+                .ms-Fabric--isFocusVisible &:focus:after {
+                  border: 1px solid #ffffff;
+                  bottom: -2px;
+                  content: "";
+                  left: -2px;
+                  outline: 1px solid #666666;
+                  position: absolute;
+                  right: -2px;
+                  top: -2px;
+                  z-index: 1;
+                }
+                &:hover .ms-Checkbox-checkbox {
+                  border-color: #333333;
+                }
+                @media screen and (-ms-high-contrast: active){&:hover .ms-Checkbox-checkbox {
+                  border-color: Highlight;
+                }
+                &:focus .ms-Checkbox-checkbox {
+                  border-color: #333333;
+                }
+                &:hover .ms-Checkbox-checkmark {
+                  color: #a6a6a6;
+                  opacity: 1;
+                }
+                @media screen and (-ms-high-contrast: active){&:hover .ms-Checkbox-checkmark {
+                  color: Highlight;
+                }
+                &:hover .ms-Checkbox-text {
+                  color: #333333;
+                }
+                &:focus .ms-Checkbox-text {
+                  color: #333333;
+                }
+            id="checkbox-1"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            role="checkbox"
+            type="button"
+          >
+            <label
+              className=
+                  ms-Checkbox-label
+                  {
+                    align-items: flex-start;
+                    cursor: pointer;
+                    display: flex;
+                    margin-bottom: 0;
+                    margin-left: -4px;
+                    margin-right: -4px;
+                    margin-top: 0;
+                    position: relative;
+                    text-align: left;
+                    user-select: none;
+                  }
+              htmlFor="checkbox-1"
+            >
+              <div
+                className=
+                    ms-Checkbox-checkbox
+                    {
+                      align-items: center;
+                      border-color: #666666;
+                      border-style: solid;
+                      border-width: 1px;
+                      box-sizing: border-box;
+                      display: flex;
+                      flex-shrink: 0;
+                      height: 20px;
+                      justify-content: center;
+                      margin-bottom: 0;
+                      margin-left: 4px;
+                      margin-right: 4px;
+                      margin-top: 0;
+                      overflow: hidden;
+                      transition-duration: 200ms;
+                      transition-property: background, border, border-color;
+                      transition-timing-function: cubic-bezier(.4, 0, .23, 1);
+                      width: 20px;
+                    }
+              >
+                <i
+                  aria-hidden={true}
+                  className=
+                      ms-Checkbox-checkmark
+                      {
+                        -moz-osx-font-smoothing: grayscale;
+                        -webkit-font-smoothing: antialiased;
+                        color: #ffffff;
+                        display: inline-block;
+                        font-family: "FabricMDL2Icons";
+                        font-style: normal;
+                        font-weight: normal;
+                        opacity: 0;
+                        speak: none;
+                      }
+                      @media screen and (-ms-high-contrast: active){& {
+                        -ms-high-contrast-adjust: none;
+                        color: Window;
+                      }
+                  data-icon-name="CheckMark"
+                  role="presentation"
+                >
+                  
+                </i>
+              </div>
+              <span
+                className=
+                    ms-Checkbox-text
+                    {
+                      color: #333333;
+                      font-size: 14px;
+                      line-height: 20px;
+                      margin-bottom: 0;
+                      margin-left: 4px;
+                      margin-right: 4px;
+                      margin-top: 0;
+                    }
+              >
+                Shadow around items
+              </span>
+            </label>
+          </button>
+          <button
+            aria-checked={false}
+            className=
+                ms-Checkbox
+                is-enabled
+                {
+                  -moz-osx-font-smoothing: grayscale;
+                  -webkit-font-smoothing: antialiased;
+                  background: none;
+                  border: none;
+                  cursor: pointer;
+                  display: block;
+                  font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                  font-size: 14px;
+                  font-weight: 400;
+                  margin-bottom: 0;
+                  margin-left: 0;
+                  margin-right: 10px;
+                  margin-top: 0;
+                  outline: none;
+                  padding-bottom: 0;
+                  padding-left: 0;
+                  padding-right: 0;
+                  padding-top: 0;
+                  position: relative;
+                }
+                &::-moz-focus-inner {
+                  border: 0;
+                }
+                .ms-Fabric--isFocusVisible &:focus:after {
+                  border: 1px solid #ffffff;
+                  bottom: -2px;
+                  content: "";
+                  left: -2px;
+                  outline: 1px solid #666666;
+                  position: absolute;
+                  right: -2px;
+                  top: -2px;
+                  z-index: 1;
+                }
+                &:hover .ms-Checkbox-checkbox {
+                  border-color: #333333;
+                }
+                @media screen and (-ms-high-contrast: active){&:hover .ms-Checkbox-checkbox {
+                  border-color: Highlight;
+                }
+                &:focus .ms-Checkbox-checkbox {
+                  border-color: #333333;
+                }
+                &:hover .ms-Checkbox-checkmark {
+                  color: #a6a6a6;
+                  opacity: 1;
+                }
+                @media screen and (-ms-high-contrast: active){&:hover .ms-Checkbox-checkmark {
+                  color: Highlight;
+                }
+                &:hover .ms-Checkbox-text {
+                  color: #333333;
+                }
+                &:focus .ms-Checkbox-text {
+                  color: #333333;
+                }
+            id="checkbox-2"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            role="checkbox"
+            type="button"
+          >
+            <label
+              className=
+                  ms-Checkbox-label
+                  {
+                    align-items: flex-start;
+                    cursor: pointer;
+                    display: flex;
+                    margin-bottom: 0;
+                    margin-left: -4px;
+                    margin-right: -4px;
+                    margin-top: 0;
+                    position: relative;
+                    text-align: left;
+                    user-select: none;
+                  }
+              htmlFor="checkbox-2"
+            >
+              <div
+                className=
+                    ms-Checkbox-checkbox
+                    {
+                      align-items: center;
+                      border-color: #666666;
+                      border-style: solid;
+                      border-width: 1px;
+                      box-sizing: border-box;
+                      display: flex;
+                      flex-shrink: 0;
+                      height: 20px;
+                      justify-content: center;
+                      margin-bottom: 0;
+                      margin-left: 4px;
+                      margin-right: 4px;
+                      margin-top: 0;
+                      overflow: hidden;
+                      transition-duration: 200ms;
+                      transition-property: background, border, border-color;
+                      transition-timing-function: cubic-bezier(.4, 0, .23, 1);
+                      width: 20px;
+                    }
+              >
+                <i
+                  aria-hidden={true}
+                  className=
+                      ms-Checkbox-checkmark
+                      {
+                        -moz-osx-font-smoothing: grayscale;
+                        -webkit-font-smoothing: antialiased;
+                        color: #ffffff;
+                        display: inline-block;
+                        font-family: "FabricMDL2Icons";
+                        font-style: normal;
+                        font-weight: normal;
+                        opacity: 0;
+                        speak: none;
+                      }
+                      @media screen and (-ms-high-contrast: active){& {
+                        -ms-high-contrast-adjust: none;
+                        color: Window;
+                      }
+                  data-icon-name="CheckMark"
+                  role="presentation"
+                >
+                  
+                </i>
+              </div>
+              <span
+                className=
+                    ms-Checkbox-text
+                    {
+                      color: #333333;
+                      font-size: 14px;
+                      line-height: 20px;
+                      margin-bottom: 0;
+                      margin-left: 4px;
+                      margin-right: 4px;
+                      margin-top: 0;
+                    }
+              >
+                Prevent item overflow
+              </span>
+            </label>
+          </button>
+          <button
+            aria-checked={false}
+            className=
+                ms-Checkbox
+                is-enabled
+                {
+                  -moz-osx-font-smoothing: grayscale;
+                  -webkit-font-smoothing: antialiased;
+                  background: none;
+                  border: none;
+                  cursor: pointer;
+                  display: block;
+                  font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                  font-size: 14px;
+                  font-weight: 400;
+                  margin-bottom: 0;
+                  margin-left: 0;
+                  margin-right: 0;
+                  margin-top: 0;
+                  outline: none;
+                  padding-bottom: 0;
+                  padding-left: 0;
+                  padding-right: 0;
+                  padding-top: 0;
+                  position: relative;
+                }
+                &::-moz-focus-inner {
+                  border: 0;
+                }
+                .ms-Fabric--isFocusVisible &:focus:after {
+                  border: 1px solid #ffffff;
+                  bottom: -2px;
+                  content: "";
+                  left: -2px;
+                  outline: 1px solid #666666;
+                  position: absolute;
+                  right: -2px;
+                  top: -2px;
+                  z-index: 1;
+                }
+                &:hover .ms-Checkbox-checkbox {
+                  border-color: #333333;
+                }
+                @media screen and (-ms-high-contrast: active){&:hover .ms-Checkbox-checkbox {
+                  border-color: Highlight;
+                }
+                &:focus .ms-Checkbox-checkbox {
+                  border-color: #333333;
+                }
+                &:hover .ms-Checkbox-checkmark {
+                  color: #a6a6a6;
+                  opacity: 1;
+                }
+                @media screen and (-ms-high-contrast: active){&:hover .ms-Checkbox-checkmark {
+                  color: Highlight;
+                }
+                &:hover .ms-Checkbox-text {
+                  color: #333333;
+                }
+                &:focus .ms-Checkbox-text {
+                  color: #333333;
+                }
+            id="checkbox-3"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            role="checkbox"
+            type="button"
+          >
+            <label
+              className=
+                  ms-Checkbox-label
+                  {
+                    align-items: flex-start;
+                    cursor: pointer;
+                    display: flex;
+                    margin-bottom: 0;
+                    margin-left: -4px;
+                    margin-right: -4px;
+                    margin-top: 0;
+                    position: relative;
+                    text-align: left;
+                    user-select: none;
+                  }
+              htmlFor="checkbox-3"
+            >
+              <div
+                className=
+                    ms-Checkbox-checkbox
+                    {
+                      align-items: center;
+                      border-color: #666666;
+                      border-style: solid;
+                      border-width: 1px;
+                      box-sizing: border-box;
+                      display: flex;
+                      flex-shrink: 0;
+                      height: 20px;
+                      justify-content: center;
+                      margin-bottom: 0;
+                      margin-left: 4px;
+                      margin-right: 4px;
+                      margin-top: 0;
+                      overflow: hidden;
+                      transition-duration: 200ms;
+                      transition-property: background, border, border-color;
+                      transition-timing-function: cubic-bezier(.4, 0, .23, 1);
+                      width: 20px;
+                    }
+              >
+                <i
+                  aria-hidden={true}
+                  className=
+                      ms-Checkbox-checkmark
+                      {
+                        -moz-osx-font-smoothing: grayscale;
+                        -webkit-font-smoothing: antialiased;
+                        color: #ffffff;
+                        display: inline-block;
+                        font-family: "FabricMDL2Icons";
+                        font-style: normal;
+                        font-weight: normal;
+                        opacity: 0;
+                        speak: none;
+                      }
+                      @media screen and (-ms-high-contrast: active){& {
+                        -ms-high-contrast-adjust: none;
+                        color: Window;
+                      }
+                  data-icon-name="CheckMark"
+                  role="presentation"
+                >
+                  
+                </i>
+              </div>
+              <span
+                className=
+                    ms-Checkbox-text
+                    {
+                      color: #333333;
+                      font-size: 14px;
+                      line-height: 20px;
+                      margin-bottom: 0;
+                      margin-left: 4px;
+                      margin-right: 4px;
+                      margin-top: 0;
+                    }
+              >
+                Shrink items
+              </span>
+            </label>
+          </button>
+        </div>
+      </div>
+    </span>
+    <span
+      className=
+          ms-StackItem
+          {
+            -moz-osx-font-smoothing: grayscale;
+            -webkit-font-smoothing: antialiased;
+            flex-grow: 1;
+            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+            font-size: 14px;
+            font-weight: 400;
+            height: auto;
+            width: auto;
+          }
+    >
+      <div
+        className=
+            ms-Stack
+            {
+              box-sizing: border-box;
+              display: flex;
+              flex-direction: column;
+              flex-wrap: nowrap;
+              height: auto;
+              width: auto;
+            }
+            & > * {
+              text-overflow: ellipsis;
+              white-space: nowrap;
+            }
+            & > *:not(:first-child) {
+              margin-top: 0px;
+            }
+            & > *:not(.ms-StackItem) {
+              flex-shrink: 0;
+            }
+      >
+        <div
+          className=
+              ms-Slider
+              ms-Slider-disabled
+              ms-Slider-row
+              {
+                -moz-osx-font-smoothing: grayscale;
+                -webkit-font-smoothing: antialiased;
+                font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                font-size: 14px;
+                font-weight: 400;
+                user-select: none;
+              }
+        >
+          <label
+            className=
+                ms-Label
+                {
+                  -moz-osx-font-smoothing: grayscale;
+                  -webkit-font-smoothing: antialiased;
+                  box-shadow: none;
+                  box-sizing: border-box;
+                  color: #333333;
+                  display: block;
+                  font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                  font-size: 14px;
+                  font-weight: 400;
+                  margin-bottom: 0px;
+                  margin-left: 0px;
+                  margin-right: 0px;
+                  margin-top: 0px;
+                  overflow-wrap: break-word;
+                  padding-bottom: 0px;
+                  padding-left: 0px;
+                  padding-right: 0px;
+                  padding-top: 0px;
+                  word-wrap: break-word;
+                }
+            htmlFor="Slider4"
+          >
+            Container height:
+          </label>
+          <div
+            className=
+                ms-Slider-container
+                {
+                  align-items: center;
+                  display: flex;
+                  flex-wrap: nowrap;
+                }
+          >
+            <div
+              aria-disabled={true}
+              aria-label="Container height:"
+              aria-valuemax={400}
+              aria-valuemin={1}
+              aria-valuenow={200}
+              className=
+                  ms-Slider-slideBox
+                  ms-Slider-showValue
+                  ms-Slider-showTransitions
+                  {
+                    align-items: center;
+                    background: transparent;
+                    border: none;
+                    display: flex;
+                    flex-grow: 1;
+                    height: 28px;
+                    line-height: 28px;
+                    outline: transparent;
+                    padding-bottom: 0;
+                    padding-left: 8px;
+                    padding-right: 8px;
+                    padding-top: 0;
+                    position: relative;
+                    width: auto;
+                  }
+                  &::-moz-focus-inner {
+                    border: 0;
+                  }
+                  .ms-Fabric--isFocusVisible &:focus:after {
+                    border: 1px solid #ffffff;
+                    bottom: 1px;
+                    content: "";
+                    left: 1px;
+                    outline: 1px solid #666666;
+                    position: absolute;
+                    right: 1px;
+                    top: 1px;
+                    z-index: 1;
+                  }
+                  & $thumb {
+                    background: #ffffff;
+                    border-color: #c8c8c8;
+                    border-radius: 10px;
+                    border-style: solid;
+                    border-width: 2px;
+                    box-sizing: border-box;
+                    display: block;
+                    height: 16px;
+                    position: absolute;
+                    top: -6px;
+                    transform: translateX(-50%);
+                    transition: left 0.367s cubic-bezier(.1,.9,.2,1);
+                    width: 16px;
+                  }
+                  @media screen and (-ms-high-contrast: active){& $thumb {
+                    border-color: GrayText;
+                  }
+              data-is-focusable={false}
+              id="Slider4"
+              role="slider"
+            >
+              <div
+                className=
+                    ms-Slider-line
+                    {
+                      display: flex;
+                      position: relative;
+                      width: 100%;
+                    }
+                    & $lineContainer {
+                      border-radius: 4px;
+                      box-sizing: border-box;
+                      height: 4px;
+                      width: 100%;
+                    }
+              >
+                <span
+                  className=
+                      ms-Slider-thumb
+
+                  style={
+                    Object {
+                      "left": "49.87468671679198%",
+                    }
+                  }
+                />
+                <span
+                  className=
+                      ms-Slider-active
+
+                      {
+                        background: #c8c8c8;
+                        transition: width 0.367s cubic-bezier(.1,.9,.2,1);
+                      }
+                      @media screen and (-ms-high-contrast: active){& {
+                        background-color: GrayText;
+                        border-color: GrayText;
+                      }
+                  style={
+                    Object {
+                      "width": "49.87468671679198%",
+                    }
+                  }
+                />
+                <span
+                  className=
+                      ms-Slider-inactive
+
+                      {
+                        background: #eaeaea;
+                        transition: width 0.367s cubic-bezier(.1,.9,.2,1);
+                      }
+                      @media screen and (-ms-high-contrast: active){& {
+                        background-color: GrayText;
+                        border-color: GrayText;
+                        border: 1px solid WindowText;
+                      }
+                  style={
+                    Object {
+                      "width": "50.12531328320802%",
+                    }
+                  }
+                />
+              </div>
+            </div>
+            <label
+              className=
+                  ms-Label
+                  ms-Slider-value
+                  {
+                    -moz-osx-font-smoothing: grayscale;
+                    -webkit-font-smoothing: antialiased;
+                    box-shadow: none;
+                    box-sizing: border-box;
+                    color: #333333;
+                    display: block;
+                    flex-shrink: 1;
+                    font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                    font-size: 14px;
+                    font-weight: 400;
+                    line-height: 1;
+                    margin-bottom: 0;
+                    margin-left: 8px;
+                    margin-right: 8px;
+                    margin-top: 0;
+                    overflow-wrap: break-word;
+                    padding-bottom: 5px;
+                    padding-left: 0;
+                    padding-right: 0;
+                    padding-top: 5px;
+                    white-space: nowrap;
+                    width: 40px;
+                    word-wrap: break-word;
+                  }
+            >
+              200
+            </label>
+          </div>
+        </div>
+        <button
+          aria-checked={true}
+          className=
+              ms-Checkbox
+              is-checked
+              is-enabled
+              {
+                -moz-osx-font-smoothing: grayscale;
+                -webkit-font-smoothing: antialiased;
+                background: none;
+                border: none;
+                cursor: pointer;
+                display: block;
+                font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                font-size: 14px;
+                font-weight: 400;
+                margin-bottom: 0;
+                margin-left: 0;
+                margin-right: 0;
+                margin-top: 0;
+                outline: none;
+                padding-bottom: 0;
+                padding-left: 0;
+                padding-right: 0;
+                padding-top: 0;
+                position: relative;
+              }
+              &::-moz-focus-inner {
+                border: 0;
+              }
+              .ms-Fabric--isFocusVisible &:focus:after {
+                border: 1px solid #ffffff;
+                bottom: -2px;
+                content: "";
+                left: -2px;
+                outline: 1px solid #666666;
+                position: absolute;
+                right: -2px;
+                top: -2px;
+                z-index: 1;
+              }
+              &:hover .ms-Checkbox-checkbox {
+                background: #106ebe;
+                border-color: #106ebe;
+              }
+              &:focus .ms-Checkbox-checkbox {
+                background: #106ebe;
+                border-color: #106ebe;
+              }
+              @media screen and (-ms-high-contrast: active){&:hover .ms-Checkbox-checkbox {
+                background: Window;
+                border-color: Highlight;
+              }
+              @media screen and (-ms-high-contrast: active){&:focus .ms-Checkbox-checkbox {
+                background: Highlight;
+              }
+              @media screen and (-ms-high-contrast: active){&:focus:hover .ms-Checkbox-checkbox {
+                background: Highlight;
+              }
+              @media screen and (-ms-high-contrast: active){&:focus:hover .ms-Checkbox-checkmark {
+                color: Window;
+              }
+              @media screen and (-ms-high-contrast: active){&:hover .ms-Checkbox-checkmark {
+                color: Highlight;
+              }
+              &:hover .ms-Checkbox-text {
+                color: #333333;
+              }
+              &:focus .ms-Checkbox-text {
+                color: #333333;
+              }
+          defaultChecked={true}
+          id="checkbox-5"
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          role="checkbox"
+          type="button"
+        >
+          <label
+            className=
+                ms-Checkbox-label
+                {
+                  align-items: flex-start;
+                  cursor: pointer;
+                  display: flex;
+                  margin-bottom: 0;
+                  margin-left: -4px;
+                  margin-right: -4px;
+                  margin-top: 0;
+                  position: relative;
+                  text-align: left;
+                  user-select: none;
+                }
+            htmlFor="checkbox-5"
+          >
+            <div
+              className=
+                  ms-Checkbox-checkbox
+                  {
+                    align-items: center;
+                    background: #0078d4;
+                    border-color: #0078d4;
+                    border-style: solid;
+                    border-width: 1px;
+                    box-sizing: border-box;
+                    display: flex;
+                    flex-shrink: 0;
+                    height: 20px;
+                    justify-content: center;
+                    margin-bottom: 0;
+                    margin-left: 4px;
+                    margin-right: 4px;
+                    margin-top: 0;
+                    overflow: hidden;
+                    transition-duration: 200ms;
+                    transition-property: background, border, border-color;
+                    transition-timing-function: cubic-bezier(.4, 0, .23, 1);
+                    width: 20px;
+                  }
+                  @media screen and (-ms-high-contrast: active){& {
+                    background: Highlight;
+                    border-color: Highlight;
+                  }
+            >
+              <i
+                aria-hidden={true}
+                className=
+                    ms-Checkbox-checkmark
+                    {
+                      -moz-osx-font-smoothing: grayscale;
+                      -webkit-font-smoothing: antialiased;
+                      color: #ffffff;
+                      display: inline-block;
+                      font-family: "FabricMDL2Icons";
+                      font-style: normal;
+                      font-weight: normal;
+                      opacity: 1;
+                      speak: none;
+                    }
+                    @media screen and (-ms-high-contrast: active){& {
+                      -ms-high-contrast-adjust: none;
+                      color: Window;
+                    }
+                data-icon-name="CheckMark"
+                role="presentation"
+              >
+                
+              </i>
+            </div>
+            <span
+              className=
+                  ms-Checkbox-text
+                  {
+                    color: #333333;
+                    font-size: 14px;
+                    line-height: 20px;
+                    margin-bottom: 0;
+                    margin-left: 4px;
+                    margin-right: 4px;
+                    margin-top: 0;
+                  }
+            >
+              Automatic height (based on items)
+            </span>
+          </label>
+        </button>
+      </div>
+    </span>
+  </div>
+  <div
+    className=
+        ms-Stack
+        {
+          box-sizing: border-box;
+          display: flex;
+          flex-direction: row;
+          flex-wrap: nowrap;
+          height: auto;
+          width: auto;
+        }
+        & > * {
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+        & > *:not(:first-child) {
+          margin-left: 20px;
+        }
+        & > *:not(.ms-StackItem) {
+          flex-shrink: 0;
+        }
+  >
+    <span
+      className=
+          ms-StackItem
+          {
+            -moz-osx-font-smoothing: grayscale;
+            -webkit-font-smoothing: antialiased;
+            flex-grow: 1;
+            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+            font-size: 14px;
+            font-weight: 400;
+            height: auto;
+            width: auto;
+          }
+    >
+      <div
+        className=
+            ms-Stack
+            {
+              box-sizing: border-box;
+              display: flex;
+              flex-direction: column;
+              flex-wrap: nowrap;
+              height: auto;
+              width: auto;
+            }
+            & > * {
+              text-overflow: ellipsis;
+              white-space: nowrap;
+            }
+            & > *:not(:first-child) {
+              margin-top: 0px;
+            }
+            & > *:not(.ms-StackItem) {
+              flex-shrink: 0;
+            }
+      >
+        <div
+          className=
+              ms-Slider
+              ms-Slider-enabled
+              ms-Slider-row
+              {
+                -moz-osx-font-smoothing: grayscale;
+                -webkit-font-smoothing: antialiased;
+                font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                font-size: 14px;
+                font-weight: 400;
+                user-select: none;
+              }
+        >
+          <label
+            className=
+                ms-Label
+                {
+                  -moz-osx-font-smoothing: grayscale;
+                  -webkit-font-smoothing: antialiased;
+                  box-shadow: none;
+                  box-sizing: border-box;
+                  color: #333333;
+                  display: block;
+                  font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                  font-size: 14px;
+                  font-weight: 400;
+                  margin-bottom: 0px;
+                  margin-left: 0px;
+                  margin-right: 0px;
+                  margin-top: 0px;
+                  overflow-wrap: break-word;
+                  padding-bottom: 0px;
+                  padding-left: 0px;
+                  padding-right: 0px;
+                  padding-top: 0px;
+                  word-wrap: break-word;
+                }
+            htmlFor="Slider6"
+          >
+            Vertical gap between items:
+          </label>
+          <div
+            className=
+                ms-Slider-container
+                {
+                  align-items: center;
+                  display: flex;
+                  flex-wrap: nowrap;
+                }
+          >
+            <div
+              aria-disabled={false}
+              aria-label="Vertical gap between items:"
+              aria-valuemax={50}
+              aria-valuemin={0}
+              aria-valuenow={0}
+              className=
+                  ms-Slider-slideBox
+                  ms-Slider-showValue
+                  ms-Slider-showTransitions
+                  {
+                    align-items: center;
+                    background: transparent;
+                    border: none;
+                    display: flex;
+                    flex-grow: 1;
+                    height: 28px;
+                    line-height: 28px;
+                    outline: transparent;
+                    padding-bottom: 0;
+                    padding-left: 8px;
+                    padding-right: 8px;
+                    padding-top: 0;
+                    position: relative;
+                    width: auto;
+                  }
+                  &::-moz-focus-inner {
+                    border: 0;
+                  }
+                  .ms-Fabric--isFocusVisible &:focus:after {
+                    border: 1px solid #ffffff;
+                    bottom: 1px;
+                    content: "";
+                    left: 1px;
+                    outline: 1px solid #666666;
+                    position: absolute;
+                    right: 1px;
+                    top: 1px;
+                    z-index: 1;
+                  }
+                  &:active $activeSection {
+                    background-color: #0078d4;
+                  }
+                  @media screen and (-ms-high-contrast: active){&:active $activeSection {
+                    background-color: Highlight;
+                  }
+                  &:hover $activeSection {
+                    background-color: #0078d4;
+                  }
+                  @media screen and (-ms-high-contrast: active){&:hover $activeSection {
+                    background-color: Highlight;
+                  }
+                  &:active $inactiveSection {
+                    background-color: #c7e0f4;
+                  }
+                  @media screen and (-ms-high-contrast: active){&:active $inactiveSection {
+                    border-color: Highlight;
+                  }
+                  &:hover $inactiveSection {
+                    background-color: #c7e0f4;
+                  }
+                  @media screen and (-ms-high-contrast: active){&:hover $inactiveSection {
+                    border-color: Highlight;
+                  }
+                  &:active $thumb {
+                    border: 2px solid #0078d4;
+                  }
+                  @media screen and (-ms-high-contrast: active){&:active $thumb {
+                    border-color: Highlight;
+                  }
+                  &:hover $thumb {
+                    border: 2px solid #0078d4;
+                  }
+                  @media screen and (-ms-high-contrast: active){&:hover $thumb {
+                    border-color: Highlight;
+                  }
+                  & $thumb {
+                    background: #ffffff;
+                    border-color: #666666;
+                    border-radius: 10px;
+                    border-style: solid;
+                    border-width: 2px;
+                    box-sizing: border-box;
+                    display: block;
+                    height: 16px;
+                    position: absolute;
+                    top: -6px;
+                    transform: translateX(-50%);
+                    transition: left 0.367s cubic-bezier(.1,.9,.2,1);
+                    width: 16px;
+                  }
+              data-is-focusable={true}
+              id="Slider6"
+              onKeyDown={[Function]}
+              onMouseDown={[Function]}
+              onTouchStart={[Function]}
+              role="slider"
+              tabIndex={0}
+            >
+              <div
+                className=
+                    ms-Slider-line
+                    {
+                      display: flex;
+                      position: relative;
+                      width: 100%;
+                    }
+                    & $lineContainer {
+                      border-radius: 4px;
+                      box-sizing: border-box;
+                      height: 4px;
+                      width: 100%;
+                    }
+              >
+                <span
+                  className=
+                      ms-Slider-thumb
+
+                  style={
+                    Object {
+                      "left": "0%",
+                    }
+                  }
+                />
+                <span
+                  className=
+                      ms-Slider-active
+
+                      {
+                        background: #666666;
+                        transition: width 0.367s cubic-bezier(.1,.9,.2,1);
+                      }
+                      @media screen and (-ms-high-contrast: active){& {
+                        background-color: WindowText;
+                      }
+                  style={
+                    Object {
+                      "width": "0%",
+                    }
+                  }
+                />
+                <span
+                  className=
+                      ms-Slider-inactive
+
+                      {
+                        background: #c8c8c8;
+                        transition: width 0.367s cubic-bezier(.1,.9,.2,1);
+                      }
+                      @media screen and (-ms-high-contrast: active){& {
+                        border: 1px solid WindowText;
+                      }
+                  style={
+                    Object {
+                      "width": "100%",
+                    }
+                  }
+                />
+              </div>
+            </div>
+            <label
+              className=
+                  ms-Label
+                  ms-Slider-value
+                  {
+                    -moz-osx-font-smoothing: grayscale;
+                    -webkit-font-smoothing: antialiased;
+                    box-shadow: none;
+                    box-sizing: border-box;
+                    color: #333333;
+                    display: block;
+                    flex-shrink: 1;
+                    font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                    font-size: 14px;
+                    font-weight: 400;
+                    line-height: 1;
+                    margin-bottom: 0;
+                    margin-left: 8px;
+                    margin-right: 8px;
+                    margin-top: 0;
+                    overflow-wrap: break-word;
+                    padding-bottom: 5px;
+                    padding-left: 0;
+                    padding-right: 0;
+                    padding-top: 5px;
+                    white-space: nowrap;
+                    width: 40px;
+                    word-wrap: break-word;
+                  }
+            >
+              0
+            </label>
+          </div>
+        </div>
+        <div
+          className=
+              ms-Stack
+              {
+                align-items: flex-end;
+                box-sizing: border-box;
+                display: flex;
+                flex-direction: row;
+                flex-wrap: nowrap;
+                height: auto;
+                width: auto;
+              }
+              & > * {
+                text-overflow: ellipsis;
+                white-space: nowrap;
+              }
+              & > *:not(:first-child) {
+                margin-left: 20px;
+              }
+              & > *:not(.ms-StackItem) {
+                flex-shrink: 0;
+              }
+        >
+          <span
+            className=
+                ms-StackItem
+                {
+                  -moz-osx-font-smoothing: grayscale;
+                  -webkit-font-smoothing: antialiased;
+                  flex-grow: 1;
+                  font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                  font-size: 14px;
+                  font-weight: 400;
+                  height: auto;
+                  width: auto;
+                }
+          >
+            <div
+              className=
+                  ms-Dropdown-container
+
+            >
+              <label
+                className=
+                    ms-Label
+                    ms-Dropdown-label
+                    {
+                      -moz-osx-font-smoothing: grayscale;
+                      -webkit-font-smoothing: antialiased;
+                      box-shadow: none;
+                      box-sizing: border-box;
+                      color: #333333;
+                      display: inline-block;
+                      font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                      font-size: 14px;
+                      font-weight: 400;
+                      margin-bottom: 0px;
+                      margin-left: 0px;
+                      margin-right: 0px;
+                      margin-top: 0px;
+                      overflow-wrap: break-word;
+                      padding-bottom: 5px;
+                      padding-left: 0;
+                      padding-right: 0;
+                      padding-top: 5px;
+                      word-wrap: break-word;
+                    }
+                htmlFor="Dropdown7"
+                id="Dropdown7-label"
+              >
+                Vertical alignment:
+              </label>
+              <div
+                aria-activedescendant="Dropdown7-option"
+                aria-describedby="Dropdown7-option"
+                aria-expanded="false"
+                aria-labelledby="Dropdown7-label"
+                className=
+                    ms-Dropdown
+                    {
+                      -moz-osx-font-smoothing: grayscale;
+                      -webkit-font-smoothing: antialiased;
+                      box-shadow: none;
+                      box-sizing: border-box;
+                      color: #333333;
+                      font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                      font-size: 14px;
+                      font-weight: 400;
+                      margin-bottom: 0px;
+                      margin-left: 0px;
+                      margin-right: 0px;
+                      margin-top: 0px;
+                      outline: 0px;
+                      padding-bottom: 0px;
+                      padding-left: 0px;
+                      padding-right: 0px;
+                      padding-top: 0px;
+                      position: relative;
+                      user-select: none;
+                    }
+                    &:hover .ms-Dropdown-title {
+                      border-color: #212121;
+                      color: #212121;
+                    }
+                    @media screen and (-ms-high-contrast: active){&:hover .ms-Dropdown-title {
+                      border-color: Highlight;
+                    }
+                    &:focus .ms-Dropdown-title {
+                      border-color: #0078d4;
+                      color: #212121;
+                    }
+                    @media screen and (-ms-high-contrast: active){&:focus .ms-Dropdown-title {
+                      background-color: Highlight;
+                      border-color: Highlight;
+                      color: HighlightText;
+                    }
+                    @media screen and (-ms-high-contrast: active){&:focus .ms-Dropdown-title:hover {
+                      color: HighlightText;
+                    }
+                    @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: black-on-white){&:focus .ms-Dropdown-title {
+                      -ms-high-contrast-adjust: none;
+                    }
+                    &:active .ms-Dropdown-title {
+                      border-color: #005a9e;
+                      color: #212121;
+                    }
+                    @media screen and (-ms-high-contrast: active){&:active .ms-Dropdown-title {
+                      border-color: Highlight;
+                    }
+                    &:hover .ms-Dropdown-caretDown {
+                      color: #212121;
+                    }
+                    &:focus .ms-Dropdown-caretDown {
+                      color: #212121;
+                    }
+                    @media screen and (-ms-high-contrast: active){&:focus .ms-Dropdown-caretDown {
+                      color: HighlightText;
+                    }
+                    @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: black-on-white){&:focus .ms-Dropdown-caretDown {
+                      -ms-high-contrast-adjust: none;
+                    }
+                    &:active .ms-Dropdown-caretDown {
+                      color: #212121;
+                    }
+                    &:hover .ms-Dropdown-titleIsPlaceHolder {
+                      color: #666666;
+                    }
+                    &:focus .ms-Dropdown-titleIsPlaceHolder {
+                      color: #666666;
+                    }
+                    &:active .ms-Dropdown-titleIsPlaceHolder {
+                      color: #666666;
+                    }
+                    &:hover .ms-Dropdown-title--hasError {
+                      border-color: #a80000;
+                    }
+                    &:active .ms-Dropdown-title--hasError {
+                      border-color: #a80000;
+                    }
+                    &:focus .ms-Dropdown-title--hasError {
+                      border-color: #a80000;
+                    }
+                data-is-focusable={true}
+                id="Dropdown7"
+                onBlur={[Function]}
+                onChange={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onKeyDown={[Function]}
+                onKeyUp={[Function]}
+                placeholder="Select Vertical Alignment"
+                role="listbox"
+                tabIndex={0}
+              >
+                <span
+                  aria-atomic={true}
+                  aria-label="Top"
+                  aria-live="off"
+                  aria-posinset={1}
+                  aria-selected={true}
+                  aria-setsize={6}
+                  className=
+                      ms-Dropdown-title
+                      {
+                        background-color: #ffffff;
+                        border-color: #a6a6a6;
+                        border-style: solid;
+                        border-width: 1px;
+                        box-shadow: none;
+                        box-sizing: border-box;
+                        cursor: pointer;
+                        display: block;
+                        height: 32px;
+                        line-height: 30px;
+                        margin-bottom: 0px;
+                        margin-left: 0px;
+                        margin-right: 0px;
+                        margin-top: 0px;
+                        overflow: hidden;
+                        padding-bottom: 0;
+                        padding-left: 12px;
+                        padding-right: 32px;
+                        padding-top: 0;
+                        position: relative;
+                        text-overflow: ellipsis;
+                        white-space: nowrap;
+                      }
+                  id="Dropdown7-option"
+                  role="option"
+                >
+                  <span>
+                    Top
+                  </span>
+                </span>
+                <span
+                  className=
+                      ms-Dropdown-caretDownWrapper
+                      {
+                        height: 32px;
+                        line-height: 30px;
+                        position: absolute;
+                        right: 12px;
+                        top: 1px;
+                      }
+                >
+                  <i
+                    aria-hidden={true}
+                    className=
+                        ms-Dropdown-caretDown
+                        {
+                          -moz-osx-font-smoothing: grayscale;
+                          -webkit-font-smoothing: antialiased;
+                          color: #666666;
+                          display: inline-block;
+                          font-family: "FabricMDL2Icons";
+                          font-size: 12px;
+                          font-style: normal;
+                          font-weight: normal;
+                          pointer-events: none;
+                          speak: none;
+                        }
+                    data-icon-name="ChevronDown"
+                    role="presentation"
+                  >
+                    
+                  </i>
+                </span>
+              </div>
+            </div>
+          </span>
+          <span
+            className=
+                ms-StackItem
+                {
+                  -moz-osx-font-smoothing: grayscale;
+                  -webkit-font-smoothing: antialiased;
+                  flex-grow: 1;
+                  font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                  font-size: 14px;
+                  font-weight: 400;
+                  height: auto;
+                  width: auto;
+                }
+          >
+            <div
+              className=
+                  ms-Dropdown-container
+
+            >
+              <label
+                className=
+                    ms-Label
+                    ms-Dropdown-label
+                    {
+                      -moz-osx-font-smoothing: grayscale;
+                      -webkit-font-smoothing: antialiased;
+                      box-shadow: none;
+                      box-sizing: border-box;
+                      color: #333333;
+                      display: inline-block;
+                      font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                      font-size: 14px;
+                      font-weight: 400;
+                      margin-bottom: 0px;
+                      margin-left: 0px;
+                      margin-right: 0px;
+                      margin-top: 0px;
+                      overflow-wrap: break-word;
+                      padding-bottom: 5px;
+                      padding-left: 0;
+                      padding-right: 0;
+                      padding-top: 5px;
+                      word-wrap: break-word;
+                    }
+                htmlFor="Dropdown8"
+                id="Dropdown8-label"
+              >
+                Horizontal alignment:
+              </label>
+              <div
+                aria-activedescendant="Dropdown8-option"
+                aria-describedby="Dropdown8-option"
+                aria-expanded="false"
+                aria-labelledby="Dropdown8-label"
+                className=
+                    ms-Dropdown
+                    {
+                      -moz-osx-font-smoothing: grayscale;
+                      -webkit-font-smoothing: antialiased;
+                      box-shadow: none;
+                      box-sizing: border-box;
+                      color: #333333;
+                      font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                      font-size: 14px;
+                      font-weight: 400;
+                      margin-bottom: 0px;
+                      margin-left: 0px;
+                      margin-right: 0px;
+                      margin-top: 0px;
+                      outline: 0px;
+                      padding-bottom: 0px;
+                      padding-left: 0px;
+                      padding-right: 0px;
+                      padding-top: 0px;
+                      position: relative;
+                      user-select: none;
+                    }
+                    &:hover .ms-Dropdown-title {
+                      border-color: #212121;
+                      color: #212121;
+                    }
+                    @media screen and (-ms-high-contrast: active){&:hover .ms-Dropdown-title {
+                      border-color: Highlight;
+                    }
+                    &:focus .ms-Dropdown-title {
+                      border-color: #0078d4;
+                      color: #212121;
+                    }
+                    @media screen and (-ms-high-contrast: active){&:focus .ms-Dropdown-title {
+                      background-color: Highlight;
+                      border-color: Highlight;
+                      color: HighlightText;
+                    }
+                    @media screen and (-ms-high-contrast: active){&:focus .ms-Dropdown-title:hover {
+                      color: HighlightText;
+                    }
+                    @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: black-on-white){&:focus .ms-Dropdown-title {
+                      -ms-high-contrast-adjust: none;
+                    }
+                    &:active .ms-Dropdown-title {
+                      border-color: #005a9e;
+                      color: #212121;
+                    }
+                    @media screen and (-ms-high-contrast: active){&:active .ms-Dropdown-title {
+                      border-color: Highlight;
+                    }
+                    &:hover .ms-Dropdown-caretDown {
+                      color: #212121;
+                    }
+                    &:focus .ms-Dropdown-caretDown {
+                      color: #212121;
+                    }
+                    @media screen and (-ms-high-contrast: active){&:focus .ms-Dropdown-caretDown {
+                      color: HighlightText;
+                    }
+                    @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: black-on-white){&:focus .ms-Dropdown-caretDown {
+                      -ms-high-contrast-adjust: none;
+                    }
+                    &:active .ms-Dropdown-caretDown {
+                      color: #212121;
+                    }
+                    &:hover .ms-Dropdown-titleIsPlaceHolder {
+                      color: #666666;
+                    }
+                    &:focus .ms-Dropdown-titleIsPlaceHolder {
+                      color: #666666;
+                    }
+                    &:active .ms-Dropdown-titleIsPlaceHolder {
+                      color: #666666;
+                    }
+                    &:hover .ms-Dropdown-title--hasError {
+                      border-color: #a80000;
+                    }
+                    &:active .ms-Dropdown-title--hasError {
+                      border-color: #a80000;
+                    }
+                    &:focus .ms-Dropdown-title--hasError {
+                      border-color: #a80000;
+                    }
+                data-is-focusable={true}
+                id="Dropdown8"
+                onBlur={[Function]}
+                onChange={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onKeyDown={[Function]}
+                onKeyUp={[Function]}
+                placeholder="Select Horizontal Alignment"
+                role="listbox"
+                tabIndex={0}
+              >
+                <span
+                  aria-atomic={true}
+                  aria-label="Left"
+                  aria-live="off"
+                  aria-posinset={1}
+                  aria-selected={true}
+                  aria-setsize={3}
+                  className=
+                      ms-Dropdown-title
+                      {
+                        background-color: #ffffff;
+                        border-color: #a6a6a6;
+                        border-style: solid;
+                        border-width: 1px;
+                        box-shadow: none;
+                        box-sizing: border-box;
+                        cursor: pointer;
+                        display: block;
+                        height: 32px;
+                        line-height: 30px;
+                        margin-bottom: 0px;
+                        margin-left: 0px;
+                        margin-right: 0px;
+                        margin-top: 0px;
+                        overflow: hidden;
+                        padding-bottom: 0;
+                        padding-left: 12px;
+                        padding-right: 32px;
+                        padding-top: 0;
+                        position: relative;
+                        text-overflow: ellipsis;
+                        white-space: nowrap;
+                      }
+                  id="Dropdown8-option"
+                  role="option"
+                >
+                  <span>
+                    Left
+                  </span>
+                </span>
+                <span
+                  className=
+                      ms-Dropdown-caretDownWrapper
+                      {
+                        height: 32px;
+                        line-height: 30px;
+                        position: absolute;
+                        right: 12px;
+                        top: 1px;
+                      }
+                >
+                  <i
+                    aria-hidden={true}
+                    className=
+                        ms-Dropdown-caretDown
+                        {
+                          -moz-osx-font-smoothing: grayscale;
+                          -webkit-font-smoothing: antialiased;
+                          color: #666666;
+                          display: inline-block;
+                          font-family: "FabricMDL2Icons";
+                          font-size: 12px;
+                          font-style: normal;
+                          font-weight: normal;
+                          pointer-events: none;
+                          speak: none;
+                        }
+                    data-icon-name="ChevronDown"
+                    role="presentation"
+                  >
+                    
+                  </i>
+                </span>
+              </div>
+            </div>
+          </span>
+          <span
+            className=
+                ms-StackItem
+                {
+                  -moz-osx-font-smoothing: grayscale;
+                  -webkit-font-smoothing: antialiased;
+                  flex-shrink: 0;
+                  font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                  font-size: 14px;
+                  font-weight: 400;
+                  height: auto;
+                  width: auto;
+                }
+          >
+            <button
+              aria-checked={false}
+              className=
+                  ms-Checkbox
+                  is-enabled
+                  {
+                    -moz-osx-font-smoothing: grayscale;
+                    -webkit-font-smoothing: antialiased;
+                    background: none;
+                    border: none;
+                    cursor: pointer;
+                    display: block;
+                    font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                    font-size: 14px;
+                    font-weight: 400;
+                    margin-bottom: 0;
+                    margin-left: 0;
+                    margin-right: 0;
+                    margin-top: 0;
+                    outline: none;
+                    padding-bottom: 0;
+                    padding-left: 0;
+                    padding-right: 0;
+                    padding-top: 0;
+                    position: relative;
+                  }
+                  &::-moz-focus-inner {
+                    border: 0;
+                  }
+                  .ms-Fabric--isFocusVisible &:focus:after {
+                    border: 1px solid #ffffff;
+                    bottom: -2px;
+                    content: "";
+                    left: -2px;
+                    outline: 1px solid #666666;
+                    position: absolute;
+                    right: -2px;
+                    top: -2px;
+                    z-index: 1;
+                  }
+                  &:hover .ms-Checkbox-checkbox {
+                    border-color: #333333;
+                  }
+                  @media screen and (-ms-high-contrast: active){&:hover .ms-Checkbox-checkbox {
+                    border-color: Highlight;
+                  }
+                  &:focus .ms-Checkbox-checkbox {
+                    border-color: #333333;
+                  }
+                  &:hover .ms-Checkbox-checkmark {
+                    color: #a6a6a6;
+                    opacity: 1;
+                  }
+                  @media screen and (-ms-high-contrast: active){&:hover .ms-Checkbox-checkmark {
+                    color: Highlight;
+                  }
+                  &:hover .ms-Checkbox-text {
+                    color: #333333;
+                  }
+                  &:focus .ms-Checkbox-text {
+                    color: #333333;
+                  }
+              id="checkbox-9"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              role="checkbox"
+              type="button"
+            >
+              <label
+                className=
+                    ms-Checkbox-label
+                    {
+                      align-items: flex-start;
+                      cursor: pointer;
+                      display: flex;
+                      margin-bottom: 0;
+                      margin-left: -4px;
+                      margin-right: -4px;
+                      margin-top: 0;
+                      position: relative;
+                      text-align: left;
+                      user-select: none;
+                    }
+                htmlFor="checkbox-9"
+              >
+                <div
+                  className=
+                      ms-Checkbox-checkbox
+                      {
+                        align-items: center;
+                        border-color: #666666;
+                        border-style: solid;
+                        border-width: 1px;
+                        box-sizing: border-box;
+                        display: flex;
+                        flex-shrink: 0;
+                        height: 20px;
+                        justify-content: center;
+                        margin-bottom: 0;
+                        margin-left: 4px;
+                        margin-right: 4px;
+                        margin-top: 0;
+                        overflow: hidden;
+                        transition-duration: 200ms;
+                        transition-property: background, border, border-color;
+                        transition-timing-function: cubic-bezier(.4, 0, .23, 1);
+                        width: 20px;
+                      }
+                >
+                  <i
+                    aria-hidden={true}
+                    className=
+                        ms-Checkbox-checkmark
+                        {
+                          -moz-osx-font-smoothing: grayscale;
+                          -webkit-font-smoothing: antialiased;
+                          color: #ffffff;
+                          display: inline-block;
+                          font-family: "FabricMDL2Icons";
+                          font-style: normal;
+                          font-weight: normal;
+                          opacity: 0;
+                          speak: none;
+                        }
+                        @media screen and (-ms-high-contrast: active){& {
+                          -ms-high-contrast-adjust: none;
+                          color: Window;
+                        }
+                    data-icon-name="CheckMark"
+                    role="presentation"
+                  >
+                    
+                  </i>
+                </div>
+                <span
+                  className=
+                      ms-Checkbox-text
+                      {
+                        color: #333333;
+                        font-size: 14px;
+                        line-height: 20px;
+                        margin-bottom: 0;
+                        margin-left: 4px;
+                        margin-right: 4px;
+                        margin-top: 0;
+                      }
+                >
+                  Hide empty children
+                </span>
+              </label>
+            </button>
+          </span>
+          <span
+            className=
+                ms-StackItem
+                {
+                  -moz-osx-font-smoothing: grayscale;
+                  -webkit-font-smoothing: antialiased;
+                  flex-grow: 1;
+                  font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                  font-size: 14px;
+                  font-weight: 400;
+                  height: auto;
+                  width: auto;
+                }
+          >
+            <div
+              className=
+                  ms-TextField
+                  {
+                    box-shadow: none;
+                    box-sizing: border-box;
+                    margin-bottom: 0px;
+                    margin-left: 0px;
+                    margin-right: 0px;
+                    margin-top: 0px;
+                    padding-bottom: 0px;
+                    padding-left: 0px;
+                    padding-right: 0px;
+                    padding-top: 0px;
+                    position: relative;
+                  }
+                  @media screen and (-ms-high-contrast: active){& {
+                    border-width: 2px;
+                  }
+            >
+              <div
+                className=
+                    ms-TextField-wrapper
+
+              >
+                <label
+                  className=
+                      ms-Label
+                      {
+                        -moz-osx-font-smoothing: grayscale;
+                        -webkit-font-smoothing: antialiased;
+                        box-shadow: none;
+                        box-sizing: border-box;
+                        color: #333333;
+                        display: block;
+                        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                        font-size: 14px;
+                        font-weight: 400;
+                        margin-bottom: 0px;
+                        margin-left: 0px;
+                        margin-right: 0px;
+                        margin-top: 0px;
+                        overflow-wrap: break-word;
+                        padding-bottom: 5px;
+                        padding-left: 0;
+                        padding-right: 0;
+                        padding-top: 5px;
+                        word-wrap: break-word;
+                      }
+                  htmlFor="TextField10"
+                >
+                  List of empty children (e.g. 1 2 3):
+                </label>
+                <div
+                  className=
+                      ms-TextField-fieldGroup
+                      {
+                        align-items: stretch;
+                        background: #ffffff;
+                        border: 1px solid #a6a6a6;
+                        box-shadow: none;
+                        box-sizing: border-box;
+                        display: flex;
+                        flex-direction: row;
+                        height: 32px;
+                        margin-bottom: 0px;
+                        margin-left: 0px;
+                        margin-right: 0px;
+                        margin-top: 0px;
+                        padding-bottom: 0px;
+                        padding-left: 0px;
+                        padding-right: 0px;
+                        padding-top: 0px;
+                        position: relative;
+                      }
+                      &:hover {
+                        border-color: #333333;
+                      }
+                      @media screen and (-ms-high-contrast: active){&:hover {
+                        border-color: Highlight;
+                      }
+                >
+                  <input
+                    aria-invalid={false}
+                    className=
+                        ms-TextField-field
+                        {
+                          background-color: transparent;
+                          background: none;
+                          border-radius: 0px;
+                          border: none;
+                          box-shadow: none;
+                          box-sizing: border-box;
+                          color: #333333;
+                          font-size: 14px;
+                          margin-bottom: 0px;
+                          margin-left: 0px;
+                          margin-right: 0px;
+                          margin-top: 0px;
+                          min-width: 0px;
+                          outline: 0px;
+                          padding-bottom: 0;
+                          padding-left: 12px;
+                          padding-right: 12px;
+                          padding-top: 0;
+                          text-overflow: ellipsis;
+                          width: 100%;
+                        }
+                        &:active, &:focus, &:hover {
+                          outline: 0px;
+                        }
+                        &::-ms-clear {
+                          display: none;
+                        }
+                        &::placeholder {
+                          color: #666666;
+                          opacity: 1;
+                        }
+                        &:-ms-input-placeholder {
+                          color: #666666;
+                          opacity: 1;
+                        }
+                    id="TextField10"
+                    onBlur={[Function]}
+                    onChange={[Function]}
+                    onFocus={[Function]}
+                    onInput={[Function]}
+                    type="text"
+                    value=""
+                  />
+                </div>
+              </div>
+            </div>
+          </span>
+        </div>
+      </div>
+    </span>
+    <span
+      className=
+          ms-StackItem
+          {
+            -moz-osx-font-smoothing: grayscale;
+            -webkit-font-smoothing: antialiased;
+            flex-grow: 1;
+            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+            font-size: 14px;
+            font-weight: 400;
+            height: auto;
+            width: auto;
+          }
+    >
+      <div
+        className=
+            ms-Stack
+            {
+              box-sizing: border-box;
+              display: flex;
+              flex-direction: column;
+              flex-wrap: nowrap;
+              height: auto;
+              width: auto;
+            }
+            & > * {
+              text-overflow: ellipsis;
+              white-space: nowrap;
+            }
+            & > *:not(:first-child) {
+              margin-top: 0px;
+            }
+            & > *:not(.ms-StackItem) {
+              flex-shrink: 0;
+            }
+      >
+        <div
+          className=
+              ms-Slider
+              ms-Slider-enabled
+              ms-Slider-row
+              {
+                -moz-osx-font-smoothing: grayscale;
+                -webkit-font-smoothing: antialiased;
+                font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                font-size: 14px;
+                font-weight: 400;
+                user-select: none;
+              }
+        >
+          <label
+            className=
+                ms-Label
+                {
+                  -moz-osx-font-smoothing: grayscale;
+                  -webkit-font-smoothing: antialiased;
+                  box-shadow: none;
+                  box-sizing: border-box;
+                  color: #333333;
+                  display: block;
+                  font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                  font-size: 14px;
+                  font-weight: 400;
+                  margin-bottom: 0px;
+                  margin-left: 0px;
+                  margin-right: 0px;
+                  margin-top: 0px;
+                  overflow-wrap: break-word;
+                  padding-bottom: 0px;
+                  padding-left: 0px;
+                  padding-right: 0px;
+                  padding-top: 0px;
+                  word-wrap: break-word;
+                }
+            htmlFor="Slider12"
+          >
+            Left padding:
+          </label>
+          <div
+            className=
+                ms-Slider-container
+                {
+                  align-items: center;
+                  display: flex;
+                  flex-wrap: nowrap;
+                }
+          >
+            <div
+              aria-disabled={false}
+              aria-label="Left padding:"
+              aria-valuemax={50}
+              aria-valuemin={0}
+              aria-valuenow={0}
+              className=
+                  ms-Slider-slideBox
+                  ms-Slider-showValue
+                  ms-Slider-showTransitions
+                  {
+                    align-items: center;
+                    background: transparent;
+                    border: none;
+                    display: flex;
+                    flex-grow: 1;
+                    height: 28px;
+                    line-height: 28px;
+                    outline: transparent;
+                    padding-bottom: 0;
+                    padding-left: 8px;
+                    padding-right: 8px;
+                    padding-top: 0;
+                    position: relative;
+                    width: auto;
+                  }
+                  &::-moz-focus-inner {
+                    border: 0;
+                  }
+                  .ms-Fabric--isFocusVisible &:focus:after {
+                    border: 1px solid #ffffff;
+                    bottom: 1px;
+                    content: "";
+                    left: 1px;
+                    outline: 1px solid #666666;
+                    position: absolute;
+                    right: 1px;
+                    top: 1px;
+                    z-index: 1;
+                  }
+                  &:active $activeSection {
+                    background-color: #0078d4;
+                  }
+                  @media screen and (-ms-high-contrast: active){&:active $activeSection {
+                    background-color: Highlight;
+                  }
+                  &:hover $activeSection {
+                    background-color: #0078d4;
+                  }
+                  @media screen and (-ms-high-contrast: active){&:hover $activeSection {
+                    background-color: Highlight;
+                  }
+                  &:active $inactiveSection {
+                    background-color: #c7e0f4;
+                  }
+                  @media screen and (-ms-high-contrast: active){&:active $inactiveSection {
+                    border-color: Highlight;
+                  }
+                  &:hover $inactiveSection {
+                    background-color: #c7e0f4;
+                  }
+                  @media screen and (-ms-high-contrast: active){&:hover $inactiveSection {
+                    border-color: Highlight;
+                  }
+                  &:active $thumb {
+                    border: 2px solid #0078d4;
+                  }
+                  @media screen and (-ms-high-contrast: active){&:active $thumb {
+                    border-color: Highlight;
+                  }
+                  &:hover $thumb {
+                    border: 2px solid #0078d4;
+                  }
+                  @media screen and (-ms-high-contrast: active){&:hover $thumb {
+                    border-color: Highlight;
+                  }
+                  & $thumb {
+                    background: #ffffff;
+                    border-color: #666666;
+                    border-radius: 10px;
+                    border-style: solid;
+                    border-width: 2px;
+                    box-sizing: border-box;
+                    display: block;
+                    height: 16px;
+                    position: absolute;
+                    top: -6px;
+                    transform: translateX(-50%);
+                    transition: left 0.367s cubic-bezier(.1,.9,.2,1);
+                    width: 16px;
+                  }
+              data-is-focusable={true}
+              id="Slider12"
+              onKeyDown={[Function]}
+              onMouseDown={[Function]}
+              onTouchStart={[Function]}
+              role="slider"
+              tabIndex={0}
+            >
+              <div
+                className=
+                    ms-Slider-line
+                    {
+                      display: flex;
+                      position: relative;
+                      width: 100%;
+                    }
+                    & $lineContainer {
+                      border-radius: 4px;
+                      box-sizing: border-box;
+                      height: 4px;
+                      width: 100%;
+                    }
+              >
+                <span
+                  className=
+                      ms-Slider-thumb
+
+                  style={
+                    Object {
+                      "left": "0%",
+                    }
+                  }
+                />
+                <span
+                  className=
+                      ms-Slider-active
+
+                      {
+                        background: #666666;
+                        transition: width 0.367s cubic-bezier(.1,.9,.2,1);
+                      }
+                      @media screen and (-ms-high-contrast: active){& {
+                        background-color: WindowText;
+                      }
+                  style={
+                    Object {
+                      "width": "0%",
+                    }
+                  }
+                />
+                <span
+                  className=
+                      ms-Slider-inactive
+
+                      {
+                        background: #c8c8c8;
+                        transition: width 0.367s cubic-bezier(.1,.9,.2,1);
+                      }
+                      @media screen and (-ms-high-contrast: active){& {
+                        border: 1px solid WindowText;
+                      }
+                  style={
+                    Object {
+                      "width": "100%",
+                    }
+                  }
+                />
+              </div>
+            </div>
+            <label
+              className=
+                  ms-Label
+                  ms-Slider-value
+                  {
+                    -moz-osx-font-smoothing: grayscale;
+                    -webkit-font-smoothing: antialiased;
+                    box-shadow: none;
+                    box-sizing: border-box;
+                    color: #333333;
+                    display: block;
+                    flex-shrink: 1;
+                    font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                    font-size: 14px;
+                    font-weight: 400;
+                    line-height: 1;
+                    margin-bottom: 0;
+                    margin-left: 8px;
+                    margin-right: 8px;
+                    margin-top: 0;
+                    overflow-wrap: break-word;
+                    padding-bottom: 5px;
+                    padding-left: 0;
+                    padding-right: 0;
+                    padding-top: 5px;
+                    white-space: nowrap;
+                    width: 40px;
+                    word-wrap: break-word;
+                  }
+            >
+              0
+            </label>
+          </div>
+        </div>
+        <div
+          className=
+              ms-Slider
+              ms-Slider-enabled
+              ms-Slider-row
+              {
+                -moz-osx-font-smoothing: grayscale;
+                -webkit-font-smoothing: antialiased;
+                font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                font-size: 14px;
+                font-weight: 400;
+                user-select: none;
+              }
+        >
+          <label
+            className=
+                ms-Label
+                {
+                  -moz-osx-font-smoothing: grayscale;
+                  -webkit-font-smoothing: antialiased;
+                  box-shadow: none;
+                  box-sizing: border-box;
+                  color: #333333;
+                  display: block;
+                  font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                  font-size: 14px;
+                  font-weight: 400;
+                  margin-bottom: 0px;
+                  margin-left: 0px;
+                  margin-right: 0px;
+                  margin-top: 0px;
+                  overflow-wrap: break-word;
+                  padding-bottom: 0px;
+                  padding-left: 0px;
+                  padding-right: 0px;
+                  padding-top: 0px;
+                  word-wrap: break-word;
+                }
+            htmlFor="Slider13"
+          >
+            Right padding:
+          </label>
+          <div
+            className=
+                ms-Slider-container
+                {
+                  align-items: center;
+                  display: flex;
+                  flex-wrap: nowrap;
+                }
+          >
+            <div
+              aria-disabled={false}
+              aria-label="Right padding:"
+              aria-valuemax={50}
+              aria-valuemin={0}
+              aria-valuenow={0}
+              className=
+                  ms-Slider-slideBox
+                  ms-Slider-showValue
+                  ms-Slider-showTransitions
+                  {
+                    align-items: center;
+                    background: transparent;
+                    border: none;
+                    display: flex;
+                    flex-grow: 1;
+                    height: 28px;
+                    line-height: 28px;
+                    outline: transparent;
+                    padding-bottom: 0;
+                    padding-left: 8px;
+                    padding-right: 8px;
+                    padding-top: 0;
+                    position: relative;
+                    width: auto;
+                  }
+                  &::-moz-focus-inner {
+                    border: 0;
+                  }
+                  .ms-Fabric--isFocusVisible &:focus:after {
+                    border: 1px solid #ffffff;
+                    bottom: 1px;
+                    content: "";
+                    left: 1px;
+                    outline: 1px solid #666666;
+                    position: absolute;
+                    right: 1px;
+                    top: 1px;
+                    z-index: 1;
+                  }
+                  &:active $activeSection {
+                    background-color: #0078d4;
+                  }
+                  @media screen and (-ms-high-contrast: active){&:active $activeSection {
+                    background-color: Highlight;
+                  }
+                  &:hover $activeSection {
+                    background-color: #0078d4;
+                  }
+                  @media screen and (-ms-high-contrast: active){&:hover $activeSection {
+                    background-color: Highlight;
+                  }
+                  &:active $inactiveSection {
+                    background-color: #c7e0f4;
+                  }
+                  @media screen and (-ms-high-contrast: active){&:active $inactiveSection {
+                    border-color: Highlight;
+                  }
+                  &:hover $inactiveSection {
+                    background-color: #c7e0f4;
+                  }
+                  @media screen and (-ms-high-contrast: active){&:hover $inactiveSection {
+                    border-color: Highlight;
+                  }
+                  &:active $thumb {
+                    border: 2px solid #0078d4;
+                  }
+                  @media screen and (-ms-high-contrast: active){&:active $thumb {
+                    border-color: Highlight;
+                  }
+                  &:hover $thumb {
+                    border: 2px solid #0078d4;
+                  }
+                  @media screen and (-ms-high-contrast: active){&:hover $thumb {
+                    border-color: Highlight;
+                  }
+                  & $thumb {
+                    background: #ffffff;
+                    border-color: #666666;
+                    border-radius: 10px;
+                    border-style: solid;
+                    border-width: 2px;
+                    box-sizing: border-box;
+                    display: block;
+                    height: 16px;
+                    position: absolute;
+                    top: -6px;
+                    transform: translateX(-50%);
+                    transition: left 0.367s cubic-bezier(.1,.9,.2,1);
+                    width: 16px;
+                  }
+              data-is-focusable={true}
+              id="Slider13"
+              onKeyDown={[Function]}
+              onMouseDown={[Function]}
+              onTouchStart={[Function]}
+              role="slider"
+              tabIndex={0}
+            >
+              <div
+                className=
+                    ms-Slider-line
+                    {
+                      display: flex;
+                      position: relative;
+                      width: 100%;
+                    }
+                    & $lineContainer {
+                      border-radius: 4px;
+                      box-sizing: border-box;
+                      height: 4px;
+                      width: 100%;
+                    }
+              >
+                <span
+                  className=
+                      ms-Slider-thumb
+
+                  style={
+                    Object {
+                      "left": "0%",
+                    }
+                  }
+                />
+                <span
+                  className=
+                      ms-Slider-active
+
+                      {
+                        background: #666666;
+                        transition: width 0.367s cubic-bezier(.1,.9,.2,1);
+                      }
+                      @media screen and (-ms-high-contrast: active){& {
+                        background-color: WindowText;
+                      }
+                  style={
+                    Object {
+                      "width": "0%",
+                    }
+                  }
+                />
+                <span
+                  className=
+                      ms-Slider-inactive
+
+                      {
+                        background: #c8c8c8;
+                        transition: width 0.367s cubic-bezier(.1,.9,.2,1);
+                      }
+                      @media screen and (-ms-high-contrast: active){& {
+                        border: 1px solid WindowText;
+                      }
+                  style={
+                    Object {
+                      "width": "100%",
+                    }
+                  }
+                />
+              </div>
+            </div>
+            <label
+              className=
+                  ms-Label
+                  ms-Slider-value
+                  {
+                    -moz-osx-font-smoothing: grayscale;
+                    -webkit-font-smoothing: antialiased;
+                    box-shadow: none;
+                    box-sizing: border-box;
+                    color: #333333;
+                    display: block;
+                    flex-shrink: 1;
+                    font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                    font-size: 14px;
+                    font-weight: 400;
+                    line-height: 1;
+                    margin-bottom: 0;
+                    margin-left: 8px;
+                    margin-right: 8px;
+                    margin-top: 0;
+                    overflow-wrap: break-word;
+                    padding-bottom: 5px;
+                    padding-left: 0;
+                    padding-right: 0;
+                    padding-top: 5px;
+                    white-space: nowrap;
+                    width: 40px;
+                    word-wrap: break-word;
+                  }
+            >
+              0
+            </label>
+          </div>
+        </div>
+      </div>
+    </span>
+    <span
+      className=
+          ms-StackItem
+          {
+            -moz-osx-font-smoothing: grayscale;
+            -webkit-font-smoothing: antialiased;
+            flex-grow: 1;
+            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+            font-size: 14px;
+            font-weight: 400;
+            height: auto;
+            width: auto;
+          }
+    >
+      <div
+        className=
+            ms-Stack
+            {
+              box-sizing: border-box;
+              display: flex;
+              flex-direction: column;
+              flex-wrap: nowrap;
+              height: auto;
+              width: auto;
+            }
+            & > * {
+              text-overflow: ellipsis;
+              white-space: nowrap;
+            }
+            & > *:not(:first-child) {
+              margin-top: 0px;
+            }
+            & > *:not(.ms-StackItem) {
+              flex-shrink: 0;
+            }
+      >
+        <div
+          className=
+              ms-Slider
+              ms-Slider-enabled
+              ms-Slider-row
+              {
+                -moz-osx-font-smoothing: grayscale;
+                -webkit-font-smoothing: antialiased;
+                font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                font-size: 14px;
+                font-weight: 400;
+                user-select: none;
+              }
+        >
+          <label
+            className=
+                ms-Label
+                {
+                  -moz-osx-font-smoothing: grayscale;
+                  -webkit-font-smoothing: antialiased;
+                  box-shadow: none;
+                  box-sizing: border-box;
+                  color: #333333;
+                  display: block;
+                  font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                  font-size: 14px;
+                  font-weight: 400;
+                  margin-bottom: 0px;
+                  margin-left: 0px;
+                  margin-right: 0px;
+                  margin-top: 0px;
+                  overflow-wrap: break-word;
+                  padding-bottom: 0px;
+                  padding-left: 0px;
+                  padding-right: 0px;
+                  padding-top: 0px;
+                  word-wrap: break-word;
+                }
+            htmlFor="Slider14"
+          >
+            Top padding:
+          </label>
+          <div
+            className=
+                ms-Slider-container
+                {
+                  align-items: center;
+                  display: flex;
+                  flex-wrap: nowrap;
+                }
+          >
+            <div
+              aria-disabled={false}
+              aria-label="Top padding:"
+              aria-valuemax={50}
+              aria-valuemin={0}
+              aria-valuenow={0}
+              className=
+                  ms-Slider-slideBox
+                  ms-Slider-showValue
+                  ms-Slider-showTransitions
+                  {
+                    align-items: center;
+                    background: transparent;
+                    border: none;
+                    display: flex;
+                    flex-grow: 1;
+                    height: 28px;
+                    line-height: 28px;
+                    outline: transparent;
+                    padding-bottom: 0;
+                    padding-left: 8px;
+                    padding-right: 8px;
+                    padding-top: 0;
+                    position: relative;
+                    width: auto;
+                  }
+                  &::-moz-focus-inner {
+                    border: 0;
+                  }
+                  .ms-Fabric--isFocusVisible &:focus:after {
+                    border: 1px solid #ffffff;
+                    bottom: 1px;
+                    content: "";
+                    left: 1px;
+                    outline: 1px solid #666666;
+                    position: absolute;
+                    right: 1px;
+                    top: 1px;
+                    z-index: 1;
+                  }
+                  &:active $activeSection {
+                    background-color: #0078d4;
+                  }
+                  @media screen and (-ms-high-contrast: active){&:active $activeSection {
+                    background-color: Highlight;
+                  }
+                  &:hover $activeSection {
+                    background-color: #0078d4;
+                  }
+                  @media screen and (-ms-high-contrast: active){&:hover $activeSection {
+                    background-color: Highlight;
+                  }
+                  &:active $inactiveSection {
+                    background-color: #c7e0f4;
+                  }
+                  @media screen and (-ms-high-contrast: active){&:active $inactiveSection {
+                    border-color: Highlight;
+                  }
+                  &:hover $inactiveSection {
+                    background-color: #c7e0f4;
+                  }
+                  @media screen and (-ms-high-contrast: active){&:hover $inactiveSection {
+                    border-color: Highlight;
+                  }
+                  &:active $thumb {
+                    border: 2px solid #0078d4;
+                  }
+                  @media screen and (-ms-high-contrast: active){&:active $thumb {
+                    border-color: Highlight;
+                  }
+                  &:hover $thumb {
+                    border: 2px solid #0078d4;
+                  }
+                  @media screen and (-ms-high-contrast: active){&:hover $thumb {
+                    border-color: Highlight;
+                  }
+                  & $thumb {
+                    background: #ffffff;
+                    border-color: #666666;
+                    border-radius: 10px;
+                    border-style: solid;
+                    border-width: 2px;
+                    box-sizing: border-box;
+                    display: block;
+                    height: 16px;
+                    position: absolute;
+                    top: -6px;
+                    transform: translateX(-50%);
+                    transition: left 0.367s cubic-bezier(.1,.9,.2,1);
+                    width: 16px;
+                  }
+              data-is-focusable={true}
+              id="Slider14"
+              onKeyDown={[Function]}
+              onMouseDown={[Function]}
+              onTouchStart={[Function]}
+              role="slider"
+              tabIndex={0}
+            >
+              <div
+                className=
+                    ms-Slider-line
+                    {
+                      display: flex;
+                      position: relative;
+                      width: 100%;
+                    }
+                    & $lineContainer {
+                      border-radius: 4px;
+                      box-sizing: border-box;
+                      height: 4px;
+                      width: 100%;
+                    }
+              >
+                <span
+                  className=
+                      ms-Slider-thumb
+
+                  style={
+                    Object {
+                      "left": "0%",
+                    }
+                  }
+                />
+                <span
+                  className=
+                      ms-Slider-active
+
+                      {
+                        background: #666666;
+                        transition: width 0.367s cubic-bezier(.1,.9,.2,1);
+                      }
+                      @media screen and (-ms-high-contrast: active){& {
+                        background-color: WindowText;
+                      }
+                  style={
+                    Object {
+                      "width": "0%",
+                    }
+                  }
+                />
+                <span
+                  className=
+                      ms-Slider-inactive
+
+                      {
+                        background: #c8c8c8;
+                        transition: width 0.367s cubic-bezier(.1,.9,.2,1);
+                      }
+                      @media screen and (-ms-high-contrast: active){& {
+                        border: 1px solid WindowText;
+                      }
+                  style={
+                    Object {
+                      "width": "100%",
+                    }
+                  }
+                />
+              </div>
+            </div>
+            <label
+              className=
+                  ms-Label
+                  ms-Slider-value
+                  {
+                    -moz-osx-font-smoothing: grayscale;
+                    -webkit-font-smoothing: antialiased;
+                    box-shadow: none;
+                    box-sizing: border-box;
+                    color: #333333;
+                    display: block;
+                    flex-shrink: 1;
+                    font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                    font-size: 14px;
+                    font-weight: 400;
+                    line-height: 1;
+                    margin-bottom: 0;
+                    margin-left: 8px;
+                    margin-right: 8px;
+                    margin-top: 0;
+                    overflow-wrap: break-word;
+                    padding-bottom: 5px;
+                    padding-left: 0;
+                    padding-right: 0;
+                    padding-top: 5px;
+                    white-space: nowrap;
+                    width: 40px;
+                    word-wrap: break-word;
+                  }
+            >
+              0
+            </label>
+          </div>
+        </div>
+        <div
+          className=
+              ms-Slider
+              ms-Slider-enabled
+              ms-Slider-row
+              {
+                -moz-osx-font-smoothing: grayscale;
+                -webkit-font-smoothing: antialiased;
+                font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                font-size: 14px;
+                font-weight: 400;
+                user-select: none;
+              }
+        >
+          <label
+            className=
+                ms-Label
+                {
+                  -moz-osx-font-smoothing: grayscale;
+                  -webkit-font-smoothing: antialiased;
+                  box-shadow: none;
+                  box-sizing: border-box;
+                  color: #333333;
+                  display: block;
+                  font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                  font-size: 14px;
+                  font-weight: 400;
+                  margin-bottom: 0px;
+                  margin-left: 0px;
+                  margin-right: 0px;
+                  margin-top: 0px;
+                  overflow-wrap: break-word;
+                  padding-bottom: 0px;
+                  padding-left: 0px;
+                  padding-right: 0px;
+                  padding-top: 0px;
+                  word-wrap: break-word;
+                }
+            htmlFor="Slider15"
+          >
+            Bottom padding:
+          </label>
+          <div
+            className=
+                ms-Slider-container
+                {
+                  align-items: center;
+                  display: flex;
+                  flex-wrap: nowrap;
+                }
+          >
+            <div
+              aria-disabled={false}
+              aria-label="Bottom padding:"
+              aria-valuemax={50}
+              aria-valuemin={0}
+              aria-valuenow={0}
+              className=
+                  ms-Slider-slideBox
+                  ms-Slider-showValue
+                  ms-Slider-showTransitions
+                  {
+                    align-items: center;
+                    background: transparent;
+                    border: none;
+                    display: flex;
+                    flex-grow: 1;
+                    height: 28px;
+                    line-height: 28px;
+                    outline: transparent;
+                    padding-bottom: 0;
+                    padding-left: 8px;
+                    padding-right: 8px;
+                    padding-top: 0;
+                    position: relative;
+                    width: auto;
+                  }
+                  &::-moz-focus-inner {
+                    border: 0;
+                  }
+                  .ms-Fabric--isFocusVisible &:focus:after {
+                    border: 1px solid #ffffff;
+                    bottom: 1px;
+                    content: "";
+                    left: 1px;
+                    outline: 1px solid #666666;
+                    position: absolute;
+                    right: 1px;
+                    top: 1px;
+                    z-index: 1;
+                  }
+                  &:active $activeSection {
+                    background-color: #0078d4;
+                  }
+                  @media screen and (-ms-high-contrast: active){&:active $activeSection {
+                    background-color: Highlight;
+                  }
+                  &:hover $activeSection {
+                    background-color: #0078d4;
+                  }
+                  @media screen and (-ms-high-contrast: active){&:hover $activeSection {
+                    background-color: Highlight;
+                  }
+                  &:active $inactiveSection {
+                    background-color: #c7e0f4;
+                  }
+                  @media screen and (-ms-high-contrast: active){&:active $inactiveSection {
+                    border-color: Highlight;
+                  }
+                  &:hover $inactiveSection {
+                    background-color: #c7e0f4;
+                  }
+                  @media screen and (-ms-high-contrast: active){&:hover $inactiveSection {
+                    border-color: Highlight;
+                  }
+                  &:active $thumb {
+                    border: 2px solid #0078d4;
+                  }
+                  @media screen and (-ms-high-contrast: active){&:active $thumb {
+                    border-color: Highlight;
+                  }
+                  &:hover $thumb {
+                    border: 2px solid #0078d4;
+                  }
+                  @media screen and (-ms-high-contrast: active){&:hover $thumb {
+                    border-color: Highlight;
+                  }
+                  & $thumb {
+                    background: #ffffff;
+                    border-color: #666666;
+                    border-radius: 10px;
+                    border-style: solid;
+                    border-width: 2px;
+                    box-sizing: border-box;
+                    display: block;
+                    height: 16px;
+                    position: absolute;
+                    top: -6px;
+                    transform: translateX(-50%);
+                    transition: left 0.367s cubic-bezier(.1,.9,.2,1);
+                    width: 16px;
+                  }
+              data-is-focusable={true}
+              id="Slider15"
+              onKeyDown={[Function]}
+              onMouseDown={[Function]}
+              onTouchStart={[Function]}
+              role="slider"
+              tabIndex={0}
+            >
+              <div
+                className=
+                    ms-Slider-line
+                    {
+                      display: flex;
+                      position: relative;
+                      width: 100%;
+                    }
+                    & $lineContainer {
+                      border-radius: 4px;
+                      box-sizing: border-box;
+                      height: 4px;
+                      width: 100%;
+                    }
+              >
+                <span
+                  className=
+                      ms-Slider-thumb
+
+                  style={
+                    Object {
+                      "left": "0%",
+                    }
+                  }
+                />
+                <span
+                  className=
+                      ms-Slider-active
+
+                      {
+                        background: #666666;
+                        transition: width 0.367s cubic-bezier(.1,.9,.2,1);
+                      }
+                      @media screen and (-ms-high-contrast: active){& {
+                        background-color: WindowText;
+                      }
+                  style={
+                    Object {
+                      "width": "0%",
+                    }
+                  }
+                />
+                <span
+                  className=
+                      ms-Slider-inactive
+
+                      {
+                        background: #c8c8c8;
+                        transition: width 0.367s cubic-bezier(.1,.9,.2,1);
+                      }
+                      @media screen and (-ms-high-contrast: active){& {
+                        border: 1px solid WindowText;
+                      }
+                  style={
+                    Object {
+                      "width": "100%",
+                    }
+                  }
+                />
+              </div>
+            </div>
+            <label
+              className=
+                  ms-Label
+                  ms-Slider-value
+                  {
+                    -moz-osx-font-smoothing: grayscale;
+                    -webkit-font-smoothing: antialiased;
+                    box-shadow: none;
+                    box-sizing: border-box;
+                    color: #333333;
+                    display: block;
+                    flex-shrink: 1;
+                    font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                    font-size: 14px;
+                    font-weight: 400;
+                    line-height: 1;
+                    margin-bottom: 0;
+                    margin-left: 8px;
+                    margin-right: 8px;
+                    margin-top: 0;
+                    overflow-wrap: break-word;
+                    padding-bottom: 5px;
+                    padding-left: 0;
+                    padding-right: 0;
+                    padding-top: 5px;
+                    white-space: nowrap;
+                    width: 40px;
+                    word-wrap: break-word;
+                  }
+            >
+              0
+            </label>
+          </div>
+        </div>
+      </div>
+    </span>
+  </div>
+  <div
+    className=
+        ms-Stack
+        {
+          align-items: flex-start;
+          background: #71afe5;
+          box-sizing: border-box;
+          display: flex;
+          flex-direction: column;
+          flex-wrap: nowrap;
+          height: auto;
+          justify-content: flex-start;
+          margin-left: 10px;
+          margin-right: 10px;
+          padding-bottom: 0px;
+          padding-left: 0px;
+          padding-right: 0px;
+          padding-top: 0px;
+          width: auto;
+        }
+        & > * {
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+        & > *:not(:first-child) {
+          margin-top: 0px;
+        }
+        & > *:not(.ms-StackItem) {
+          flex-shrink: 0;
+        }
+  >
+    <span
+      className=
+
+          {
+            align-items: center;
+            background: #0078d4;
+            box-shadow: ;
+            color: #ffffff;
+            display: flex;
+            height: 50px;
+            justify-content: center;
+            width: 50px;
+          }
+    >
+      1
+    </span>
+    <span
+      className=
+
+          {
+            align-items: center;
+            background: #0078d4;
+            box-shadow: ;
+            color: #ffffff;
+            display: flex;
+            height: 50px;
+            justify-content: center;
+            width: 50px;
+          }
+    >
+      2
+    </span>
+    <span
+      className=
+
+          {
+            align-items: center;
+            background: #0078d4;
+            box-shadow: ;
+            color: #ffffff;
+            display: flex;
+            height: 50px;
+            justify-content: center;
+            width: 50px;
+          }
+    >
+      3
+    </span>
+    <span
+      className=
+
+          {
+            align-items: center;
+            background: #0078d4;
+            box-shadow: ;
+            color: #ffffff;
+            display: flex;
+            height: 50px;
+            justify-content: center;
+            width: 50px;
+          }
+    >
+      4
+    </span>
+    <span
+      className=
+
+          {
+            align-items: center;
+            background: #0078d4;
+            box-shadow: ;
+            color: #ffffff;
+            display: flex;
+            height: 50px;
+            justify-content: center;
+            width: 50px;
+          }
+    >
+      5
+    </span>
+  </div>
+</div>
+`;
diff --git a/packages/office-ui-fabric-react/src/components/__snapshots__/Stack.Vertical.Grow.Example.tsx.shot b/packages/office-ui-fabric-react/src/components/__snapshots__/Stack.Vertical.Grow.Example.tsx.shot
new file mode 100644
index 0000000000000..92351496ec4c5
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/__snapshots__/Stack.Vertical.Grow.Example.tsx.shot
@@ -0,0 +1,118 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Component Examples renders Stack.Vertical.Grow.Example.tsx correctly 1`] = `
+<div
+  className=
+      ms-Stack
+      {
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        flex-wrap: nowrap;
+        height: auto;
+        width: auto;
+      }
+      & > * {
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      & > *:not(:first-child) {
+        margin-top: 5px;
+      }
+      & > *:not(.ms-StackItem) {
+        flex-shrink: 0;
+      }
+>
+  <div
+    className=
+        ms-Stack
+        {
+          background: #71afe5;
+          box-sizing: border-box;
+          display: flex;
+          flex-direction: column;
+          flex-wrap: nowrap;
+          height: 250px;
+          padding-bottom: 10px;
+          padding-left: 10px;
+          padding-right: 10px;
+          padding-top: 10px;
+          width: auto;
+        }
+        & > * {
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+        & > *:not(:first-child) {
+          margin-top: 5px;
+        }
+        & > *:not(.ms-StackItem) {
+          flex-shrink: 0;
+        }
+  >
+    <span
+      className=
+          ms-StackItem
+          {
+            -moz-osx-font-smoothing: grayscale;
+            -webkit-font-smoothing: antialiased;
+            align-items: center;
+            background: #0078d4;
+            color: #ffffff;
+            display: flex;
+            flex-grow: 3;
+            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+            font-size: 14px;
+            font-weight: 400;
+            height: auto;
+            justify-content: center;
+            width: auto;
+          }
+    >
+      Grow is 3
+    </span>
+    <span
+      className=
+          ms-StackItem
+          {
+            -moz-osx-font-smoothing: grayscale;
+            -webkit-font-smoothing: antialiased;
+            align-items: center;
+            background: #0078d4;
+            color: #ffffff;
+            display: flex;
+            flex-grow: 2;
+            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+            font-size: 14px;
+            font-weight: 400;
+            height: auto;
+            justify-content: center;
+            width: auto;
+          }
+    >
+      Grow is 2
+    </span>
+    <span
+      className=
+          ms-StackItem
+          {
+            -moz-osx-font-smoothing: grayscale;
+            -webkit-font-smoothing: antialiased;
+            align-items: center;
+            background: #0078d4;
+            color: #ffffff;
+            display: flex;
+            flex-grow: 1;
+            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+            font-size: 14px;
+            font-weight: 400;
+            height: auto;
+            justify-content: center;
+            width: auto;
+          }
+    >
+      Grow is 1
+    </span>
+  </div>
+</div>
+`;
diff --git a/packages/office-ui-fabric-react/src/components/__snapshots__/Stack.Vertical.HorizontalAlign.Example.tsx.shot b/packages/office-ui-fabric-react/src/components/__snapshots__/Stack.Vertical.HorizontalAlign.Example.tsx.shot
new file mode 100644
index 0000000000000..96489c14e0f86
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/__snapshots__/Stack.Vertical.HorizontalAlign.Example.tsx.shot
@@ -0,0 +1,150 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Component Examples renders Stack.Vertical.HorizontalAlign.Example.tsx correctly 1`] = `
+<div
+  className=
+      ms-Stack
+      {
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        flex-wrap: nowrap;
+        height: auto;
+        width: auto;
+      }
+      & > * {
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      & > *:not(:first-child) {
+        margin-top: 5px;
+      }
+      & > *:not(.ms-StackItem) {
+        flex-shrink: 0;
+      }
+>
+  <span>
+    Left-aligned
+  </span>
+  <div
+    className=
+        ms-Stack
+        {
+          align-items: flex-start;
+          background: #71afe5;
+          box-sizing: border-box;
+          display: flex;
+          flex-direction: column;
+          flex-wrap: nowrap;
+          height: auto;
+          width: auto;
+        }
+        & > * {
+          align-items: center;
+          background: #0078d4;
+          color: #ffffff;
+          display: flex;
+          height: 50px;
+          justify-content: center;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          width: 50px;
+        }
+        & > *:not(:first-child) {
+          margin-top: 0px;
+        }
+        & > *:not(.ms-StackItem) {
+          flex-shrink: 0;
+        }
+  >
+    <span>
+      1
+    </span>
+    <span>
+      2
+    </span>
+  </div>
+  <span>
+    Horizontally centered
+  </span>
+  <div
+    className=
+        ms-Stack
+        {
+          align-items: center;
+          background: #71afe5;
+          box-sizing: border-box;
+          display: flex;
+          flex-direction: column;
+          flex-wrap: nowrap;
+          height: auto;
+          width: auto;
+        }
+        & > * {
+          align-items: center;
+          background: #0078d4;
+          color: #ffffff;
+          display: flex;
+          height: 50px;
+          justify-content: center;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          width: 50px;
+        }
+        & > *:not(:first-child) {
+          margin-top: 0px;
+        }
+        & > *:not(.ms-StackItem) {
+          flex-shrink: 0;
+        }
+  >
+    <span>
+      1
+    </span>
+    <span>
+      2
+    </span>
+  </div>
+  <span>
+    Right-aligned
+  </span>
+  <div
+    className=
+        ms-Stack
+        {
+          align-items: flex-end;
+          background: #71afe5;
+          box-sizing: border-box;
+          display: flex;
+          flex-direction: column;
+          flex-wrap: nowrap;
+          height: auto;
+          width: auto;
+        }
+        & > * {
+          align-items: center;
+          background: #0078d4;
+          color: #ffffff;
+          display: flex;
+          height: 50px;
+          justify-content: center;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          width: 50px;
+        }
+        & > *:not(:first-child) {
+          margin-top: 0px;
+        }
+        & > *:not(.ms-StackItem) {
+          flex-shrink: 0;
+        }
+  >
+    <span>
+      1
+    </span>
+    <span>
+      2
+    </span>
+  </div>
+</div>
+`;
diff --git a/packages/office-ui-fabric-react/src/components/__snapshots__/Stack.Vertical.Shrink.Example.tsx.shot b/packages/office-ui-fabric-react/src/components/__snapshots__/Stack.Vertical.Shrink.Example.tsx.shot
new file mode 100644
index 0000000000000..1bf0b26a3a8c1
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/__snapshots__/Stack.Vertical.Shrink.Example.tsx.shot
@@ -0,0 +1,401 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Component Examples renders Stack.Vertical.Shrink.Example.tsx correctly 1`] = `
+<div
+  className=
+      ms-Stack
+      {
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        flex-wrap: nowrap;
+        height: auto;
+        width: auto;
+      }
+      & > * {
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      & > *:not(:first-child) {
+        margin-top: 5px;
+      }
+      & > *:not(.ms-StackItem) {
+        flex-shrink: 0;
+      }
+>
+  <div
+    className=
+        ms-Slider
+        ms-Slider-enabled
+        ms-Slider-row
+        {
+          -moz-osx-font-smoothing: grayscale;
+          -webkit-font-smoothing: antialiased;
+          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+          font-size: 14px;
+          font-weight: 400;
+          user-select: none;
+        }
+  >
+    <label
+      className=
+          ms-Label
+          {
+            -moz-osx-font-smoothing: grayscale;
+            -webkit-font-smoothing: antialiased;
+            box-shadow: none;
+            box-sizing: border-box;
+            color: #333333;
+            display: block;
+            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+            font-size: 14px;
+            font-weight: 400;
+            margin-bottom: 0px;
+            margin-left: 0px;
+            margin-right: 0px;
+            margin-top: 0px;
+            overflow-wrap: break-word;
+            padding-bottom: 0px;
+            padding-left: 0px;
+            padding-right: 0px;
+            padding-top: 0px;
+            word-wrap: break-word;
+          }
+      htmlFor="Slider0"
+    >
+      Change the stack height to see how child items shrink:
+    </label>
+    <div
+      className=
+          ms-Slider-container
+          {
+            align-items: center;
+            display: flex;
+            flex-wrap: nowrap;
+          }
+    >
+      <div
+        aria-disabled={false}
+        aria-label="Change the stack height to see how child items shrink:"
+        aria-valuemax={100}
+        aria-valuemin={1}
+        aria-valuenow={100}
+        className=
+            ms-Slider-slideBox
+            ms-Slider-showValue
+            ms-Slider-showTransitions
+            {
+              align-items: center;
+              background: transparent;
+              border: none;
+              display: flex;
+              flex-grow: 1;
+              height: 28px;
+              line-height: 28px;
+              outline: transparent;
+              padding-bottom: 0;
+              padding-left: 8px;
+              padding-right: 8px;
+              padding-top: 0;
+              position: relative;
+              width: auto;
+            }
+            &::-moz-focus-inner {
+              border: 0;
+            }
+            .ms-Fabric--isFocusVisible &:focus:after {
+              border: 1px solid #ffffff;
+              bottom: 1px;
+              content: "";
+              left: 1px;
+              outline: 1px solid #666666;
+              position: absolute;
+              right: 1px;
+              top: 1px;
+              z-index: 1;
+            }
+            &:active $activeSection {
+              background-color: #0078d4;
+            }
+            @media screen and (-ms-high-contrast: active){&:active $activeSection {
+              background-color: Highlight;
+            }
+            &:hover $activeSection {
+              background-color: #0078d4;
+            }
+            @media screen and (-ms-high-contrast: active){&:hover $activeSection {
+              background-color: Highlight;
+            }
+            &:active $inactiveSection {
+              background-color: #c7e0f4;
+            }
+            @media screen and (-ms-high-contrast: active){&:active $inactiveSection {
+              border-color: Highlight;
+            }
+            &:hover $inactiveSection {
+              background-color: #c7e0f4;
+            }
+            @media screen and (-ms-high-contrast: active){&:hover $inactiveSection {
+              border-color: Highlight;
+            }
+            &:active $thumb {
+              border: 2px solid #0078d4;
+            }
+            @media screen and (-ms-high-contrast: active){&:active $thumb {
+              border-color: Highlight;
+            }
+            &:hover $thumb {
+              border: 2px solid #0078d4;
+            }
+            @media screen and (-ms-high-contrast: active){&:hover $thumb {
+              border-color: Highlight;
+            }
+            & $thumb {
+              background: #ffffff;
+              border-color: #666666;
+              border-radius: 10px;
+              border-style: solid;
+              border-width: 2px;
+              box-sizing: border-box;
+              display: block;
+              height: 16px;
+              position: absolute;
+              top: -6px;
+              transform: translateX(-50%);
+              transition: left 0.367s cubic-bezier(.1,.9,.2,1);
+              width: 16px;
+            }
+        data-is-focusable={true}
+        id="Slider0"
+        onKeyDown={[Function]}
+        onMouseDown={[Function]}
+        onTouchStart={[Function]}
+        role="slider"
+        tabIndex={0}
+      >
+        <div
+          className=
+              ms-Slider-line
+              {
+                display: flex;
+                position: relative;
+                width: 100%;
+              }
+              & $lineContainer {
+                border-radius: 4px;
+                box-sizing: border-box;
+                height: 4px;
+                width: 100%;
+              }
+        >
+          <span
+            className=
+                ms-Slider-thumb
+
+            style={
+              Object {
+                "left": "100%",
+              }
+            }
+          />
+          <span
+            className=
+                ms-Slider-active
+
+                {
+                  background: #666666;
+                  transition: width 0.367s cubic-bezier(.1,.9,.2,1);
+                }
+                @media screen and (-ms-high-contrast: active){& {
+                  background-color: WindowText;
+                }
+            style={
+              Object {
+                "width": "100%",
+              }
+            }
+          />
+          <span
+            className=
+                ms-Slider-inactive
+
+                {
+                  background: #c8c8c8;
+                  transition: width 0.367s cubic-bezier(.1,.9,.2,1);
+                }
+                @media screen and (-ms-high-contrast: active){& {
+                  border: 1px solid WindowText;
+                }
+            style={
+              Object {
+                "width": "0%",
+              }
+            }
+          />
+        </div>
+      </div>
+      <label
+        className=
+            ms-Label
+            ms-Slider-value
+            {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              box-shadow: none;
+              box-sizing: border-box;
+              color: #333333;
+              display: block;
+              flex-shrink: 1;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 14px;
+              font-weight: 400;
+              line-height: 1;
+              margin-bottom: 0;
+              margin-left: 8px;
+              margin-right: 8px;
+              margin-top: 0;
+              overflow-wrap: break-word;
+              padding-bottom: 5px;
+              padding-left: 0;
+              padding-right: 0;
+              padding-top: 5px;
+              white-space: nowrap;
+              width: 40px;
+              word-wrap: break-word;
+            }
+      >
+        100
+      </label>
+    </div>
+  </div>
+  <div
+    className=
+
+        {
+          height: 200px;
+        }
+  >
+    <div
+      className=
+          ms-Stack
+          {
+            background: #71afe5;
+            box-sizing: border-box;
+            display: flex;
+            flex-direction: column;
+            flex-wrap: nowrap;
+            height: 100%;
+            overflow: hidden;
+            padding-bottom: 10px;
+            padding-left: 10px;
+            padding-right: 10px;
+            padding-top: 10px;
+            width: auto;
+          }
+          & > * {
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+          & > *:not(:first-child) {
+            margin-top: 5px;
+          }
+          & > *:not(.ms-StackItem) {
+            flex-shrink: 1;
+          }
+    >
+      <span
+        className=
+            ms-StackItem
+            {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              align-items: center;
+              background: #0078d4;
+              color: #ffffff;
+              display: flex;
+              flex-grow: 1;
+              flex-shrink: 1;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 14px;
+              font-weight: 400;
+              height: auto;
+              justify-content: center;
+              overflow: hidden;
+              width: auto;
+            }
+      >
+        I shrink
+      </span>
+      <span
+        className=
+            ms-StackItem
+            {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              align-items: center;
+              background: #0078d4;
+              color: #ffffff;
+              display: flex;
+              flex-grow: 1;
+              flex-shrink: 1;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 14px;
+              font-weight: 400;
+              height: auto;
+              justify-content: center;
+              overflow: hidden;
+              width: auto;
+            }
+      >
+        I shrink
+      </span>
+      <span
+        className=
+            ms-StackItem
+            {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              align-items: center;
+              background: #0078d4;
+              color: #ffffff;
+              display: flex;
+              flex-grow: 1;
+              flex-shrink: 0;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 14px;
+              font-weight: 400;
+              height: 50px;
+              justify-content: center;
+              overflow: hidden;
+              width: auto;
+            }
+      >
+        I don't shrink
+      </span>
+      <span
+        className=
+            ms-StackItem
+            {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              align-items: center;
+              background: #0078d4;
+              color: #ffffff;
+              display: flex;
+              flex-grow: 1;
+              flex-shrink: 1;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 14px;
+              font-weight: 400;
+              height: auto;
+              justify-content: center;
+              overflow: hidden;
+              width: auto;
+            }
+      >
+        I shrink
+      </span>
+    </div>
+  </div>
+</div>
+`;
diff --git a/packages/office-ui-fabric-react/src/components/__snapshots__/Stack.Vertical.Spacing.Example.tsx.shot b/packages/office-ui-fabric-react/src/components/__snapshots__/Stack.Vertical.Spacing.Example.tsx.shot
new file mode 100644
index 0000000000000..43a6bc2e853a8
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/__snapshots__/Stack.Vertical.Spacing.Example.tsx.shot
@@ -0,0 +1,767 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Component Examples renders Stack.Vertical.Spacing.Example.tsx correctly 1`] = `
+<div
+  className=
+      ms-Stack
+      {
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        flex-wrap: nowrap;
+        height: auto;
+        width: auto;
+      }
+      & > * {
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      & > *:not(:first-child) {
+        margin-top: 10px;
+      }
+      & > *:not(.ms-StackItem) {
+        flex-shrink: 0;
+      }
+>
+  <div
+    className=
+        ms-Stack
+        {
+          box-sizing: border-box;
+          display: flex;
+          flex-direction: row;
+          flex-wrap: nowrap;
+          height: auto;
+          width: auto;
+        }
+        & > * {
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+        & > *:not(:first-child) {
+          margin-left: 50px;
+        }
+        & > *:not(.ms-StackItem) {
+          flex-shrink: 0;
+        }
+  >
+    <div
+      className=
+          ms-Stack
+          {
+            box-sizing: border-box;
+            display: flex;
+            flex-direction: column;
+            flex-wrap: nowrap;
+            height: auto;
+            width: auto;
+          }
+          & > * {
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+          & > *:not(:first-child) {
+            margin-top: 0px;
+          }
+          & > *:not(.ms-StackItem) {
+            flex-shrink: 0;
+          }
+    >
+      <span>
+        Numerical spacing
+      </span>
+      <div
+        className=
+            ms-Stack
+            {
+              background: #71afe5;
+              box-sizing: border-box;
+              display: flex;
+              flex-direction: column;
+              flex-wrap: nowrap;
+              height: auto;
+              padding-bottom: 10px;
+              padding-left: 10px;
+              padding-right: 10px;
+              padding-top: 10px;
+              width: auto;
+            }
+            & > * {
+              text-overflow: ellipsis;
+              white-space: nowrap;
+            }
+            & > *:not(:first-child) {
+              margin-top: 10px;
+            }
+            & > *:not(.ms-StackItem) {
+              flex-shrink: 0;
+            }
+      >
+        <span
+          className=
+
+              {
+                align-items: center;
+                background: #0078d4;
+                color: #ffffff;
+                display: flex;
+                height: 50px;
+                justify-content: center;
+                width: 50px;
+              }
+        >
+          1
+        </span>
+        <span
+          className=
+
+              {
+                align-items: center;
+                background: #0078d4;
+                color: #ffffff;
+                display: flex;
+                height: 50px;
+                justify-content: center;
+                width: 50px;
+              }
+        >
+          2
+        </span>
+        <span
+          className=
+
+              {
+                align-items: center;
+                background: #0078d4;
+                color: #ffffff;
+                display: flex;
+                height: 50px;
+                justify-content: center;
+                width: 50px;
+              }
+        >
+          3
+        </span>
+      </div>
+    </div>
+    <div
+      className=
+          ms-Stack
+          {
+            box-sizing: border-box;
+            display: flex;
+            flex-direction: column;
+            flex-wrap: nowrap;
+            height: auto;
+            width: auto;
+          }
+          & > * {
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+          & > *:not(:first-child) {
+            margin-top: 0px;
+          }
+          & > *:not(.ms-StackItem) {
+            flex-shrink: 0;
+          }
+    >
+      <span>
+        Custom spacing
+      </span>
+      <div
+        className=
+            ms-Stack
+            {
+              background: #71afe5;
+              box-sizing: border-box;
+              display: flex;
+              flex-direction: column;
+              flex-wrap: nowrap;
+              height: auto;
+              padding-bottom: 16px;
+              padding-left: 40px;
+              padding-right: 40px;
+              padding-top: 16px;
+              width: auto;
+            }
+            & > * {
+              text-overflow: ellipsis;
+              white-space: nowrap;
+            }
+            & > *:not(:first-child) {
+              margin-top: 20%;
+            }
+            & > *:not(.ms-StackItem) {
+              flex-shrink: 0;
+            }
+      >
+        <span
+          className=
+
+              {
+                align-items: center;
+                background: #0078d4;
+                color: #ffffff;
+                display: flex;
+                height: 50px;
+                justify-content: center;
+                width: 50px;
+              }
+        >
+          1
+        </span>
+        <span
+          className=
+
+              {
+                align-items: center;
+                background: #0078d4;
+                color: #ffffff;
+                display: flex;
+                height: 50px;
+                justify-content: center;
+                width: 50px;
+              }
+        >
+          2
+        </span>
+        <span
+          className=
+
+              {
+                align-items: center;
+                background: #0078d4;
+                color: #ffffff;
+                display: flex;
+                height: 50px;
+                justify-content: center;
+                width: 50px;
+              }
+        >
+          3
+        </span>
+      </div>
+    </div>
+  </div>
+  <div
+    className=
+        ms-Stack
+        {
+          box-sizing: border-box;
+          display: flex;
+          flex-direction: row;
+          flex-wrap: nowrap;
+          height: auto;
+          justify-content: space-between;
+          width: auto;
+        }
+        & > * {
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+        & > *:not(:first-child) {
+          margin-left: 0px;
+        }
+        & > *:not(.ms-StackItem) {
+          flex-shrink: 0;
+        }
+  >
+    <div
+      className=
+          ms-Stack
+          {
+            box-sizing: border-box;
+            display: flex;
+            flex-direction: column;
+            flex-wrap: nowrap;
+            height: auto;
+            width: auto;
+          }
+          & > * {
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+          & > *:not(:first-child) {
+            margin-top: 0px;
+          }
+          & > *:not(.ms-StackItem) {
+            flex-shrink: 0;
+          }
+    >
+      <span>
+        Themed spacing (extra small)
+      </span>
+      <div
+        className=
+            ms-Stack
+            {
+              background: #71afe5;
+              box-sizing: border-box;
+              display: flex;
+              flex-direction: column;
+              flex-wrap: nowrap;
+              height: auto;
+              padding-bottom: 4px;
+              padding-left: 4px;
+              padding-right: 4px;
+              padding-top: 4px;
+              width: auto;
+            }
+            & > * {
+              text-overflow: ellipsis;
+              white-space: nowrap;
+            }
+            & > *:not(:first-child) {
+              margin-top: 4px;
+            }
+            & > *:not(.ms-StackItem) {
+              flex-shrink: 0;
+            }
+      >
+        <span
+          className=
+
+              {
+                align-items: center;
+                background: #0078d4;
+                color: #ffffff;
+                display: flex;
+                height: 50px;
+                justify-content: center;
+                width: 50px;
+              }
+        >
+          1
+        </span>
+        <span
+          className=
+
+              {
+                align-items: center;
+                background: #0078d4;
+                color: #ffffff;
+                display: flex;
+                height: 50px;
+                justify-content: center;
+                width: 50px;
+              }
+        >
+          2
+        </span>
+        <span
+          className=
+
+              {
+                align-items: center;
+                background: #0078d4;
+                color: #ffffff;
+                display: flex;
+                height: 50px;
+                justify-content: center;
+                width: 50px;
+              }
+        >
+          3
+        </span>
+      </div>
+    </div>
+    <div
+      className=
+          ms-Stack
+          {
+            box-sizing: border-box;
+            display: flex;
+            flex-direction: column;
+            flex-wrap: nowrap;
+            height: auto;
+            width: auto;
+          }
+          & > * {
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+          & > *:not(:first-child) {
+            margin-top: 0px;
+          }
+          & > *:not(.ms-StackItem) {
+            flex-shrink: 0;
+          }
+    >
+      <span>
+        Themed spacing (small)
+      </span>
+      <div
+        className=
+            ms-Stack
+            {
+              background: #71afe5;
+              box-sizing: border-box;
+              display: flex;
+              flex-direction: column;
+              flex-wrap: nowrap;
+              height: auto;
+              padding-bottom: 4px;
+              padding-left: 4px;
+              padding-right: 4px;
+              padding-top: 4px;
+              width: auto;
+            }
+            & > * {
+              text-overflow: ellipsis;
+              white-space: nowrap;
+            }
+            & > *:not(:first-child) {
+              margin-top: 8px;
+            }
+            & > *:not(.ms-StackItem) {
+              flex-shrink: 0;
+            }
+      >
+        <span
+          className=
+
+              {
+                align-items: center;
+                background: #0078d4;
+                color: #ffffff;
+                display: flex;
+                height: 50px;
+                justify-content: center;
+                width: 50px;
+              }
+        >
+          1
+        </span>
+        <span
+          className=
+
+              {
+                align-items: center;
+                background: #0078d4;
+                color: #ffffff;
+                display: flex;
+                height: 50px;
+                justify-content: center;
+                width: 50px;
+              }
+        >
+          2
+        </span>
+        <span
+          className=
+
+              {
+                align-items: center;
+                background: #0078d4;
+                color: #ffffff;
+                display: flex;
+                height: 50px;
+                justify-content: center;
+                width: 50px;
+              }
+        >
+          3
+        </span>
+      </div>
+    </div>
+    <div
+      className=
+          ms-Stack
+          {
+            box-sizing: border-box;
+            display: flex;
+            flex-direction: column;
+            flex-wrap: nowrap;
+            height: auto;
+            width: auto;
+          }
+          & > * {
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+          & > *:not(:first-child) {
+            margin-top: 0px;
+          }
+          & > *:not(.ms-StackItem) {
+            flex-shrink: 0;
+          }
+    >
+      <span>
+        Themed spacing (medium)
+      </span>
+      <div
+        className=
+            ms-Stack
+            {
+              background: #71afe5;
+              box-sizing: border-box;
+              display: flex;
+              flex-direction: column;
+              flex-wrap: nowrap;
+              height: auto;
+              padding-bottom: 16px;
+              padding-left: 16px;
+              padding-right: 16px;
+              padding-top: 16px;
+              width: auto;
+            }
+            & > * {
+              text-overflow: ellipsis;
+              white-space: nowrap;
+            }
+            & > *:not(:first-child) {
+              margin-top: 16px;
+            }
+            & > *:not(.ms-StackItem) {
+              flex-shrink: 0;
+            }
+      >
+        <span
+          className=
+
+              {
+                align-items: center;
+                background: #0078d4;
+                color: #ffffff;
+                display: flex;
+                height: 50px;
+                justify-content: center;
+                width: 50px;
+              }
+        >
+          1
+        </span>
+        <span
+          className=
+
+              {
+                align-items: center;
+                background: #0078d4;
+                color: #ffffff;
+                display: flex;
+                height: 50px;
+                justify-content: center;
+                width: 50px;
+              }
+        >
+          2
+        </span>
+        <span
+          className=
+
+              {
+                align-items: center;
+                background: #0078d4;
+                color: #ffffff;
+                display: flex;
+                height: 50px;
+                justify-content: center;
+                width: 50px;
+              }
+        >
+          3
+        </span>
+      </div>
+    </div>
+    <div
+      className=
+          ms-Stack
+          {
+            box-sizing: border-box;
+            display: flex;
+            flex-direction: column;
+            flex-wrap: nowrap;
+            height: auto;
+            width: auto;
+          }
+          & > * {
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+          & > *:not(:first-child) {
+            margin-top: 0px;
+          }
+          & > *:not(.ms-StackItem) {
+            flex-shrink: 0;
+          }
+    >
+      <span>
+        Themed spacing (large)
+      </span>
+      <div
+        className=
+            ms-Stack
+            {
+              background: #71afe5;
+              box-sizing: border-box;
+              display: flex;
+              flex-direction: column;
+              flex-wrap: nowrap;
+              height: auto;
+              padding-bottom: 20px;
+              padding-left: 20px;
+              padding-right: 20px;
+              padding-top: 20px;
+              width: auto;
+            }
+            & > * {
+              text-overflow: ellipsis;
+              white-space: nowrap;
+            }
+            & > *:not(:first-child) {
+              margin-top: 20px;
+            }
+            & > *:not(.ms-StackItem) {
+              flex-shrink: 0;
+            }
+      >
+        <span
+          className=
+
+              {
+                align-items: center;
+                background: #0078d4;
+                color: #ffffff;
+                display: flex;
+                height: 50px;
+                justify-content: center;
+                width: 50px;
+              }
+        >
+          1
+        </span>
+        <span
+          className=
+
+              {
+                align-items: center;
+                background: #0078d4;
+                color: #ffffff;
+                display: flex;
+                height: 50px;
+                justify-content: center;
+                width: 50px;
+              }
+        >
+          2
+        </span>
+        <span
+          className=
+
+              {
+                align-items: center;
+                background: #0078d4;
+                color: #ffffff;
+                display: flex;
+                height: 50px;
+                justify-content: center;
+                width: 50px;
+              }
+        >
+          3
+        </span>
+      </div>
+    </div>
+    <div
+      className=
+          ms-Stack
+          {
+            box-sizing: border-box;
+            display: flex;
+            flex-direction: column;
+            flex-wrap: nowrap;
+            height: auto;
+            width: auto;
+          }
+          & > * {
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+          & > *:not(:first-child) {
+            margin-top: 0px;
+          }
+          & > *:not(.ms-StackItem) {
+            flex-shrink: 0;
+          }
+    >
+      <span>
+        Themed spacing (extra large)
+      </span>
+      <div
+        className=
+            ms-Stack
+            {
+              background: #71afe5;
+              box-sizing: border-box;
+              display: flex;
+              flex-direction: column;
+              flex-wrap: nowrap;
+              height: auto;
+              padding-bottom: 32px;
+              padding-left: 32px;
+              padding-right: 32px;
+              padding-top: 32px;
+              width: auto;
+            }
+            & > * {
+              text-overflow: ellipsis;
+              white-space: nowrap;
+            }
+            & > *:not(:first-child) {
+              margin-top: 32px;
+            }
+            & > *:not(.ms-StackItem) {
+              flex-shrink: 0;
+            }
+      >
+        <span
+          className=
+
+              {
+                align-items: center;
+                background: #0078d4;
+                color: #ffffff;
+                display: flex;
+                height: 50px;
+                justify-content: center;
+                width: 50px;
+              }
+        >
+          1
+        </span>
+        <span
+          className=
+
+              {
+                align-items: center;
+                background: #0078d4;
+                color: #ffffff;
+                display: flex;
+                height: 50px;
+                justify-content: center;
+                width: 50px;
+              }
+        >
+          2
+        </span>
+        <span
+          className=
+
+              {
+                align-items: center;
+                background: #0078d4;
+                color: #ffffff;
+                display: flex;
+                height: 50px;
+                justify-content: center;
+                width: 50px;
+              }
+        >
+          3
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/packages/office-ui-fabric-react/src/components/__snapshots__/Stack.Vertical.VerticalAlign.Example.tsx.shot b/packages/office-ui-fabric-react/src/components/__snapshots__/Stack.Vertical.VerticalAlign.Example.tsx.shot
new file mode 100644
index 0000000000000..bfd283dc33249
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/__snapshots__/Stack.Vertical.VerticalAlign.Example.tsx.shot
@@ -0,0 +1,489 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Component Examples renders Stack.Vertical.VerticalAlign.Example.tsx correctly 1`] = `
+<div
+  className=
+      ms-Stack
+      {
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        flex-wrap: nowrap;
+        height: auto;
+        width: auto;
+      }
+      & > * {
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      & > *:not(:first-child) {
+        margin-top: 10px;
+      }
+      & > *:not(.ms-StackItem) {
+        flex-shrink: 0;
+      }
+>
+  <div
+    className=
+        ms-Stack
+        {
+          box-sizing: border-box;
+          display: flex;
+          flex-direction: row;
+          flex-wrap: nowrap;
+          height: auto;
+          justify-content: space-between;
+          width: auto;
+        }
+        & > * {
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+        & > *:not(:first-child) {
+          margin-left: 30px;
+        }
+        & > *:not(.ms-StackItem) {
+          flex-shrink: 0;
+        }
+  >
+    <div
+      className=
+          ms-Stack
+          {
+            box-sizing: border-box;
+            display: flex;
+            flex-direction: column;
+            flex-grow: 1;
+            flex-wrap: nowrap;
+            height: auto;
+            overflow: hidden;
+            width: auto;
+          }
+          & > * {
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+          & > *:not(:first-child) {
+            margin-top: 0px;
+          }
+          & > *:not(.ms-StackItem) {
+            flex-shrink: 0;
+          }
+    >
+      <span>
+        Top-aligned
+      </span>
+      <div
+        className=
+            ms-Stack
+            {
+              background: #71afe5;
+              box-sizing: border-box;
+              display: flex;
+              flex-direction: column;
+              flex-wrap: nowrap;
+              height: 250px;
+              justify-content: flex-start;
+              width: auto;
+            }
+            & > * {
+              align-items: center;
+              background: #0078d4;
+              color: #ffffff;
+              display: flex;
+              height: 50px;
+              justify-content: center;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+              width: 50px;
+            }
+            & > *:not(:first-child) {
+              margin-top: 0px;
+            }
+            & > *:not(.ms-StackItem) {
+              flex-shrink: 0;
+            }
+      >
+        <span>
+          1
+        </span>
+        <span>
+          2
+        </span>
+        <span>
+          3
+        </span>
+      </div>
+    </div>
+    <div
+      className=
+          ms-Stack
+          {
+            box-sizing: border-box;
+            display: flex;
+            flex-direction: column;
+            flex-grow: 1;
+            flex-wrap: nowrap;
+            height: auto;
+            overflow: hidden;
+            width: auto;
+          }
+          & > * {
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+          & > *:not(:first-child) {
+            margin-top: 0px;
+          }
+          & > *:not(.ms-StackItem) {
+            flex-shrink: 0;
+          }
+    >
+      <span>
+        Vertically centered
+      </span>
+      <div
+        className=
+            ms-Stack
+            {
+              background: #71afe5;
+              box-sizing: border-box;
+              display: flex;
+              flex-direction: column;
+              flex-wrap: nowrap;
+              height: 250px;
+              justify-content: center;
+              width: auto;
+            }
+            & > * {
+              align-items: center;
+              background: #0078d4;
+              color: #ffffff;
+              display: flex;
+              height: 50px;
+              justify-content: center;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+              width: 50px;
+            }
+            & > *:not(:first-child) {
+              margin-top: 0px;
+            }
+            & > *:not(.ms-StackItem) {
+              flex-shrink: 0;
+            }
+      >
+        <span>
+          1
+        </span>
+        <span>
+          2
+        </span>
+        <span>
+          3
+        </span>
+      </div>
+    </div>
+    <div
+      className=
+          ms-Stack
+          {
+            box-sizing: border-box;
+            display: flex;
+            flex-direction: column;
+            flex-grow: 1;
+            flex-wrap: nowrap;
+            height: auto;
+            overflow: hidden;
+            width: auto;
+          }
+          & > * {
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+          & > *:not(:first-child) {
+            margin-top: 0px;
+          }
+          & > *:not(.ms-StackItem) {
+            flex-shrink: 0;
+          }
+    >
+      <span>
+        Bottom-aligned
+      </span>
+      <div
+        className=
+            ms-Stack
+            {
+              background: #71afe5;
+              box-sizing: border-box;
+              display: flex;
+              flex-direction: column;
+              flex-wrap: nowrap;
+              height: 250px;
+              justify-content: flex-end;
+              width: auto;
+            }
+            & > * {
+              align-items: center;
+              background: #0078d4;
+              color: #ffffff;
+              display: flex;
+              height: 50px;
+              justify-content: center;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+              width: 50px;
+            }
+            & > *:not(:first-child) {
+              margin-top: 0px;
+            }
+            & > *:not(.ms-StackItem) {
+              flex-shrink: 0;
+            }
+      >
+        <span>
+          1
+        </span>
+        <span>
+          2
+        </span>
+        <span>
+          3
+        </span>
+      </div>
+    </div>
+  </div>
+  <div
+    className=
+        ms-Stack
+        {
+          box-sizing: border-box;
+          display: flex;
+          flex-direction: row;
+          flex-wrap: nowrap;
+          height: auto;
+          justify-content: space-between;
+          width: auto;
+        }
+        & > * {
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+        & > *:not(:first-child) {
+          margin-left: 30px;
+        }
+        & > *:not(.ms-StackItem) {
+          flex-shrink: 0;
+        }
+  >
+    <div
+      className=
+          ms-Stack
+          {
+            box-sizing: border-box;
+            display: flex;
+            flex-direction: column;
+            flex-grow: 1;
+            flex-wrap: nowrap;
+            height: auto;
+            overflow: hidden;
+            width: auto;
+          }
+          & > * {
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+          & > *:not(:first-child) {
+            margin-top: 0px;
+          }
+          & > *:not(.ms-StackItem) {
+            flex-shrink: 0;
+          }
+    >
+      <span>
+        Vertical space around items
+      </span>
+      <div
+        className=
+            ms-Stack
+            {
+              background: #71afe5;
+              box-sizing: border-box;
+              display: flex;
+              flex-direction: column;
+              flex-wrap: nowrap;
+              height: 250px;
+              justify-content: space-around;
+              width: auto;
+            }
+            & > * {
+              align-items: center;
+              background: #0078d4;
+              color: #ffffff;
+              display: flex;
+              height: 50px;
+              justify-content: center;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+              width: 50px;
+            }
+            & > *:not(:first-child) {
+              margin-top: 0px;
+            }
+            & > *:not(.ms-StackItem) {
+              flex-shrink: 0;
+            }
+      >
+        <span>
+          1
+        </span>
+        <span>
+          2
+        </span>
+        <span>
+          3
+        </span>
+      </div>
+    </div>
+    <div
+      className=
+          ms-Stack
+          {
+            box-sizing: border-box;
+            display: flex;
+            flex-direction: column;
+            flex-grow: 1;
+            flex-wrap: nowrap;
+            height: auto;
+            overflow: hidden;
+            width: auto;
+          }
+          & > * {
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+          & > *:not(:first-child) {
+            margin-top: 0px;
+          }
+          & > *:not(.ms-StackItem) {
+            flex-shrink: 0;
+          }
+    >
+      <span>
+        Vertical space between items
+      </span>
+      <div
+        className=
+            ms-Stack
+            {
+              background: #71afe5;
+              box-sizing: border-box;
+              display: flex;
+              flex-direction: column;
+              flex-wrap: nowrap;
+              height: 250px;
+              justify-content: space-between;
+              width: auto;
+            }
+            & > * {
+              align-items: center;
+              background: #0078d4;
+              color: #ffffff;
+              display: flex;
+              height: 50px;
+              justify-content: center;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+              width: 50px;
+            }
+            & > *:not(:first-child) {
+              margin-top: 0px;
+            }
+            & > *:not(.ms-StackItem) {
+              flex-shrink: 0;
+            }
+      >
+        <span>
+          1
+        </span>
+        <span>
+          2
+        </span>
+        <span>
+          3
+        </span>
+      </div>
+    </div>
+    <div
+      className=
+          ms-Stack
+          {
+            box-sizing: border-box;
+            display: flex;
+            flex-direction: column;
+            flex-grow: 1;
+            flex-wrap: nowrap;
+            height: auto;
+            overflow: hidden;
+            width: auto;
+          }
+          & > * {
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+          & > *:not(:first-child) {
+            margin-top: 0px;
+          }
+          & > *:not(.ms-StackItem) {
+            flex-shrink: 0;
+          }
+    >
+      <span>
+        Items vertically evenly spaced
+      </span>
+      <div
+        className=
+            ms-Stack
+            {
+              background: #71afe5;
+              box-sizing: border-box;
+              display: flex;
+              flex-direction: column;
+              flex-wrap: nowrap;
+              height: 250px;
+              justify-content: space-evenly;
+              width: auto;
+            }
+            & > * {
+              align-items: center;
+              background: #0078d4;
+              color: #ffffff;
+              display: flex;
+              height: 50px;
+              justify-content: center;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+              width: 50px;
+            }
+            & > *:not(:first-child) {
+              margin-top: 0px;
+            }
+            & > *:not(.ms-StackItem) {
+              flex-shrink: 0;
+            }
+      >
+        <span>
+          1
+        </span>
+        <span>
+          2
+        </span>
+        <span>
+          3
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/packages/office-ui-fabric-react/src/components/__snapshots__/Stack.Vertical.Wrap.Example.tsx.shot b/packages/office-ui-fabric-react/src/components/__snapshots__/Stack.Vertical.Wrap.Example.tsx.shot
new file mode 100644
index 0000000000000..4a87791ccab0e
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/__snapshots__/Stack.Vertical.Wrap.Example.tsx.shot
@@ -0,0 +1,343 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Component Examples renders Stack.Vertical.Wrap.Example.tsx correctly 1`] = `
+<div
+  className=
+      ms-Stack
+      {
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        flex-wrap: nowrap;
+        height: auto;
+        width: auto;
+      }
+      & > * {
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      & > *:not(:first-child) {
+        margin-top: 10px;
+      }
+      & > *:not(.ms-StackItem) {
+        flex-shrink: 0;
+      }
+>
+  <div
+    className=
+        ms-Slider
+        ms-Slider-enabled
+        ms-Slider-row
+        {
+          -moz-osx-font-smoothing: grayscale;
+          -webkit-font-smoothing: antialiased;
+          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+          font-size: 14px;
+          font-weight: 400;
+          user-select: none;
+        }
+  >
+    <label
+      className=
+          ms-Label
+          {
+            -moz-osx-font-smoothing: grayscale;
+            -webkit-font-smoothing: antialiased;
+            box-shadow: none;
+            box-sizing: border-box;
+            color: #333333;
+            display: block;
+            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+            font-size: 14px;
+            font-weight: 400;
+            margin-bottom: 0px;
+            margin-left: 0px;
+            margin-right: 0px;
+            margin-top: 0px;
+            overflow-wrap: break-word;
+            padding-bottom: 0px;
+            padding-left: 0px;
+            padding-right: 0px;
+            padding-top: 0px;
+            word-wrap: break-word;
+          }
+      htmlFor="Slider0"
+    >
+      Change the stack height to see how child items wrap onto multiple columns:
+    </label>
+    <div
+      className=
+          ms-Slider-container
+          {
+            align-items: center;
+            display: flex;
+            flex-wrap: nowrap;
+          }
+    >
+      <div
+        aria-disabled={false}
+        aria-label="Change the stack height to see how child items wrap onto multiple columns:"
+        aria-valuemax={420}
+        aria-valuemin={1}
+        aria-valuenow={420}
+        className=
+            ms-Slider-slideBox
+            ms-Slider-showValue
+            ms-Slider-showTransitions
+            {
+              align-items: center;
+              background: transparent;
+              border: none;
+              display: flex;
+              flex-grow: 1;
+              height: 28px;
+              line-height: 28px;
+              outline: transparent;
+              padding-bottom: 0;
+              padding-left: 8px;
+              padding-right: 8px;
+              padding-top: 0;
+              position: relative;
+              width: auto;
+            }
+            &::-moz-focus-inner {
+              border: 0;
+            }
+            .ms-Fabric--isFocusVisible &:focus:after {
+              border: 1px solid #ffffff;
+              bottom: 1px;
+              content: "";
+              left: 1px;
+              outline: 1px solid #666666;
+              position: absolute;
+              right: 1px;
+              top: 1px;
+              z-index: 1;
+            }
+            &:active $activeSection {
+              background-color: #0078d4;
+            }
+            @media screen and (-ms-high-contrast: active){&:active $activeSection {
+              background-color: Highlight;
+            }
+            &:hover $activeSection {
+              background-color: #0078d4;
+            }
+            @media screen and (-ms-high-contrast: active){&:hover $activeSection {
+              background-color: Highlight;
+            }
+            &:active $inactiveSection {
+              background-color: #c7e0f4;
+            }
+            @media screen and (-ms-high-contrast: active){&:active $inactiveSection {
+              border-color: Highlight;
+            }
+            &:hover $inactiveSection {
+              background-color: #c7e0f4;
+            }
+            @media screen and (-ms-high-contrast: active){&:hover $inactiveSection {
+              border-color: Highlight;
+            }
+            &:active $thumb {
+              border: 2px solid #0078d4;
+            }
+            @media screen and (-ms-high-contrast: active){&:active $thumb {
+              border-color: Highlight;
+            }
+            &:hover $thumb {
+              border: 2px solid #0078d4;
+            }
+            @media screen and (-ms-high-contrast: active){&:hover $thumb {
+              border-color: Highlight;
+            }
+            & $thumb {
+              background: #ffffff;
+              border-color: #666666;
+              border-radius: 10px;
+              border-style: solid;
+              border-width: 2px;
+              box-sizing: border-box;
+              display: block;
+              height: 16px;
+              position: absolute;
+              top: -6px;
+              transform: translateX(-50%);
+              transition: left 0.367s cubic-bezier(.1,.9,.2,1);
+              width: 16px;
+            }
+        data-is-focusable={true}
+        id="Slider0"
+        onKeyDown={[Function]}
+        onMouseDown={[Function]}
+        onTouchStart={[Function]}
+        role="slider"
+        tabIndex={0}
+      >
+        <div
+          className=
+              ms-Slider-line
+              {
+                display: flex;
+                position: relative;
+                width: 100%;
+              }
+              & $lineContainer {
+                border-radius: 4px;
+                box-sizing: border-box;
+                height: 4px;
+                width: 100%;
+              }
+        >
+          <span
+            className=
+                ms-Slider-thumb
+
+            style={
+              Object {
+                "left": "100%",
+              }
+            }
+          />
+          <span
+            className=
+                ms-Slider-active
+
+                {
+                  background: #666666;
+                  transition: width 0.367s cubic-bezier(.1,.9,.2,1);
+                }
+                @media screen and (-ms-high-contrast: active){& {
+                  background-color: WindowText;
+                }
+            style={
+              Object {
+                "width": "100%",
+              }
+            }
+          />
+          <span
+            className=
+                ms-Slider-inactive
+
+                {
+                  background: #c8c8c8;
+                  transition: width 0.367s cubic-bezier(.1,.9,.2,1);
+                }
+                @media screen and (-ms-high-contrast: active){& {
+                  border: 1px solid WindowText;
+                }
+            style={
+              Object {
+                "width": "0%",
+              }
+            }
+          />
+        </div>
+      </div>
+      <label
+        className=
+            ms-Label
+            ms-Slider-value
+            {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              box-shadow: none;
+              box-sizing: border-box;
+              color: #333333;
+              display: block;
+              flex-shrink: 1;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 14px;
+              font-weight: 400;
+              line-height: 1;
+              margin-bottom: 0;
+              margin-left: 8px;
+              margin-right: 8px;
+              margin-top: 0;
+              overflow-wrap: break-word;
+              padding-bottom: 5px;
+              padding-left: 0;
+              padding-right: 0;
+              padding-top: 5px;
+              white-space: nowrap;
+              width: 40px;
+              word-wrap: break-word;
+            }
+      >
+        420
+      </label>
+    </div>
+  </div>
+  <div
+    className=
+        ms-Stack
+        {
+          background: #71afe5;
+          display: inline-block;
+          height: 420px;
+          overflow: visible;
+          width: auto;
+        }
+        & span {
+          align-items: center;
+          background: #0078d4;
+          color: #ffffff;
+          display: flex;
+          height: 50px;
+          justify-content: center;
+          width: 50px;
+        }
+  >
+    <div
+      className=
+          ms-Stack-inner
+          {
+            align-content: end;
+            align-items: start;
+            box-sizing: border-box;
+            display: flex;
+            flex-direction: column;
+            flex-wrap: wrap;
+            height: calc(100% + 20px);
+            justify-content: start;
+            margin-bottom: -10px;
+            margin-left: -10px;
+            margin-right: -10px;
+            margin-top: -10px;
+            overflow: visible;
+          }
+          & > * {
+            margin-bottom: 10px;
+            margin-left: 10px;
+            margin-right: 10px;
+            margin-top: 10px;
+            max-height: calc(100% - 20px);
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+          & > *:not(.ms-StackItem) {
+            flex-shrink: 0;
+          }
+    >
+      <span>
+        1
+      </span>
+      <span>
+        2
+      </span>
+      <span>
+        3
+      </span>
+      <span>
+        4
+      </span>
+      <span>
+        5
+      </span>
+      <span>
+        6
+      </span>
+    </div>
+  </div>
+</div>
+`;
diff --git a/packages/office-ui-fabric-react/src/components/__snapshots__/Stack.Vertical.WrapAdvanced.Example.tsx.shot b/packages/office-ui-fabric-react/src/components/__snapshots__/Stack.Vertical.WrapAdvanced.Example.tsx.shot
new file mode 100644
index 0000000000000..43c01b8c28e85
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/__snapshots__/Stack.Vertical.WrapAdvanced.Example.tsx.shot
@@ -0,0 +1,1353 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Component Examples renders Stack.Vertical.WrapAdvanced.Example.tsx correctly 1`] = `
+<div
+  className=
+      ms-Stack
+      {
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        flex-wrap: nowrap;
+        height: auto;
+        width: auto;
+      }
+      & > * {
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      & > *:not(:first-child) {
+        margin-top: 10px;
+      }
+      & > *:not(.ms-StackItem) {
+        flex-shrink: 0;
+      }
+>
+  <div
+    className=
+        ms-Stack
+        {
+          box-sizing: border-box;
+          display: flex;
+          flex-direction: row;
+          flex-wrap: nowrap;
+          height: auto;
+          width: auto;
+        }
+        & > * {
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+        & > *:not(:first-child) {
+          margin-left: 0px;
+        }
+        & > *:not(.ms-StackItem) {
+          flex-shrink: 0;
+        }
+  >
+    <span
+      className=
+          ms-StackItem
+          {
+            -moz-osx-font-smoothing: grayscale;
+            -webkit-font-smoothing: antialiased;
+            flex-grow: 1;
+            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+            font-size: 14px;
+            font-weight: 400;
+            height: auto;
+            width: auto;
+          }
+    >
+      <div
+        className=
+            ms-Slider
+            ms-Slider-enabled
+            ms-Slider-row
+            {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 14px;
+              font-weight: 400;
+              user-select: none;
+            }
+      >
+        <label
+          className=
+              ms-Label
+              {
+                -moz-osx-font-smoothing: grayscale;
+                -webkit-font-smoothing: antialiased;
+                box-shadow: none;
+                box-sizing: border-box;
+                color: #333333;
+                display: block;
+                font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                font-size: 14px;
+                font-weight: 400;
+                margin-bottom: 0px;
+                margin-left: 0px;
+                margin-right: 0px;
+                margin-top: 0px;
+                overflow-wrap: break-word;
+                padding-bottom: 0px;
+                padding-left: 0px;
+                padding-right: 0px;
+                padding-top: 0px;
+                word-wrap: break-word;
+              }
+          htmlFor="Slider0"
+        >
+          Stack height:
+        </label>
+        <div
+          className=
+              ms-Slider-container
+              {
+                align-items: center;
+                display: flex;
+                flex-wrap: nowrap;
+              }
+        >
+          <div
+            aria-disabled={false}
+            aria-label="Stack height:"
+            aria-valuemax={420}
+            aria-valuemin={1}
+            aria-valuenow={420}
+            className=
+                ms-Slider-slideBox
+                ms-Slider-showValue
+                ms-Slider-showTransitions
+                {
+                  align-items: center;
+                  background: transparent;
+                  border: none;
+                  display: flex;
+                  flex-grow: 1;
+                  height: 28px;
+                  line-height: 28px;
+                  outline: transparent;
+                  padding-bottom: 0;
+                  padding-left: 8px;
+                  padding-right: 8px;
+                  padding-top: 0;
+                  position: relative;
+                  width: auto;
+                }
+                &::-moz-focus-inner {
+                  border: 0;
+                }
+                .ms-Fabric--isFocusVisible &:focus:after {
+                  border: 1px solid #ffffff;
+                  bottom: 1px;
+                  content: "";
+                  left: 1px;
+                  outline: 1px solid #666666;
+                  position: absolute;
+                  right: 1px;
+                  top: 1px;
+                  z-index: 1;
+                }
+                &:active $activeSection {
+                  background-color: #0078d4;
+                }
+                @media screen and (-ms-high-contrast: active){&:active $activeSection {
+                  background-color: Highlight;
+                }
+                &:hover $activeSection {
+                  background-color: #0078d4;
+                }
+                @media screen and (-ms-high-contrast: active){&:hover $activeSection {
+                  background-color: Highlight;
+                }
+                &:active $inactiveSection {
+                  background-color: #c7e0f4;
+                }
+                @media screen and (-ms-high-contrast: active){&:active $inactiveSection {
+                  border-color: Highlight;
+                }
+                &:hover $inactiveSection {
+                  background-color: #c7e0f4;
+                }
+                @media screen and (-ms-high-contrast: active){&:hover $inactiveSection {
+                  border-color: Highlight;
+                }
+                &:active $thumb {
+                  border: 2px solid #0078d4;
+                }
+                @media screen and (-ms-high-contrast: active){&:active $thumb {
+                  border-color: Highlight;
+                }
+                &:hover $thumb {
+                  border: 2px solid #0078d4;
+                }
+                @media screen and (-ms-high-contrast: active){&:hover $thumb {
+                  border-color: Highlight;
+                }
+                & $thumb {
+                  background: #ffffff;
+                  border-color: #666666;
+                  border-radius: 10px;
+                  border-style: solid;
+                  border-width: 2px;
+                  box-sizing: border-box;
+                  display: block;
+                  height: 16px;
+                  position: absolute;
+                  top: -6px;
+                  transform: translateX(-50%);
+                  transition: left 0.367s cubic-bezier(.1,.9,.2,1);
+                  width: 16px;
+                }
+            data-is-focusable={true}
+            id="Slider0"
+            onKeyDown={[Function]}
+            onMouseDown={[Function]}
+            onTouchStart={[Function]}
+            role="slider"
+            tabIndex={0}
+          >
+            <div
+              className=
+                  ms-Slider-line
+                  {
+                    display: flex;
+                    position: relative;
+                    width: 100%;
+                  }
+                  & $lineContainer {
+                    border-radius: 4px;
+                    box-sizing: border-box;
+                    height: 4px;
+                    width: 100%;
+                  }
+            >
+              <span
+                className=
+                    ms-Slider-thumb
+
+                style={
+                  Object {
+                    "left": "100%",
+                  }
+                }
+              />
+              <span
+                className=
+                    ms-Slider-active
+
+                    {
+                      background: #666666;
+                      transition: width 0.367s cubic-bezier(.1,.9,.2,1);
+                    }
+                    @media screen and (-ms-high-contrast: active){& {
+                      background-color: WindowText;
+                    }
+                style={
+                  Object {
+                    "width": "100%",
+                  }
+                }
+              />
+              <span
+                className=
+                    ms-Slider-inactive
+
+                    {
+                      background: #c8c8c8;
+                      transition: width 0.367s cubic-bezier(.1,.9,.2,1);
+                    }
+                    @media screen and (-ms-high-contrast: active){& {
+                      border: 1px solid WindowText;
+                    }
+                style={
+                  Object {
+                    "width": "0%",
+                  }
+                }
+              />
+            </div>
+          </div>
+          <label
+            className=
+                ms-Label
+                ms-Slider-value
+                {
+                  -moz-osx-font-smoothing: grayscale;
+                  -webkit-font-smoothing: antialiased;
+                  box-shadow: none;
+                  box-sizing: border-box;
+                  color: #333333;
+                  display: block;
+                  flex-shrink: 1;
+                  font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                  font-size: 14px;
+                  font-weight: 400;
+                  line-height: 1;
+                  margin-bottom: 0;
+                  margin-left: 8px;
+                  margin-right: 8px;
+                  margin-top: 0;
+                  overflow-wrap: break-word;
+                  padding-bottom: 5px;
+                  padding-left: 0;
+                  padding-right: 0;
+                  padding-top: 5px;
+                  white-space: nowrap;
+                  width: 40px;
+                  word-wrap: break-word;
+                }
+          >
+            420
+          </label>
+        </div>
+      </div>
+    </span>
+    <span
+      className=
+          ms-StackItem
+          {
+            -moz-osx-font-smoothing: grayscale;
+            -webkit-font-smoothing: antialiased;
+            flex-grow: 1;
+            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+            font-size: 14px;
+            font-weight: 400;
+            height: auto;
+            width: auto;
+          }
+    >
+      <div
+        className=
+            ms-Slider
+            ms-Slider-enabled
+            ms-Slider-row
+            {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 14px;
+              font-weight: 400;
+              user-select: none;
+            }
+      >
+        <label
+          className=
+              ms-Label
+              {
+                -moz-osx-font-smoothing: grayscale;
+                -webkit-font-smoothing: antialiased;
+                box-shadow: none;
+                box-sizing: border-box;
+                color: #333333;
+                display: block;
+                font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                font-size: 14px;
+                font-weight: 400;
+                margin-bottom: 0px;
+                margin-left: 0px;
+                margin-right: 0px;
+                margin-top: 0px;
+                overflow-wrap: break-word;
+                padding-bottom: 0px;
+                padding-left: 0px;
+                padding-right: 0px;
+                padding-top: 0px;
+                word-wrap: break-word;
+              }
+          htmlFor="Slider1"
+        >
+          Container width:
+        </label>
+        <div
+          className=
+              ms-Slider-container
+              {
+                align-items: center;
+                display: flex;
+                flex-wrap: nowrap;
+              }
+        >
+          <div
+            aria-disabled={false}
+            aria-label="Container width:"
+            aria-valuemax={100}
+            aria-valuemin={1}
+            aria-valuenow={100}
+            className=
+                ms-Slider-slideBox
+                ms-Slider-showValue
+                ms-Slider-showTransitions
+                {
+                  align-items: center;
+                  background: transparent;
+                  border: none;
+                  display: flex;
+                  flex-grow: 1;
+                  height: 28px;
+                  line-height: 28px;
+                  outline: transparent;
+                  padding-bottom: 0;
+                  padding-left: 8px;
+                  padding-right: 8px;
+                  padding-top: 0;
+                  position: relative;
+                  width: auto;
+                }
+                &::-moz-focus-inner {
+                  border: 0;
+                }
+                .ms-Fabric--isFocusVisible &:focus:after {
+                  border: 1px solid #ffffff;
+                  bottom: 1px;
+                  content: "";
+                  left: 1px;
+                  outline: 1px solid #666666;
+                  position: absolute;
+                  right: 1px;
+                  top: 1px;
+                  z-index: 1;
+                }
+                &:active $activeSection {
+                  background-color: #0078d4;
+                }
+                @media screen and (-ms-high-contrast: active){&:active $activeSection {
+                  background-color: Highlight;
+                }
+                &:hover $activeSection {
+                  background-color: #0078d4;
+                }
+                @media screen and (-ms-high-contrast: active){&:hover $activeSection {
+                  background-color: Highlight;
+                }
+                &:active $inactiveSection {
+                  background-color: #c7e0f4;
+                }
+                @media screen and (-ms-high-contrast: active){&:active $inactiveSection {
+                  border-color: Highlight;
+                }
+                &:hover $inactiveSection {
+                  background-color: #c7e0f4;
+                }
+                @media screen and (-ms-high-contrast: active){&:hover $inactiveSection {
+                  border-color: Highlight;
+                }
+                &:active $thumb {
+                  border: 2px solid #0078d4;
+                }
+                @media screen and (-ms-high-contrast: active){&:active $thumb {
+                  border-color: Highlight;
+                }
+                &:hover $thumb {
+                  border: 2px solid #0078d4;
+                }
+                @media screen and (-ms-high-contrast: active){&:hover $thumb {
+                  border-color: Highlight;
+                }
+                & $thumb {
+                  background: #ffffff;
+                  border-color: #666666;
+                  border-radius: 10px;
+                  border-style: solid;
+                  border-width: 2px;
+                  box-sizing: border-box;
+                  display: block;
+                  height: 16px;
+                  position: absolute;
+                  top: -6px;
+                  transform: translateX(-50%);
+                  transition: left 0.367s cubic-bezier(.1,.9,.2,1);
+                  width: 16px;
+                }
+            data-is-focusable={true}
+            id="Slider1"
+            onKeyDown={[Function]}
+            onMouseDown={[Function]}
+            onTouchStart={[Function]}
+            role="slider"
+            tabIndex={0}
+          >
+            <div
+              className=
+                  ms-Slider-line
+                  {
+                    display: flex;
+                    position: relative;
+                    width: 100%;
+                  }
+                  & $lineContainer {
+                    border-radius: 4px;
+                    box-sizing: border-box;
+                    height: 4px;
+                    width: 100%;
+                  }
+            >
+              <span
+                className=
+                    ms-Slider-thumb
+
+                style={
+                  Object {
+                    "left": "100%",
+                  }
+                }
+              />
+              <span
+                className=
+                    ms-Slider-active
+
+                    {
+                      background: #666666;
+                      transition: width 0.367s cubic-bezier(.1,.9,.2,1);
+                    }
+                    @media screen and (-ms-high-contrast: active){& {
+                      background-color: WindowText;
+                    }
+                style={
+                  Object {
+                    "width": "100%",
+                  }
+                }
+              />
+              <span
+                className=
+                    ms-Slider-inactive
+
+                    {
+                      background: #c8c8c8;
+                      transition: width 0.367s cubic-bezier(.1,.9,.2,1);
+                    }
+                    @media screen and (-ms-high-contrast: active){& {
+                      border: 1px solid WindowText;
+                    }
+                style={
+                  Object {
+                    "width": "0%",
+                  }
+                }
+              />
+            </div>
+          </div>
+          <label
+            className=
+                ms-Label
+                ms-Slider-value
+                {
+                  -moz-osx-font-smoothing: grayscale;
+                  -webkit-font-smoothing: antialiased;
+                  box-shadow: none;
+                  box-sizing: border-box;
+                  color: #333333;
+                  display: block;
+                  flex-shrink: 1;
+                  font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                  font-size: 14px;
+                  font-weight: 400;
+                  line-height: 1;
+                  margin-bottom: 0;
+                  margin-left: 8px;
+                  margin-right: 8px;
+                  margin-top: 0;
+                  overflow-wrap: break-word;
+                  padding-bottom: 5px;
+                  padding-left: 0;
+                  padding-right: 0;
+                  padding-top: 5px;
+                  white-space: nowrap;
+                  width: 40px;
+                  word-wrap: break-word;
+                }
+          >
+            100
+          </label>
+        </div>
+      </div>
+    </span>
+  </div>
+  <div
+    className=
+        ms-Stack
+        {
+          box-sizing: border-box;
+          display: flex;
+          flex-direction: row;
+          flex-wrap: nowrap;
+          height: auto;
+          width: auto;
+        }
+        & > * {
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+        & > *:not(:first-child) {
+          margin-left: 20px;
+        }
+        & > *:not(.ms-StackItem) {
+          flex-shrink: 0;
+        }
+  >
+    <span
+      className=
+          ms-StackItem
+          {
+            -moz-osx-font-smoothing: grayscale;
+            -webkit-font-smoothing: antialiased;
+            flex-grow: 1;
+            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+            font-size: 14px;
+            font-weight: 400;
+            height: auto;
+            width: auto;
+          }
+    >
+      <div
+        className=
+            ms-Dropdown-container
+
+      >
+        <label
+          className=
+              ms-Label
+              ms-Dropdown-label
+              {
+                -moz-osx-font-smoothing: grayscale;
+                -webkit-font-smoothing: antialiased;
+                box-shadow: none;
+                box-sizing: border-box;
+                color: #333333;
+                display: inline-block;
+                font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                font-size: 14px;
+                font-weight: 400;
+                margin-bottom: 0px;
+                margin-left: 0px;
+                margin-right: 0px;
+                margin-top: 0px;
+                overflow-wrap: break-word;
+                padding-bottom: 5px;
+                padding-left: 0;
+                padding-right: 0;
+                padding-top: 5px;
+                word-wrap: break-word;
+              }
+          htmlFor="Dropdown2"
+          id="Dropdown2-label"
+        >
+          Horizontal alignment:
+        </label>
+        <div
+          aria-activedescendant="Dropdown2-option"
+          aria-describedby="Dropdown2-option"
+          aria-expanded="false"
+          aria-labelledby="Dropdown2-label"
+          className=
+              ms-Dropdown
+              {
+                -moz-osx-font-smoothing: grayscale;
+                -webkit-font-smoothing: antialiased;
+                box-shadow: none;
+                box-sizing: border-box;
+                color: #333333;
+                font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                font-size: 14px;
+                font-weight: 400;
+                margin-bottom: 0px;
+                margin-left: 0px;
+                margin-right: 0px;
+                margin-top: 0px;
+                outline: 0px;
+                padding-bottom: 0px;
+                padding-left: 0px;
+                padding-right: 0px;
+                padding-top: 0px;
+                position: relative;
+                user-select: none;
+              }
+              &:hover .ms-Dropdown-title {
+                border-color: #212121;
+                color: #212121;
+              }
+              @media screen and (-ms-high-contrast: active){&:hover .ms-Dropdown-title {
+                border-color: Highlight;
+              }
+              &:focus .ms-Dropdown-title {
+                border-color: #0078d4;
+                color: #212121;
+              }
+              @media screen and (-ms-high-contrast: active){&:focus .ms-Dropdown-title {
+                background-color: Highlight;
+                border-color: Highlight;
+                color: HighlightText;
+              }
+              @media screen and (-ms-high-contrast: active){&:focus .ms-Dropdown-title:hover {
+                color: HighlightText;
+              }
+              @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: black-on-white){&:focus .ms-Dropdown-title {
+                -ms-high-contrast-adjust: none;
+              }
+              &:active .ms-Dropdown-title {
+                border-color: #005a9e;
+                color: #212121;
+              }
+              @media screen and (-ms-high-contrast: active){&:active .ms-Dropdown-title {
+                border-color: Highlight;
+              }
+              &:hover .ms-Dropdown-caretDown {
+                color: #212121;
+              }
+              &:focus .ms-Dropdown-caretDown {
+                color: #212121;
+              }
+              @media screen and (-ms-high-contrast: active){&:focus .ms-Dropdown-caretDown {
+                color: HighlightText;
+              }
+              @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: black-on-white){&:focus .ms-Dropdown-caretDown {
+                -ms-high-contrast-adjust: none;
+              }
+              &:active .ms-Dropdown-caretDown {
+                color: #212121;
+              }
+              &:hover .ms-Dropdown-titleIsPlaceHolder {
+                color: #666666;
+              }
+              &:focus .ms-Dropdown-titleIsPlaceHolder {
+                color: #666666;
+              }
+              &:active .ms-Dropdown-titleIsPlaceHolder {
+                color: #666666;
+              }
+              &:hover .ms-Dropdown-title--hasError {
+                border-color: #a80000;
+              }
+              &:active .ms-Dropdown-title--hasError {
+                border-color: #a80000;
+              }
+              &:focus .ms-Dropdown-title--hasError {
+                border-color: #a80000;
+              }
+          data-is-focusable={true}
+          id="Dropdown2"
+          onBlur={[Function]}
+          onChange={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onKeyDown={[Function]}
+          onKeyUp={[Function]}
+          placeholder="Select Horizontal Alignment"
+          role="listbox"
+          tabIndex={0}
+        >
+          <span
+            aria-atomic={true}
+            aria-label="Left"
+            aria-live="off"
+            aria-posinset={1}
+            aria-selected={true}
+            aria-setsize={3}
+            className=
+                ms-Dropdown-title
+                {
+                  background-color: #ffffff;
+                  border-color: #a6a6a6;
+                  border-style: solid;
+                  border-width: 1px;
+                  box-shadow: none;
+                  box-sizing: border-box;
+                  cursor: pointer;
+                  display: block;
+                  height: 32px;
+                  line-height: 30px;
+                  margin-bottom: 0px;
+                  margin-left: 0px;
+                  margin-right: 0px;
+                  margin-top: 0px;
+                  overflow: hidden;
+                  padding-bottom: 0;
+                  padding-left: 12px;
+                  padding-right: 32px;
+                  padding-top: 0;
+                  position: relative;
+                  text-overflow: ellipsis;
+                  white-space: nowrap;
+                }
+            id="Dropdown2-option"
+            role="option"
+          >
+            <span>
+              Left
+            </span>
+          </span>
+          <span
+            className=
+                ms-Dropdown-caretDownWrapper
+                {
+                  height: 32px;
+                  line-height: 30px;
+                  position: absolute;
+                  right: 12px;
+                  top: 1px;
+                }
+          >
+            <i
+              aria-hidden={true}
+              className=
+                  ms-Dropdown-caretDown
+                  {
+                    -moz-osx-font-smoothing: grayscale;
+                    -webkit-font-smoothing: antialiased;
+                    color: #666666;
+                    display: inline-block;
+                    font-family: "FabricMDL2Icons";
+                    font-size: 12px;
+                    font-style: normal;
+                    font-weight: normal;
+                    pointer-events: none;
+                    speak: none;
+                  }
+              data-icon-name="ChevronDown"
+              role="presentation"
+            >
+              
+            </i>
+          </span>
+        </div>
+      </div>
+    </span>
+    <span
+      className=
+          ms-StackItem
+          {
+            -moz-osx-font-smoothing: grayscale;
+            -webkit-font-smoothing: antialiased;
+            flex-grow: 1;
+            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+            font-size: 14px;
+            font-weight: 400;
+            height: auto;
+            width: auto;
+          }
+    >
+      <div
+        className=
+            ms-Dropdown-container
+
+      >
+        <label
+          className=
+              ms-Label
+              ms-Dropdown-label
+              {
+                -moz-osx-font-smoothing: grayscale;
+                -webkit-font-smoothing: antialiased;
+                box-shadow: none;
+                box-sizing: border-box;
+                color: #333333;
+                display: inline-block;
+                font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                font-size: 14px;
+                font-weight: 400;
+                margin-bottom: 0px;
+                margin-left: 0px;
+                margin-right: 0px;
+                margin-top: 0px;
+                overflow-wrap: break-word;
+                padding-bottom: 5px;
+                padding-left: 0;
+                padding-right: 0;
+                padding-top: 5px;
+                word-wrap: break-word;
+              }
+          htmlFor="Dropdown3"
+          id="Dropdown3-label"
+        >
+          Vertical alignment:
+        </label>
+        <div
+          aria-activedescendant="Dropdown3-option"
+          aria-describedby="Dropdown3-option"
+          aria-expanded="false"
+          aria-labelledby="Dropdown3-label"
+          className=
+              ms-Dropdown
+              {
+                -moz-osx-font-smoothing: grayscale;
+                -webkit-font-smoothing: antialiased;
+                box-shadow: none;
+                box-sizing: border-box;
+                color: #333333;
+                font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                font-size: 14px;
+                font-weight: 400;
+                margin-bottom: 0px;
+                margin-left: 0px;
+                margin-right: 0px;
+                margin-top: 0px;
+                outline: 0px;
+                padding-bottom: 0px;
+                padding-left: 0px;
+                padding-right: 0px;
+                padding-top: 0px;
+                position: relative;
+                user-select: none;
+              }
+              &:hover .ms-Dropdown-title {
+                border-color: #212121;
+                color: #212121;
+              }
+              @media screen and (-ms-high-contrast: active){&:hover .ms-Dropdown-title {
+                border-color: Highlight;
+              }
+              &:focus .ms-Dropdown-title {
+                border-color: #0078d4;
+                color: #212121;
+              }
+              @media screen and (-ms-high-contrast: active){&:focus .ms-Dropdown-title {
+                background-color: Highlight;
+                border-color: Highlight;
+                color: HighlightText;
+              }
+              @media screen and (-ms-high-contrast: active){&:focus .ms-Dropdown-title:hover {
+                color: HighlightText;
+              }
+              @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: black-on-white){&:focus .ms-Dropdown-title {
+                -ms-high-contrast-adjust: none;
+              }
+              &:active .ms-Dropdown-title {
+                border-color: #005a9e;
+                color: #212121;
+              }
+              @media screen and (-ms-high-contrast: active){&:active .ms-Dropdown-title {
+                border-color: Highlight;
+              }
+              &:hover .ms-Dropdown-caretDown {
+                color: #212121;
+              }
+              &:focus .ms-Dropdown-caretDown {
+                color: #212121;
+              }
+              @media screen and (-ms-high-contrast: active){&:focus .ms-Dropdown-caretDown {
+                color: HighlightText;
+              }
+              @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: black-on-white){&:focus .ms-Dropdown-caretDown {
+                -ms-high-contrast-adjust: none;
+              }
+              &:active .ms-Dropdown-caretDown {
+                color: #212121;
+              }
+              &:hover .ms-Dropdown-titleIsPlaceHolder {
+                color: #666666;
+              }
+              &:focus .ms-Dropdown-titleIsPlaceHolder {
+                color: #666666;
+              }
+              &:active .ms-Dropdown-titleIsPlaceHolder {
+                color: #666666;
+              }
+              &:hover .ms-Dropdown-title--hasError {
+                border-color: #a80000;
+              }
+              &:active .ms-Dropdown-title--hasError {
+                border-color: #a80000;
+              }
+              &:focus .ms-Dropdown-title--hasError {
+                border-color: #a80000;
+              }
+          data-is-focusable={true}
+          id="Dropdown3"
+          onBlur={[Function]}
+          onChange={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onKeyDown={[Function]}
+          onKeyUp={[Function]}
+          placeholder="Select Vertical Alignment"
+          role="listbox"
+          tabIndex={0}
+        >
+          <span
+            aria-atomic={true}
+            aria-label="Top"
+            aria-live="off"
+            aria-posinset={1}
+            aria-selected={true}
+            aria-setsize={6}
+            className=
+                ms-Dropdown-title
+                {
+                  background-color: #ffffff;
+                  border-color: #a6a6a6;
+                  border-style: solid;
+                  border-width: 1px;
+                  box-shadow: none;
+                  box-sizing: border-box;
+                  cursor: pointer;
+                  display: block;
+                  height: 32px;
+                  line-height: 30px;
+                  margin-bottom: 0px;
+                  margin-left: 0px;
+                  margin-right: 0px;
+                  margin-top: 0px;
+                  overflow: hidden;
+                  padding-bottom: 0;
+                  padding-left: 12px;
+                  padding-right: 32px;
+                  padding-top: 0;
+                  position: relative;
+                  text-overflow: ellipsis;
+                  white-space: nowrap;
+                }
+            id="Dropdown3-option"
+            role="option"
+          >
+            <span>
+              Top
+            </span>
+          </span>
+          <span
+            className=
+                ms-Dropdown-caretDownWrapper
+                {
+                  height: 32px;
+                  line-height: 30px;
+                  position: absolute;
+                  right: 12px;
+                  top: 1px;
+                }
+          >
+            <i
+              aria-hidden={true}
+              className=
+                  ms-Dropdown-caretDown
+                  {
+                    -moz-osx-font-smoothing: grayscale;
+                    -webkit-font-smoothing: antialiased;
+                    color: #666666;
+                    display: inline-block;
+                    font-family: "FabricMDL2Icons";
+                    font-size: 12px;
+                    font-style: normal;
+                    font-weight: normal;
+                    pointer-events: none;
+                    speak: none;
+                  }
+              data-icon-name="ChevronDown"
+              role="presentation"
+            >
+              
+            </i>
+          </span>
+        </div>
+      </div>
+    </span>
+    <span
+      className=
+          ms-StackItem
+          {
+            -moz-osx-font-smoothing: grayscale;
+            -webkit-font-smoothing: antialiased;
+            flex-grow: 1;
+            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+            font-size: 14px;
+            font-weight: 400;
+            height: auto;
+            width: auto;
+          }
+    >
+      <div
+        className=
+            ms-Dropdown-container
+
+      >
+        <label
+          className=
+              ms-Label
+              ms-Dropdown-label
+              {
+                -moz-osx-font-smoothing: grayscale;
+                -webkit-font-smoothing: antialiased;
+                box-shadow: none;
+                box-sizing: border-box;
+                color: #333333;
+                display: inline-block;
+                font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                font-size: 14px;
+                font-weight: 400;
+                margin-bottom: 0px;
+                margin-left: 0px;
+                margin-right: 0px;
+                margin-top: 0px;
+                overflow-wrap: break-word;
+                padding-bottom: 5px;
+                padding-left: 0;
+                padding-right: 0;
+                padding-top: 5px;
+                word-wrap: break-word;
+              }
+          htmlFor="Dropdown4"
+          id="Dropdown4-label"
+        >
+          Overflow:
+        </label>
+        <div
+          aria-activedescendant="Dropdown4-option"
+          aria-describedby="Dropdown4-option"
+          aria-expanded="false"
+          aria-labelledby="Dropdown4-label"
+          className=
+              ms-Dropdown
+              {
+                -moz-osx-font-smoothing: grayscale;
+                -webkit-font-smoothing: antialiased;
+                box-shadow: none;
+                box-sizing: border-box;
+                color: #333333;
+                font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                font-size: 14px;
+                font-weight: 400;
+                margin-bottom: 0px;
+                margin-left: 0px;
+                margin-right: 0px;
+                margin-top: 0px;
+                outline: 0px;
+                padding-bottom: 0px;
+                padding-left: 0px;
+                padding-right: 0px;
+                padding-top: 0px;
+                position: relative;
+                user-select: none;
+              }
+              &:hover .ms-Dropdown-title {
+                border-color: #212121;
+                color: #212121;
+              }
+              @media screen and (-ms-high-contrast: active){&:hover .ms-Dropdown-title {
+                border-color: Highlight;
+              }
+              &:focus .ms-Dropdown-title {
+                border-color: #0078d4;
+                color: #212121;
+              }
+              @media screen and (-ms-high-contrast: active){&:focus .ms-Dropdown-title {
+                background-color: Highlight;
+                border-color: Highlight;
+                color: HighlightText;
+              }
+              @media screen and (-ms-high-contrast: active){&:focus .ms-Dropdown-title:hover {
+                color: HighlightText;
+              }
+              @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: black-on-white){&:focus .ms-Dropdown-title {
+                -ms-high-contrast-adjust: none;
+              }
+              &:active .ms-Dropdown-title {
+                border-color: #005a9e;
+                color: #212121;
+              }
+              @media screen and (-ms-high-contrast: active){&:active .ms-Dropdown-title {
+                border-color: Highlight;
+              }
+              &:hover .ms-Dropdown-caretDown {
+                color: #212121;
+              }
+              &:focus .ms-Dropdown-caretDown {
+                color: #212121;
+              }
+              @media screen and (-ms-high-contrast: active){&:focus .ms-Dropdown-caretDown {
+                color: HighlightText;
+              }
+              @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: black-on-white){&:focus .ms-Dropdown-caretDown {
+                -ms-high-contrast-adjust: none;
+              }
+              &:active .ms-Dropdown-caretDown {
+                color: #212121;
+              }
+              &:hover .ms-Dropdown-titleIsPlaceHolder {
+                color: #666666;
+              }
+              &:focus .ms-Dropdown-titleIsPlaceHolder {
+                color: #666666;
+              }
+              &:active .ms-Dropdown-titleIsPlaceHolder {
+                color: #666666;
+              }
+              &:hover .ms-Dropdown-title--hasError {
+                border-color: #a80000;
+              }
+              &:active .ms-Dropdown-title--hasError {
+                border-color: #a80000;
+              }
+              &:focus .ms-Dropdown-title--hasError {
+                border-color: #a80000;
+              }
+          data-is-focusable={true}
+          id="Dropdown4"
+          onBlur={[Function]}
+          onChange={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onKeyDown={[Function]}
+          onKeyUp={[Function]}
+          placeholder="Select Overflow"
+          role="listbox"
+          tabIndex={0}
+        >
+          <span
+            aria-atomic={true}
+            aria-label="Visible"
+            aria-live="off"
+            aria-posinset={1}
+            aria-selected={true}
+            aria-setsize={3}
+            className=
+                ms-Dropdown-title
+                {
+                  background-color: #ffffff;
+                  border-color: #a6a6a6;
+                  border-style: solid;
+                  border-width: 1px;
+                  box-shadow: none;
+                  box-sizing: border-box;
+                  cursor: pointer;
+                  display: block;
+                  height: 32px;
+                  line-height: 30px;
+                  margin-bottom: 0px;
+                  margin-left: 0px;
+                  margin-right: 0px;
+                  margin-top: 0px;
+                  overflow: hidden;
+                  padding-bottom: 0;
+                  padding-left: 12px;
+                  padding-right: 32px;
+                  padding-top: 0;
+                  position: relative;
+                  text-overflow: ellipsis;
+                  white-space: nowrap;
+                }
+            id="Dropdown4-option"
+            role="option"
+          >
+            <span>
+              Visible
+            </span>
+          </span>
+          <span
+            className=
+                ms-Dropdown-caretDownWrapper
+                {
+                  height: 32px;
+                  line-height: 30px;
+                  position: absolute;
+                  right: 12px;
+                  top: 1px;
+                }
+          >
+            <i
+              aria-hidden={true}
+              className=
+                  ms-Dropdown-caretDown
+                  {
+                    -moz-osx-font-smoothing: grayscale;
+                    -webkit-font-smoothing: antialiased;
+                    color: #666666;
+                    display: inline-block;
+                    font-family: "FabricMDL2Icons";
+                    font-size: 12px;
+                    font-style: normal;
+                    font-weight: normal;
+                    pointer-events: none;
+                    speak: none;
+                  }
+              data-icon-name="ChevronDown"
+              role="presentation"
+            >
+              
+            </i>
+          </span>
+        </div>
+      </div>
+    </span>
+  </div>
+  <div
+    className=
+
+        {
+          height: 420px;
+        }
+  >
+    <div
+      className=
+          ms-Stack
+          {
+            background: #71afe5;
+            display: inline-block;
+            height: 100%;
+            overflow: visible;
+            width: 100%;
+          }
+          & span {
+            align-items: center;
+            background: #0078d4;
+            color: #ffffff;
+            display: flex;
+            height: 50px;
+            justify-content: center;
+            width: 50px;
+          }
+    >
+      <div
+        className=
+            ms-Stack-inner
+            {
+              align-content: end;
+              align-items: start;
+              box-sizing: border-box;
+              display: flex;
+              flex-direction: column;
+              flex-wrap: wrap;
+              height: calc(100% + 20px);
+              justify-content: start;
+              margin-bottom: -10px;
+              margin-left: -10px;
+              margin-right: -10px;
+              margin-top: -10px;
+              overflow: visible;
+            }
+            & > * {
+              margin-bottom: 10px;
+              margin-left: 10px;
+              margin-right: 10px;
+              margin-top: 10px;
+              max-height: calc(100% - 20px);
+              text-overflow: ellipsis;
+              white-space: nowrap;
+            }
+            & > *:not(.ms-StackItem) {
+              flex-shrink: 0;
+            }
+      >
+        <span>
+          1
+        </span>
+        <span>
+          2
+        </span>
+        <span>
+          3
+        </span>
+        <span>
+          4
+        </span>
+        <span>
+          5
+        </span>
+        <span>
+          6
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/packages/office-ui-fabric-react/src/components/__snapshots__/Stack.Vertical.WrapNested.Example.tsx.shot b/packages/office-ui-fabric-react/src/components/__snapshots__/Stack.Vertical.WrapNested.Example.tsx.shot
new file mode 100644
index 0000000000000..5ddd0e65dc039
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/__snapshots__/Stack.Vertical.WrapNested.Example.tsx.shot
@@ -0,0 +1,535 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Component Examples renders Stack.Vertical.WrapNested.Example.tsx correctly 1`] = `
+<div
+  className=
+      ms-Stack
+      {
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        flex-wrap: nowrap;
+        height: auto;
+        width: auto;
+      }
+      & > * {
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      & > *:not(:first-child) {
+        margin-top: 10px;
+      }
+      & > *:not(.ms-StackItem) {
+        flex-shrink: 0;
+      }
+>
+  <div
+    className=
+        ms-Slider
+        ms-Slider-enabled
+        ms-Slider-row
+        {
+          -moz-osx-font-smoothing: grayscale;
+          -webkit-font-smoothing: antialiased;
+          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+          font-size: 14px;
+          font-weight: 400;
+          user-select: none;
+        }
+  >
+    <label
+      className=
+          ms-Label
+          {
+            -moz-osx-font-smoothing: grayscale;
+            -webkit-font-smoothing: antialiased;
+            box-shadow: none;
+            box-sizing: border-box;
+            color: #333333;
+            display: block;
+            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+            font-size: 14px;
+            font-weight: 400;
+            margin-bottom: 0px;
+            margin-left: 0px;
+            margin-right: 0px;
+            margin-top: 0px;
+            overflow-wrap: break-word;
+            padding-bottom: 0px;
+            padding-left: 0px;
+            padding-right: 0px;
+            padding-top: 0px;
+            word-wrap: break-word;
+          }
+      htmlFor="Slider0"
+    >
+      Change the stack height to see how child items wrap onto multiple columns:
+    </label>
+    <div
+      className=
+          ms-Slider-container
+          {
+            align-items: center;
+            display: flex;
+            flex-wrap: nowrap;
+          }
+    >
+      <div
+        aria-disabled={false}
+        aria-label="Change the stack height to see how child items wrap onto multiple columns:"
+        aria-valuemax={420}
+        aria-valuemin={1}
+        aria-valuenow={420}
+        className=
+            ms-Slider-slideBox
+            ms-Slider-showValue
+            ms-Slider-showTransitions
+            {
+              align-items: center;
+              background: transparent;
+              border: none;
+              display: flex;
+              flex-grow: 1;
+              height: 28px;
+              line-height: 28px;
+              outline: transparent;
+              padding-bottom: 0;
+              padding-left: 8px;
+              padding-right: 8px;
+              padding-top: 0;
+              position: relative;
+              width: auto;
+            }
+            &::-moz-focus-inner {
+              border: 0;
+            }
+            .ms-Fabric--isFocusVisible &:focus:after {
+              border: 1px solid #ffffff;
+              bottom: 1px;
+              content: "";
+              left: 1px;
+              outline: 1px solid #666666;
+              position: absolute;
+              right: 1px;
+              top: 1px;
+              z-index: 1;
+            }
+            &:active $activeSection {
+              background-color: #0078d4;
+            }
+            @media screen and (-ms-high-contrast: active){&:active $activeSection {
+              background-color: Highlight;
+            }
+            &:hover $activeSection {
+              background-color: #0078d4;
+            }
+            @media screen and (-ms-high-contrast: active){&:hover $activeSection {
+              background-color: Highlight;
+            }
+            &:active $inactiveSection {
+              background-color: #c7e0f4;
+            }
+            @media screen and (-ms-high-contrast: active){&:active $inactiveSection {
+              border-color: Highlight;
+            }
+            &:hover $inactiveSection {
+              background-color: #c7e0f4;
+            }
+            @media screen and (-ms-high-contrast: active){&:hover $inactiveSection {
+              border-color: Highlight;
+            }
+            &:active $thumb {
+              border: 2px solid #0078d4;
+            }
+            @media screen and (-ms-high-contrast: active){&:active $thumb {
+              border-color: Highlight;
+            }
+            &:hover $thumb {
+              border: 2px solid #0078d4;
+            }
+            @media screen and (-ms-high-contrast: active){&:hover $thumb {
+              border-color: Highlight;
+            }
+            & $thumb {
+              background: #ffffff;
+              border-color: #666666;
+              border-radius: 10px;
+              border-style: solid;
+              border-width: 2px;
+              box-sizing: border-box;
+              display: block;
+              height: 16px;
+              position: absolute;
+              top: -6px;
+              transform: translateX(-50%);
+              transition: left 0.367s cubic-bezier(.1,.9,.2,1);
+              width: 16px;
+            }
+        data-is-focusable={true}
+        id="Slider0"
+        onKeyDown={[Function]}
+        onMouseDown={[Function]}
+        onTouchStart={[Function]}
+        role="slider"
+        tabIndex={0}
+      >
+        <div
+          className=
+              ms-Slider-line
+              {
+                display: flex;
+                position: relative;
+                width: 100%;
+              }
+              & $lineContainer {
+                border-radius: 4px;
+                box-sizing: border-box;
+                height: 4px;
+                width: 100%;
+              }
+        >
+          <span
+            className=
+                ms-Slider-thumb
+
+            style={
+              Object {
+                "left": "100%",
+              }
+            }
+          />
+          <span
+            className=
+                ms-Slider-active
+
+                {
+                  background: #666666;
+                  transition: width 0.367s cubic-bezier(.1,.9,.2,1);
+                }
+                @media screen and (-ms-high-contrast: active){& {
+                  background-color: WindowText;
+                }
+            style={
+              Object {
+                "width": "100%",
+              }
+            }
+          />
+          <span
+            className=
+                ms-Slider-inactive
+
+                {
+                  background: #c8c8c8;
+                  transition: width 0.367s cubic-bezier(.1,.9,.2,1);
+                }
+                @media screen and (-ms-high-contrast: active){& {
+                  border: 1px solid WindowText;
+                }
+            style={
+              Object {
+                "width": "0%",
+              }
+            }
+          />
+        </div>
+      </div>
+      <label
+        className=
+            ms-Label
+            ms-Slider-value
+            {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              box-shadow: none;
+              box-sizing: border-box;
+              color: #333333;
+              display: block;
+              flex-shrink: 1;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 14px;
+              font-weight: 400;
+              line-height: 1;
+              margin-bottom: 0;
+              margin-left: 8px;
+              margin-right: 8px;
+              margin-top: 0;
+              overflow-wrap: break-word;
+              padding-bottom: 5px;
+              padding-left: 0;
+              padding-right: 0;
+              padding-top: 5px;
+              white-space: nowrap;
+              width: 40px;
+              word-wrap: break-word;
+            }
+      >
+        420
+      </label>
+    </div>
+  </div>
+  <div
+    className=
+        ms-Stack
+        {
+          background: #71afe5;
+          display: inline-block;
+          height: 420px;
+          overflow: visible;
+          width: auto;
+        }
+  >
+    <div
+      className=
+          ms-Stack-inner
+          {
+            align-content: end;
+            align-items: start;
+            box-sizing: border-box;
+            display: flex;
+            flex-direction: column;
+            flex-wrap: wrap;
+            height: calc(100% + 30px);
+            justify-content: start;
+            margin-bottom: -15px;
+            margin-left: -20px;
+            margin-right: -20px;
+            margin-top: -15px;
+            overflow: visible;
+          }
+          & > * {
+            margin-bottom: 15px;
+            margin-left: 20px;
+            margin-right: 20px;
+            margin-top: 15px;
+            max-height: calc(100% - 30px);
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+          & > *:not(.ms-StackItem) {
+            flex-shrink: 0;
+          }
+    >
+      <div
+        className=
+            ms-Stack
+            {
+              background: #a6a6a6;
+              display: inline-block;
+              height: 100%;
+              overflow: visible;
+              width: auto;
+            }
+            & span {
+              align-items: center;
+              background: #0078d4;
+              color: #ffffff;
+              display: flex;
+              height: 50px;
+              justify-content: center;
+              width: 50px;
+            }
+      >
+        <div
+          className=
+              ms-Stack-inner
+              {
+                align-content: end;
+                align-items: start;
+                box-sizing: border-box;
+                display: flex;
+                flex-direction: column;
+                flex-wrap: wrap;
+                height: calc(100% + 10px);
+                justify-content: start;
+                margin-bottom: -5px;
+                margin-left: -15px;
+                margin-right: -15px;
+                margin-top: -5px;
+                overflow: visible;
+              }
+              & > * {
+                margin-bottom: 5px;
+                margin-left: 15px;
+                margin-right: 15px;
+                margin-top: 5px;
+                max-height: calc(100% - 10px);
+                text-overflow: ellipsis;
+                white-space: nowrap;
+              }
+              & > *:not(.ms-StackItem) {
+                flex-shrink: 0;
+              }
+        >
+          <span>
+            1
+          </span>
+          <span>
+            2
+          </span>
+          <span>
+            3
+          </span>
+          <span>
+            4
+          </span>
+          <span>
+            5
+          </span>
+          <span>
+            6
+          </span>
+          <span>
+            7
+          </span>
+        </div>
+      </div>
+      <div
+        className=
+            ms-Stack
+            {
+              background: #666666;
+              display: inline-block;
+              height: 100%;
+              overflow: visible;
+              width: auto;
+            }
+            & span {
+              align-items: center;
+              background: #005a9e;
+              color: #ffffff;
+              display: flex;
+              height: 50px;
+              justify-content: center;
+              width: 50px;
+            }
+      >
+        <div
+          className=
+              ms-Stack-inner
+              {
+                align-content: end;
+                align-items: start;
+                box-sizing: border-box;
+                display: flex;
+                flex-direction: column;
+                flex-wrap: wrap;
+                height: calc(100% + 20px);
+                justify-content: start;
+                margin-bottom: -10px;
+                margin-left: -25px;
+                margin-right: -25px;
+                margin-top: -10px;
+                overflow: visible;
+              }
+              & > * {
+                margin-bottom: 10px;
+                margin-left: 25px;
+                margin-right: 25px;
+                margin-top: 10px;
+                max-height: calc(100% - 20px);
+                text-overflow: ellipsis;
+                white-space: nowrap;
+              }
+              & > *:not(.ms-StackItem) {
+                flex-shrink: 0;
+              }
+        >
+          <span>
+            1
+          </span>
+          <span>
+            2
+          </span>
+          <span>
+            3
+          </span>
+        </div>
+      </div>
+      <div
+        className=
+            ms-Stack
+            {
+              background: #333333;
+              display: inline-block;
+              height: 100%;
+              overflow: visible;
+              width: auto;
+            }
+            & span {
+              align-items: center;
+              background: #004578;
+              color: #ffffff;
+              display: flex;
+              height: 50px;
+              justify-content: center;
+              width: 50px;
+            }
+      >
+        <div
+          className=
+              ms-Stack-inner
+              {
+                align-content: end;
+                align-items: start;
+                box-sizing: border-box;
+                display: flex;
+                flex-direction: column;
+                flex-wrap: wrap;
+                height: calc(100% + 0px);
+                justify-content: start;
+                margin-bottom: 0px;
+                margin-left: 0px;
+                margin-right: 0px;
+                margin-top: 0px;
+                overflow: visible;
+              }
+              & > * {
+                margin-bottom: 0px;
+                margin-left: 0px;
+                margin-right: 0px;
+                margin-top: 0px;
+                max-height: 100%;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+              }
+              & > *:not(.ms-StackItem) {
+                flex-shrink: 0;
+              }
+        >
+          <span>
+            1
+          </span>
+          <span>
+            2
+          </span>
+          <span>
+            3
+          </span>
+          <span>
+            4
+          </span>
+          <span>
+            5
+          </span>
+          <span>
+            6
+          </span>
+          <span>
+            7
+          </span>
+          <span>
+            8
+          </span>
+          <span>
+            9
+          </span>
+          <span>
+            10
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/packages/office-ui-fabric-react/src/index.ts b/packages/office-ui-fabric-react/src/index.ts
index c9e3affd8d14a..a7b1a3dd1a0fc 100644
--- a/packages/office-ui-fabric-react/src/index.ts
+++ b/packages/office-ui-fabric-react/src/index.ts
@@ -66,6 +66,7 @@ export * from './ShimmeredDetailsList';
 export * from './Slider';
 export * from './SpinButton';
 export * from './Spinner';
+export * from './Stack';
 export * from './Sticky';
 export * from './Styling';
 export * from './SwatchColorPicker';
diff --git a/scripts/tasks/codepen-examples-transform.js b/scripts/tasks/codepen-examples-transform.js
index 6727bc8268dbf..c5dab53c9b0a9 100644
--- a/scripts/tasks/codepen-examples-transform.js
+++ b/scripts/tasks/codepen-examples-transform.js
@@ -18,7 +18,7 @@ function parseRaw(code) {
   const parse = source =>
     babylon.parse(source, {
       sourceType: 'module',
-      plugins: ['jsx', 'typescript', 'classProperties']
+      plugins: ['jsx', 'typescript', 'classProperties', 'objectRestSpread']
     });
   return recast.parse(code, { parser: { parse } }).program.body;
 }
@@ -27,7 +27,7 @@ function transform(file, api) {
   const parse = source =>
     babylon.parse(source, {
       sourceType: 'module',
-      plugins: ['jsx', 'typescript', 'classProperties']
+      plugins: ['jsx', 'typescript', 'classProperties', 'objectRestSpread']
     });
 
   const j = api.jscodeshift;
@@ -85,10 +85,12 @@ function transform(file, api) {
 
   let exampleName;
   // remove exports and replace with variable or class declarations, whichever the original example used
-  source.find(j.ExportNamedDeclaration, node => node.declaration.type == 'VariableDeclaration').replaceWith(p => {
-    exampleName = p.node.declaration.declarations[0].id.name;
-    return p.node.declaration;
-  });
+  source
+    .find(j.ExportNamedDeclaration, node => node.declaration.type == 'VariableDeclaration')
+    .replaceWith(p => {
+      exampleName = p.node.declaration.declarations[0].id.name;
+      return p.node.declaration;
+    });
 
   source
     .find(