docs(layout): add api page and (very) basic example usage

Author: bpas247

www/src/components/SideNav.js

@@ -107,7 +107,7 @@ const gettingStarted = [
   'support',
 ];
 
-const layout = ['grid'];
+const layout = ['box', 'grid'];
 
 const components = [
   'alerts',

www/src/examples/Box/Basic.js

@@ -0,0 +1,5 @@
+<Box displayFlex flexDirectionRowReverse>
+  <Box>Flex item 1</Box>
+  <Box>Flex item 2</Box>
+  <Box>Flex item 3</Box>
+</Box>;

www/src/pages/layout/box.mdx

@@ -0,0 +1,31 @@
+import { graphql } from 'gatsby';
+
+import ComponentApi from '../../components/ComponentApi';
+import ReactPlayground from '../../components/ReactPlayground';
+import Basic from '../../examples/Box/Basic';
+
+# Box
+
+<p className="lead">
+  The Box component is a utility component specifically designed to be compatible
+  with all bootstrap utility classes, allowing you to handle everything you'll need
+  through React Bootstrap's API.
+</p>
+
+## Examples
+
+## Basic Examples
+
+<ReactPlayground codeText={Basic} />
+
+## API
+
+<ComponentApi metadata={props.data.Box} />
+
+export const query = graphql`
+  query BoxQuery {
+    Box: componentMetadata(displayName: { eq: "Box" }) {
+      ...ComponentApi_metadata
+    }
+  }
+`;