docs(box): simplify component description

- provide fuller description for inline prop
- use more realistic example for tag prop
- use Box in Card examples

src/components/Box/Box.jsx

@@ -28,7 +28,7 @@ const getBetweenClasses = (betweenSize, inline) => {
 }
 
 /**
- * Box - apply spacing within or around components
+ * Apply spacing within or around components
  *
  * <span class="docs--badge__new">new!</span> <span class="docs--badge__version">v0.29.0</span>
  */
@@ -60,11 +60,11 @@ const Box = ({
 
 Box.propTypes = {
   /**
-   * If `true`, render a `<span>` instead of `<div>`.
+   * If `true`, apply inline flexbox styles to all direct children, arranging them as a row. This is used in conjunction with the `between` prop.
    */
   inline: PropTypes.bool,
   /**
-   * Specifies which HTML element to render Box as. Example: `"ul"`
+   * Specifies which HTML element to render Box as. Example: `"section"`.
    */
   tag: PropTypes.string,
   /**

src/components/Card/Card.md

@@ -2,15 +2,15 @@ Cards will stretch to fill their container. Wrap the card in another element to
 
 ```jsx
 <Card>
-  <Heading level="h2">Need a hand?</Heading>
-
-  <div style={{ margin: "1rem 0" }}>
+  <Box between={3}>
+    <Heading level="h2">Need a hand?</Heading>
+    
     <Paragraph>
       Ready to order? Have a question? We'll get back to you, with volume discounts available to larger accounts.
     </Paragraph>
-  </div>
-  
-  <ButtonLink href="#">Request sales callback</ButtonLink>
+    
+    <ButtonLink href="#">Request sales callback</ButtonLink>
+  </Box>
 </Card>
 ```
 
@@ -21,21 +21,21 @@ Card also supports a 'grey' or 'lavender' `variant`. These appear flat, while th
 ```jsx {"props": {"className": "docs__layout-horizontally"}}
 <div className="wrapper">
   <Card variant="lavender">
-    <Heading level="h4">Holiday deal</Heading>
-    
-    <div style={{ margin: "1rem 0" }}>
+    <Box between={3}>
+      <Heading level="h4">Holiday deal</Heading>
+      
       <Paragraph size="medium">Get a new smartphone for $0<br/>on a 2-year plan.</Paragraph>
-    </div>
+    </Box>
   </Card>
   
   <Card variant="grey">
-    <Heading level="h4">Find the right gift</Heading>
+    <Box between={3}>
+      <Heading level="h4">Find the right gift</Heading>
     
-    <div style={{ margin: "1rem 0" }}>
       <Paragraph>Find something they'll love from our<br/>selection of great devices.</Paragraph>
-    </div>
 
-    <ChevronLink variant="primary" href="">Explore latest devices</ChevronLink>
+      <ChevronLink variant="primary" href="">Explore latest devices</ChevronLink>
+    </Box>
   </Card>
 </div>
 ```