docs(card): Add new card example to match the example on the Sketch f…

…ile/Jira issue
telus · Oct 20, 2017 · a172ed6 · a172ed6
1 parent 817386c
commit a172ed6
Showing 1 changed file with 26 additions and 0 deletions.
diff --git a/src/components/Card/Card.md b/src/components/Card/Card.md
@@ -41,3 +41,29 @@ Card also supports a grey or lilac `variant`. These appear flat, while the defau
   </Card>
 </div>
 ```
+
+```jsx {"props": {"className": "docs__layout-horizontally"}}
+<div className="wrapper">
+  <Card variant="lavender">
+    <Heading level="h4">Holiday deal</Heading>
+    
+    <div style={{display: 'flex', 'align-content': 'flex-start', 'width': '280px'}}>
+      <div style={{'margin-top': '12px'}}>$</div>
+      <div style={{'font-size': '44px'}}>0</div>
+      <div style={{'margin-top': '12px', 'line-height': '1.4', 'font-size': '16px', 'margin-left': '16px'}}>on a 2-year <br/> SharePlus Ultra Plan</div>
+    </div>
+
+  </Card>
+  
+  <Card variant="lavender">
+    <Heading level="h4">Holiday deal</Heading>
+    
+    <div style={{display: 'flex', 'align-content': 'flex-start', 'width': '280px'}}>
+      <div style={{'margin-top': '12px'}}>$</div>
+      <div style={{'font-size': '44px'}}>400</div>
+      <div style={{'margin-top': '12px', 'line-height': '1.4', 'font-size': '16px', 'margin-left': '16px'}}>on a 2-year <br/> SharePlus Ultra Plan</div>
+    </div>
+
+  </Card>
+</div>
+```