[Tile] Add alpha page with examples

Author: laurkim

polaris.shopify.com/content/components/tile/index.md

@@ -0,0 +1,15 @@
+---
+title: Tile
+description: Create complex layouts based on [CSS Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/grid).
+category: Structure
+keywords:
+  - layout
+status:
+  value: Alpha
+  message: This component is in development. There could be breaking changes made to it in a non-major release of Polaris. Please use with caution.
+examples:
+  - fileName: tile-with-spacing.tsx
+    title: With spacing
+  - fileName: tile-with-columns.tsx
+    title: With columns
+---

polaris.shopify.com/pages/examples/tile-with-columns.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import {Tile, Text} from '@shopify/polaris';
+
+import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+
+const styles = {
+  background: 'var(--p-surface)',
+  border: 'var(--p-border-base)',
+  borderRadius: 'var(--p-border-radius-2)',
+  padding: 'var(--p-space-4)',
+};
+
+const children = Array.from(Array(8)).map((ele, index) => (
+  <div key={index} style={styles}>
+    <Text as="h2" variant="headingMd">
+      Sales
+    </Text>
+    <Text as="p" variant="bodyMd">
+      View a summary of your online store’s sales.
+    </Text>
+  </div>
+));
+
+function TileWithColumnsExample() {
+  return (
+    <div style={{width: '500px'}}>
+      <Tile columns="4" spacing="2">
+        {children}
+      </Tile>
+    </div>
+  );
+}
+
+export default withPolarisExample(TileWithColumnsExample);

polaris.shopify.com/pages/examples/tile-with-spacing.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import {Tile, Text} from '@shopify/polaris';
+
+import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+
+const styles = {
+  background: 'var(--p-surface)',
+  border: 'var(--p-border-base)',
+  borderRadius: 'var(--p-border-radius-2)',
+  padding: 'var(--p-space-4)',
+};
+
+const children = Array.from(Array(2)).map((ele, index) => (
+  <div key={index} style={styles}>
+    <Text as="h2" variant="headingMd">
+      Sales
+    </Text>
+    <Text as="p" variant="bodyMd">
+      View a summary of your online store’s sales.
+    </Text>
+  </div>
+));
+
+function TileWithSpacingExample() {
+  return (
+    <div style={{width: '500px'}}>
+      <Tile columns="1" spacing="5">
+        {children}
+      </Tile>
+    </div>
+  );
+}
+
+export default withPolarisExample(TileWithSpacingExample);