Update thesrc files for components

Author: mrmrs

src/components/banners/info.html

@@ -6,5 +6,5 @@
     <title>info icon</title>
     <path d="M16 0 A16 16 0 0 1 16 32 A16 16 0 0 1 16 0 M19 15 L13 15 L13 26 L19 26 z M16 6 A3 3 0 0 0 16 12 A3 3 0 0 0 16 6"></path>
   </svg>
-  <span class="ml3">Some info that you want to call attention to.</span>
+  <span class="lh-title ml3">Some info that you want to call attention to.</span>
 </div>

src/components/cards/basic-text-card.html

@@ -0,0 +1,13 @@
+{{{
+  "bodyClass" : "bg-white"
+}}}
+<article class="center mw5 mw6-ns hidden ba mv4">
+  <h1 class="f4 bg-near-black white mv0 pv2 ph3">Title of card</h1>
+  <div class="pa3 bt">
+    <p class="f6 f5-ns lh-copy measure mv0">
+      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>

src/components/forms/checkbox-list.html

@@ -0,0 +1,36 @@
+{{{
+  "bodyClass" : "bg-white"
+}}}
+<form class="pa4">
+  <fieldset id="favorite_movies" class="bn">
+    <legend class="fw7 mb2">Favorite Movies</legend>
+    <div class="flex items-center mb2">
+      <input class="mr2" type="checkbox" value="spacejam">
+      <label class="lh-copy">Space Jam</label>
+    </div>
+    <div class="flex items-center mb2">
+      <input class="mr2" type="checkbox" value="airbud">
+      <label class="lh-copy">Air Bud</label>
+    </div>
+    <div class="flex items-center mb2">
+      <input class="mr2" type="checkbox" value="hocuspocus">
+      <label class="lh-copy">Hocus Pocus</label>
+    </div>
+    <div class="flex items-center mb2">
+      <input class="mr2" type="checkbox" value="diehard">
+      <label class="lh-copy">Die Hard</label>
+    </div>
+    <div class="flex items-center mb2">
+      <input class="mr2" type="checkbox" value="primer">
+      <label class="lh-copy">Primer</label>
+    </div>
+    <div class="flex items-center mb2">
+      <input class="mr2" type="checkbox" value="proxy">
+      <label class="lh-copy">Hudsucker Proxy</label>
+    </div>
+    <div class="flex items-center mb2">
+      <input class="mr2" type="checkbox" value="homealone">
+      <label class="lh-copy">Home Alone</label>
+    </div>
+  </fieldset>
+</form>

src/components/text/title-subtitle-centered.html

@@ -0,0 +1,11 @@
+{{{
+  "bodyClass" : "bg-white" 
+}}}
+<header class="tc ph4">
+  <h1 class="f3 f2-m f1-l fw2 black-90 mv3">
+    This is the title
+  </h1>
+  <h2 class="f5 f4-m f3-l fw2 black-50 mt0 lh-copy">
+    This is the subtitle where additional information can go if you really need it.
+  </h2>
+</header>

src/templates/components-nav.html

@@ -95,6 +95,8 @@ <h2 class="f6 fw6 mb2 ttc black-70">cards</h2>
 
       <a class="f6 f5-ns fw4 dib mr3 mb2 black-70 link hover-blue dim" href="/components/cards/album-left/index.html">Album Left</a>
 
+      <a class="f6 f5-ns fw4 dib mr3 mb2 black-70 link hover-blue dim" href="/components/cards/basic-text-card/index.html">Basic Text Card</a>
+    
       <a class="f6 f5-ns fw4 dib mr3 mb2 black-70 link hover-blue dim" href="/components/cards/news-card/index.html">News Card</a>
 
       <a class="f6 f5-ns fw4 dib mr3 mb2 black-70 link hover-blue dim" href="/components/cards/product-card/index.html">Product Card</a>
@@ -168,6 +170,8 @@ <h2 class="f6 fw6 mb2 ttc black-70">footers</h2>
   <div>
     <h2 class="f6 fw6 mb2 ttc black-70">forms</h2>
 
+      <a class="f6 f5-ns fw4 dib mr3 mb2 black-70 link hover-blue dim" href="/components/forms/checkbox-list/index.html">Checkbox List</a>
+    
       <a class="f6 f5-ns fw4 dib mr3 mb2 black-70 link hover-blue dim" href="/components/forms/input-text-label/index.html">Input Text Label</a>
 
       <a class="f6 f5-ns fw4 dib mr3 mb2 black-70 link hover-blue dim" href="/components/forms/newsletter-subscription/index.html">Newsletter Subscription</a>
@@ -384,6 +388,8 @@ <h2 class="f6 fw6 mb2 ttc black-70">text</h2>
 
       <a class="f6 f5-ns fw4 dib mr3 mb2 black-70 link hover-blue dim" href="/components/text/small-paragraph/index.html">Small Paragraph</a>
 
+      <a class="f6 f5-ns fw4 dib mr3 mb2 black-70 link hover-blue dim" href="/components/text/title-subtitle-centered/index.html">Title Subtitle Centered</a>
+    
       <a class="f6 f5-ns fw4 dib mr3 mb2 black-70 link hover-blue dim" href="/components/text/wide-paragraph/index.html">Wide Paragraph</a>
 
   </div>

src/templates/components.html

@@ -63,7 +63,7 @@ <h1 class="f6 b ttu">Other Components</h1>
     <div>
       <h2 class="f6 fw6 mb2 ttc black-70"><%= category %></h2>
       <% componentsForNav[category].map(function(componentForNav) { %>
-        <a class="f6 f5-ns fw4 dib mr3 mb2 black-70 link hover-blue dim" href="<%= componentForNav.href %>"><%= componentForNav.name %></a>
+        <a class="f6 f5-ns fw4 dib mr3 mb2 black-70 link hover-blue" href="<%= componentForNav.href %>"><%= componentForNav.name %></a>
       <% }) %>
     </div>
   <% }) %>