Added storybook stories

src/components/stories/Card.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import { Card } from '../UI';
+import { storiesOf } from '@kadira/storybook';
+
+const styles = {
+  fixedWidth: { width: 280 },
+  footer: {
+    color: '#aaa',
+    backgroundColor: '#555',
+    textAlign: 'center',
+    marginTop: 5,
+    padding: 10
+  }
+
+}
+
+storiesOf('Card', module)
+  .add('Default View', () => (
+    <div style={styles.fixedWidth}>
+      <Card>
+        <h1>A Card</h1>
+        <h2>Subtitle</h2>
+        <p>
+          Margins are applied to all elements inside a card. <br/>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. lobortis vel. Nulla porttitor enim at tellus eget
+          malesuada eleifend. Nunc tellus turpis, tincidunt sed felis facilisis, lacinia condimentum quam. Cras quis
+          tortor fermentum, aliquam tortor eu, consequat ligula. Nulla eget nulla act odio varius ullamcorper turpis.
+          In consequat egestas nulla condimentum faucibus. Donec scelerisque convallis est nec fringila. Suspendisse
+          non lorem non erat congue consequat.
+        </p>
+      </Card>
+    </div>
+  )).add('Full width content', () => (
+    <div style={styles.fixedWidth}>
+      <Card>
+        <img src="https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg" />
+        <h1>Card & cat</h1>
+        <p>Media Elements such as video, img (and iFrame for embeds) don't have margin</p>
+      </Card>
+    </div>
+  )).add('Footer', () => (
+    <div style={styles.fixedWidth}>
+      <Card>
+        <img src="http://www.top13.net/wp-content/uploads/2015/10/perfectly-timed-funny-cat-pictures-5.jpg" />
+        <h1>Now with footer.</h1>
+        <p>header and footer elements are also not subject to margin</p>
+        <footer style={styles.footer}>&copy; Thousand Cats Corp</footer>
+      </Card>
+    </div>
+  ))

src/components/stories/index.js

@@ -0,0 +1,2 @@
+import '../../index.css';
+import './Card';