h2's the amount. and added a readme for storybook

imports/components/cards/__stories__/cards.YearToDate.md

@@ -0,0 +1,57 @@
+## Year To Date
+
+### Usage
+
+```js
+import YearToDate from "../../components/cards/cards.YearToDate";
+
+<YearToDate
+  amount={amount}
+  graphData={graphData}
+  linkUrl={linkUrl}
+/>
+```
+
+### Properties
+
+* **amount** - the amount of the year to date contributions.
+* **graphData** - all of the data needed to show the graph. This includes:
+
+```js
+const graphData = {
+  data: [
+    {
+      month: "January",
+      amount: 300,
+      tick: "J",
+    },
+    {
+      month: "Febuary",
+      amount: 275,
+      tick: "F",
+    },
+    ...
+  ],
+  lineColor: "#6BAC43",
+  lineWidth: "3",
+  dotColor: "#6BAC43",
+  dotSize: "5",
+  axisStyles: {
+    axis: {
+      lineColor: "transparent",
+      lineWidth: "0",
+    },
+    tickLabels: {
+      fontSize: "20",
+      padding: "8",
+      fill: "#858585",
+    },
+  },
+};
+```
+
+* **linkUrl** - the url the link should go to.
+
+### Purpose
+
+This is currently designed to show the logged in user their year to date contributions.

imports/components/cards/cards.YearToDate.js

@@ -36,7 +36,7 @@ const YearToDate = ({
       <div className="floating text-left text-dark-primary">
         <h4 className="floating__item flush" style={{ paddingRight: "5px" }}>{getCurrencySymbol(amount)}</h4>
         {getNegative(amount) && <h4 className="floating__item flush" style={{ paddingRight: "3px" }}>{getNegative(amount)}</h4>}
-        <h1 className="floating__item flush">{getDollars(amount)}</h1>
+        <h2 className="floating__item flush">{getDollars(amount)}</h2>
         <h4 className="floating__item flush">.{getCents(amount)}</h4>
       </div>
       <p className="text-dark-primary italic text-left">Contributed so far this year</p>