Renaming the collections to cards.

Author: mrmrs

src/components/cards/album-left.html

@@ -0,0 +1,20 @@
+{{{
+  "bodyClass" : "bg-white pt5"
+}}}
+
+<a class="dib mw5 black link dim"
+   title="Frank Ocean's Blonde on Apple Music"
+   href="https://geo.itunes.apple.com/us/album/blonde/id1146195596?at=1l3vqFJ&mt=1&app=music">
+
+  <img class="db ba b--black-10"/
+       alt="Frank Ocean Blonde Album Cover"
+       src="https://s3-us-west-1.amazonaws.com/tachyonsio/img/Blonde-Frank_Ocean.jpeg"
+  >
+
+  <dl class="mt2 f6 lh-copy">
+    <dt class="clip">Title</dt>
+    <dd class="ml0 fw9">Blonde</dd>
+    <dt class="clip">Artist</dt>
+    <dd class="ml0 gray">Frank Ocean</dd>
+  </dl>
+</a>

src/components/cards/news-card.html

@@ -0,0 +1,13 @@
+{{{
+  "bodyClass" : "bg-near-white"
+}}}
+<article class="bg-white center mw5 ba b--black-10 mv4">
+  <div class="pv2 ph3">
+     <h1 class="f6 ttu tracked">Daily News Co.</h1>
+  </div>
+  <img src="/img/cat-720.jpg" class="w-100 db" alt="Cat yawning">
+  <div class="pa3">
+    <a href="#" class="link dim lh-title">15 things every cat owner should know</a>
+    <small class="gray db pv2">AMP - <time>6 hours ago</time></small>
+  </div>
+</article>

src/components/cards/product-card.html

@@ -0,0 +1,20 @@
+{{{
+  "bodyClass" : "bg-white"
+}}}
+<article class="br2 ba dark-gray b--black-10 mv4 w-100 w-50-m w-25-l mw5 center">
+  <img src="http://placekitten.com/g/600/300" class="db w-100 br2 br--top" alt="kitty">
+  <div class="pa2 ph3-ns pb3-ns">
+    <div class="dt w-100 mt1">
+      <div class="dtc">
+        <h1 class="f5 f4-ns mv0">Cat</h1>
+      </div>
+      <div class="dtc tr">
+        <h2 class="f5 mv0">$1,000</h2>
+      </div>
+    </div>
+    <p class="f6 lh-copy measure mt2 mid-gray">
+      If it fits, i sits burrow under covers. Destroy couch leave hair everywhere,
+      and touch water with paw then recoil in horror.
+    </p>
+  </div>
+</article>

src/components/cards/profile-card-title-subtitle.html

@@ -0,0 +1,10 @@
+{{{
+  "bodyClass" : "bg-near-white"
+}}}
+<article class="mw5 center bg-white br3 pa3 pa4-ns mv3 ba b--black-10">
+  <div class="tc">
+    <img src="/img/avatar_1.jpg" class="br-100 h4 w4 dib ba b--black-05 pa2" title="Kitty staring at you">
+    <h1 class="f3 mb2">Mimi W.</h1>
+    <h2 class="f5 fw4 gray mt0">CCO (Chief Cat Officer)</h2>
+  </div>
+</article>

src/components/cards/profile-card.html

@@ -0,0 +1,15 @@
+{{{
+  "bodyClass" : "bg-near-white"
+}}}
+<article class="mw5 center bg-white br3 pa3 pa4-ns mv3 ba b--black-10">
+  <div class="tc">
+    <img src="/img/avatar_1.jpg" class="br-100 h3 w3 dib" title="Kitty staring at you">
+    <h1 class="f4">Mimi Whitehouse</h1>
+    <hr class="mw3 bb bw1 b--black-10">
+  </div>
+  <p class="lh-copy measure center f6 black-70">
+    Quite affectionate and outgoing.
+    She loves to get chin scratches and will
+    roll around on the floor waiting for you give her more of them.
+  </p>
+</article>

src/components/cards/text-card.html

@@ -0,0 +1,13 @@
+{{{
+  "bodyClass" : "bg-white"
+}}}
+<article class="center mw5 mw6-ns br3 hidden ba b--black-10 mv4">
+  <h1 class="f4 bg-near-white br3 br--top black-60 mv0 pv2 ph3">Title of card</h1>
+  <div class="pa3 bt b--black-10">
+    <p class="f6 f5-ns lh-copy measure">
+      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
+      tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
+      vero eos et accusam et justo duo dolores et ea rebum.
+    </p>
+  </div>
+</article>