feat(card): adjust padding and lavender variant

- add responsive example to docs
- adjust docs css to support vertical spacing

BREAKING CHANGE:

Card component no longer supports custom className and style props.
Card component layout has changed due to a new padding.

docs/scss/_layout.scss

@@ -9,12 +9,31 @@
 .docs__layout-horizontally {
   .wrapper {
     display: flex;
-    flex-direction: row;
+    flex-direction: column;
+
+    @media (min-width: 768px) {
+      flex-direction: row;
+    }
   }
 }
 
 .docs__horizontal-spacing {
-  .wrapperExtend > * {
+  .wrapperExtend > *,
+  .wrapperExtendHS > * {
     margin-right: 1rem;
   }
 }
+
+.docs__vertical-spacing {
+  .wrapperExtend > *,
+  .wrapperExtendVS > * {
+    margin-bottom: 1rem;
+  }
+}
+
+.docs__max-width400 {
+  .wrapperExtend > *,
+  .wrapperExtendMW > * {
+    max-width: 400px;
+  }
+}

src/components/Card/Card.jsx

@@ -13,8 +13,8 @@ const Card = ({ variant, children, ...rest }) => (
   <Box
     {...safeRest(rest)}
     spacing="padding"
-    horizontal={4}
-    vertical={3}
+    horizontal={3}
+    vertical={4}
     dangerouslyAddClassName={styles[variant]}
   >
     {children}

src/components/Card/Card.md

@@ -1,4 +1,6 @@
-```
+### Basic usage
+
+```jsx
 <Card>
   <Heading level="h2">Specifications</Heading>
   <div style={{ padding: "1rem 0" }}>
@@ -12,16 +14,21 @@
 
 ### Coloured variants
 
-```jsx {"props": {"className": "docs__layout-horizontally docs__horizontal-spacing"}}
-<div className="wrapper">
+```jsx {"props": {"className": "docs__layout-horizontally docs__horizontal-spacing docs__max-width400 docs__vertical-spacing"}}
+<div className="wrapper wrapperExtendHS wrapperExtendVS wrapperExtendMW">
   <Card variant="lavender">
     <Heading level="h2">Need a hand?</Heading>
-    <Paragraph>Our newest, best handset.</Paragraph>
+    <div style={{ padding: "1rem 0" }}>
+      <Paragraph>Ready to order? Have a question? We'll get back to you, with volume discounts available to larger accounts.</Paragraph>
+    </div>
+    <ButtonLink>Request sales callback</ButtonLink>
   </Card>
     
   <Card variant="gray">
-    <Heading level="h2">Ourtech Phone 2</Heading>
-    <Paragraph>Our newest, best handset.</Paragraph>
+    <Heading level="h2">"My office is wherever my customers are. TELUS helps me stay connected whether I'm making a sale or doing payroll."</Heading>
+    <div style={{ padding: "1rem 0" }}>
+      <Paragraph>Dave Smith, Foreman</Paragraph>
+    </div>
   </Card>
 </div>
 ```

src/components/Card/Card.modules.scss

@@ -14,7 +14,7 @@
 .lavender {
   composes: card;
 
-  background-color: $color-lavender-blush;
+  background-color: $color-white-lilac;
 }
 
 .gray {

src/components/Card/__tests__/__snapshots__/Card.spec.jsx.snap

@@ -2,7 +2,7 @@
 
 exports[`<Card /> renders 1`] = `
 <div
-  class="verticalPadding-3 horizontalPadding-4 white"
+  class="verticalPadding-4 horizontalPadding-3 white"
 >
   Children
 </div>